From 93c6fd2ce7f822059d66c905c193c5e07c39d6fc Mon Sep 17 00:00:00 2001
From: philipp <philipp@hofer.link>
Date: Mon, 30 Oct 2023 15:19:43 +0100
Subject: [PATCH] finish frontend(?)

---
 frontend/main.ts                       | 65 ++++++++++----------------
 templates/includes/forms/log.html.tera |  4 +-
 templates/includes/macros.html.tera    |  4 +-
 3 files changed, 29 insertions(+), 44 deletions(-)

diff --git a/frontend/main.ts b/frontend/main.ts
index e17a717..abd5e5b 100644
--- a/frontend/main.ts
+++ b/frontend/main.ts
@@ -38,30 +38,21 @@ function selectBoatChange() {
       noResultsText: 'Keine Ergebnisse gefunden',
       noChoicesText: 'Keine Ergebnisse gefunden',
       itemSelectText: 'Zum Auswählen klicken',
-      callbackOnCreateTemplates: function () {
-        return {
-            option: ({ label, value, customProperties, active, disabled, }: any) => {
-                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 rowers = Number(originalOption.dataset.amount_seats);
-
-                setMaxAmountRowers("newrower", rowers);                
-
-                return opt;
-            }
-        }
-      }
     } as any);
 
+    boatSelect.addEventListener('addItem', function(e) {
+	const amount_seats = e.detail.customProperties.amount_seats;
+	setMaxAmountRowers("newrower", amount_seats);
+
+        const inputElement = document.getElementById("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')}`;
+        
+        inputElement.value = formattedDateTime;
+    },false);
+
     choiceObjects[boatSelect.id] = boatChoice;
+    choiceObjects["boat_id"] = boatChoice;
   }
 }
 
@@ -82,16 +73,18 @@ function reloadPage() {
 }
 
 function setMaxAmountRowers(name: string, rowers: number) {
+	console.log("called fct: name="+name+"; rowers="+rowers);
   if(choiceObjects[name]) {
-    let curSelection = choiceObjects[name].getValue(true);
-    let amount_to_delete = (<any>curSelection).length - rowers;
+    choiceObjects[name].removeActiveItems();
+    //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);
 
@@ -127,6 +120,7 @@ function setMaxAmountRowers(name: string, rowers: number) {
     //  }
     //}
   }
+  console.log(choiceObjects["newrower"].config.maxItemCount);
 }
 
 function initBoatActions() {
@@ -135,21 +129,11 @@ function initBoatActions() {
     Array.prototype.forEach.call(boatSelects, (select: HTMLInputElement) => {
       select.addEventListener('click', function() {
         if(select.dataset.seats) {
-          const rowers = Number(select.dataset.seats);
-
-          setMaxAmountRowers("newrower", rowers);
-            
           if (select.dataset.id) {
                   choiceObjects['boat_id'].setChoiceByValue(select.dataset.id);
           }
 
           window.scrollTo(0, 0);
-
-          const inputElement = document.getElementById("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')}`;
-        
-          inputElement.value = formattedDateTime;
         }
       });
     });
@@ -173,6 +157,7 @@ interface ChoiceEvent extends Event{
 	is_cox: boolean,
 	steers: boolean,
 	cox_on_boat: boolean,
+	amount_seats: number,
     }
   };
 }
@@ -205,7 +190,7 @@ function initNewChoice(select: HTMLInputElement) {
                 //const rowers = Number(originalOption.dataset.amount_seats);
                 //const isShipmasterSteering = originalOption.dataset.default_shipmaster_only_steering;
 
-               	//setMaxAmountRowers(select.id, curr_boat_rowers, isShipmasterSteering);                
+               	//setMaxAmountRowersoselect.id, curr_boat_rowers, isShipmasterSteering);                
 
                 return opt;
             }
diff --git a/templates/includes/forms/log.html.tera b/templates/includes/forms/log.html.tera
index 8c8e8e4..57ea74f 100644
--- a/templates/includes/forms/log.html.tera
+++ b/templates/includes/forms/log.html.tera
@@ -66,10 +66,10 @@
 
 {% macro boat_select(only_ones, id="boat_id") %}
   {% if not only_ones %}
-      {{ macros::select(label="Boot", data=boats, name="boat_id", id=id, display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], wrapper_class="col-span-4") }}
+      {{ macros::select(label="Boot", data=boats, name="boat_id", id=id, display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], wrapper_class="col-span-4", show_seats=true) }}
   {% else %}
     {% set ones = boats | filter(attribute="amount_seats", value=1) %}
-    {{ macros::select(label="Boot", data=ones, name="boat_id", id=id, display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], wrapper_class="col-span-4") }}
+    {{ macros::select(label="Boot", data=ones, name="boat_id", id=id, display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], wrapper_class="col-span-4", show_seats=true) }}
   {% endif %}
 {% endmacro boat_select %}
 
diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index 5e43784..74ebf73 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -78,7 +78,7 @@
 	</label>
 {% endmacro checkbox %}
 
-{% macro select(label, data, name='trip_type', default='', id='', selected_id='', display='', extras='', class='', wrapper_class='', required=false) %}
+{% macro select(label, data, name='trip_type', default='', id='', selected_id='', display='', extras='', class='', wrapper_class='', required=false, show_seats=false) %}
 	<div class="{{wrapper_class}}">
 		<label for="{{ name }}" class="text-sm text-gray-600">{{ label }}</label>
 		{% if display == '' %}
@@ -89,7 +89,7 @@
 				<option selected value>{{ default }}</option>
 			{% endif %}
 			{% for d in data %}
-				<option value="{{ d.id }}" {% if d.id == selected_id %} selected {% endif %} {% if extras != '' %} {% for extra in extras %} {% if extra != 'on_water' %} data- {{extra}}={{d[extra]}} {% else %} {% if d[extra] %} disabled {% endif %} {% endif %} {% endfor %} {% endif %}>
+				<option value="{{ d.id }}" {% if d.id == selected_id %} selected {% endif %} {% if extras != '' %} {% for extra in extras %} {% if extra != 'on_water' %} data- {{extra}}={{d[extra]}} {% else %} {% if d[extra] %} disabled {% endif %} {% endif %} {% endfor %} {% endif %} {% if show_seats %} data-custom-properties='{"amount_seats": {{ d["amount_seats"] }}}'{% endif %}>
 					{% for displa in display -%}
 						{%- if d[displa] -%}
 							{{- d[displa] -}}