From 09d4c5d958697ccd6c6ba6c37938437b043b71ee Mon Sep 17 00:00:00 2001 From: philipp Date: Thu, 15 Aug 2024 15:42:06 +0200 Subject: [PATCH] Keep selected rowers during boat change, Fixes #48 --- frontend/main.ts | 137 +++++++++++++++++++++++++++-------------------- 1 file changed, 79 insertions(+), 58 deletions(-) diff --git a/frontend/main.ts b/frontend/main.ts index 5ff4a0a..82f59e9 100644 --- a/frontend/main.ts +++ b/frontend/main.ts @@ -8,7 +8,7 @@ export interface choiceMap { declare var loggedin_user_id: string; let choiceObjects: choiceMap = {}; let boat_in_ottensheim = true; -let boat_reserved_today= true; +let boat_reserved_today = true; document.addEventListener("DOMContentLoaded", function () { changeTheme(); @@ -103,7 +103,11 @@ function setTheme(theme: string, setLocalStorage = true) { function setCurrentdate(input: HTMLInputElement) { if (input) { const now = new Date(); - const formattedDateTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}T${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`; + const formattedDateTime = `${now.getFullYear()}-${String( + now.getMonth() + 1 + ).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}T${String( + now.getHours() + ).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`; input.value = formattedDateTime; } @@ -139,29 +143,33 @@ function selectBoatChange() { boatSelect.addEventListener( "addItem", function (e) { - const event = e as ChoiceBoatEvent; boat_reserved_today = event.detail.customProperties.boat_reserved_today; - if (boat_reserved_today){ - alert(event.detail.label.trim()+' wurde heute reserviert. Bitte kontrolliere, dass du die Reservierung nicht störst.'); - } + if (boat_reserved_today) { + alert( + event.detail.label.trim() + + " wurde heute reserviert. Bitte kontrolliere, dass du die Reservierung nicht störst." + ); + } boat_in_ottensheim = event.detail.customProperties.boat_in_ottensheim; const amount_seats = event.detail.customProperties.amount_seats; setMaxAmountRowers("newrower", amount_seats); - let only_steering = document.querySelector('#shipmaster_only_steering'); - if (event.detail.customProperties.default_handoperated) { - only_steering.setAttribute('checked', 'true'); - }else { - only_steering.removeAttribute('checked'); - } + let only_steering = ( + document.querySelector("#shipmaster_only_steering") + ); + if (event.detail.customProperties.default_handoperated) { + only_steering.setAttribute("checked", "true"); + } else { + only_steering.removeAttribute("checked"); + } - if (event.detail.customProperties.convert_handoperated_possible) { - only_steering.removeAttribute('readonly'); - }else { - only_steering.setAttribute('readonly', 'readonly'); - } + if (event.detail.customProperties.convert_handoperated_possible) { + only_steering.removeAttribute("readonly"); + } else { + only_steering.setAttribute("readonly", "readonly"); + } const destination = ( document.querySelector("#destination") @@ -170,22 +178,35 @@ function selectBoatChange() { if (event.detail.customProperties.owner) { choiceObjects["newrower"].setChoiceByValue( - event.detail.customProperties.owner.toString(), + event.detail.customProperties.owner.toString() ); - if(event.detail.value === '36') { - /** custom code for Etsch */ - choiceObjects["newrower"].setChoiceByValue("81"); + if (event.detail.value === "36") { + /** custom code for Etsch */ + choiceObjects["newrower"].setChoiceByValue("81"); } - }else if (typeof loggedin_user_id !== 'undefined'){ - choiceObjects["newrower"].setChoiceByValue(loggedin_user_id); - } + } else if (typeof loggedin_user_id !== "undefined") { + const currentSelection = choiceObjects["newrower"].getValue(); + let selectedItemsCount: number; + if (Array.isArray(currentSelection)) { + selectedItemsCount = currentSelection.length; + } else { + selectedItemsCount = currentSelection !== undefined ? 1 : 0; + } + if (selectedItemsCount == 0) { + choiceObjects["newrower"].setChoiceByValue(loggedin_user_id); + } + } const inputElement = document.getElementById( - "departure", + "departure" ) as HTMLInputElement; const now = new Date(); - const formattedDateTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}T${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`; + const formattedDateTime = `${now.getFullYear()}-${String( + now.getMonth() + 1 + ).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}T${String( + now.getHours() + ).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`; inputElement.value = formattedDateTime; @@ -194,7 +215,7 @@ function selectBoatChange() { ); destinput.dispatchEvent(new Event("input")); }, - false, + false ); choiceObjects[boatSelect.id] = boatChoice; @@ -222,16 +243,16 @@ function reloadPage() { function setMaxAmountRowers(name: string, rowers: number) { if (choiceObjects[name]) { - choiceObjects[name].removeActiveItems(-1); - //let curSelection = choiceObjects[name].getValue(true); - //let amount_to_delete = (curSelection).length - rowers; + //choiceObjects[name].removeActiveItems(-1); + let curSelection = choiceObjects[name].getValue(true); + let amount_to_delete = (curSelection).length - rowers; - //if (amount_to_delete > 0){ - // let to_delete = (curSelection).slice(-amount_to_delete); - // for (let del of to_delete) { - // choiceObjects[name].removeActiveItemsByValue(del); - // } - //} + if (amount_to_delete > 0) { + let to_delete = (curSelection).slice(-amount_to_delete); + for (let del of to_delete) { + choiceObjects[name].removeActiveItemsByValue(del); + } + } let input = document.querySelector("#" + name); if (input) { @@ -239,24 +260,24 @@ function setMaxAmountRowers(name: string, rowers: number) { if (rowers === 0) { choiceObjects[name].disable(); input.parentElement?.parentElement?.parentElement?.classList.add( - "hidden", + "hidden" ); input.parentElement?.parentElement?.parentElement?.classList.add( - "md:block", + "md:block" ); input.parentElement?.parentElement?.parentElement?.classList.add( - "opacity-50", + "opacity-50" ); } else { choiceObjects[name].enable(); input.parentElement?.parentElement?.parentElement?.classList.remove( - "hidden", + "hidden" ); input.parentElement?.parentElement?.parentElement?.classList.remove( - "md:block", + "md:block" ); input.parentElement?.parentElement?.parentElement?.classList.remove( - "opacity-50", + "opacity-50" ); } } @@ -293,7 +314,7 @@ function setMaxAmountRowers(name: string, rowers: number) { function initBoatActions() { const boatSelects = document.querySelectorAll( - '.boats-js[data-onclick="true"]', + '.boats-js[data-onclick="true"]' ); if (boatSelects) { Array.prototype.forEach.call(boatSelects, (select: HTMLInputElement) => { @@ -366,7 +387,7 @@ function initNewChoice(select: HTMLInputElement) { steering_person.setAttribute("required", "required"); } const choice = new Choices(select, { - searchFields: ['label', 'value', 'customProperties.searchableText'], + searchFields: ["label", "value", "customProperties.searchableText"], removeItemButton: true, loadingText: "Wird geladen...", noResultsText: "Keine Ergebnisse gefunden", @@ -449,7 +470,7 @@ function initNewChoice(select: HTMLInputElement) { steeringSelect.add(new Option(name, user_id)); } }, - false, + false ); select.addEventListener( @@ -478,7 +499,7 @@ function initNewChoice(select: HTMLInputElement) { } } }, - false, + false ); choiceObjects[select.id] = choice; @@ -508,7 +529,7 @@ function initToggle() { } sessionStorage.setItem( "tripsFilter", - JSON.stringify(Array.from(filterMap.entries())), + JSON.stringify(Array.from(filterMap.entries())) ); } resetFilteredElements(); @@ -535,7 +556,7 @@ function initToggle() { } else { sessionStorage.setItem( "tripsFilter", - JSON.stringify(Array.from(filterObject.entries())), + JSON.stringify(Array.from(filterObject.entries())) ); } } @@ -547,14 +568,14 @@ function resetFilteredElements() { hiddenElements, (hiddenElement: HTMLButtonElement) => { hiddenElement.classList.remove("hidden"); - }, + } ); } } function triggerFilterAction(activeFilter: any) { const activeBtn = document.querySelector( - 'button[data-action="' + activeFilter + '"]', + 'button[data-action="' + activeFilter + '"]' ); if (activeBtn) { activeBtn.setAttribute("aria-pressed", "true"); @@ -654,7 +675,7 @@ function initSidebar() { sidebar.toggle(); }); } - }, + } ); } } @@ -751,14 +772,15 @@ function addRelationMagic(bodyElement: HTMLElement) { dataList.options, function (option) { return option.value === field.value; - }, + } ); - if (option && option.value !== ""){ - // Get distance - const distance = option.getAttribute("distance"); - if (distance && relatedField.value === "") relatedField.value = distance; - } + if (option && option.value !== "") { + // Get distance + const distance = option.getAttribute("distance"); + if (distance && relatedField.value === "") + relatedField.value = distance; + } } }); } @@ -773,4 +795,3 @@ function replaceStrings() { weekday.innerHTML = weekday.innerHTML.replace("Freitag", "Markttag"); }); } -