From cbe77ebf0edbc6fb3f5ea2209d3701fc1e1582f4 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Sat, 23 Sep 2023 22:31:19 +0200
Subject: [PATCH] [TASK] fix issues with destination

---
 frontend/main.ts                       |  5 ++--
 templates/includes/forms/log.html.tera | 37 ++++++++++----------------
 templates/includes/macros.html.tera    |  4 +--
 3 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/frontend/main.ts b/frontend/main.ts
index c141f05..be953be 100644
--- a/frontend/main.ts
+++ b/frontend/main.ts
@@ -15,6 +15,7 @@ document.addEventListener('DOMContentLoaded', function() {
   initChoices();
   initBoatActions();
   selectBoatChange();
+  addRelationMagic(<HTMLElement>document.querySelector('body'));
 });
 
 function selectBoatChange() {
@@ -307,15 +308,15 @@ function initTripSidebar(triggerElement: HTMLElement) {
 
 function addRelationMagic(bodyElement: HTMLElement) {
   const fields = bodyElement.querySelectorAll('.set-distance-js');
+
   if(fields) {
     Array.prototype.forEach.call(fields, (field: HTMLInputElement) => {
       if(field.dataset.relation){
         const relatedField = <HTMLInputElement>bodyElement.querySelector('#' + field.dataset.relation);
-
         if(relatedField) {
           field.addEventListener('input', (e) => {
             e.preventDefault();              
-            const dataList = <HTMLDataListElement>document.getElementById('destinations');
+            const dataList = <HTMLDataListElement>document.querySelector('#destinations');
               if(dataList) {
                 var option = Array.prototype.find.call(dataList.options, function(option) {
                   return option.value === field.value;
diff --git a/templates/includes/forms/log.html.tera b/templates/includes/forms/log.html.tera
index e60b5bb..92eb1d6 100644
--- a/templates/includes/forms/log.html.tera
+++ b/templates/includes/forms/log.html.tera
@@ -55,34 +55,25 @@
 			{{ log::rower_select(id="newrower", selected=[], class="col-span-2", init=true) }}
 		{% endif %}
 
-		<div></div>
-
-		<div>
-			<label for="destination" class="small text-gray-600">Ziel</label>
-			<input type="search" class="input rounded-md" list="destinations" placeholder="Destination" name="destination" id="destination">
-			<datalist id="destinations">
-				{% for distance in distances %}
-					<option value="{{ distance.0 }}" distance={{ distance.1 }}/>
-				{% endfor %}
-			</datalist>
-		</div>
 		{{ macros::input(label='Abfahrtszeit', name='departure', type='datetime-local', required=true) }}
 		{{ macros::input(label='Ankunftszeit', name='arrival', type='datetime-local') }}
 
-		<div>
+    <div class="relative">
 			<label for="destination" class="small text-gray-600">Ziel</label>
-			<input type="search" class="input rounded-md set-distance-js" list="destinations" placeholder="Destination" name="destination" id="destination" data-relation="distance_in_km">
-			<datalist id="destinations">
-				{% for distance in distances %}
-					<option value="{{ distance.0 }}" distance={{ distance.1 }}/>
-				{% endfor %}
-			</datalist>
-		</div>
+
+			<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 }} />
+        {% endfor %}
+      </datalist>
+    </div>
 
 		<div class="relative">
-			{{ macros::input(label="Distanz", name="distance_in_km", type="number", min=1) }}
+			{{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km" , type="number", min=0, value='', required=true, 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-2") }}
 
 		<div class="col-span-2">
@@ -96,10 +87,10 @@
 
 {% macro boat_select(only_ones) %}
 	{% if not only_ones %}
-		{{ macros::select(data=boats, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats"], class="col-span-2") }}
+		{{ macros::select(data=boats, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], class="col-span-2") }}
 	{% else %}
 		{% set ones = boats | filter(attribute="amount_seats", value=1) %}
-		{{ macros::select(data=ones, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats"], class="col-span-2") }}
+		{{ macros::select(data=ones, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], class="col-span-2") }}
 	{% endif %}
 {% endmacro boat_select %}
 
@@ -238,7 +229,7 @@
 			<label for="destination" class="small text-gray-600">Ziel</label>
 
 			<input class="input rounded-md set-distance-js change-id-js" type="search" list="destinations" placeholder="Destination" required="required" id="destination{{ log.id }}" name="destination" value="{{log.destination}}" data-relation="distance_in_km{{log.id}}"/>
-		</div>
+    </div>
 
 		<div class="relative">
 			{{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km" ~ log.id , type="number", min=0, value=log.distance_in_km, required=true, class="rounded-md change-id-js") }}
diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index f1cbddf..ad33760 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -63,7 +63,7 @@
 {% macro input(label, name, type, required=false, class='rounded-md', value='', min='', hide_label=false, id='', autofocus=false, wrapper_class='') %}
 	<div class="{{wrapper_class}}">
 		<label for="{{ name }}" class="{% if hide_label %} sr-only {% else %} small text-gray-600 {% endif %}">{{ label }}</label>
-		<input {% if id %} id="{{ id }}" {% else %} id="{{ name }}" {% endif %} name="{{ name }}" type="{{ type }}" {% if required %} required {% endif %} value="{{ value }}" class="input {{ class }}" placeholder="{% if hide_label %}{{ label }}{% endif %}" {% if min %} min="{{ min }}" {% endif %} {% if autofocus %} autofocus {% endif %}>
+		<input {% if id %} id="{{ id }}" {% else %} id="{{ name }}" {% endif %} name="{{ name }}" type="{{ type }}" {% if required %} required {% endif %} value="{{ value }}" class="input {{ class }}" placeholder="{% if hide_label %}{{ label }}{% endif %}" {% if min is defined %} min="{{ min }}" {% endif %} {% if autofocus %} autofocus {% endif %}>
 	</div>
 {% endmacro input %}
 
@@ -83,7 +83,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 %} data-{{extra}}={{d[extra]}} {% 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 %}>
 				{% for displa in display -%}
 					{%- if d[displa] -%}
 						{{- d[displa] -}}