Add custom sort

css/countdown-list.css

@@ -385,7 +385,39 @@ hr{color:rgba(255, 255, 255, 0.2); width: 85%;}
   right: 50%;
   transform: translateX(50%);
 }
-
+.list-settings{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  /* height: 2rem; */
+}
+.sort{
+  width: 80vmin;
+  display: grid;
+  justify-content: flex-end;
+  align-items: flex-end;
+  position: relative;
+  gap: .3rem;
+  grid-template-areas: "opt sort";
+}
+.sort-options{
+  width: 8rem;
+  display: none;
+  position: absolute;
+  right: 5.2rem;
+  bottom: -190%;
+  z-index: 2;
+  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
+}
+.sort-opt{
+  padding: .2rem .3rem;
+  background: var(--bg-timer);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+.sort-opt:hover{
+  background:var(--bg-cdListHover);
+}
 .list-container{
   width: 100vw;
   height: 100vh;
@@ -445,7 +477,7 @@ padding: 0 0 0 1rem;
 }
 
 .menu{
-  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2); ;
+  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
   position: absolute;
   right: 0;
   top: 60%;

html/countdown-list.html

@@ -107,10 +107,8 @@
             <section class="list-container">
                 <div class="countdown-list" id="countdown-list">
                     Loading ...
-                </div>
-
+                </div> 
             </section>
-
         </div>
     </main>
     <div class="new-item"><i class="fas fa-plus fa-xl"></i></div>

js/displayCountdowns.js

@@ -40,17 +40,41 @@ async function displayCountdowns() {
         let listItems = populateList(arrayOfCountdowns);
         setInnerHtmlForNotNull(countdownList, listItems)
         setInnerHtmlForNotNull(countdownTextDisplay, '')
-        // updateClockAndText(arrayOfCountdowns[arrayOfCountdowns.length-1].date, arrayOfCountdowns[arrayOfCountdowns.length-1].text)
 
+        const  sortUI = async ()=>  {   
+            if (!document.querySelector(".list-settings")) {
+                const listContainer = document.querySelector(".list-container");
+                let sortHtml = `
+                <section class="list-settings">
+                    <div class="sort">
+                        <div class="sort-options">
+                            <div class="sort-opt modified">Date modified</div>
+                            <div class="sort-opt due">Due date</div>
+                        </div>
+                        <div class="sort-title"><i class="fas fas fa-sort-amount-up"></i> Sort By </div>
+                    </div>
+                </section>`;
+                listContainer.insertAdjacentHTML("afterbegin", sortHtml);
+            }
+            // addSortEventListeners();
+        }
+
+
+        sortUI();
 
     } else {
         setInnerHtmlForNotNull(countdownList, 'Found no countdowns to display');
         setInnerHtmlForNotNull(countdownTextDisplay, '')
     }
 }
-
+/**
+ * 
+ * @param {Array} arrayOfCountdowns 
+ * @returns {String} listItems
+ */
 function populateList(arrayOfCountdowns) {
     let listItems = '';
+    sortArrayOnSelection();
     arrayOfCountdowns.forEach((countdown, index) => {
         let date = new Date(countdown.date);
         listItems += `
@@ -77,6 +101,15 @@ function populateList(arrayOfCountdowns) {
     return listItems;
 }
 
+function sortArrayOnSelection(){
+    let sortType = localStorage.getItem('sort');
+    if(sortType =="due"){
+        // sort by due date if present
+        arrayOfCountdowns.sort((countItem1, countItem2)=> new Date(countItem2.date).getTime()-new Date(countItem1.date).getTime())
+    }else{
+        arrayOfCountdowns.sort((countItem1, countItem2)=> new Date(countItem1.dateModified).getTime()-new Date(countItem2.dateModified).getTime())
+    }
+}
 function updateClockAndText(date, text, animation = true) {
     let clock = new Clock(new Date(date));
     setInnerHtmlForNotNull(countdownTextDisplay, text);
@@ -117,16 +150,17 @@ function switchContextIconDown(element){
 }
 function hideContextMenus(event) {
     //if function is not triggered by event listener, event is empty
-    if ((!(event != null))||!(event.target.className == 'countdown-list-options' || event.target.tagName == 'I')) {
+    if ((!(event != null))||!(event.target.className == 'countdown-list-options' || event.target.tagName == 'I'|| (event.target.className.search('sort-title') >-1))) {
         document.querySelectorAll('.menu').forEach(contextMenu => contextMenu.style.display = "none");
         document.querySelectorAll('.fa-chevron-circle-up').forEach(element => switchContextIconDown(element));
+        closeSortMenu();
+    // }
     } 
+
 
 }
 function addListEventListener() {
     document.querySelector('.countdown-list').addEventListener('click', event => {
-        //hide all context menus
-
         const targetElement = event.target;
 
         // if event is fired on text or date
@@ -186,6 +220,42 @@ function addListEventListener() {
     })
 }
 
+const closeSortMenu=()=>{
+    const sortOpts = document.querySelector(".sort-options");
+    if (sortOpts.style.display == "block") {
+        sortOpts.style.display = "none";
+    }
+}
+
+const addSortEventListeners = ()=>{
+    const sortOpts = document.querySelector(".sort-options");
+    const sortTitle = document.querySelector(".sort-title");
+        sortTitle.addEventListener("click", ()=> {
+            if (sortOpts.style.display == "block") {
+                sortOpts.style.display = "none";
+            }
+            else{
+                sortOpts.style.display = "block";
+            }
+        });
+        // sort options menu events
+        sortOpts.addEventListener("click", (event)=> {
+            if(event.target.className.search('due') > -1){
+                localStorage.setItem('sort', 'due') 
+                // console.log('due clicked', localStorage.getItem('sort'));
+                // displayCountdowns();
+
+            }else if(event.target.className.search('modified') > -1){
+                localStorage.setItem('sort', 'modified')
+                // console.log('modified clicked', localStorage.getItem('sort'));
+                // displayCountdowns();
+            }
+            // close sortOptions menu on selection and refresh list
+            closeSortMenu();
+            displayCountdowns();
+        })
+}
+
 function handleUpdate() {
     // todo: update list with custom fired events
     const countdownForm = document.getElementById('customUpDateForm');
@@ -227,7 +297,7 @@ function handleUpdate() {
                 closeFormPopUp();
                 removeClockAndText();
             }else{
-                console.log("Unable to update Item in displayCountdown, HandleUpdate");
+                console.log("Unable to find Item to update in displayCountdown array of Countdowns, HandleUpdate", pos);
                 errorHandler('Unable to update Item');
             }
 
@@ -279,15 +349,21 @@ function setCountDownList(arrayOfJSONCountdowns) {
 
 function addListEventHandlers() {
     addListEventListener();
+    addSortEventListeners();
+
     // add context menu event listener
     document.querySelector('.container').addEventListener("click", hideContextMenus);
 }
+
+async function displayAndAddListeners(){
+    await displayCountdowns().catch((err)=>{
+        console.log(err);
+        errorHandler('Unable to fetch your countdowns')
+    });
+    addListEventHandlers();
+}
 try{
-displayCountdowns().catch((err)=>{
-    console.log(err);
-    errorHandler('Unable to fetch your countdowns')
-});
-addListEventHandlers();
+    displayAndAddListeners();
 }catch (err) {
     console.log(err, 'err in display countdown initialisation');
     errorHandler("Unable to fetch your countdowns");