clean ui for logbook

src/model/logbook.rs

@@ -182,6 +182,21 @@ impl Logbook {
         Ok(())
     }
 
+    pub async fn distances(db: &SqlitePool) -> Vec<(String, i64)>{
+        let result = sqlx::query!("SELECT destination, distance_in_km FROM logbook WHERE id IN (SELECT MIN(id) FROM logbook GROUP BY destination) AND destination IS NOT NULL AND distance_in_km IS NOT NULL;")
+        .fetch_all(db)
+        .await
+        .unwrap();
+
+    result.into_iter().filter_map(|r| {
+        if let (Some(destination), Some(distance_in_km)) = (r.destination, r.distance_in_km) {
+            Some((destination, distance_in_km))
+        } else {
+            None
+        }
+    }).collect()
+    }
+
     async fn remove_rowers(&self, db: &mut Transaction<'_, Sqlite>) {
         sqlx::query!("DELETE FROM rower WHERE logbook_id=?", self.id)
             .execute(db)

src/tera/log.rs

@@ -26,6 +26,7 @@ async fn index(
     let coxes = User::cox(db).await;
     let users = User::all(db).await;
     let logtypes = LogType::all(db).await;
+    let distances = Logbook::distances(db).await;
 
     let on_water = Logbook::on_water(db).await;
     let completed = Logbook::completed(db).await;
@@ -42,6 +43,7 @@ async fn index(
     context.insert("loggedin_user", &adminuser.user);
     context.insert("on_water", &on_water);
     context.insert("completed", &completed);
+    context.insert("distances", &distances);
 
     Template::render("log", context.into_json())
 }

templates/admin/boat/index.html.tera

@@ -1,5 +1,5 @@
 {% import "includes/macros" as macros %}
-{% import "admin/boat/boat" as boat %}
+{% import "includes/forms/boat" as boat %}
 
 {% extends "base" %}
 

templates/includes/forms/boat.html.tera

@@ -10,7 +10,7 @@
       </h2>
       {{ macros::input(label="Name", name="name", type="text", required=true) }}
       {{ macros::input(label="Anzahl Sitze", name="amount_seats", type="number", required=true, min=1) }}
-      {{ macros::input(label="Baujahr", name="year_built", type="number", min=1950, max, 2050) }}
+      {{ macros::input(label="Baujahr", name="year_built", type="number", min=1950, max=2050) }}
       {{ macros::input(label="Bootsbauer", name="boatbuilder", type="text") }}
       {{ macros::select(data=locations, label='location', select_name='location_id', selected_id=1) }}
       {{ macros::select(data=users, label='users', select_name='owner', default="Vereinsboot") }}
@@ -26,7 +26,7 @@
       />
     </div>
   </form>
-{% endmacro checkbox %}
+{% endmacro new %}
 
 
 {% macro edit(boat, uuid) %}
@@ -62,4 +62,4 @@
         <input value="Ändern" type="submit" class="w-28 btn btn-primary" />
       </div>
     </form>
-{% endmacro checkbox %}
+{% endmacro edit %}

templates/includes/forms/log.html.tera

@@ -0,0 +1,115 @@
+{% macro new() %}
+  <form action="/log" method="post" id="form">
+	{{ macros::select(data=boats, select_name='boat_id') }}
+	{{ 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/>
+	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"]){
+    console.log(optional_elem);
+      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;
+    }
+  }">
+	<datalist id="destinations">
+        {% for distance in distances %}
+  		<option value="{{ distance.0 }}" distance={{ distance.1 }} />
+        {% endfor %}
+	</datalist>
+	{{ 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[]">
+		{% for user in users %}
+			<option value="{{ user.id }}" onmousedown="event.preventDefault(); this.selected = !this.selected; return false;">{{user.name}}</option>
+		{% endfor %}
+	</select>
+	<input type="submit" />
+	
+	<script>
+  const currentDate = new Date();
+  const localTime = new Date(currentDate.getTime() - (currentDate.getTimezoneOffset() * 60000));
+  const formattedDate = localTime.toISOString().slice(0, 16);
+
+  // Set the formatted string as the value of the input field
+  document.getElementById("datetime-dep").value = formattedDate;
+	</script>
+  </form>
+{% endmacro new %}
+
+
+{% macro show(log, state) %}
+    Bootsname: {{ log.boat.name }}<br />
+    Schiffsführer: {{ log.shipmaster_user.name }}<br />
+    {% if log.shipmaster_only_steering %}
+      Schiffsführer steuert nur
+    {% endif %}
+    Weggefahren: {{ log.departure }}<br />
+    {% if state == "completed" %}
+        Angekommen: {{ log.arrival}}<br />
+    {% endif %}
+    Ziel: {{ log.destination }}<br />
+    {% if state == "completed" %}
+        Km: {{ log.distance_in_km }}<br />
+    {% endif %}
+    Kommentare: {{ log.comments }}<br />
+    Logtype: {{ log.logtype }}<br />
+    Ruderer: 
+    {% set amount_rowers = log.rowers | length %}
+    {% set amount_guests = log.boat.amount_seats - amount_rowers -1 %}
+    {{ amount_guests }} Gäste (ohne Account)
+    {% for rower in log.rowers %}
+    	{{ rower.name }}
+    {% endfor %}
+    {% if log.shipmaster == loggedin_user.id  and state == "on_water" %}
+      {{ log::home(log=log) }}
+    {% endif %}
+{% endmacro show %}    
+
+{% macro home(log) %}
+<form action="/log/{{log.id}}" method="post">
+        Destination: <input type="search" list="destinations" placeholder="Destination" id="destination-home" name="destination" value="{{log.destination}}" oninput="var inputElement = document.getElementById('destination-home');
+          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');
+              document.getElementById('distance_in_km_home').value = distance;
+              break;
+            }
+          }">
+        {{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km_home", type="number", min=0, value=log.distance_in_km) }}
+        {{ macros::input(label="Kommentar", name="comments", type="text", value=log.comments) }}
+        {{ macros::select(data=logtypes, select_name='logtype', default="Normal", selected_id=log.logtype) }}
+        <select multiple="multiple" name="rower[]">
+          {% for user in users %}
+            {% set_global selected = false %}
+            {% for rower in log.rowers %}
+                {% if rower.id == user.id %}
+              {% set_global selected = true %}
+                {% endif %}
+            {% endfor %}
+            <option value="{{ user.id }}" {% if selected %}selected{% endif %} onmousedown="event.preventDefault(); this.selected = !this.selected; return false;">{{user.name}}</option>
+          {% endfor %}
+        </select>
+        <input type="submit" value="AUSFAHRT BEENDEN"/>
+      </form>
+{% endmacro home %}    

templates/log.html.tera

@@ -1,142 +1,25 @@
 {% import "includes/macros" as macros %}
+{% import "includes/forms/log" as log %}
 
 {% 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">
+  {{ log::new() }}
-	{{ macros::select(data=boats, select_name='boat_id') }}
-	{{ 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/>
-	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) }}
-	{{ macros::input(label="Kommentar", name="comments", type="text") }}
-	{{ macros::select(data=logtypes, select_name='logtype', default="Normal") }}
-	<select multiple="multiple" name="rower[]">
-		{% for user in users %}
-			<option value="{{ user.id }}" onmousedown="event.preventDefault(); this.selected = !this.selected; return false;">{{user.name}}</option>
-		{% endfor %}
-	</select>
-	<input type="submit" />
-	
-	<script>
-  const currentDate = new Date();
-  const localTime = new Date(currentDate.getTime() - (currentDate.getTimezoneOffset() * 60000));
-  const formattedDate = localTime.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.name }}<br />
+    {{ log::show(log=log, state="on_water") }}
-    Schiffsführer: {{ log.shipmaster_user.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 />
-    Ruderer: 
-    {% for rower in log.rowers %}
-    	{{ rower.name }}
-    {% endfor %}
-    {% set amount_rowers = log.rowers | length %}
-    {% set amount_guests = log.boat.amount_seats - amount_rowers -1 %}
-    {{ amount_guests }} Gäste (ohne Account)
-    {% if log.shipmaster == loggedin_user.id %}
-      <form action="/log/{{log.id}}" method="post">
-        Destination: <input type="search" list="destinations" placeholder="Destination" id="destination-home" name="destination" value="{{log.destination}}" oninput="var inputElement = document.getElementById('destination-home');
-          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');
-              document.getElementById('distance_in_km_home').value = distance;
-              break;
-            }
-          }">
-        {{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km_home", type="number", min=0, value=log.distance_in_km) }}
-        {{ macros::input(label="Kommentar", name="comments", type="text", value=log.comments) }}
-        {{ macros::select(data=logtypes, select_name='logtype', default="Normal", selected_id=log.logtype) }}
-	<select multiple="multiple" name="rower[]">
-		{% for user in users %}
-		  {% set_global selected = false %}
-		  {% for rower in log.rowers %}
-		      {% if rower.id == user.id %}
-		  	{% set_global selected = true %}
-		      {% endif %}
-		  {% endfor %}
-			<option value="{{ user.id }}" {% if selected %}selected{% endif %} onmousedown="event.preventDefault(); this.selected = !this.selected; return false;">{{user.name}}</option>
-		{% endfor %}
-	</select>
-        <input type="submit" value="AUSFAHRT BEENDEN"/>
-      </form>
-    {% endif %}
     <hr />
   {% endfor %}
 
   <h2 style="font-size: 100px">Einträge</h2>
   {% for log in completed %}
-  	Bootsname: {{ log.boat.name }}<br />
+    {{ log::show(log=log, state="completed") }}
-	Schiffsführer: {{ log.shipmaster_user.name }}<br />
+    <hr />
-	{% if log.shipmaster_only_steering %}
-		Schiffsführer steuert nur
-	{% endif %}
-        Ruderer: 
-        {% for rower in log.rowers %}
-        	{{ rower.name }}
-        {% endfor %}
-        {% set amount_rowers = log.rowers | length %}
-        {% set amount_guests = log.boat.amount_seats - amount_rowers -1 %}
-        {{ amount_guests }} Gäste (ohne Account)
-	Weggefahren: {{ log.departure }}<br />
-	Angekommen: {{ log.arrival}}<br />
-	Ziel: {{ log.destination }}<br />
-  Km: {{ log.distance_in_km }}<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%}