From 926465a11cbd33febc1d1211d7e0a730aa2370d3 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Thu, 28 Sep 2023 16:40:05 +0200
Subject: [PATCH] [TASK] style boat screen

---
 templates/admin/boat/index.html.tera    |   8 +-
 templates/includes/forms/boat.html.tera | 104 ++++++++++++++----------
 templates/includes/macros.html.tera     |   2 +-
 3 files changed, 65 insertions(+), 49 deletions(-)

diff --git a/templates/admin/boat/index.html.tera b/templates/admin/boat/index.html.tera
index 750c523..1878d8f 100644
--- a/templates/admin/boat/index.html.tera
+++ b/templates/admin/boat/index.html.tera
@@ -9,11 +9,9 @@
 		<h1 class="h1">Boats</h1>
 		{{ boat::new() }}
 
-		<div class="bg-primary-100 p-3 rounded-b-md grid gap-4">
-			{% for boat in boats %}
-				{{ boat::edit(boat=boat, uuid=loop.index) }}
-			{% endfor %}
-		</div>
+		{% for boat in boats %}
+      {{ boat::edit(boat=boat, uuid=loop.index) }}
+    {% endfor %}
 
 	</div>
 
diff --git a/templates/includes/forms/boat.html.tera b/templates/includes/forms/boat.html.tera
index ac61476..93586e2 100644
--- a/templates/includes/forms/boat.html.tera
+++ b/templates/includes/forms/boat.html.tera
@@ -1,49 +1,67 @@
 {% macro new() %}
-	<form action="/admin/boat/new" method="post" class="mt-4 bg-primary-900 rounded-md text-white px-3 pb-3 pt-2 sm:flex items-end justify-between">
-		<div class="w-full">
-			<h2 class="text-md font-bold mb-2 uppercase tracking-wide">
-				Neues Boot hinzufügen
-			</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="Bootsbauer", name="boatbuilder", type="text") }}
-			{{ macros::select(label="Standort", data=locations, name='location_id', selected_id=1) }}
-			{{ macros::select(label="Besitzer", data=users, name='owner', default="Verein") }}
-			{{ macros::checkbox(label="handgesteuert", name="default_shipmaster_only_steering")}}
-			{{ macros::checkbox(label="Skull", name="skull", checked=true)}}
-			{{ macros::checkbox(label="Externes Boot (anderer Verein)", name="external")}}
-		</div>
-		<div class="text-right">
-			<input value="Hinzufügen" type="submit" class="w-28 mt-2 sm:mt-0 rounded-md bg-primary-500 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"/>
-		</div>
-	</form>
+  <div class="w-full">
+    <h2 class="text-md font-bold tracking-wide bg-primary-900 mt-3 p-3 text-white flex justify-between items-center rounded-md">
+      Neues Boot
+
+      <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="Neues Boot anlegen" data-body="#new-boat">
+        {% include "includes/plus-icon" %}
+        <span class="sr-only">Neues Boot anlegen</span>
+      </a>
+    </h2>
+    <div class="hidden">
+      <div id="new-boat">
+        <form action="/admin/boat/new" method="post" class="">
+          {{ 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="Bootsbauer", name="boatbuilder", type="text") }}
+          {{ macros::select(label="Standort", data=locations, name='location_id', selected_id=1) }}
+          {{ macros::select(label="Besitzer", data=users, name='owner', default="Verein") }}
+          <div class="my-3">
+            {{ macros::checkbox(label="handgesteuert", name="default_shipmaster_only_steering")}}
+            {{ macros::checkbox(label="Skull", name="skull", checked=true)}}
+            {{ macros::checkbox(label="Externes Boot (anderer Verein)", name="external")}}
+          </div>
+          <input value="Hinzufügen" type="submit" class="w-full mt-2 rounded-md bg-primary-500 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"/>
+        </form>
+      </div>
+    </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>
 {% endmacro new %}
 
 
 {% macro edit(boat, uuid) %}
