From 617b747942ac6a67d3d39fac1543b2f3fd26a006 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Thu, 28 Sep 2023 11:52:14 +0200
Subject: [PATCH] [TASK] improve log and stats look & feel

---
 templates/admin/user/index.html.tera   |  4 +--
 templates/includes/forms/log.html.tera | 49 +++++++++++++++-----------
 templates/includes/macros.html.tera    |  2 +-
 templates/log.completed.html.tera      |  2 +-
 templates/stat.html.tera               | 28 +++++++++++----
 5 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/templates/admin/user/index.html.tera b/templates/admin/user/index.html.tera
index 91b4543..bfdd70d 100644
--- a/templates/admin/user/index.html.tera
+++ b/templates/admin/user/index.html.tera
@@ -16,7 +16,7 @@
 				<div class="grid md:grid-cols-3">
 					<div>
 						<label for="name" class="sr-only">Name</label>
-						<input type="text" name="name" class="relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Name"/>
+						<input type="text" name="name" class="relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Name"/>
 					</div>
 					<div class="flex items-center">
 						<label for="is_guest" class="flex items-center cursor-pointer hover:text-gray-100"><input type="checkbox" id="is_guest" name="is_guest" class="h-4 w-4 accent-gray-200 mr-2" checked="true"/>
@@ -32,7 +32,7 @@
 		<!-- START filterBar -->
 		<div class="bg-primary-200 p-3 mt-4 rounded-t-md">
 			<label for="name" class="sr-only">Suche</label>
-			<input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach..."/>
+			<input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach..."/>
 		</div>
 		<!-- END filterBar -->
 
diff --git a/templates/includes/forms/log.html.tera b/templates/includes/forms/log.html.tera
index 6118eb6..ee2a333 100644
--- a/templates/includes/forms/log.html.tera
+++ b/templates/includes/forms/log.html.tera
@@ -33,7 +33,7 @@
 
 		{% if allow_any_shipmaster %}
       <div>
-        <label for="shipmaster" class=" small text-gray-600 ">Schiffsführer</label>
+        <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">
@@ -71,7 +71,7 @@
 		{{ macros::input(label='Ankunftszeit', name='arrival', type='datetime-local') }}
 
 		<div class="relative">
-			<label for="destination" class="small text-gray-600">Ziel</label>
+			<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">
@@ -89,7 +89,7 @@
 		{{ macros::input(label="Kommentar", name="comments", type="text", wrapper_class="col-span-2") }}
 
 		<div class="col-span-2">
-			<label for="logtype" class=" small text-gray-600 ">Typ</label>
+			<label for="logtype" class=" text-sm text-gray-600 ">Typ</label>
 			{{ macros::select(data=logtypes, name='logtype', default="Normal") }}
 		</div>
 		<input type="submit" value="Ausfahrt starten" class="btn btn-primary w-full col-span-2 m-auto"/>
@@ -99,7 +99,7 @@
 
 {% macro boat_select(only_ones) %}
  <div class="col-span-2">
