From 69c7eebd544cdaad935123f8a3834fd861c18299 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Fri, 7 Apr 2023 12:37:33 +0200
Subject: [PATCH] [WIP] filter btn cox list view

---
 frontend/main.ts                         | 31 +++++++++++++++++++++++-
 frontend/scss/components/_btns.scss      |  4 +++
 templates/includes/funnel-icon.html.tera |  3 +++
 templates/index.html.tera                | 18 ++++++++++++--
 4 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 templates/includes/funnel-icon.html.tera

diff --git a/frontend/main.ts b/frontend/main.ts
index 890decb..d92d38c 100644
--- a/frontend/main.ts
+++ b/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) {
diff --git a/frontend/scss/components/_btns.scss b/frontend/scss/components/_btns.scss
index c696504..7bc54bd 100644
--- a/frontend/scss/components/_btns.scss
+++ b/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;
+  }
 }
diff --git a/templates/includes/funnel-icon.html.tera b/templates/includes/funnel-icon.html.tera
new file mode 100644
index 0000000..2bbab68
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/templates/index.html.tera b/templates/index.html.tera
index fa224c8..fc02ebf 100644
--- a/templates/index.html.tera
+++ b/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