-	<form action="/admin/boat/{{ boat.id }}" data-filterable="true" method="post" class="bg-white p-3 rounded-md flex items-end md:items-center justify-between">
-		<div class="w-full">
-			<input type="hidden" name="id" value="{{ boat.id }}"/>
-			<div class="font-bold mb-1">{{ boat.name }}<br/></div>
-			<div class="grid md:grid-cols-3">
-				{{ macros::input(label='Name', name='name', type='text', value=boat.name) }}
-				{{ macros::input(label='Amount Seats', name='amount_seats', type='number', min=0, value=boat.amount_seats) }}
-				{{ macros::select(data=locations, label='Standort', name='location_id', selected_id=boat.location_id) }}
-				{{ macros::select(data=users, label='Besitzer', name='owner', selected_id=boat.owner, default="Vereinsboot") }}
-				{{ macros::input(label='Baujahr', name='year_built', type='number', min=1950, value=boat.year_built) }}
-				{{ macros::input(label='Bootsbauer', name='boatbuilder', type='text', value=boat.boatbuilder) }}
-				{{ macros::checkbox(label='default_shipmaster_only_steering', name='default_shipmaster_only_steering', id=uuid , checked=boat.default_shipmaster_only_steering) }}
-				{{ macros::checkbox(label='skull', name='skull', id=uuid , checked=boat.skull) }}
-				{{ macros::checkbox(label='external', name='external', id=uuid , checked=boat.external) }}
-			</div>
-		</div>
-		<div class="grid gap-3">
-			<a href="/admin/boat/{{ boat.id }}/delete" class="inline-block btn btn-alert" onclick="return confirm('Wirklich löschen?');">
-				{% include "includes/delete-icon" %}
-				Löschen
-			</a>
-			<input value="Ändern" type="submit" class="w-28 btn btn-primary"/>
-		</div>
-	</form>
+  <div data-filterable="true" data-filter="{{ boat.name }}" class="w-full border-t">
+    <form action="/admin/boat/{{ boat.id }}" data-filterable="true" method="post" class="bg-white p-4 w-full">
+      <div class="w-full">
+        <input type="hidden" name="id" value="{{ boat.id }}"/>
+        <div class="font-bold mb-1">{{ boat.name }}<br/></div>
+        <div class="grid md:grid-cols-3 gap-3">
+          {{ macros::input(label='Name', name='name', type='text', value=boat.name) }}
+          {{ macros::input(label='Plätze', name='amount_seats', type='number', min=0, value=boat.amount_seats) }}
+          {{ macros::select(data=locations, label='Standort', name='location_id', selected_id=boat.location_id) }}
+          {{ macros::select(data=users, label='Besitzer', name='owner', selected_id=boat.owner, default="Vereinsboot") }}
+          {{ macros::input(label='Baujahr', name='year_built', type='number', min=1950, value=boat.year_built) }}
+          {{ macros::input(label='Bootsbauer', name='boatbuilder', type='text', value=boat.boatbuilder) }}
+          {{ macros::checkbox(label='hangesteuert', name='default_shipmaster_only_steering', id=uuid , checked=boat.default_shipmaster_only_steering) }}
+          {{ macros::checkbox(label='Skull', name='skull', id=uuid , checked=boat.skull) }}
+          {{ macros::checkbox(label='Externes Boot', name='external', id=uuid , checked=boat.external) }}
+        </div>
+      </div>
+      <div class="text-right mt-3">
+        <a href="/admin/boat/{{ boat.id }}/delete" class="inline-block btn btn-alert" onclick="return confirm('Wirklich löschen?');">
+          {% include "includes/delete-icon" %}
+          Löschen
+        </a>
+        <input value="Ändern" type="submit" class="w-28 btn btn-primary"/>
+      </div>
+    </form>
+  </div>
 {% endmacro edit %}
diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index 742a084..85555ec 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -80,7 +80,7 @@
     {% if display == '' %}
       {% set display = ["name"] %}
     {% endif %}
-    <select name="{{ name }}" {% if id %} id="{{ id }}" {% else %} id="{{ name }}" {% endif %} class="input rounded-md h-10 {{ class }}">
+    <select name="{{ name }}" {% if id %} id="{{ id }}" {% else %} id="{{ name }}" {% endif %} class="input rounded-md {{ class }}">
       {% if default %}
         <option selected value>{{ default }}</option>
       {% endif %}