-    <label for="boat_id" class=" small text-gray-600 ">Boot</label>
+    <label for="boat_id" class=" text-sm text-gray-600 ">Boot</label>
     {% if not only_ones %}
         {{ 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 %}
@@ -112,7 +112,7 @@
 {% macro rower_select(id, selected, amount_seats='', class='', init='false') %}
 	{% if not amount_seats or amount_seats > 1 %}
 		<div class="{{ class }}">
-      <label for="{{id}}" class="small text-gray-600 ">Ruderer</label>
+      <label for="{{id}}" class="text-sm text-gray-600 ">Ruderer</label>
 			<select style="width: 100%;" multiple name="rowers[]" id="{{id}}" class="w-full" data-seats="{{amount_seats}}" data-init={{init}}>
 				{% for user in users %}
 					{% set_global sel = false %}
@@ -192,7 +192,14 @@
   <div class="border-t bg-white px-3 py-1" data-filterable="true" data-filter="{{ log.boat.name }} {{ log.shipmaster_user.name }} {% for rower in log.rowers %} {{ rower.name }} {% endfor %}">
     <div>
       <strong>{{ log.boat.name }}</strong> <small class="text-gray-600">({{ log.shipmaster_user.name }}{% if log.shipmaster_only_steering %} - handgesteuert {% endif %})</small>
-      <small class="block text-gray-600">{{ log.departure | date(format='%d.%m.%Y - %H:%M') }} {% if state == "completed" %}- {{ log.arrival | date(format='%d.%m.%Y - %H:%M') }}{% endif %}</small>
+      <small class="block text-gray-600">
+
+        {% if state == "completed" and log.departure | date(format='%d.%m.%Y') == log.arrival | date(format='%d.%m.%Y') %}
+          {{ log.departure | date(format='%d.%m.%Y')}} ({{ log.departure | date(format='%H:%M')}} - {{ log.arrival | date(format='%H:%M')}})  
+        {% else %}
+              {{ log.departure | date(format='%d.%m.%Y (%H:%M)') }} {% if state == "completed" %}- {{ log.arrival | date(format='%d.%m.%Y (%H:%M)') }}{% endif %}
+        {% endif %}
+      </small>
       {% set amount_rowers = log.rowers | length %}
         {% set amount_guests = log.boat.amount_seats - amount_rowers -1 %}
         {% if allowed_to_close and state == "on_water" %}
@@ -203,21 +210,21 @@
             {% if state == "completed" %}
               <small class="text-gray-600">({{ log.distance_in_km }} km)</small>
             {% endif %}
+
+            {% if log.comments %}
+              <span class="text-sm italic">- "{{ log.comments }}"</span>
+            {% endif %}
           </div>
           {% if amount_guests > 0 or log.rowers | length > 0 %}
-            Ruderer:
-          {% endif %}
-          {% if amount_guests > 0 %}
-            {{ amount_guests }}
-            Gäste (ohne Account), 
-          {% endif %}
-          {% for rower in log.rowers %}
-            {{ rower.name }}, 
-          {% endfor %}
-          {% if log.comments %}
-            <div>
-              Kommentare:
-              {{ log.comments }}
+            <div class="text-sm text-gray-600">
+              Mitruderer:
+              {% for rower in log.rowers %}
+                {{ rower.name }}{% if not loop.last or amount_guests > 0 %}, {% endif %}
+              {% endfor %}
+              {% if amount_guests > 0 %}
+                {{ amount_guests }}
+                Gäste (ohne Account)
+              {% endif %}
             </div>
           {% endif %}
           {% if log.logtype %}
@@ -244,7 +251,7 @@
 			{{ log::rower_select(id="rowers"~log.id, selected=log.rowers, amount_seats=log.boat.amount_seats) }}
 		{% endif %}
 		<div class="relative">
-			<label for="destination" class="small text-gray-600">Ziel</label>
+			<label for="destination" class="text-sm 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>
@@ -257,7 +264,7 @@
 		{{ macros::input(label="Kommentar", name="comments", id="comments" ~ log.id, type="text", value=log.comments, class="rounded-md change-id-js") }}
 
 		<div>
-			<label for="logtype" class=" small text-gray-600 ">Typ</label>
+			<label for="logtype" class="text-sm text-gray-600 ">Typ</label>
 			{{ macros::select(data=logtypes, name="logtype", id="logtype" ~ log.id, default="Normal", selected_id=log.logtype, class="rounded-md change-id-js") }}
 		</div>
 		<input class="btn btn-primary" type="submit" value="Ausfahrt beenden"/>
diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index acd5ea2..b1cc825 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -62,7 +62,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>
+		<label for="{{ name }}" class="{% if hide_label %} sr-only {% else %} text-sm 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 is defined %} min="{{ min }}" {% endif %} {% if autofocus %} autofocus {% endif %}>
 	</div>
 {% endmacro input %}
diff --git a/templates/log.completed.html.tera b/templates/log.completed.html.tera
index 9060de3..4b9b8e7 100644
--- a/templates/log.completed.html.tera
+++ b/templates/log.completed.html.tera
@@ -11,7 +11,7 @@
     <div class="mt-3">
       <div class="bg-gray-200 p-3 mt-4 rounded-t-md">
         <label for="name" class="sr-only">Suche</label>
-        <input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach Bootsname oder Ruderer...">
+        <input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach Bootsname oder Ruderer...">
       </div>
 
       <div id="filter-result-js" class="bg-gray-200 text-primary-950 pb-3 px-3 text-right"></div>
diff --git a/templates/stat.html.tera b/templates/stat.html.tera
index c8be5b4..ab44157 100644
--- a/templates/stat.html.tera
+++ b/templates/stat.html.tera
@@ -7,16 +7,32 @@
 
 	<div class="max-w-screen-lg w-full">
 		<h1 class="h1">Statistik</h1>
-		<ol class="mt-3 border-r border-l">
+    <div class="bg-gray-200 p-3 mt-4 rounded-t-md">
+      <label for="name" class="sr-only">Suche</label>
+      <input type="search" name="name" id="filter-js" class="w-full relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Suchen nach Namen...">
+    </div>
+
+    <div id="filter-result-js" class="bg-gray-200 text-primary-950 pb-3 px-3 text-right"></div>
+
+		<div class="border-r border-l">
       {% set_global km = 0 %}
+      {% set_global index = 1 %}
 			{% for s in stat %}
-				<li class="border-t {% if loop.last %} border-b {% endif %} bg-white flex justify-between px-3 py-1">
-          <span>{% if km != s.rowed_km %}{{loop.index}}{% else %} - {% endif %}</span>
-          <span>{{s.name}}</span>
+				<div class="border-t {% if loop.last %} border-b {% endif %} bg-white flex justify-between items-center px-3 py-1" data-filterable="true" data-filter="{{ s.name }}">
+          <span class="text-sm text-gray-600 w-10">
+            {% if km != s.rowed_km %}
+                {{loop.index}}
+                {% set_global index = loop.index %}
+            {% else %} 
+                {{ index }}
+            {% endif %}
+          </span>
+          <span class="grow">{{s.name}}</span>
 					<span>{{s.rowed_km}} km</span>
+
           {% set_global km = s.rowed_km %}
-        </li>
+        </div>
 			{% endfor %}
-		</ol>
+		</div>
 	</div>
 {% endblock content%}