From d8049dd1e67090c28b1da27675cb40bb9910ac72 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Sat, 8 Apr 2023 09:17:46 +0200
Subject: [PATCH] [TASK] refactor sidebar

---
 frontend/main.ts          | 16 ++++++++--------
 templates/index.html.tera |  8 ++++----
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/main.ts b/frontend/main.ts
index be3479b..678ce29 100644
--- a/frontend/main.ts
+++ b/frontend/main.ts
@@ -118,16 +118,16 @@ function initSidebar() {
 
 function initTripSidebar(triggerElement: HTMLElement) {
   const sidebarElement = <HTMLElement>document.querySelector('#sidebar');
-  if(sidebarElement && triggerElement.dataset.form && triggerElement.dataset.header) {
-    let form = <HTMLElement>document.querySelector(triggerElement.dataset.form);
-    let formElement = <HTMLElement>form.cloneNode(true);
-    let formContainerElement = <HTMLElement>sidebarElement.querySelector('.body-js');
-    if(formContainerElement) {
-      formContainerElement.innerHTML = '';
-      formContainerElement.append(formElement);
+  if(sidebarElement && triggerElement.dataset.body && triggerElement.dataset.header) {
+    let body = <HTMLElement>document.querySelector(triggerElement.dataset.body);
+    let bodyElement = <HTMLElement>body.cloneNode(true);
+    let bodyContainerElement = <HTMLElement>sidebarElement.querySelector('.body-js');
+    if(bodyContainerElement) {
+      bodyContainerElement.innerHTML = '';
+      bodyContainerElement.append(bodyElement);
     }
     if(triggerElement.dataset.day) {
-      let hiddenElement = <HTMLInputElement>formElement.querySelector('.day-js');
+      let hiddenElement = <HTMLInputElement>bodyElement.querySelector('.day-js');
       if(hiddenElement) {
         hiddenElement.value = triggerElement.dataset.day;
       }
diff --git a/templates/index.html.tera b/templates/index.html.tera
index bac3b71..e1e6e9d 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -47,7 +47,7 @@
                 
               <a href="#" data-sidebar="true" data-trigger="sidebar" 
                 data-header="<strong>{{ planned_event.planned_starting_time }} Uhr</strong> ({{ planned_event.name }}){% if planned_event.notes %}<small class='block'>{{ planned_event.notes }}</small>{% endif %}"
-                data-form="#event{{ planned_event.trip_details_id }}"
+                data-body="#event{{ planned_event.trip_details_id }}"
                 class="inline-block link-primary mr-3">
                 Details
               </a>
@@ -145,7 +145,7 @@
                 class="text-gray-600">({{ trip.cox_name }})</small><br />
               <a href="#" data-sidebar="true" data-trigger="sidebar" 
                 data-header="<strong>{{ trip.planned_starting_time }} Uhr</strong> ({{ trip.cox_name }}){% if trip.notes %}<small class='block'>{{ trip.notes }}</small>{% endif %}"
-                data-form="#trip{{ trip.trip_details_id }}"
+                data-body="#trip{{ trip.trip_details_id }}"
                 class="inline-block link-primary mr-3">
                 Details
               </a>
@@ -214,7 +214,7 @@
         <a href="#" data-sidebar="true" data-trigger="sidebar" 
           data-header="<strong>Event</strong> am {{ day.day| date(format='%d.%m.%Y') }} erstellen"
           data-day="{{ day.day }}"
-          data-form="#addEventForm"
+          data-body="#addEventForm"
           class="relative inline-block w-full bg-primary-900 hover:bg-primary-950 focus:bg-primary-950 text-white py-2 rounded-bl-md text-sm font-semibold">
           <span class="absolute inset-y-0 left-0 flex items-center pl-3">
             {% include "includes/plus-icon" %}
@@ -227,7 +227,7 @@
         <a href="#" data-sidebar="true" data-trigger="sidebar" 
           data-header="<strong>Ausfahrt</strong> am {{ day.day| date(format='%d.%m.%Y') }} erstellen"
           data-day="{{ day.day }}"
-          data-form="#sidebarForm"
+          data-body="#sidebarForm"
           class="relative inline-block w-full py-2 text-primary-900 hover:text-primary-950 focus:text-primary-950 text-sm font-semibold bg-gray-100 hover:bg-gray-200 focus:bg-gray-200 {% if loggedin_user.is_admin %} rounded-br-md {% else %} rounded-b-md {% endif %}">
           <span class="absolute inset-y-0 left-0 flex items-center pl-3">
             {% include "includes/plus-icon" %}