Merge pull request #40 from RDjarbeng/nat

v2 beta
RDjarbeng · Apr 1, 2022 · e7de309 · e7de309
2 parents 3ef8ff8 + 8e05d2a
commit e7de309
Show file tree

Hide file tree

Showing 32 changed files with 3,122 additions and 556 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+*.html 
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "tabWidth": 4,
+  "useTabs": false
+}
diff --git a/app.js b/app.js
@@ -1,52 +1,115 @@
-// require('./clock')
-import Clock from './clock.js'
+  class Clock {
+    constructor(endDate) {
+        // expecting a date object
+        this.setEndDate(endDate)
+        this.countDown();
+    }
+
+    setEndDate(endDate) {
+        //set endDate to end of year
+        // todo: check endDate for validity as date
+        this.endDate = endDate ||new Date(`Jan 1, ${new Date().getFullYear() + 1} 00:00:00`)
+
+
+    }
+    countDown() {
+        // Set the date we're counting down to
+        let countDownDate = this.endDate.getTime();
+        let now = new Date().getTime();
+        var distance = countDownDate - now;
+        // account for case of the countdown being reached, reset
+        if (distance >= 0) {
+            // Time calculations for days, hours, minutes and seconds
+            this.calculateTimeValues(distance)
+        } else {
+            // clear date values
+            this.resetMethod();
+
+
+        }
+    }
+
+    resetMethod(){
+        this.clearCounter();
+    }
+
+    calculateTimeValues(distance){
+        this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
+            this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+            this.seconds = Math.floor((distance % (1000 * 60)) / 1000);
+    }
+    countDays() {
+        //account for leap year
+        this.dayLength = ((this.endDate.getFullYear() % 4 != 0) ? 365 : 366)
+        return this.dayLength - this.days
+    }
+
+    clearCounter(){
+        this.days=this.hours=this.minutes=this.seconds=0;
+    }
+}
+
+class NewYearClock extends Clock{
+    resetMethod(){
+        //reset to New Year's for default 
+        this.setEndDate()
+    }
+}
 
 // DOM nodes
-// let icon = document.getElementsByClassName("toggleMode")[0];
-let icon = document.getElementById('themeToggle');
 let dayCount = document.getElementById("countDay");
-// let controls = document.getElementsByClassName("button");
-let startButton = document.getElementById('startButton');
-let stopButton = document.getElementById('stopButton');
-let body = document.body;
-let dayNumber =document.getElementById('day-num');
-let hourNumber =document.getElementById("hour-num");
-let minNumber =document.getElementById("min-num");
-let secNumber =document.getElementById("sec-num");
+const animatedCountDuration = 800;
+
+const body = document.body;
+var dayNumber = document.getElementById('day-num');
+var hourNumber = document.getElementById("hour-num");
+var minNumber = document.getElementById("min-num");
+var secNumber = document.getElementById("sec-num");
+var dueDate = document.getElementById('dueDate');
+
 //to stop the clock
 let intervalID;
-let clockMovement = false;
+let customClockMovement = false;
+let dayClock = new NewYearClock();
+// Initialize default Clock class
+// var myclock = new NewYearClock();
+var myclock =  setMainClock();
+var myclock =  setMainClock();
+setInnerHtmlForNotNull(dueDate, `Due: ${myclock.endDate.getDate() + ' ' + myclock.endDate.toLocaleString('default', { month: 'long' }) + ', ' + myclock.endDate.getFullYear()}`)
+var customClock;
 
