Ruderverein-Donau-Linz/rowt
1
1
Fork 0
Code Issues 30 Pull Requests Actions Packages Projects Wiki Activity

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

Browse Source
This commit is contained in:
Marie Birner 2023-04-07 21:59:25 +02:00
parent e8799e5766
commit f2df222f89
3 changed files with 31 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/main.ts
View File

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

2
frontend/scss/components/_btns.scss
View File

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

8
templates/index.html.tera
View File

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