[WIP] filter btn cox list view

This commit is contained in:
Marie Birner 2023-04-07 12:37:33 +02:00
parent 0c25f37a2f
commit 69c7eebd54
4 changed files with 53 additions and 3 deletions

View File

@ -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) {

View File

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

View File

@ -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>

After

Width:  |  Height:  |  Size: 357 B

View File

@ -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