forked from Ruderverein-Donau-Linz/rowt
		
	Merge pull request 'Keep selected rowers during boat change, Fixes #48' (#675) from keep-rowers-on-boatchange into main
Reviewed-on: Ruderverein-Donau-Linz/rowt#675
This commit is contained in:
		
							
								
								
									
										137
									
								
								frontend/main.ts
									
									
									
									
									
								
							
							
						
						
									
										137
									
								
								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 =  <HTMLSelectElement>document.querySelector('#shipmaster_only_steering');
 | 
			
		||||
	if (event.detail.customProperties.default_handoperated) {
 | 
			
		||||
		only_steering.setAttribute('checked', 'true');
 | 
			
		||||
	}else {
 | 
			
		||||
		only_steering.removeAttribute('checked');
 | 
			
		||||
	}
 | 
			
		||||
        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");
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
	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 = <HTMLSelectElement>(
 | 
			
		||||
          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 = (<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,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");
 | 
			
		||||
  });
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user