From 67d86bb908b7a6cc72c2cbfa3f1d8f0b13d41182 Mon Sep 17 00:00:00 2001
From: philipp <philipp@hofer.link>
Date: Mon, 30 Oct 2023 09:21:35 +0100
Subject: [PATCH] do proper things in ui @ new log

---
 frontend/main.ts                       | 65 ++++++++++++++++++++------
 templates/includes/forms/log.html.tera | 54 +++++----------------
 2 files changed, 63 insertions(+), 56 deletions(-)

diff --git a/frontend/main.ts b/frontend/main.ts
index f65bfe0..30c14ac 100644
--- a/frontend/main.ts
+++ b/frontend/main.ts
@@ -62,20 +62,8 @@ function selectBoatChange() {
         }
       }
     } as any);
-  
-    choiceObjects[boatSelect.id] = boatChoice;
-  }
 
-  const shipmasterSelect = <HTMLSelectElement>document.querySelector('#shipmaster');
-  if(shipmasterSelect) {
-    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;
+    choiceObjects[boatSelect.id] = boatChoice;
   }
 }
 
@@ -180,6 +168,16 @@ function initChoices() {
   }
 }
 
+interface ChoiceEvent extends Event{
+  detail: {
+    value: string; 
+    label: string,
+    customProperties: {
+	is_cox: boolean,
+    }
+  };
+}
+
 function initNewChoice(select: HTMLInputElement) {
   const choice = new Choices(select, {
     removeItemButton: true,
@@ -194,9 +192,50 @@ function initNewChoice(select: HTMLInputElement) {
     },
   });
 
+    select.addEventListener('addItem', function(e) {
+	const event = e as ChoiceEvent;
+	const user_id = event.detail.value;
+	const name = event.detail.label;
+
+	if (event.detail.customProperties.is_cox) {
+		const coxSelect = <HTMLSelectElement>document.querySelector('#cox');
+		if (coxSelect){
+			coxSelect.add(new Option(name, user_id));
+		}
+	}
+
+	const steeringSelect = <HTMLSelectElement>document.querySelector('#steering_person');
+	if (steeringSelect) {
+		steeringSelect.add(new Option(name, user_id));   
+	}
+    },false);
+
+	select.addEventListener('removeItem', function(e) {
+		const event = e as ChoiceEvent;
+
+		const user_id = event.detail.value;
+
+		const coxSelect = <HTMLSelectElement>document.querySelector('#cox');
+		if (coxSelect) {
+			for (var i=0; i<coxSelect.length; i++) {
+	    			if (coxSelect.options[i].value == user_id)
+	        			coxSelect.remove(i);
+			}
+		}
+
+		const steeringSelect = <HTMLSelectElement>document.querySelector('#steering_person');
+		if (steeringSelect) {
+			for (var i=0; i<steeringSelect.length; i++) {
+	    			if (steeringSelect.options[i].value == user_id)
+	        			steeringSelect.remove(i);
+			}
+		}
+	},false);
+
   choiceObjects[select.id] = choice;
 }
 
