Merge pull request 'Keep selected rowers during boat change, Fixes #48' (#675) from keep-rowers-on-boatchange into main

Reviewed-on: #675

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,28 +143,32 @@ 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 =  <HTMLSelectElement>document.querySelector('#shipmaster_only_steering');
+        let only_steering = <HTMLSelectElement>(
+          document.querySelector("#shipmaster_only_steering")
+        );
         if (event.detail.customProperties.default_handoperated) {
-		only_steering.setAttribute('checked', 'true');
-	}else {
-		only_steering.removeAttribute('checked');
+          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');
+          only_steering.removeAttribute("readonly");
+        } else {
+          only_steering.setAttribute("readonly", "readonly");
         }
 
         const destination = <HTMLSelectElement>(
@@ -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') {
+          if (event.detail.value === "36") {
             /** custom code for Etsch */
             choiceObjects["newrower"].setChoiceByValue("81");
           }
-        }else if (typeof loggedin_user_id !== 'undefined'){
+        } 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 = (<any>curSelection).length - rowers;
+    //choiceObjects[name].removeActiveItems(-1);
+    let curSelection = choiceObjects[name].getValue(true);
+    let amount_to_delete = (<any>curSelection).length - rowers;
 
-    //if (amount_to_delete > 0){
-    //      let to_delete = (<any>curSelection).slice(-amount_to_delete);
-    //      for (let del of to_delete) {
-    //        choiceObjects[name].removeActiveItemsByValue(del);
-    //      }
-    //}
+    if (amount_to_delete > 0) {
+      let to_delete = (<any>curSelection).slice(-amount_to_delete);
+      for (let del of to_delete) {
+        choiceObjects[name].removeActiveItemsByValue(del);
+      }
+    }
 
     let input = <HTMLElement>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,13 +772,14 @@ function addRelationMagic(bodyElement: HTMLElement) {
                 dataList.options,
                 function (option) {
                   return option.value === field.value;
-                },
+                }
               );
 
-	      if (option && option.value !== ""){
+              if (option && option.value !== "") {
                 // Get distance
                 const distance = option.getAttribute("distance");
-              if (distance && relatedField.value === "") relatedField.value = distance;
+                if (distance && relatedField.value === "")
+                  relatedField.value = distance;
               }
             }
           });
@@ -773,4 +795,3 @@ function replaceStrings() {
     weekday.innerHTML = weekday.innerHTML.replace("Freitag", "Markttag");
   });
 }
-