[WIP] filter btn cox list view

frontend/main.ts

@@ -4,9 +4,38 @@ import './scss/app.scss'
 document.addEventListener('DOMContentLoaded', function() {
   initSearch();
   initSidebar();
+  initToggle();
 });
 
- function initSearch() {
+function initToggle() {
+  const toggle = <HTMLInputElement>document.querySelector('#filterdays-js');
+
+  if(toggle) {
+    toggle.addEventListener('click', () => {
+      toggle.ariaPressed = (toggle.ariaPressed === 'true') ? 'false' : 'true';
+
+      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');
+
+  if(coxToggle) {
+    coxToggle.addEventListener('click', () => {
+      coxToggle.ariaPressed = (coxToggle.ariaPressed === 'true') ? 'false' : 'true';
+
+      const noCoxNeeded = document.querySelectorAll('div[data-coxneeded="false"]');
+      Array.prototype.forEach.call(noCoxNeeded, (notNeeded: HTMLElement) => {
+        notNeeded.classList.toggle('hidden');
+      });
+    });
+  }
+}
+
+function initSearch() {
   const input = <HTMLInputElement>document.querySelector('#filter-js');
 
   if(input) {

frontend/scss/components/_btns.scss

@@ -20,4 +20,8 @@
   &-fw {
     @apply w-28;
   }
+
+  &[aria-pressed='true'] {
+    @apply outline outline-2 outline-offset-2 outline-primary-600;
+  }
 }

templates/includes/funnel-icon.html.tera

@@ -0,0 +1,3 @@
+<svg width="16" height="16" fill="currentColor" class="inline h-4 w-4 text-primary-300 group-hover:text-primary-400 mr-2"  viewBox="0 0 16 16" style="margin-top: -0.2rem"> 
+  <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"/> 
+</svg>

templates/index.html.tera

@@ -10,8 +10,22 @@
 
   <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">
+      <button type="button" title="Toggle View" class="group btn btn-primary" 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">
+        {% include "includes/funnel-icon" %}
+        Steuerleute gesucht
+      </button>
+    </div>
+  {% endif %}
+
   {% for day in days %}
-  <div class="bg-white p-3 rounded-md flex justify-between flex-col">
+  {% 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>
       <h2 class="text-lg text-primary-950 font-bold uppercase tracking-wide">{{ day.day| date(format="%d.%m.%Y") }}</h2>
 
@@ -122,7 +136,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">
+        <div class="pt-2" data-coxneeded="false">
           <div class="flex justify-between items-center">
             <div>
               <strong class="text-primary-900">{{ trip.planned_starting_time }} Uhr</strong> <small