[TASK] style boat damage screen

frontend/main.ts

@@ -92,6 +92,7 @@ function reloadPage() {
 }
 
 function setMaxAmountRowers(rowers: number, isShipmasterSteering='false') {
+  if(choiceObjects['newrower']) {
     let curSelection = choiceObjects['newrower'].getValue(true);
     let amount_to_delete = (<any>curSelection).length - rowers;
 
@@ -136,6 +137,7 @@ function setMaxAmountRowers(rowers: number, isShipmasterSteering='false') {
       }
     }
   }
+}
 
 function initBoatActions() {
   const boatSelects = document.querySelectorAll('.boats-js[data-onclick="true"]');

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">
+  <h2 class="text-md font-bold tracking-wide bg-primary-900 mt-3 p-3 text-white flex justify-between items-center rounded-md">
-  	{{ log::boat_select(only_ones=false) }}
+    Neuen Schaden
-  	{{ macros::input(label='Beschreibung des Schadens', name='desc', type='text', required=true) }}
+
+    <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) }}
-	<input type="submit" value="Schaden eintragen" />
+        </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>
-  <hr />
-
 
   {% for boatdamage in boatdamages %}
-  	Boat: {{ boatdamage.boat.name }}
+    <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 %}">
-	Desc: {{ boatdamage.desc }}
+      <div>
-	Schaden eingetragen von {{ boatdamage.user_created.name }} am/um {{ boatdamage.created_at | date(format='%d. %m. %Y %H:%M') }}
+        <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 %}
-	{% if boatdamage.is_lock %}
+        <div>{{ boatdamage.desc }}</div>
-		Boot gesperrt
+        <small class="block text-gray-600">
-	{% endif %}
+          Schaden eingetragen von {{ boatdamage.user_created.name }} am/um {{ boatdamage.created_at | date(format='%d.%m.%Y (%H:%M)') }}
-	{% if boatdamage.fixed_at %}
+        </small>
-		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 %}
 
+        {% 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%}

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 %}