From 33b06dc582565ee3c7a21c5cf6e113cbc5b69d81 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Thu, 28 Sep 2023 17:31:20 +0200
Subject: [PATCH] [TASK] style boat damage screen

---
 frontend/main.ts                       |   4 +-
 templates/boatdamages.html.tera        | 101 +++++++++++++++----------
 templates/includes/forms/log.html.tera |   6 +-
 3 files changed, 69 insertions(+), 42 deletions(-)

diff --git a/frontend/main.ts b/frontend/main.ts
index 05d67a6..4593315 100644
--- a/frontend/main.ts
+++ b/frontend/main.ts
@@ -92,7 +92,8 @@ function reloadPage() {
 }
 
 function setMaxAmountRowers(rowers: number, isShipmasterSteering='false') {
-	  let curSelection = choiceObjects['newrower'].getValue(true);
+  if(choiceObjects['newrower']) {
+    let curSelection = choiceObjects['newrower'].getValue(true);
     let amount_to_delete = (<any>curSelection).length - rowers;
 
     if (amount_to_delete > 0){
@@ -135,6 +136,7 @@ function setMaxAmountRowers(rowers: number, isShipmasterSteering='false') {
         only_steering.parentElement?.parentElement?.parentElement?.classList.add('opacity-50');     
       }
     }
+  }
 }
 
 function initBoatActions() {
diff --git a/templates/boatdamages.html.tera b/templates/boatdamages.html.tera
index 3d29f28..dfd2c92 100644
--- a/templates/boatdamages.html.tera
+++ b/templates/boatdamages.html.tera
@@ -9,51 +9,76 @@
   <h1 class="h1">Bootschäden</h1>
 
   {% if flash %}
-    {{ macros::alert(message=flash.1, type=flash.0, class="sm:col-span-2 lg:col-span-3") }}
+    {{ macros::alert(message=flash.1, type=flash.0, class="sm:col-span-2 lg:col-span-3 mt-3") }}
   {% endif %}
-  <h1>Neuen Schaden eintragen</h1>
-  <form action="/boatdamage" method="post">
-  	{{ log::boat_select(only_ones=false) }}
-  	{{ macros::input(label='Beschreibung des Schadens', name='desc', type='text', required=true) }}
-  	{{ macros::checkbox(label='Boot sperren', name='lock_boat', type='text', required=true) }}
-	<input type="submit" value="Schaden eintragen" />
-  </form>
 
-  
+  <h2 class="text-md font-bold tracking-wide bg-primary-900 mt-3 p-3 text-white flex justify-between items-center rounded-md">
+    Neuen Schaden
 
-  <hr />
+    <a href="#" 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"
+                data-sidebar="true" data-trigger="sidebar" data-header="Neuen Schaden anlegen" data-body="#new-damage">
+      {% include "includes/plus-icon" %}
+      <span class="sr-only">Neuen Schaden eintragen</span>
+    </a>
+  </h2>
 
+  <div class="hidden">
+    <div id="new-damage">
+      <form action="/boatdamage" method="post" class="grid gap-3">
+        {{ log::boat_select(only_ones=false, id='boat') }}
+        {{ macros::input(label='Beschreibung des Schadens', name='desc', type='text', required=true, wrapper_class='col-span-4') }}
+        <div class="col-span-4">
+          {{ macros::checkbox(label='Boot sperren', name='lock_boat', type='text', required=true) }}
+        </div>
+        <input type="submit" class="btn btn-primary w-full col-span-4" value="Schaden eintragen" />
+      </form>
+    </div>
+  </div>
+
+  <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>
 
   {% for boatdamage in boatdamages %}
-  	Boat: {{ boatdamage.boat.name }}
-	Desc: {{ boatdamage.desc }}
-	Schaden eingetragen von {{ boatdamage.user_created.name }} am/um {{ boatdamage.created_at | date(format='%d. %m. %Y %H:%M') }}
-	{% if boatdamage.is_lock %}
-		Boot gesperrt
-	{% endif %}
-	{% if boatdamage.fixed_at %}
-		Repariert von {{ boatdamage.user_fixed.name }} am/um {{ boatdamage.fixed_at | date(format='%d. %m. %Y %H:%M') }}
-	{% elif loggedin_user.is_cox %}
-		<form action="/boatdamage/{{ boatdamage.id }}/fixed" method="post">
-			<input type="text" name="desc" value="{{ boatdamage.desc }}" />
-			{% if loggedin_user.is_tech %}
-				<input type="submit" value="Ich hab's repariert + verifiziert" />
-			{% else %}
-				<input type="submit" value="Ich hab's repariert" />
-			{% endif %}
-		</form>
-	{% endif %}
-	{% if boatdamage.verified_at %}
-		Verifziert von {{ boatdamage.user_verified.name }} am/um {{ boatdamage.verified_at | date(format='%d. %m. %Y %H:%M') }}
-	{% elif loggedin_user.is_tech and boatdamage.fixed_at %}
-		<form action="/boatdamage/{{ boatdamage.id }}/verified" method="post">
-			<input type="text" name="desc" value="{{ boatdamage.desc }}" />
-			<input type="submit" value="Ich hab's verifiziert" />
-		</form>
-	{% endif %}
-	<hr />
-  {% endfor %}
+    <div data-filterable="true" data-filter="{{ boatdamage.boat.name }} {{ boatdamage.user_created.name }}" class="w-full border-t bg-white p-3 {% if boatdamage.verified_at %} opacity-50 {% endif %}">
+      <div>
+        <strong>{{ boatdamage.created_at | date(format='%d.%m.%Y') }} <span class="font-normal text-gray-600">({{ boatdamage.boat.name }})</span></strong>{% if boatdamage.boat.damage %}<small class="block text-gray-600">(Boot gesperrt)</small>{% endif %}
+        <div>{{ boatdamage.desc }}</div>
+        <small class="block text-gray-600">
+          Schaden eingetragen von {{ boatdamage.user_created.name }} am/um {{ boatdamage.created_at | date(format='%d.%m.%Y (%H:%M)') }}
+        </small>
 
+        {% if boatdamage.fixed_at %}
+          <small class="block text-gray-600">Repariert von {{ boatdamage.user_fixed.name }} am/um {{ boatdamage.fixed_at | date(format='%d.%m.%Y (%H:%M)') }}</small>
+        {% else %}
+          {% if loggedin_user.is_cox %}
+            <form action="/boatdamage/{{ boatdamage.id }}/fixed" method="post" class="mt-3">
+              <input type="hidden" name="desc" value="{{ boatdamage.desc }}" />
+              {% if loggedin_user.is_tech %}
+                <input type="submit" class="btn btn-primary"  value="Repariert und verifiziert" />
+              {% else %}
+                <input type="submit" class="btn btn-primary" value="Repariert" />
+              {% endif %}
+            </form>
+          {% endif %}
+        {% endif %}
+        
+        {% if boatdamage.verified_at %}
+          <small class="block text-gray-600">Verifziert von {{ boatdamage.user_verified.name }} am/um {{ boatdamage.verified_at | date(format='%d.%m.%Y (%H:%M)') }}</small>
+        {% else %}
+          {% if loggedin_user.is_tech and boatdamage.fixed_at  %}
+            <form action="/boatdamage/{{ boatdamage.id }}/verified" method="post" class="mt-3">
+              <input type="hidden" name="desc" value="{{ boatdamage.desc }}" />
+              <input type="submit" class="btn btn-dark"  value="Verifiziert" />
+            </form>
+          {% endif %}
+        {% endif %}
+      </div>
+    </div>
+  {% endfor %}
 </div>
 
 {% endblock content%}
diff --git a/templates/includes/forms/log.html.tera b/templates/includes/forms/log.html.tera
index df88d4d..75a5179 100644
--- a/templates/includes/forms/log.html.tera
+++ b/templates/includes/forms/log.html.tera
@@ -100,12 +100,12 @@
 {% endmacro new %}
 
 
-{% macro boat_select(only_ones) %}
+{% macro boat_select(only_ones, id="boat_id") %}
   {% if not only_ones %}
-      {{ macros::select(label="Boot", data=boats, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], wrapper_class="col-span-4") }}
+      {{ macros::select(label="Boot", data=boats, name="boat_id", id=id, display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], wrapper_class="col-span-4") }}
   {% else %}
     {% set ones = boats | filter(attribute="amount_seats", value=1) %}
-    {{ macros::select(label="Boot", data=ones, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], wrapper_class="col-span-4") }}
+    {{ macros::select(label="Boot", data=ones, name="boat_id", id=id, display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], wrapper_class="col-span-4") }}
   {% endif %}
 {% endmacro boat_select %}