[TASK] add filter and change aria-pressed style button

frontend/main.ts

@@ -33,6 +33,30 @@ function initToggle() {
       });
     });
   }
+
+  const monthToggle = <HTMLInputElement>document.querySelector('#filtermonth-js');
+  const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
+
+  if(monthToggle) {
+    monthToggle.addEventListener('click', () => {
+      monthToggle.ariaPressed = (monthToggle.ariaPressed === 'true') ? 'false' : 'true';
+      const currentMonth = monthToggle.dataset.month;
+      
+      if(currentMonth) {
+        const index = months.indexOf(currentMonth);
+        if (index > -1) { // only splice array when item is found
+          months.splice(index, 1); // 2nd parameter means remove one item only
+        }
+
+        Array.prototype.forEach.call(months, (month: HTMLElement) => {
+          const notThisMonth = document.querySelectorAll('div[data-month="' + month + '"]');
+          Array.prototype.forEach.call(notThisMonth, (notThisMonth: HTMLElement) => {
+            notThisMonth.classList.toggle('hidden');
+          });
+        });
+      }
+    });
+  }
 }
 
 function initSearch() {

frontend/scss/components/_btns.scss

@@ -22,6 +22,6 @@
   }
 
   &[aria-pressed='true'] {
-    @apply outline outline-2 outline-offset-2 outline-primary-600;
+    @apply outline outline-2 outline-offset-2 outline-primary-600 bg-primary-100 text-primary-950;
   }
 }

templates/index.html.tera

@@ -11,7 +11,7 @@
   <h1 class="h1 sm:col-span-2 lg:col-span-3">Ausfahrten</h1>
 
   {% if loggedin_user.is_cox %}
-    <div class="sm:col-span-2 lg:col-span-3 bg-primary-100 rounded-md p-3 grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2">
+    <div class="sm:col-span-2 lg:col-span-3 bg-primary-100 rounded-md p-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">
         {% include "includes/funnel-icon" %}
         Tage mit Ausfahrten
@@ -20,12 +20,16 @@
         {% 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') }}">
+        {% include "includes/funnel-icon" %}
+        Aktuellen Monat anzeigen
+      </button>
     </div>
   {% endif %}
 
   {% for day in days %}
   {% set amount_trips = day.planned_events | length + day.trips | length %}
-  <div class="bg-white p-3 rounded-md flex justify-between flex-col" data-trips="{{ amount_trips }}">
+  <div class="bg-white p-3 rounded-md flex justify-between flex-col" data-trips="{{ amount_trips }}" data-month="{{ day.day| date(format='%m') }}">
     <div>
       <h2 class="text-lg text-primary-950 font-bold uppercase tracking-wide">{{ day.day| date(format="%d.%m.%Y") }} <small class="inline-block ml-1">{{ day.day | date(format="%A", locale="de_AT") }}</small></h2>