rowt/frontend/main.ts

394 lines
13 KiB
TypeScript
Raw Normal View History

2023-09-23 21:05:08 +02:00
import Choices from "choices.js";
2023-04-06 13:15:40 +02:00
import { Sidebar } from './js/sidebar';
import './scss/app.scss'
2023-09-23 21:05:08 +02:00
export interface choiceMap {
[details: string]: Choices;
}
let choiceObjects: choiceMap = {};
document.addEventListener('DOMContentLoaded', function() {
initSearch();
2023-04-06 13:15:40 +02:00
initSidebar();
2023-04-07 12:37:33 +02:00
initToggle();
replaceStrings();
2023-09-23 21:05:08 +02:00
initChoices();
initBoatActions();
2023-09-23 21:51:00 +02:00
selectBoatChange();
2023-09-23 22:31:19 +02:00
addRelationMagic(<HTMLElement>document.querySelector('body'));
});
2023-09-23 21:51:00 +02:00
function selectBoatChange() {
2023-09-24 10:32:38 +02:00
const boatSelect = <HTMLSelectElement>document.querySelector('#boat_id');
const boatChoice = new Choices(boatSelect, {
loadingText: 'Wird geladen...',
noResultsText: 'Keine Ergebnisse gefunden',
noChoicesText: 'Keine Ergebnisse gefunden',
itemSelectText: 'Zum Auswählen klicken',
callbackOnCreateTemplates: function () {
console.log('here');
return {
option: ({ label, value, customProperties, active, disabled, }: Item) => {
const opt: HTMLOptionElement = Choices.defaults.templates.option.call(
this,
{ label, value, customProperties, active, disabled }
);
// We get the original <option> from choicejs
const originalOption: HTMLOptionElement = this._presetOptions.filter(
(option: HTMLOptionElement) => option.value === value
)[0];
const selectedValue = Number(originalOption.dataset.amount_seats);
const rowers = Number(selectedValue) - 1;
console.log(rowers);
choiceObjects['newrower'].config.maxItemCount = rowers;
choiceObjects['newrower'].removeActiveItems(rowers);
console.log(choiceObjects['newrower']);
(rowers === 0 ? choiceObjects['newrower'].disable() : choiceObjects['newrower'].enable());
return opt;
}
}
}
});
choiceObjects[boatSelect.id] = boatChoice;
const shipmasterSelect = <HTMLSelectElement>document.querySelector('#shipmaster');
const shipmasterChoice = new Choices(shipmasterSelect, {
loadingText: 'Wird geladen...',
noResultsText: 'Keine Ergebnisse gefunden',
noChoicesText: 'Keine Ergebnisse gefunden',
itemSelectText: 'Zum Auswählen klicken',
});
choiceObjects[shipmasterSelect.id] = shipmasterChoice;
if(boatChoice) {
boatChoice.passedElement.element.addEventListener('change', function(event) {
console.log(event);
2023-09-23 21:51:00 +02:00
const selectedElement = boatSelect as HTMLSelectElement;
const opt = selectedElement.options[selectedElement.selectedIndex];
const selectedValue = (<HTMLOptionElement>opt).dataset.amount_seats;
const rowers = Number(selectedValue) - 1;
choiceObjects['newrower'].config.maxItemCount = rowers;
choiceObjects['newrower'].removeActiveItems(rowers);
(rowers === 0 ? choiceObjects['newrower'].disable() : choiceObjects['newrower'].enable())
});
}
}
2023-09-23 21:05:08 +02:00
function initBoatActions() {
const boatSelects = document.querySelectorAll('.boats-js[data-onclick="true"]');
if(boatSelects) {
Array.prototype.forEach.call(boatSelects, (select: HTMLInputElement) => {
select.addEventListener('click', function() {
if(select.dataset.seats) {
const rowers = Number(select.dataset.seats) - 1;
choiceObjects['newrower'].config.maxItemCount = rowers;
choiceObjects['newrower'].removeActiveItems(rowers);
2023-09-23 23:23:42 +02:00
let boatSelect = <HTMLSelectElement>document.querySelector('#boat_id');
if(boatSelect && select.dataset.id) {
boatSelect.value = select.dataset.id;
}
2023-09-23 21:51:00 +02:00
(rowers === 0 ? choiceObjects['newrower'].disable() : choiceObjects['newrower'].enable());
2023-09-23 21:05:08 +02:00
}
});
});
}
}
function initChoices() {
const selects = document.querySelectorAll('select[data-init="true"]');
if(selects) {
Array.prototype.forEach.call(selects, (select: HTMLInputElement) => {
initNewChoice(select);
});
}
}
function initNewChoice(select: HTMLInputElement) {
const choice = new Choices(select, {
removeItemButton: true,
loadingText: 'Wird geladen...',
noResultsText: 'Keine Ergebnisse gefunden',
noChoicesText: 'Keine Ergebnisse gefunden',
itemSelectText: 'Zum Auswählen klicken',
placeholderValue: 'Ruderer auswählen',
maxItemCount: Number(select.dataset.seats) - 1,
maxItemText: (maxItemCount) => {
return `Nur ${maxItemCount} Ruderer können hinzugefügt werden`;
},
});
choiceObjects[select.id] = choice;
}
2023-04-07 12:37:33 +02:00
function initToggle() {
2023-04-10 22:42:00 +02:00
// get filter btns & set object sessionStorage
const btns = <NodeListOf<HTMLButtonElement>>document.querySelectorAll('.filter-trips-js');
let filterObject = new Map();
2023-04-07 12:37:33 +02:00
2023-04-10 22:42:00 +02:00
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()) {
2023-04-10 22:46:35 +02:00
if(entry[0] === btn.dataset.action && entry[1] !== 'true') {
2023-04-10 22:42:00 +02:00
filterMap.set(entry[0],'true');
} else {
filterMap.set(entry[0],'false');
}
}
sessionStorage.setItem('tripsFilter', JSON.stringify( Array.from(filterMap.entries())));
}
resetFilteredElements();
2023-04-11 08:27:58 +02:00
if(btn.getAttribute('aria-pressed') === 'false'){
2023-04-10 22:42:00 +02:00
Array.prototype.forEach.call(btns, (b: HTMLButtonElement) => {
b.setAttribute('aria-pressed', 'false');
});
triggerFilterAction(btn.dataset.action);
2023-04-10 22:46:35 +02:00
} else {
btn.setAttribute('aria-pressed', 'false');
2023-04-10 22:42:00 +02:00
}
2023-04-07 12:37:33 +02:00
});
2023-04-10 22:42:00 +02:00
});
}
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())));
}
}
function resetFilteredElements() {
const hiddenElements = document.querySelectorAll('.reset-js.hidden');
if(hiddenElements) {
Array.prototype.forEach.call(hiddenElements, (hiddenElement: HTMLButtonElement) => {
hiddenElement.classList.remove('hidden');
2023-04-07 12:37:33 +02:00
});
}
2023-04-10 22:42:00 +02:00
}
2023-04-07 12:37:33 +02:00
2023-04-10 22:42:00 +02:00
function triggerFilterAction(activeFilter: any) {
const activeBtn = document.querySelector('button[data-action="' + activeFilter + '"]');
if(activeBtn) {
activeBtn.setAttribute('aria-pressed', 'true');
2023-04-07 12:37:33 +02:00
2023-04-10 22:42:00 +02:00
filterAction(activeFilter);
}
}
2023-04-07 12:37:33 +02:00
2023-04-10 22:42:00 +02:00
function filterAction(activeFilter: string) {
switch(activeFilter) {
case 'filter-days': {
filterDays();
break;
}
case 'filter-coxs': {
filterCoxs();
break;
}
case 'filter-months': {
filterMonths(activeFilter)
break;
}
2023-04-07 12:37:33 +02:00
}
2023-04-10 22:42:00 +02:00
}
2023-04-10 22:42:00 +02:00
function filterDays() {
const daysNoTrips = document.querySelectorAll('div[data-trips="0"]');
Array.prototype.forEach.call(daysNoTrips, (day: HTMLElement) => {
day.classList.toggle('hidden');
});
}
2023-04-10 22:42:00 +02:00
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) {
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');
});
});
}
2023-04-10 22:42:00 +02:00
}
}
2023-04-07 12:37:33 +02:00
function initSearch() {
const input = <HTMLInputElement>document.querySelector('#filter-js');
if(input) {
filterElements(input.value);
input.addEventListener('input', () => {
filterElements(input.value);
});
}
}
function filterElements(input: string) {
const elements = document.querySelectorAll('form[data-filterable="true"]');
let resultWrapper = <HTMLElement>document.querySelector('#filter-result-js'),
amountShownElements = 0;
Array.prototype.forEach.call(elements, (element: HTMLElement) => {
// set both strings (input & dataset filter) to lowercase to not be case sensitive
let filterString = element.dataset.filter?.toLocaleLowerCase();
// bulk hide all elements
element.style.display = 'none';
// show if input matches
if(filterString?.includes(input.toLocaleLowerCase())) {
element.style.display = 'flex';
amountShownElements ++;
}
});
if(resultWrapper) {
resultWrapper.innerHTML = (amountShownElements === 0 ? 'Kein Ergebnis gefunden' : '<strong>' + amountShownElements + '</strong>' + (amountShownElements > 1 ? ' Ergebnisse' : ' Ergebnis') + ' gefunden');
}
}
2023-04-06 13:15:40 +02:00
function initSidebar() {
const sidebarTrigger = <NodeListOf<HTMLElement>>document.querySelectorAll('[data-trigger]');
if(sidebarTrigger) {
Array.prototype.forEach.call(sidebarTrigger, (triggerElement: HTMLElement) => {
if(triggerElement.dataset.trigger) {
const sidebar = new Sidebar(triggerElement.dataset.trigger);
triggerElement.addEventListener('click', (e) => {
e.preventDefault();
2023-04-08 09:14:48 +02:00
if(triggerElement.dataset.trigger === 'sidebar') {
initTripSidebar(triggerElement);
}
2023-04-06 13:15:40 +02:00
sidebar.toggle();
});
}
});
}
}
function initTripSidebar(triggerElement: HTMLElement) {
2023-04-08 09:14:48 +02:00
const sidebarElement = <HTMLElement>document.querySelector('#sidebar');
2023-04-08 09:17:46 +02:00
if(sidebarElement && triggerElement.dataset.body && triggerElement.dataset.header) {
let body = <HTMLElement>document.querySelector(triggerElement.dataset.body);
let bodyElement = <HTMLElement>body.cloneNode(true);
let bodyContainerElement = <HTMLElement>sidebarElement.querySelector('.body-js');
2023-09-23 21:05:08 +02:00
const selects = bodyElement.querySelectorAll('select[multiple]');
if(selects) {
Array.prototype.forEach.call(selects, (select: HTMLInputElement) => {
initNewChoice(select);
});
}
/* Quickfix duplicate ids checkboxes */
const checkboxes = <NodeListOf<HTMLElement>>bodyElement.querySelectorAll('input[type="checkbox"]');
Array.prototype.forEach.call(checkboxes, (checkbox: HTMLElement) => {
if(checkbox) {
checkbox.parentElement?.setAttribute('for', checkbox.id + 'js');
checkbox.id += 'js';
}
});
2023-09-05 23:03:18 +02:00
const prefixedContent = <NodeListOf<HTMLElement>>bodyElement.querySelectorAll('.change-id-js');
Array.prototype.forEach.call(prefixedContent, (content: HTMLElement) => {
if(content) {
content.id += 'js';
if(content.dataset.relation){
content.dataset.relation += 'js';
}
}
});
2023-04-08 09:17:46 +02:00
if(bodyContainerElement) {
bodyContainerElement.innerHTML = '';
bodyContainerElement.append(bodyElement);
2023-09-05 23:03:18 +02:00
addRelationMagic(bodyElement);
}
if(triggerElement.dataset.day) {
2023-04-08 09:17:46 +02:00
let hiddenElement = <HTMLInputElement>bodyElement.querySelector('.day-js');
if(hiddenElement) {
hiddenElement.value = triggerElement.dataset.day;
}
}
let headerElement = sidebarElement.querySelector('.header-js');
if(headerElement) {
headerElement.innerHTML = triggerElement.dataset.header;
}
}
}
2023-09-05 23:03:18 +02:00
function addRelationMagic(bodyElement: HTMLElement) {
const fields = bodyElement.querySelectorAll('.set-distance-js');
2023-09-23 22:31:19 +02:00
2023-09-05 23:03:18 +02:00
if(fields) {
Array.prototype.forEach.call(fields, (field: HTMLInputElement) => {
if(field.dataset.relation){
const relatedField = <HTMLInputElement>bodyElement.querySelector('#' + field.dataset.relation);
if(relatedField) {
field.addEventListener('input', (e) => {
e.preventDefault();
2023-09-23 22:31:19 +02:00
const dataList = <HTMLDataListElement>document.querySelector('#destinations');
2023-09-05 23:03:18 +02:00
if(dataList) {
var option = Array.prototype.find.call(dataList.options, function(option) {
return option.value === field.value;
});
// Get distance
const distance = option.getAttribute('distance');
if(distance) relatedField.value = distance;
}
});
}
}
});
}
}
function replaceStrings() {
const weekdays = document.querySelectorAll('.weekday-js');
Array.prototype.forEach.call(weekdays, (weekday: HTMLElement) => {
weekday.innerHTML = weekday.innerHTML.replace('Freitag', 'Markttag');
});
}