[WIP] filter btns session storage

frontend/main.ts

@@ -8,41 +8,105 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 function initToggle() {
-  const toggle = <HTMLInputElement>document.querySelector('#filterdays-js');
+  // get filter btns & set object sessionStorage
+  const btns = <NodeListOf<HTMLButtonElement>>document.querySelectorAll('.filter-trips-js');
+  let filterObject = new Map();
 
-  if(toggle) {
-    toggle.addEventListener('click', () => {
-      toggle.ariaPressed = (toggle.ariaPressed === 'true') ? 'false' : 'true';
-      toggle.setAttribute('aria-pressed', toggle.ariaPressed); 
-
-      const daysNoTrips = document.querySelectorAll('div[data-trips="0"]');
-      Array.prototype.forEach.call(daysNoTrips, (day: HTMLElement) => {
-        day.classList.toggle('hidden');
+  if(btns) {
+    Array.prototype.forEach.call(btns, (btn: HTMLButtonElement) => {
+      filterObject.set(btn.dataset.action, btn.ariaPressed);
+     
+      btn.addEventListener('click', () => {
+        let filter = sessionStorage.getItem('tripsFilter');
+        if(filter) {
+          let filterMap = new Map(JSON.parse(filter));
+          for (let entry of filterMap.entries()) {
+            if(entry[0] === btn.dataset.action) {
+              filterMap.set(entry[0],'true');
+            } else {
+              filterMap.set(entry[0],'false');
+            }
+          }
+          sessionStorage.setItem('tripsFilter', JSON.stringify( Array.from(filterMap.entries())));
+        }
+        resetFilteredElements();
+        console.log(btn.ariaPressed);
+        if(btn.ariaPressed === 'false'){
+          Array.prototype.forEach.call(btns, (b: HTMLButtonElement) => {
+            b.setAttribute('aria-pressed', 'false'); 
+          });
+          triggerFilterAction(btn.dataset.action);
+        }
       });
-    });
+    }); 
   }
 
-  const coxToggle = <HTMLInputElement>document.querySelector('#filtertrips-js');
+  let filter = sessionStorage.getItem('tripsFilter');
+  if(filter) {
+    let filterMap = new Map(JSON.parse(filter));
+    for (let entry of filterMap.entries()) {
+      if(entry[1] === 'true') {
+        triggerFilterAction(entry[0]);
+      }
+    }
+  } else {
+    sessionStorage.setItem('tripsFilter', JSON.stringify( Array.from(filterObject.entries())));
+  }
+}
 
-  if(coxToggle) {
-    coxToggle.addEventListener('click', () => {
-      coxToggle.ariaPressed = (coxToggle.ariaPressed === 'true') ? 'false' : 'true';
-      coxToggle.setAttribute('aria-pressed', coxToggle.ariaPressed); 
-
-      const noCoxNeeded = document.querySelectorAll('div[data-coxneeded="false"]');
-      Array.prototype.forEach.call(noCoxNeeded, (notNeeded: HTMLElement) => {
-        notNeeded.classList.toggle('hidden');
-      });
+function resetFilteredElements() {
+  const hiddenElements = document.querySelectorAll('.reset-js.hidden');
+  if(hiddenElements) {
+    Array.prototype.forEach.call(hiddenElements, (hiddenElement: HTMLButtonElement) => {
+      hiddenElement.classList.remove('hidden');
     });
   }
+}
 
-  const monthToggle = <HTMLInputElement>document.querySelector('#filtermonth-js');
+function triggerFilterAction(activeFilter: any) {
+  const activeBtn = document.querySelector('button[data-action="' + activeFilter + '"]');
+  if(activeBtn) {
+    activeBtn.setAttribute('aria-pressed', 'true'); 
+
+    filterAction(activeFilter);
+  } 
+}
+
+function filterAction(activeFilter: string) {
+  switch(activeFilter) {
+    case 'filter-days': {
+      filterDays();
+      break;
+    }
+    case 'filter-coxs': {
+      filterCoxs();
+      break;
+    }
+    case 'filter-months': {
+      filterMonths(activeFilter)
+      break;
+    }
+  }
+}
+
+function filterDays() {
+  const daysNoTrips = document.querySelectorAll('div[data-trips="0"]');
+  Array.prototype.forEach.call(daysNoTrips, (day: HTMLElement) => {
+    day.classList.toggle('hidden');
+  });
+}
+
+function filterCoxs() {
+  const noCoxNeeded = document.querySelectorAll('div[data-coxneeded="false"]');
+  Array.prototype.forEach.call(noCoxNeeded, (notNeeded: HTMLElement) => {
+    notNeeded.classList.toggle('hidden');
+  });
+}
+
+function filterMonths(action: string) {
   const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
-
+  const monthToggle = <HTMLButtonElement>document.querySelector('button[data-action="' + action + '"]');
   if(monthToggle) {
-    monthToggle.addEventListener('click', () => {
-      monthToggle.ariaPressed = (monthToggle.ariaPressed === 'true') ? 'false' : 'true';
-      monthToggle.setAttribute('aria-pressed', monthToggle.ariaPressed); 
       const currentMonth = monthToggle.dataset.month;
       
       if(currentMonth) {
@@ -58,9 +122,8 @@ function initToggle() {
           });
         });
       }
-    });
+    }
   }
-}
 
 function initSearch() {
   const input = <HTMLInputElement>document.querySelector('#filter-js');