Fix Update On Elapsed on listpage

html/countdown-list.html

@@ -74,7 +74,8 @@
     <script src="/js/loadCustomUI.js" type="module"></script>
     <script src="/js/formupdate.js" type="module" async></script>
     <script src="/js/displayCountdowns.js" type="module"></script>
-    <script src="/js/serviceWorkerUpdate.js" type="module"></script>
+    <!-- <script src="/js/listpage/addListEventListeners.js" type="module"></script> -->
+    <script  src="/js/serviceWorkerUpdate.js" type= "module"></script>
 
 </body>
 

js/appfunctions.js

@@ -6,9 +6,10 @@ import { setInnerHtmlForNotNull, addZeros } from "./functions.js";
  * @param {{dayNumber: HTMLElement, hourNumber: HTMLElement, minNumber: HTMLElement, secNumber: HTMLElement}}domElements  should contain elements for day, hour, minutes, second
  * @param {Number} [duration=800] specifies how long the animation lasts in milliseconds
  */
-export async function waitForAnimationUpdate(clock, domElements, duration, interval) {
-    await stepIncreaseAndStart(clock, domElements, duration);
-    return startClockAndReset(clock, domElements, interval);
+ export async function waitForAnimationUpdate(clock, domElements, duration, interval ) {
+    await stepIncreaseAndStart(clock , domElements, duration );
+    // todo:fix this undefined function,delete
+    // return startClockAndReset(clock , domElements, interval);
 }
 
 /**

js/clock.js

@@ -28,15 +28,14 @@ export class Clock {
         return this.endDate.getTime() - new Date().getTime();
     }
     /**
-     * Calls the function to populate/refresh the time values in the clock
+     * Calls the function to populate/refresh the time values in the clock, used for reset
      */
     countDown = () => {
-        var distance = this.getDistance()
         // account for case of the countdown being reached, reset
         if (this.getDistance() >= 0) {
             // console.log('Running the count');
             // Time calculations for days, hours, minutes and seconds
-            this.calculateTimeValues(this.getDistance())
+            this.calculateTimeValues()
         } else {
             // clear date values
             this.resetMethod();
@@ -49,7 +48,8 @@ export class Clock {
         this.clearCounter();
     }
 
-    calculateTimeValues(distance) {
+    calculateTimeValues() {
+        let distance = this.getDistance();
         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));
@@ -98,7 +98,7 @@ export class Anniversary extends Clock {
         // console.log('calling reset', this.endDate.getFullYear()<= new Date().getFullYear(), 'first cond', this.getDistance<0);
         while (this.endDate.getFullYear() <= new Date().getFullYear() && this.getDistance() < 0) {
             // this.endDate.
-            console.log(this.endDate, 'End date triggering');
+            console.log(this.endDate, 'Repeat End date triggering');
             this.endDate.setFullYear(this.endDate.getFullYear() + 1)
             // console.log('Anniversary done', this);
         }

js/displayCountdowns.js

@@ -1,3 +1,20 @@
-import { loadListPage } from "./listFunctions.js";
+import { popAndAddFormOnList } from "./formupdate.js";
+import { addEventHandlers } from "./listpage/listEventListener.js";
+import { loadListPage } from "./listpage/listFunctions.js";
+import { addSortUIAndListeners } from "./listpage/list_sort/sort.js";
+import { addSortUI } from "./listpage/list_ui/addSortUI.js";
+// import { addEventHandlers } from "./listEventListener";
+
 // begin displaycountdown.js
-loadListPage();
+loadListPage();
+addEventHandlers();
+addSortUIAndListeners()
+const handleSubmissionAndLoadListpage=()=>{
+    popAndAddFormOnList();
+    loadListPage();
+// addEventHandlers();
+addSortUI();
+}
+//get button for create countdown
+const createButton = document.getElementsByClassName("new-item")[0];
+createButton.addEventListener("click", handleSubmissionAndLoadListpage);

js/form.js

@@ -1,22 +1,11 @@
 import { popForm, closeFormPopUp, FORM_DOM_IDS, saveCountdownForm } from './formfunctions.js'
-import { addClickListenersWithoutDuplicates } from './functions.js';
+import { handleHomePageFormSubmission } from './formupdate.js';
 
 const popAndAddFormSubmission = () => {
     popForm()
     handleHomePageFormSubmission();
 }
 
-function handleHomePageFormSubmission() {
-    const submitbutton = document.getElementById(FORM_DOM_IDS.form_submitButton);
-    addClickListenersWithoutDuplicates(submitbutton, (e) => {
-        e.preventDefault();
-        submitbutton.disabled = true;
-        saveCountdownForm();
-        // testing
-        window.location.href = "/html/countdown-list.html";
-        closeFormPopUp();
-    })
-}
 
 
 // todo: remove dynamic seting of css

js/formfunctions.js

@@ -1,6 +1,7 @@
 import { errorHandler } from './error.js';
 import { addZeros } from './functions.js'
-import { fetchArrayOfCountdowns } from './listFunctions.js';
+import { getArrayOfCountdownStatus } from './listpage/listFunctions.js';
+import { getLocalIsoStringFromDateInput } from './timefunctions.js';
 
 export const FORM_DOM_IDS = {
     form_TextInput: 'countdownText',
@@ -119,7 +120,7 @@ export function setDateAttributes() {
 }
 
 export function saveNewCountdownToLocalStorage(countItem) {
-    let countdown = fetchArrayOfCountdowns();
+    let countdown = getArrayOfCountdownStatus();
     if (countdown !== null) { //countdowns already exist
         countdown.push(countItem);
         // console.log(countdown);
@@ -169,15 +170,25 @@ export function getCdFromFormInputs() {
     let userDate = dateInput.value;
     // get text field values, with auto values
     let userText = getUserText(userTextField);
-
-    userDate = new Date(userDate).toISOString();
+    console.log('Entered',userDate);
+    console.log('To locale',new Date(userDate).toLocaleString());
+    // userDate = new Date(userDate).toISOString();
+    userDate = getLocalIsoStringFromDateInput(userDate);
+    console.log('Stored',userDate);
     let countItem = { text: userText, date: userDate, dateModified: new Date() };
     if (repeatCheck) {
         countItem.repeat = repeatCheck.checked;
     }
     return countItem;
 }
 
+export function updateCountdownItemFromForm(){
+    let countItem =getCdFromFormInputs();
+    //todo: use other ID apart from toISOString
+        countItem.dateModified= new Date().toISOString();
+        return countItem;
+}
+
 export  const checkRepeat=(repeatCheckBox)=> repeatCheckBox.checked
 
 export function saveCountdownForm() {

js/formupdate.js

@@ -1,7 +1,9 @@
-import { popForm, closeFormPopUp, saveCountdownForm, FORM_DOM_IDS } from './formfunctions.js'
 import { errorHandler } from './error.js';
-import { loadListPage, updateArrayOfCountdownState } from './listFunctions.js';
-const popAndAddFormOnList = () => {
+import { closeFormPopUp, FORM_DOM_IDS, popForm, saveCountdownForm, updateCountdownItemFromForm } from './formfunctions.js';
+import { updateArrayOfCountdownState, updateLocalItem } from './listpage/listFunctions.js';
+import { addClickListenersWithoutDuplicates } from './functions.js';
+import { removeClockAndText } from './listpage/list_ui/updateListpageClockAndText.js';
+export const popAndAddFormOnList = () => {
     popForm()
     handleListpageFormSubmission();
 }
@@ -14,7 +16,7 @@ function handleListpageFormSubmission() {
         submitbutton.disabled = true;
         saveCountdownForm();        
         updateArrayOfCountdownState();
-        loadListPage();
+        // loadListPage();
         closeFormPopUp();
     })
 }else{
@@ -23,7 +25,33 @@ function handleListpageFormSubmission() {
 }
 }
 
+export function handleFormUpdate() {
+    // todo: update list with custom fired events
+    const submitbutton = document.getElementById(FORM_DOM_IDS.form_submitButton);
+    submitbutton.addEventListener('click', (e) => {
+        e.preventDefault();
+        submitbutton.disabled = true;
+
+        const modifiedTimeAsID = document.getElementById(FORM_DOM_IDS.form_modifiedTime).value;
+        updateLocalItem(updateCountdownItemFromForm(), modifiedTimeAsID);
+        updateArrayOfCountdownState();
+        closeFormPopUp();
+        removeClockAndText();
+
+    })
+}
 
+export function handleHomePageFormSubmission() {
+    const submitbutton = document.getElementById(FORM_DOM_IDS.form_submitButton);
+    addClickListenersWithoutDuplicates(submitbutton, (e) => {
+        e.preventDefault();
+        submitbutton.disabled = true;
+        saveCountdownForm();
+        // testing
+        window.location.href = "/html/countdown-list.html";
+        closeFormPopUp();
+    })
+}
 
 
 // todo: remove dynamic seting of css, @nyakotey
@@ -35,5 +63,3 @@ function handleListpageFormSubmission() {
 // }
 
 // DOM Elements
-const createButton = document.getElementsByClassName("new-item")[0];
-createButton.addEventListener("click", popAndAddFormOnList);