+
 function initToggle() {
   // get filter btns & set object sessionStorage
   const btns = <NodeListOf<HTMLButtonElement>>document.querySelectorAll('.filter-trips-js');
diff --git a/templates/includes/forms/log.html.tera b/templates/includes/forms/log.html.tera
index be74871..d0437ff 100644
--- a/templates/includes/forms/log.html.tera
+++ b/templates/includes/forms/log.html.tera
@@ -30,67 +30,35 @@
 {% macro new(only_ones, shipmaster) %}
 	<form action="/log" method="post" id="form" class="grid grid-cols-4 gap-3" onsubmit="Array.from(this.elements).forEach(e=>!e.value.trim()&&(e.disabled=true));">
 		{{ log::boat_select(only_ones=only_ones) }}
-
-      <div class="col-span-4 md:col-span-3">
-        <label for="shipmaster" class=" text-sm text-gray-600 ">Schiffsführer</label>
-
-        <select name="shipmaster" id="shipmaster" class="input rounded-md h-10">
-          <optgroup label="Steuerleute">
-            {% for cox in coxes %}
-              <option value="{{ cox.id }}" {% if cox.on_water %} disabled="disabled" {% else %} {% if cox.id == shipmaster %} selected {% endif %} {% endif %}>{{ cox.name }}
-                {% if cox.on_water %}
-                  (am Wasser)
-                {% endif %}
-              </option>
-            {% endfor %}
-          </optgroup>
-          <optgroup label="Mitglieder">
-            {% for user in users | filter(attribute="is_cox", value=false) %}
-              <option value="{{ user.id }}" {% if user.id == shipmaster %} selected {% endif %} {% if user.on_water %} disabled="disabled" {% endif %}>{{ user.name }}
-                {% if user.on_water %}
-                  (am Wasser)
-                {% endif %}
-              </option>
-            {% endfor %}
-          </optgroup>
-        </select>
-      </div>
 		{% if not only_ones %}
-      <div class="col-span-4 md:col-span-1">
-      	<div class="text-sm text-gray-600">Bootssteuerung</div>
-        <div class="h-10 flex items-center">
-			    {{ macros::checkbox(label='handgesteuert', name='shipmaster_only_steering', disabled=true) }}
-        </div>
-      </div>
+			<div class="col-span-4 md:col-span-1">
+				<div class="text-sm text-gray-600">Bootssteuerung</div>
+				<div class="h-10 flex items-center">
+					{{ macros::checkbox(label='handgesteuert', name='shipmaster_only_steering', disabled=true) }}
+				</div>
+			</div>
 		{% endif %}
-
 		{% if not only_ones %}
 			{{ log::rower_select(id="newrower", selected=[], class="col-span-4", init=true) }}
 		{% endif %}
-
+		{{ macros::select(label="Schiffsführer", data=[], name='cox', wrapper_class="col-span-2") }}
+		{{ macros::select(label="Steuerperson", data=[], name='steering_person', wrapper_class="col-span-2") }}
 		{{ macros::input(label='Abfahrtszeit', name='departure', type='datetime-local', required=true, wrapper_class='col-span-2') }}
 		{{ macros::input(label='Ankunftszeit', name='arrival', type='datetime-local', wrapper_class='col-span-2') }}
-
 		<div class="relative col-span-2">
 			<label for="destination" class="text-sm text-gray-600">Ziel</label>
-
 			<input class="input rounded-md set-distance-js" type="search" list="destinations" placeholder="Destination" id="destination" name="destination" value="" data-relation="distance_in_km"/>
 			<datalist id="destinations">
-				{% for distance in distances %}
-					<option value="{{ distance.0 }}" distance={{ distance.1 }} />
+				{% for distance in distances %}<option value="{{ distance.0 }}" distance={{ distance.1 }}/>
 				{% endfor %}
 			</datalist>
 		</div>
-
 		<div class="relative col-span-2">
 			{{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km" , type="number", min=0, value='', class="rounded-md") }}
 			<span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white border-0 text-gray-600 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
 		</div>
-
 		{{ macros::input(label="Kommentar", name="comments", type="text", wrapper_class="col-span-4") }}
-
 		{{ macros::select(label="Typ", data=logtypes, name='logtype', default="Normal", wrapper_class="col-span-4") }}
-
 		<input type="submit" value="Ausfahrt eintragen" class="btn btn-primary w-full col-span-4 m-auto"/>
 	</form>
 {% endmacro new %}
@@ -108,7 +76,7 @@
 {% macro rower_select(id, selected, amount_seats='', class='', init='false') %}
 	{% if not amount_seats or amount_seats > 1 %}
 		<div class="{{ class }}">
-      <label for="{{id}}" class="text-sm text-gray-600 ">Ruderer</label>
+			<label for="{{id}}" class="text-sm text-gray-600 ">Ruderer</label>
 			<select style="width: 100%;" multiple name="rowers[]" id="{{id}}" class="w-full" data-seats="{{amount_seats}}" data-init={{init}}>
 				{% for user in users %}
 					{% set_global sel = false %}
@@ -117,7 +85,7 @@
 							{% set_global sel = true %}
 						{% endif %}
 					{% endfor %}
-					<option value="{{ user.id }}" {% if sel %} selected {% endif %} {% if user.on_water %} disabled="disabled" {% endif %}>
+					<option value="{{ user.id }}" {% if sel %} selected {% endif %} {% if user.on_water %} disabled="disabled" {% endif %} data-custom-properties='{"is_cox": {{ user.is_cox }}}'>
 						{{user.name}}
 						{% if user.on_water %}
 							(am Wasser)