[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) {
+  if(btns) {
-    toggle.addEventListener('click', () => {
+    Array.prototype.forEach.call(btns, (btn: HTMLButtonElement) => {
-      toggle.ariaPressed = (toggle.ariaPressed === 'true') ? 'false' : 'true';
+      filterObject.set(btn.dataset.action, btn.ariaPressed);
-      toggle.setAttribute('aria-pressed', toggle.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);
+        }
+      });
+    }); 
+  }
+
+  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())));
+  }
+}
+
+function resetFilteredElements() {
+  const hiddenElements = document.querySelectorAll('.reset-js.hidden');
+  if(hiddenElements) {
+    Array.prototype.forEach.call(hiddenElements, (hiddenElement: HTMLButtonElement) => {
+      hiddenElement.classList.remove('hidden');
+    });
+  }
+}
+
+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');
   });
-    });
 }
 
-  const coxToggle = <HTMLInputElement>document.querySelector('#filtertrips-js');
+function filterCoxs() {
-
-  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');
   });
-    });
 }
 
-  const monthToggle = <HTMLInputElement>document.querySelector('#filtermonth-js');
+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,7 +122,6 @@ function initToggle() {
           });
         });
       }
-    });
     }
   }
 

templates/index.html.tera

@@ -12,15 +12,15 @@
 
   {% if loggedin_user.is_cox %}
     <div class="sm:col-span-2 lg:col-span-3 grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
-      <button type="button" title="Toggle View" class="group btn btn-primary" id="filterdays-js" aria-pressed="false">
+      <button type="button" title="Toggle View" class="group btn btn-primary filter-trips-js" data-action="filter-days" id="filterdays-js" aria-pressed="false">
         {% include "includes/funnel-icon" %}
         Tage mit Ausfahrten
       </button>
-      <button type="button" title="Toggle View" class="group btn btn-primary" id="filtertrips-js" aria-pressed="false">
+      <button type="button" title="Toggle View" class="group btn btn-primary filter-trips-js" data-action="filter-coxs" id="filtertrips-js" aria-pressed="false">
         {% include "includes/funnel-icon" %}
         Steuerleute gesucht
       </button>
-      <button type="button" title="Toggle View" class="group btn btn-primary" id="filtermonth-js" aria-pressed="false" data-month="{{ now() | date(format='%m') }}">
+      <button type="button" title="Toggle View" class="group btn btn-primary filter-trips-js" data-action="filter-months" id="filtermonth-js" aria-pressed="false" data-month="{{ now() | date(format='%m') }}">
         {% include "includes/funnel-icon" %}
         Aktuellen Monat anzeigen
       </button>
@@ -37,7 +37,7 @@
       {% endif %}
    {% endfor %}
   {% endif %}
-  <div class="bg-white p-3 rounded-md flex justify-between flex-col shadow" style="min-height: 10rem;" data-trips="{{ amount_trips }}" data-month="{{ day.day| date(format='%m') }}" data-coxneeded="{{ day_cox_needed }}">
+  <div class="bg-white p-3 rounded-md flex justify-between flex-col shadow reset-js" style="min-height: 10rem;" data-trips="{{ amount_trips }}" data-month="{{ day.day| date(format='%m') }}" data-coxneeded="{{ day_cox_needed }}">
     <div>
       <h2 class="font-bold uppercase tracking-wide text-center text-primary-950 text-lg">{{ day.day| date(format="%d.%m.%Y") }}
         <small class="inline-block ml-1 text-xs text-gray-400">{{ day.day | date(format="%A", locale="de_AT") }}</small>  
@@ -146,7 +146,7 @@
       {% if day.trips | length > 0 %}
       <div class="grid grid-cols-1 gap-3 divide-y mb-3">
         {% for trip in day.trips %}
-        <div class="pt-2" data-coxneeded="false">
+        <div class="pt-2 reset-js" data-coxneeded="false">
           <div class="flex justify-between items-center">
             <div>
               <strong class="text-primary-900">{{ trip.planned_starting_time }} Uhr</strong> <small
@@ -181,17 +181,17 @@
         {# --- START Sidebar Content --- #}
         <div class="hidden">
             <div id="trip{{ trip.trip_details_id }}">
-            {% if trip.max_people > 0 %}
               {% set amount_cur_rower = trip.rower | length %}
+              {% if amount_cur_rower > 0 %}
                 {{ macros::box(participants=trip.rower, empty_seats=trip.max_people - amount_cur_rower, bg='primary-100', color='black') }}
-
+              {% endif %}
             {# --- START Edit Form --- #}
             {% if trip.cox_id == loggedin_user.id %}
             <div class="bg-gray-100 p-3 mt-4 rounded-md">
               <h3 class="text-primary-950 font-bold uppercase tracking-wide mb-2">Ausfahrt bearbeiten</h3>
               <form action="/cox/trip/{{ trip.id }}" method="post" class="grid gap-3">
                 {{ macros::input(label='Anzahl Ruderer', name='max_people', type='number', required=true, value=trip.max_people) }}
-                  {{ macros::input(label='Anmerkungen', name='notes', type='input', required=true, value=trip.notes) }}
+                {{ macros::input(label='Anmerkungen', name='notes', type='input', value=trip.notes) }}
                 <input value="Bearbeiten" class="btn btn-primary" type="submit" />
               </form>
               </div>
@@ -205,7 +205,6 @@
               {% endif %}
             {% endif %}
             {# --- END Edit Form --- #}
-            {% endif %}
             </div>
           </div>
           {# --- END Sidebar Content --- #}