add first draft of logbook

templates/faq.html.tera

@@ -4,7 +4,7 @@
 
 {% block content %}
 <div class="max-w-screen-lg w-full">
-  <h1 class="h1">FAQs</h1>
+  <h1 class="h1">Infrequently asked questions</h1>
 
   <div class="grid pt-8 text-left gap-10">
     {% if loggedin_user.is_cox %}

templates/includes/macros.html.tera

@@ -13,6 +13,10 @@
               <span class="sr-only">FAQs</span>
             </a>
             {% if loggedin_user.is_admin %}
+            <a href="/log" class="inline-flex justify-center rounded-md bg-primary-600 mx-1 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">
+	   LOGBUCH 
+              <span class="sr-only">Logbuch</span>
+            </a>
             <a href="/admin/boat" class="inline-flex justify-center rounded-md bg-primary-600 mx-1 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">
 	    BOATS
               <span class="sr-only">Bootsverwaltung</span>
@@ -48,7 +52,7 @@
 {% endmacro checkbox %}
 
 {% macro select(data, select_name='trip_type', default='', selected_id='') %}
-  <select name="{{ select_name }}" class="input rounded-md h-10">
+  <select name="{{ select_name }}" id="{{ select_name }}" class="input rounded-md h-10">
     {% if default %}
 	    <option selected value>{{ default }}</option>
     {% endif %}

templates/log.html.tera

@@ -0,0 +1,97 @@
+{% import "includes/macros" as macros %}
+
+{% extends "base" %}
+
+{% block content %}
+
+  {% if flash %}
+    {{ macros::alert(message=flash.1, type=flash.0, class="sm:col-span-2 lg:col-span-3") }}
+  {% endif %}
+
+<div class="max-w-screen-lg w-full">
+  <h1 class="h1">Logbuch</h1>
+  <h2>Neue Ausfahrt starten</h2>
+  <form action="/log" method="post" id="form">
+	{{ macros::select(data=boats, select_name='boat_id') }}
+	{{ macros::select(data=users, 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/>
+	Arrival: <input type="datetime-local" id="datetime-arr" name="arrival" />
+	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;
+    }
+  }">
+	<datalist id="destinations">
+  		<option value="Ottensheim" distance=25 />
+  		<option value="Ottensheim + Regattastrecke" distance=29 />
+	</datalist>
+	{{ macros::input(label="Distanz", name="distance_in_km", type="number", min=0) }}<!-- TODO: depending on destination, pre-fill this distance -->
+	{{ macros::input(label="Kommentar", name="comments", type="text") }}
+	{{ macros::select(data=logtypes, select_name='logtype', default="Normal") }}
+	<input type="submit" />
+	
+	<script>
+	
+  // Get the current date and time
+  const currentDate = new Date();
+
+  // Format the date and time as a string in the format "YYYY-MM-DDTHH:mm"
+  const formattedDate = currentDate.toISOString().slice(0, 16);
+
+  // Set the formatted string as the value of the input field
+  document.getElementById("datetime-dep").value = formattedDate;
+
+	</script>
+  </form>
+
+  <h2 style="font-size: 100px">Am Wasser</h2>
+  {% for log in on_water %}
+  	Bootsname: {{ log.boat }}<br />
+	Schiffsführer: {{ log.shipmaster_name }}<br />
+	{% if log.shipmaster_only_steering %}
+		Schiffsführer steuert nur
+	{% endif %}
+	Weggefahren: {{ log.departure }}<br />
+	Ziel: {{ log.destination }}<br />
+	Kommentare: {{ log.comments }}<br />
+	Logtype: {{ log.logtype }}<br />
+	<hr />
+  {% endfor %}
+
+  <h2 style="font-size: 100px">Einträge</h2>
+  {% for log in completed %}
+  	Bootsname: {{ log.boat }}<br />
+	Schiffsführer: {{ log.shipmaster_name }}<br />
+	{% if log.shipmaster_only_steering %}
+		Schiffsführer steuert nur
+	{% endif %}
+	Weggefahren: {{ log.departure }}<br />
+	Angekommen: {{ log.arrival}}<br />
+	Ziel: {{ log.destination }}<br />
+	Kommentare: {{ log.comments }}<br />
+	Logtype: {{ log.logtype }}<br />
+	<hr />
+  {% endfor %}
+</div>
+
+<script>
+document.getElementById('form').addEventListener('submit', function(e) {
+    e.preventDefault();
+    for(let optional_elem of ["datetime-arr", "distance_in_km", "comments", "logtype"]){
+    console.log(optional_elem);
+      let myInput = document.getElementById(optional_elem);
+      if (myInput.value === '') {
+          myInput.removeAttribute('name');
+      }
+    }
+    this.submit();
+});
+</script>
+{% endblock content%}