-// Initialize Clock class
-var myclock = new Clock();
+function setMainClock() {
+    let mainclock =  localStorage.getItem('mainClock');
+    if (mainclock !== null && mainclock != undefined) { //countdown set to main
+        mainclock = JSON.parse(mainclock)
+        myclock = new Clock(new Date(mainclock.date));
+        setMainText(mainclock.text)
+    }
+    return myclock || new NewYearClock();
 
-function startClock() {
-    intervalID = setInterval(startTime, 500);
 }
 
-function startTime() {
-    myclock.countDown();
-    let d = myclock.days
-    let h = myclock.hours
-    let m = myclock.minutes
-    let s = myclock.seconds
-    d= addZeros(d);
-    h = addZeros(h);
-    m = addZeros(m);
-    s = addZeros(s);
-    dayNumber.innerHTML = `${d}`;
-    hourNumber.innerHTML = `${h}`;
-    minNumber.innerHTML = `${m}`;
-    secNumber.innerHTML = `${s}`;
-    dayCount.innerHTML= myclock.countDays();
-    clockMovement = true;
+function setMainText(countdownText) {
+    const textDisplay = document.getElementById('countdown-text');
+    setInnerHtmlForNotNull(textDisplay, countdownText)
 }
 
-function restartTime() {
-    if (clockMovement) {
-        return;
-    } else {
-        startClock();
+ async function waitForAnimation(clock, domElements, duration) {
+    await stepIncreaseAndStart(clock || myclock, domElements, duration || animatedCountDuration)
+    startClock(clock || myclock, domElements);
+}
+
+function startClock(clock, { dayNumber, hourNumber, minNumber, secNumber }) {
+    intervalID = setInterval(() => {  startTime(clock, { dayNumber, hourNumber, minNumber, secNumber });  }, 500);
+}
+
+function startTime(clock, { dayNumber, hourNumber, minNumber, secNumber }) {
+    // console.log(clock);
+    updateDisplay(clock, dayNumber, hourNumber, minNumber, secNumber);
+    setInnerHtmlForNotNull(dayCount, dayClock.countDays());
+    if (customClockMovement) {
+        updateDisplay(customClock, customDayNumber, customHourNumber, customMinNumber, customSecNumber);
     }
 }
 // add zero in front of numbers < 10
@@ -57,70 +120,119 @@ function addZeros(time) {
     return time;
 }
 
-function stopClock() {
-    clearTimeout(intervalID);
-    clockMovement = false;
+function updateDisplay(counter, dayDisplay, hourDisplay, minDisplay, secDisplay) {
+    counter.countDown();
+    let d = counter.days
+    let h = counter.hours
+    let m = counter.minutes
+    let s = counter.seconds
+    d = addZeros(d);
+    h = addZeros(h);
+    m = addZeros(m);
+    s = addZeros(s);
+    setInnerHtmlForNotNull(dayDisplay, `${d}`);
+    setInnerHtmlForNotNull(hourDisplay, `${h}`);
+    setInnerHtmlForNotNull(minDisplay, `${m}`);
+    setInnerHtmlForNotNull(secDisplay, `${s}`);
 }
 
-//light mode if after 6am and after 18:00 evening
-function autoLight() {
-    let h = new Date().getHours();
-    //between 6 am and 6pm
-    if (h > 5 && h < 18) activateLightMode();
+/**
+ * Listens for a user input for date element
+ */
+function listenForDate() {
+    const input = this.value;
+    // console.log(input, 'run');
+    if (input != '') {
+        customClock = new Clock(new Date(input));
+        displayClockRow();
+        // do the fast countdown
+        // set speed faster when day of the year is greater
+        // todo: change to animateValue
+        stepIncreaseAndStart(customClock, { customDayNumber, customHourNumber, customMinNumber, customSecNumber }, (365 - customClock.days < 100) ? 365 - customClock.days : 70);
+    }
 }
 
-function activateLightMode() {
-    icon.innerHTML = `<i class="fas fa-moon"></i>`;
-    body.classList.toggle("light");
+function displayClockRow() {
+    let customRow = document.getElementById("customDisplay");
+    // show row
+    customRow.style.display = 'block';
+}
+/* //restart the clock
+function restartTime() {
+    if (customClockMovement) {
+        return;
+    } else {
+        startClock();
+    }
+}
+*/
+//stop the clock
+ function stopClock() {
+    clearTimeout(intervalID);
+    customClockMovement = false;
 }
 
-function activateDarkMode() {
-    icon.innerHTML = `<i class="fas fa-sun"></i>`;
-    body.classList.toggle("light");
+//for the animated Countdown
+function animateValue(domElement, start, end, duration) {
+    let startTimestamp = null;
+    const step = (timestamp) => {
+        if (!startTimestamp) startTimestamp = timestamp;
+        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+        setInnerHtmlForNotNull(domElement, addZeros(Math.floor(progress * (end - start) + start)))
+        if (progress < 1) {
+            window.requestAnimationFrame(step);
+            // animationComplete = false;
+        }
+    };
+    window.requestAnimationFrame(step);
 }
 
-function setMode() {
-    if (!body.classList.contains("light")) {
-        activateLightMode();
-    } else {
-        activateDarkMode();
-    }
+async function stepIncreaseAndStart(clockElement, domElements, speed = 50, start_num = 0) {
+    animateValue(domElements.dayNumber, start_num, clockElement.days, speed);
+    animateValue(domElements.hourNumber, start_num, clockElement.hours, speed);
+    animateValue(domElements.minNumber, start_num, clockElement.minutes, speed);
+    animateValue(domElements.secNumber, start_num, clockElement.seconds, speed);
+
 }
-function notifyMode() {
-    let notifyText;
-    if (body.classList.contains("light")) {
-        notifyText = "Light mode set";
-    } else {
-        notifyText = "Dark mode set";
-    }
 
-    if (document.getElementsByClassName("mode-info")[0]) {
-        document.getElementsByClassName("mode-info")[0].remove();
-        body.insertAdjacentHTML(
-            "afterbegin",
-            `<span class="mode-info">${notifyText}</span>`
-        );
-    } else {
-        body.insertAdjacentHTML(
-            "afterbegin",
-            `<span class="mode-info">${notifyText}</span>`
-        );
+function addWhatappEventHandler() {
+    let whatsappIcon = document.getElementById('sendWhatsappButton');
+    if (whatsappIcon) {
+        whatsappIcon.addEventListener('click', exportToWhatsapp);
     }
+
+}
+
+function exportToWhatsapp() {
+    let dayNum = dayCount.innerText;
+    window.open(`whatsapp://send?text= Day ${dayNum || 'rcountdown'}/365`);
+}
+
+function setInnerHtmlForNotNull(element, value){
+    if(element)//check for null
+        element.innerHTML = value;
+}
+try {
+    //show day value before animation runs
+setInnerHtmlForNotNull(dayCount, dayClock.countDays());
+
+// startTime();
+waitForAnimation(myclock, { dayNumber, hourNumber, minNumber, secNumber }, animatedCountDuration);
+addWhatappEventHandler();
+// as;
+} catch (error) {
+    errorHandler("Error in clock");
+    console.log(error);
 }
-startClock();
-autoLight();
-// init events
-icon.addEventListener("click", setMode);
-icon.addEventListener("click", notifyMode);
-//Prefer this 
-// startButton.addEventListener("click", restartTime);
-// endButton.addEventListener("click", stopClock);
 
 // service worker
+
 if('serviceWorker' in navigator){
     window.addEventListener('load', () => {
     navigator.serviceWorker.register('/sw.js')
-    .then( (reg)=> console.log('service worker registered', reg))
+    .then( (reg)=>{ 
+        console.log('service worker registered', reg)
+    })
         .catch((err)=> console.log('Service worker not registered', err));
   });