[WIP] filter btns session storage
This commit is contained in:
Marie Birner
117
frontend/main.ts
117
frontend/main.ts
@@ -8,41 +8,105 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
|
||||
function initToggle() {
|
||||
const toggle = <HTMLInputElement>document.querySelector('#filterdays-js');
|
||||
// get filter btns & set object sessionStorage
|
||||
const btns = <NodeListOf<HTMLButtonElement>>document.querySelectorAll('.filter-trips-js');
|
||||
let filterObject = new Map();
|
||||
|
||||
if(toggle) {
|
||||
toggle.addEventListener('click', () => {
|
||||
toggle.ariaPressed = (toggle.ariaPressed === 'true') ? 'false' : 'true';
|
||||
toggle.setAttribute('aria-pressed', toggle.ariaPressed);
|
||||
|
||||
const daysNoTrips = document.querySelectorAll('div[data-trips="0"]');
|
||||
Array.prototype.forEach.call(daysNoTrips, (day: HTMLElement) => {
|
||||
day.classList.toggle('hidden');
|
||||
if(btns) {
|
||||
Array.prototype.forEach.call(btns, (btn: HTMLButtonElement) => {
|
||||
filterObject.set(btn.dataset.action, btn.ariaPressed);
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
let filter = sessionStorage.getItem('tripsFilter');
|
||||
if(filter) {
|
||||
let filterMap = new Map(JSON.parse(filter));
|
||||
for (let entry of filterMap.entries()) {
|
||||
if(entry[0] === btn.dataset.action) {
|
||||
filterMap.set(entry[0],'true');
|
||||
} else {
|
||||
filterMap.set(entry[0],'false');
|
||||
}
|
||||
}
|
||||
sessionStorage.setItem('tripsFilter', JSON.stringify( Array.from(filterMap.entries())));
|
||||
}
|
||||
resetFilteredElements();
|
||||
console.log(btn.ariaPressed);
|
||||
if(btn.ariaPressed === 'false'){
|
||||
Array.prototype.forEach.call(btns, (b: HTMLButtonElement) => {
|
||||
b.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
triggerFilterAction(btn.dataset.action);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const coxToggle = <HTMLInputElement>document.querySelector('#filtertrips-js');
|
||||
let filter = sessionStorage.getItem('tripsFilter');
|
||||
if(filter) {
|
||||
let filterMap = new Map(JSON.parse(filter));
|
||||
for (let entry of filterMap.entries()) {
|
||||
if(entry[1] === 'true') {
|
||||
triggerFilterAction(entry[0]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
sessionStorage.setItem('tripsFilter', JSON.stringify( Array.from(filterObject.entries())));
|
||||
}
|
||||
}
|
||||
|
||||
if(coxToggle) {
|
||||
coxToggle.addEventListener('click', () => {
|
||||
coxToggle.ariaPressed = (coxToggle.ariaPressed === 'true') ? 'false' : 'true';
|
||||
coxToggle.setAttribute('aria-pressed', coxToggle.ariaPressed);
|
||||
|
||||
const noCoxNeeded = document.querySelectorAll('div[data-coxneeded="false"]');
|
||||
Array.prototype.forEach.call(noCoxNeeded, (notNeeded: HTMLElement) => {
|
||||
notNeeded.classList.toggle('hidden');
|
||||
});
|
||||
function resetFilteredElements() {
|
||||
const hiddenElements = document.querySelectorAll('.reset-js.hidden');
|
||||
if(hiddenElements) {
|
||||
Array.prototype.forEach.call(hiddenElements, (hiddenElement: HTMLButtonElement) => {
|
||||
hiddenElement.classList.remove('hidden');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const monthToggle = <HTMLInputElement>document.querySelector('#filtermonth-js');
|
||||
function triggerFilterAction(activeFilter: any) {
|
||||
const activeBtn = document.querySelector('button[data-action="' + activeFilter + '"]');
|
||||
if(activeBtn) {
|
||||
activeBtn.setAttribute('aria-pressed', 'true');
|
||||
|
||||
filterAction(activeFilter);
|
||||
}
|
||||
}
|
||||
|
||||
function filterAction(activeFilter: string) {
|
||||
switch(activeFilter) {
|
||||
case 'filter-days': {
|
||||
filterDays();
|
||||
break;
|
||||
}
|
||||
case 'filter-coxs': {
|
||||
filterCoxs();
|
||||
break;
|
||||
}
|
||||
case 'filter-months': {
|
||||
filterMonths(activeFilter)
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function filterDays() {
|
||||
const daysNoTrips = document.querySelectorAll('div[data-trips="0"]');
|
||||
Array.prototype.forEach.call(daysNoTrips, (day: HTMLElement) => {
|
||||
day.classList.toggle('hidden');
|
||||
});
|
||||
}
|
||||
|
||||
function filterCoxs() {
|
||||
const noCoxNeeded = document.querySelectorAll('div[data-coxneeded="false"]');
|
||||
Array.prototype.forEach.call(noCoxNeeded, (notNeeded: HTMLElement) => {
|
||||
notNeeded.classList.toggle('hidden');
|
||||
});
|
||||
}
|
||||
|
||||
function filterMonths(action: string) {
|
||||
const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
|
||||
|
||||
const monthToggle = <HTMLButtonElement>document.querySelector('button[data-action="' + action + '"]');
|
||||
if(monthToggle) {
|
||||
monthToggle.addEventListener('click', () => {
|
||||
monthToggle.ariaPressed = (monthToggle.ariaPressed === 'true') ? 'false' : 'true';
|
||||
monthToggle.setAttribute('aria-pressed', monthToggle.ariaPressed);
|
||||
const currentMonth = monthToggle.dataset.month;
|
||||
|
||||
if(currentMonth) {
|
||||
@@ -58,9 +122,8 @@ function initToggle() {
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function initSearch() {
|
||||
const input = <HTMLInputElement>document.querySelector('#filter-js');
|
||||
|
||||
@@ -12,15 +12,15 @@
|
||||
|
||||
{% if loggedin_user.is_cox %}
|
||||
<div class="sm:col-span-2 lg:col-span-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">
|
||||
<button type="button" title="Toggle View" class="group btn btn-primary filter-trips-js" data-action="filter-days" 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">
|
||||
<button type="button" title="Toggle View" class="group btn btn-primary filter-trips-js" data-action="filter-coxs" id="filtertrips-js" aria-pressed="false">
|
||||
{% 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') }}">
|
||||
<button type="button" title="Toggle View" class="group btn btn-primary filter-trips-js" data-action="filter-months" id="filtermonth-js" aria-pressed="false" data-month="{{ now() | date(format='%m') }}">
|
||||
{% include "includes/funnel-icon" %}
|
||||
Aktuellen Monat anzeigen
|
||||
</button>
|
||||
@@ -37,7 +37,7 @@
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<div class="bg-white p-3 rounded-md flex justify-between flex-col shadow" style="min-height: 10rem;" data-trips="{{ amount_trips }}" data-month="{{ day.day| date(format='%m') }}" data-coxneeded="{{ day_cox_needed }}">
|
||||
<div class="bg-white p-3 rounded-md flex justify-between flex-col shadow reset-js" style="min-height: 10rem;" data-trips="{{ amount_trips }}" data-month="{{ day.day| date(format='%m') }}" data-coxneeded="{{ day_cox_needed }}">
|
||||
<div>
|
||||
<h2 class="font-bold uppercase tracking-wide text-center text-primary-950 text-lg">{{ day.day| date(format="%d.%m.%Y") }}
|
||||
<small class="inline-block ml-1 text-xs text-gray-400">{{ day.day | date(format="%A", locale="de_AT") }}</small>
|
||||
@@ -146,7 +146,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" data-coxneeded="false">
|
||||
<div class="pt-2 reset-js" data-coxneeded="false">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<strong class="text-primary-900">{{ trip.planned_starting_time }} Uhr</strong> <small
|
||||
@@ -181,31 +181,30 @@
|
||||
{# --- START Sidebar Content --- #}
|
||||
<div class="hidden">
|
||||
<div id="trip{{ trip.trip_details_id }}">
|
||||
{% if trip.max_people > 0 %}
|
||||
{% set amount_cur_rower = trip.rower | length %}
|
||||
{{ macros::box(participants=trip.rower, empty_seats=trip.max_people - amount_cur_rower, bg='primary-100', color='black') }}
|
||||
|
||||
{# --- START Edit Form --- #}
|
||||
{% if trip.cox_id == loggedin_user.id %}
|
||||
<div class="bg-gray-100 p-3 mt-4 rounded-md">
|
||||
<h3 class="text-primary-950 font-bold uppercase tracking-wide mb-2">Ausfahrt bearbeiten</h3>
|
||||
<form action="/cox/trip/{{ trip.id }}" method="post" class="grid gap-3">
|
||||
{{ macros::input(label='Anzahl Ruderer', name='max_people', type='number', required=true, value=trip.max_people) }}
|
||||
{{ macros::input(label='Anmerkungen', name='notes', type='input', required=true, value=trip.notes) }}
|
||||
<input value="Bearbeiten" class="btn btn-primary" type="submit" />
|
||||
</form>
|
||||
</div>
|
||||
{% if trip.rower | length == 0 %}
|
||||
<div class="text-right mt-6">
|
||||
<a href="/cox/remove/trip/{{ trip.id }}" class="inline-block btn btn-alert">
|
||||
{% include "includes/delete-icon" %}
|
||||
Termin löschen
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if amount_cur_rower > 0 %}
|
||||
{{ macros::box(participants=trip.rower, empty_seats=trip.max_people - amount_cur_rower, bg='primary-100', color='black') }}
|
||||
{% endif %}
|
||||
{# --- START Edit Form --- #}
|
||||
{% if trip.cox_id == loggedin_user.id %}
|
||||
<div class="bg-gray-100 p-3 mt-4 rounded-md">
|
||||
<h3 class="text-primary-950 font-bold uppercase tracking-wide mb-2">Ausfahrt bearbeiten</h3>
|
||||
<form action="/cox/trip/{{ trip.id }}" method="post" class="grid gap-3">
|
||||
{{ macros::input(label='Anzahl Ruderer', name='max_people', type='number', required=true, value=trip.max_people) }}
|
||||
{{ macros::input(label='Anmerkungen', name='notes', type='input', value=trip.notes) }}
|
||||
<input value="Bearbeiten" class="btn btn-primary" type="submit" />
|
||||
</form>
|
||||
</div>
|
||||
{% if trip.rower | length == 0 %}
|
||||
<div class="text-right mt-6">
|
||||
<a href="/cox/remove/trip/{{ trip.id }}" class="inline-block btn btn-alert">
|
||||
{% include "includes/delete-icon" %}
|
||||
Termin löschen
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{# --- END Edit Form --- #}
|
||||
{% endif %}
|
||||
{# --- END Edit Form --- #}
|
||||
</div>
|
||||
</div>
|
||||
{# --- END Sidebar Content --- #}
|
||||
|
||||
Reference in New Issue
Block a user