From 81b99ef414dc77eaa81395177bf23a5893ae3ba1 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Mon, 5 May 2025 21:14:23 +0200
Subject: [PATCH] [TASK] edit form on logbook fixes #635

---
 frontend/scss/components/_links.scss   |  4 ++
 templates/includes/forms/log.html.tera | 55 ++++++++++++++++++--------
 2 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/frontend/scss/components/_links.scss b/frontend/scss/components/_links.scss
index ccf00a0..2643d63 100644
--- a/frontend/scss/components/_links.scss
+++ b/frontend/scss/components/_links.scss
@@ -11,6 +11,10 @@
     @apply text-white hover:text-primary-100 underline;
   }
 
+  &-black {
+    @apply text-black hover:text-primary-950 dark:text-white hover:dark:text-primary-300 underline;
+  }
+
   &-no-underline {
     @apply no-underline;
   }
diff --git a/templates/includes/forms/log.html.tera b/templates/includes/forms/log.html.tera
index 04a3b6e..66e6f50 100644
--- a/templates/includes/forms/log.html.tera
+++ b/templates/includes/forms/log.html.tera
@@ -183,8 +183,6 @@
     <div class="border-t bg-white dark:bg-primary-900 py-3 px-4 relative"
          data-filterable="true"
          data-filter="{{ log.boat.name }} {% for rower in log.rowers %}{{ rower.name }}{% endfor %}">
-        <details>
-            <summary style="list-style: none;">
                 {% if log.logtype and not hide_type %}
                     <div class="absolute top-0 right-0 bg-primary-100 rounded-bl-md text-primary-950 text-xs w-32 px-2 py-1 text-center font-bold">
                         {% if log.logtype == 1 %}
@@ -199,7 +197,15 @@
                     </div>
                 {% endif %}
                 <div {% if log.logtype %}class="mt-4 sm:mt-0"{% endif %}>
-                    <strong class="text-black dark:text-white">{{ log.boat.name }}</strong>
+                     {% if allowed_to_edit %}
+                        <a href="#"
+                              onclick="document.getElementById('change-{{ log.id }}').showModal()"
+                              class="link link-black font-bold">{{ log.boat.name }}</a>
+                     {% else %}
+                        <strong class="text-black dark:text-white">
+                              {{ log.boat.name }}
+                        </strong>
+                     {% endif %}
                     <small class="text-gray-600 dark:text-gray-100">({{ log.shipmaster_user.name -}}
                         {% if log.shipmaster_only_steering %}
                             - handgesteuert
@@ -252,35 +258,52 @@
                             {% endif %}
                         {% endif %}
                     </div>
-                </summary>
-                {% if allowed_to_edit %}
-                    <form action="/log/update" method="post">
+            {% if allowed_to_edit %}
+                      <dialog id="change-{{ log.id }}"
+                              class="max-w-screen-sm w-full dark:bg-primary-900 dark:text-white rounded-md"
+                              onclick="document.getElementById('change-{{ log.id }}').close()">
+                          <div onclick="event.stopPropagation();" class="p-3">
+                              <button type="button"
+                                      onclick="document.getElementById('change-{{ log.id }}').close()"
+                                      title="Schließen"
+                                      class="sidebar-close border-0 bg-primary-100 focus:bg-primary-50 text-black flex items-center justify-center transform rotate-45 absolute right-0 mr-3">
+                                  <svg class="inline h-5 w-5"
+                                        width="16"
+                                        height="16"
+                                        fill="currentColor"
+                                        viewBox="0 0 16 16">
+                                      <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
+                                  </svg>
+                              </button>
+                              <div class="mt-8">
+                              <h2 class="h3">Eintrag '{{ log.boat.name }}' ändern </h2>
+                              <p class="text-center mb-3">{{ log.id }}</p>
+                               <form action="/log/update" method="post" class="grid gap-3">
                         <input type="hidden" name="id" value="{{ log.id }}" />
                         <input type="hidden" name="boat_id" value="{{ log.boat_id }}" />
                         <input type="hidden" name="shipmaster" value="{{ log.shipmaster }}" />
                         <input type="hidden"
                                name="steering_person"
                                value="{{ log.steering_person }}" />
-                        Handgesteuert:
-                        <input type="checkbox"
-                               name="shipmaster_only_steering"
-                               {% if log.shipmaster_only_steering %}checked="checked"{% endif %} />
-                        <input type="datetime-local" name="departure" value="{{ log.departure }}" />
-                        <input type="datetime-local" name="arrival" value="{{ log.arrival }}" />
+                        {{ macros::checkbox(label='Handgesteuert', name='shipmaster_only_steering', id=log.shipmaster_only_steering,checked=log.shipmaster_only_steering) }}
+                        <input type="datetime-local" class="input rounded-md" name="departure" value="{{ log.departure }}" />
+                        <input type="datetime-local" class="input rounded-md" name="arrival" value="{{ log.arrival }}" />
                         <input type="hidden" name="destination" value="{{ log.destination }}" />
                         <input type="hidden" name="distance_in_km" value="{{ log.distance_in_km }}" />
                         <input type="hidden" name="comments" value="{{ log.comments }}" />
                         <input type="hidden" name="logtype" value="{{ log.logtype }}" />
-                        <input type="submit" value="Updaten" />
+                        <input type="submit" class="btn btn-primary" value="Updaten" />
                     </form>
                     <a href="/log/{{ log.id }}/delete"
-                       class="w-28 btn btn-alert"
+                       class="w-28 btn btn-alert mt-3"
                        onclick="return confirm('Willst du diesen Logbucheintrag wirklich löschen?');">
                         {% include "includes/delete-icon" %}
                         Löschen
                     </a>
-                {% endif %}
-            </details>
+                        </div>
+                        </div>
+                      </dialog>
+            {% endif %}
         </div>
     {% endmacro show_old %}
     {% macro home(log) %}