do proper things in ui @ new log

frontend/main.ts

@@ -65,18 +65,6 @@ function selectBoatChange() {
 
     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;
-  }
 }
 
 function reloadPage() {
@@ -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');

templates/includes/forms/log.html.tera

@@ -30,31 +30,6 @@
 {% 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>
@@ -63,34 +38,27 @@
 				</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 %}
+				{% for distance in distances %}<option value="{{ distance.0 }}" distance={{ distance.1 }}/>
-					<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 %}
@@ -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)