fun with js :-)

templates/includes/forms/log.html.tera

@@ -1,29 +1,28 @@
 {% macro new() %}
   <form action="/log" method="post" id="form">
-	{{ macros::select(data=boats, select_name='boat_id') }}
+	{{ macros::select(data=boats, select_name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats"]) }}
+	<script>
+          function updateElementsBasedOnSelectedOption() {
+            var selectElement = document.getElementById('boat_id');
+            var selectedOption = selectElement.selectedOptions[0];
+            var shipmaster_only_steering = selectedOption.getAttribute("extra-default_shipmaster_only_steering") === 'true';
+            document.getElementById('shipmaster_only_steering').checked = shipmaster_only_steering;
+            document.getElementById('max_rower_allowed').innerHTML = selectedOption.getAttribute("extra-amount_seats");
+          }
+          
+          document.getElementById('boat_id').addEventListener('change', updateElementsBasedOnSelectedOption);
+          document.addEventListener('DOMContentLoaded', updateElementsBasedOnSelectedOption);
+	</script>
 	{{ macros::select(data=coxes, select_name='shipmaster', selected_id=loggedin_user.id) }}
-    {{ macros::checkbox(label='shipmaster_only_steering', name='shipmaster_only_steering') }} <!-- TODO: depending on boat, deselect by default -->
-	Departure: <input type="datetime-local" id="datetime-dep" value="2023-07-24T08:00" name="departure" required/>
+        {{ macros::checkbox(label='shipmaster_only_steering', name='shipmaster_only_steering') }}
+	Departure: <input type="datetime-local" id="datetime-dep" name="departure" required/>
 	Arrival: <input type="datetime-local" id="datetime-arr" name="arrival" />
-    <script>
-document.getElementById('form').addEventListener('submit', function(e) {
-    e.preventDefault();
-    for(let optional_elem of ["datetime-arr", "distance_in_km", "comments", "logtype"]){
-      let myInput = document.getElementById(optional_elem);
-      if (myInput.value === '') {
-          myInput.removeAttribute('name');
-      }
-    }
-    this.submit();
-});
-</script>
 	Destination: <input type="search" list="destinations" placeholder="Destination" name="destination" id="destination" oninput="var inputElement = document.getElementById('destination');
   var dataList = document.getElementById('destinations');
   var selectedValue = inputElement.value;
   for (var i = 0; i < dataList.options.length; i++) {
     if (dataList.options[i].value === selectedValue) {
       var distance = dataList.options[i].getAttribute('distance');
-      console.log(distance);
       document.getElementById('distance_in_km').value = distance;
       break;
     }
@@ -36,11 +35,18 @@ document.getElementById('form').addEventListener('submit', function(e) {
 	{{ macros::input(label="Distanz", name="distance_in_km", type="number", min=0) }}
 	{{ macros::input(label="Kommentar", name="comments", type="text") }}
 	{{ macros::select(data=logtypes, select_name='logtype', default="Normal") }}
-	<select multiple="multiple" name="rower[]">
+	<select multiple="multiple" name="rower[]" id="rower">
 		{% for user in users %}
-			<option value="{{ user.id }}" onmousedown="event.preventDefault(); this.selected = !this.selected; return false;">{{user.name}}</option>
+			<option value="{{ user.id }}" onmousedown="event.preventDefault();this.selected = !this.selected; updateSelectedRowersCount(); return false;">{{user.name}}</option>
 		{% endfor %}
 	</select>
+	<script>
+	  function updateSelectedRowersCount() {
+	  	document.getElementById('amount_rower_selected').textContent = document.getElementById('rower').selectedOptions.length+1; 
+	  }
+	  document.addEventListener('DOMContentLoaded', updateSelectedRowersCount);
+	</script>
+	<span id="amount_rower_selected"></span>/<span id="max_rower_allowed"></span> Ruderer ausgewählt
 	<input type="submit" />
 	
 	<script>
@@ -52,6 +58,18 @@ document.getElementById('form').addEventListener('submit', function(e) {
   document.getElementById("datetime-dep").value = formattedDate;
 	</script>
   </form>
+  <script>
+   document.getElementById('form').addEventListener('submit', function(e) {
+     e.preventDefault();
+     for(let optional_elem of ["datetime-arr", "distance_in_km", "comments", "logtype"]){
+       let myInput = document.getElementById(optional_elem);
+       if (myInput.value === '') {
+           myInput.removeAttribute('name');
+       }
+     }
+     this.submit();
+   });
+  </script>
 {% endmacro new %}
 
 

templates/includes/macros.html.tera

@@ -55,13 +55,24 @@
   </label>
 {% endmacro checkbox %}
 
-{% macro select(data, select_name='trip_type', default='', selected_id='') %}
+{% macro select(data, select_name='trip_type', default='', selected_id='', display='', extras='') %}
+  {% if display == '' %}
+    {% set display = ["name"] %}
+  {% endif %}
   <select name="{{ select_name }}" id="{{ select_name }}" class="input rounded-md h-10">
     {% if default %}
 	    <option selected value>{{ default }}</option>
     {% endif %}
     {% for d in data %}
-          <option value="{{ d.id }}" {% if d.id == selected_id %} selected {% endif %}>{{ d.name }}</option>
+          <option value="{{ d.id }}" {% if d.id == selected_id %} selected {% endif %}{% if extras != '' %}{% for extra in extras %} extra-{{extra}}={{d[extra]}} {% endfor %}{% endif %}>
+          {% for displa in display -%}
+              {%- if d[displa] -%}
+                  {{- d[displa] -}}
+              {%- else -%}
+                  {{- displa -}}
+              {%- endif -%}
+          {%- endfor %}
+	</option>
     {% endfor %}
   </select>
 {% endmacro select %}