From 0e143381cff7f4ef6f10ef5cac09a8653104ba92 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Wed, 27 Sep 2023 14:46:34 +0200
Subject: [PATCH] [TASK] streamline form

---
 frontend/main.ts                       |  9 +++-
 frontend/scss/components/_input.scss   | 45 ++++++-------------
 templates/includes/forms/log.html.tera | 60 +++++++++++++++-----------
 3 files changed, 56 insertions(+), 58 deletions(-)

diff --git a/frontend/main.ts b/frontend/main.ts
index d050c76..e434a6e 100644
--- a/frontend/main.ts
+++ b/frontend/main.ts
@@ -17,8 +17,15 @@ document.addEventListener('DOMContentLoaded', function() {
   selectBoatChange();
   addRelationMagic(<HTMLElement>document.querySelector('body'));
   reloadPage();
+  setCurrentdate(<HTMLInputElement>document.querySelector('#departure'));
 });
 
+function setCurrentdate(input: HTMLInputElement) {
+  if(input) {
+    input.value = (new Date().toJSON().slice(0,19));
+  }
+}
+
 function selectBoatChange() {
   const boatSelect = <HTMLSelectElement>document.querySelector('#boat_id');
 
@@ -77,7 +84,7 @@ function reloadPage() {
 
       if(!isPageActive){
           document.title = attentionMessage;
-      }else {
+      } else {
           document.title = pageTitle;
           location.reload();
       }
diff --git a/frontend/scss/components/_input.scss b/frontend/scss/components/_input.scss
index 77522dd..a83d016 100644
--- a/frontend/scss/components/_input.scss
+++ b/frontend/scss/components/_input.scss
@@ -47,14 +47,12 @@ select {
 .choices[data-type*=select-one] {
   cursor: pointer;
 }
-.choices[data-type*=select-one] .choices__inner {
-  padding-bottom: 7.5px;
-}
+
 .choices[data-type*=select-one] .choices__input {
   display: block;
   width: 100%;
   padding: 10px;
-  border-bottom: 1px solid #ddd;
+  @apply border-0 ring-1 ring-inset ring-gray-300;
   background-color: #fff;
   margin: 0;
 }
@@ -95,7 +93,7 @@ select {
   pointer-events: none;
 }
 .choices[data-type*=select-one].is-open::after {
-  border-color: transparent transparent #333 transparent;
+  @apply border-0 ring-1 ring-inset ring-gray-300;
   margin-top: -7.5px;
 }
 .choices[data-type*=select-one][dir=rtl]::after {
@@ -137,24 +135,16 @@ select {
 }
 
 .choices__inner {
-  display: inline-block;
-  vertical-align: top;
-  width: 100%;
-  padding: 7.5px 7.5px 3.75px;
-  border: 1px solid #ddd;
-  border-radius: 2.5px;
-  font-size: 14px;
-  min-height: 44px;
-  overflow: hidden;
+  @apply input rounded-md;
 }
 .is-focused .choices__inner, .is-open .choices__inner {
-  border-color: #b7b7b7;
+  @apply border-0 ring-1 ring-inset ring-gray-300;
 }
 .is-open .choices__inner {
-  border-radius: 2.5px 2.5px 0 0;
+  border-radius: 0;
 }
 .is-flipped.is-open .choices__inner {
-  border-radius: 0 0 2.5px 2.5px;
+  border-radius: 0;
 }
 
 .choices__list {
@@ -164,7 +154,6 @@ select {
 }
 .choices__list--single {
   display: inline-block;
-  padding: 4px 16px 4px 4px;
   width: 100%;
 }
 [dir=rtl] .choices__list--single {
@@ -182,11 +171,10 @@ select {
   display: inline-block;
   vertical-align: middle;
   @apply rounded-md bg-primary-600;
-  padding: 4px 10px;
+  padding: 0px 10px;
   font-size: 12px;
   font-weight: 500;
   margin-right: 3.75px;
-  margin-bottom: 3.75px;
   color: #fff;
   word-break: break-all;
   box-sizing: border-box;
@@ -199,12 +187,10 @@ select {
   margin-left: 3.75px;
 }
 .choices__list--multiple .choices__item.is-highlighted {
-  background-color: #00a5bb;
-  border: 1px solid #008fa1;
+  @apply bg-primary-900;
 }
 .is-disabled .choices__list--multiple .choices__item {
-  background-color: #aaaaaa;
-  border: 1px solid #919191;
+  @apply bg-gray-600;
 }
 
 .choices__list--dropdown, .choices__list[aria-expanded] {
@@ -213,7 +199,7 @@ select {
   position: absolute;
   width: 100%;
   background-color: #fff;
-  border: 1px solid #ddd;
+  @apply border;
   top: 100%;
   margin-top: -1px;
   border-bottom-left-radius: 2.5px;
@@ -226,7 +212,7 @@ select {
   visibility: visible;
 }
 .is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
-  border-color: #b7b7b7;
+  @apply border-0 ring-1 ring-inset ring-gray-300;
 }
 .is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
   top: auto;
@@ -274,7 +260,7 @@ select {
   }
 }
 .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
-  background-color: #f2f2f2;
+  @apply bg-gray-100;
 }
 .choices__list--dropdown .choices__item--selectable.is-highlighted::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
   opacity: 0.5;
@@ -299,8 +285,7 @@ select {
   font-weight: 600;
   font-size: 12px;
   padding: 10px;
-  border-bottom: 1px solid #f7f7f7;
-  color: gray;
+  @apply text-gray-400
 }
 
 .choices__button {
@@ -321,11 +306,9 @@ select {
   display: inline-block;
   vertical-align: baseline;
   font-size: 14px;
-  margin-bottom: 5px;
   border: 0;
   border-radius: 0;
   max-width: 100%;
-  padding: 4px 0 4px 2px;
 }
 .choices__input:focus {
   outline: 0;
diff --git a/templates/includes/forms/log.html.tera b/templates/includes/forms/log.html.tera
index 62b058a..e4f643a 100644
--- a/templates/includes/forms/log.html.tera
+++ b/templates/includes/forms/log.html.tera
@@ -32,26 +32,30 @@
 		{{ log::boat_select(only_ones=only_ones) }}
 
 		{% if allow_any_shipmaster %}
-			<select name="shipmaster" id="shipmaster" class="input rounded-md h-10">
-				<optgroup label="Steuerleute">
-					{% for cox in coxes %}
-						<option value="{{ cox.id }}" {% if cox.on_water %} disabled="disabled" {% else %} {% if cox.id == shipmaster %} selected {% endif %} {% endif %}>{{ cox.name }}
-							{% if cox.on_water %}
-								(am Wasser)
-							{% endif %}
-						</option>
-					{% endfor %}
-				</optgroup>
-				<optgroup label="Mitglieder">
-					{% for user in users | filter(attribute="is_cox", value=false) %}
-						<option value="{{ user.id }}" {% if user.id == shipmaster %} selected {% endif %} {% if user.on_water %} disabled="disabled" {% endif %}>{{ user.name }}
-							{% if user.on_water %}
-								(am Wasser)
-							{% endif %}
-						</option>
-					{% endfor %}
-				</optgroup>
-			</select>
+      <div>
+        <label for="shipmaster" class=" small text-gray-600 ">Schiffsführer</label>
+
+        <select name="shipmaster" id="shipmaster" class="input rounded-md h-10">
+          <optgroup label="Steuerleute">
+            {% for cox in coxes %}
+              <option value="{{ cox.id }}" {% if cox.on_water %} disabled="disabled" {% else %} {% if cox.id == shipmaster %} selected {% endif %} {% endif %}>{{ cox.name }}
+                {% if cox.on_water %}
+                  (am Wasser)
+                {% endif %}
+              </option>
+            {% endfor %}
+          </optgroup>
+          <optgroup label="Mitglieder">
+            {% for user in users | filter(attribute="is_cox", value=false) %}
+              <option value="{{ user.id }}" {% if user.id == shipmaster %} selected {% endif %} {% if user.on_water %} disabled="disabled" {% endif %}>{{ user.name }}
+                {% if user.on_water %}
+                  (am Wasser)
+                {% endif %}
+              </option>
+            {% endfor %}
+          </optgroup>
+        </select>
+      </div>
 		{% else %}
 			<input type="hidden" name="shipmaster" value="{{shipmaster}}"/>
 		{% endif %}
@@ -94,17 +98,21 @@
 
 
 {% macro boat_select(only_ones) %}
-	{% 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 %}
-		{% set ones = boats | filter(attribute="amount_seats", value=1) %}
-		{{ macros::select(data=ones, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], class="col-span-2") }}
-	{% endif %}
+ <div class="col-span-2">
+    <label for="boat_id" class=" small 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 %}
+      {% set ones = boats | filter(attribute="amount_seats", value=1) %}
+      {{ macros::select(data=ones, name='boat_id', display=["name", " (","amount_seats", " x)"], extras=["default_shipmaster_only_steering", "amount_seats", "on_water"], class="col-span-2") }}
+    {% endif %}
+  </div>
 {% endmacro boat_select %}
 
 {% 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>
 			<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 %}