From 1d493b85b1386ac16ff611c8401783d568787e79 Mon Sep 17 00:00:00 2001
From: Max Hohlfeld <maxhohlfeld@posteo.de>
Date: Wed, 16 Jul 2025 08:47:11 +0200
Subject: [PATCH] refactor: use hyperscript instead of javascript

---
 ...er_response_produces_updated_template.snap | 13 +++++---
 web/src/endpoints/assignment/mod.rs           |  1 +
 web/static/utils.js                           | 24 --------------
 web/templates/events/plan_personal_table.html | 32 +++++++++++--------
 4 files changed, 29 insertions(+), 41 deletions(-)

diff --git a/web/snapshots/brass_web__endpoints__assignment__post_new__tests__inner_response_produces_updated_template.snap b/web/snapshots/brass_web__endpoints__assignment__post_new__tests__inner_response_produces_updated_template.snap
index 60c58d4d..7cf8e584 100644
--- a/web/snapshots/brass_web__endpoints__assignment__post_new__tests__inner_response_produces_updated_template.snap
+++ b/web/snapshots/brass_web__endpoints__assignment__post_new__tests__inner_response_produces_updated_template.snap
@@ -30,7 +30,12 @@ snapshot_kind: text
       </td>
       <td>
         <div class="dropdown">
-          <div class="dropdown-trigger">
+          <div class="dropdown-trigger"
+               _="on click[.dropdown does not contain target] from elsewhere
+                      or keyup[key is 'Escape'] from elsewhere
+                      or click[parentElement of me does not match .is-active]
+                      remove .is-active from .dropdown end
+                  on click toggle .is-active on the parentElement of me">
             <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
               
               <span>als Posten geplant</span>
@@ -44,7 +49,7 @@ snapshot_kind: text
             <div class="dropdown-content" hx-target="closest table" hx-swap="outerHTML">
               
               <a class="dropdown-item"
-                hx-post="/assignments/new?event=1&availability=1&function=1" disabled>
+                 hx-post="/assignments/new?event=1&availability=1&function=1" disabled>
                 als Posten planen</a>
               
               
@@ -52,8 +57,8 @@ snapshot_kind: text
               
               <hr class="dropdown-divider" />
               <a class="dropdown-item"
-                hx-delete="/assignments/delete?event=1&availability=1"
-                class="button is-small">entplanen</a>
+                 hx-delete="/assignments/delete?event=1&availability=1"
+                 class="button is-small">entplanen</a>
               
             </div>
           </div>
diff --git a/web/src/endpoints/assignment/mod.rs b/web/src/endpoints/assignment/mod.rs
index 97d76f46..93a4603a 100644
--- a/web/src/endpoints/assignment/mod.rs
+++ b/web/src/endpoints/assignment/mod.rs
@@ -1,6 +1,7 @@
 use askama::Template;
 
 use crate::filters;
+use crate::utils::DateTimeFormat::{DayMonthYearHourMinute, HourMinute};
 
 use brass_db::models::{Availability, AvailabilityAssignmentState, Event};
 pub mod delete;
diff --git a/web/static/utils.js b/web/static/utils.js
index 4bac5e33..0ed13c6a 100644
--- a/web/static/utils.js
+++ b/web/static/utils.js
@@ -11,30 +11,6 @@ document.addEventListener("htmx:afterSwap", () => {
 	document.querySelectorAll("button[hx-trigger='confirmed']").forEach((value) => value.addEventListener("click", fireConfirmModal));
 });
 
-// dropdown activation / deactivation
-const toggleDropdown = (event) => {
-	const classList = event.target.closest('.dropdown').classList
-	if (!classList.contains('is-active')) {
-		Array.from(document.querySelectorAll('.dropdown')).forEach((d) => d.classList.remove('is-active'));
-	}
-	classList.toggle('is-active');
-};
-
-const closeDropdownsIfClickedOutside = (event) => {
-	const dropdowns = Array.from(document.querySelectorAll('.dropdown'));
-	if (dropdowns.every((v) => !v.contains(event.target))) {
-		dropdowns.forEach((d) => d.classList.remove('is-active'))
-	}
-}
-
-document.querySelectorAll(".dropdown-trigger .button").forEach((value) => value.addEventListener("click", toggleDropdown));
-document.addEventListener("click", closeDropdownsIfClickedOutside);
-
-document.addEventListener("htmx:afterSwap", () => {
-	document.querySelectorAll(".dropdown-trigger .button").forEach((value) => value.addEventListener("click", toggleDropdown));
-	document.addEventListener("click", closeDropdownsIfClickedOutside);
-});
-
 // light / dark mode interpretation for first load and switch behaviour respecting localStorage and CSS prefers-color-scheme
 const getCurrentTheme = () => {
 	let current = localStorage.getItem("theme");
diff --git a/web/templates/events/plan_personal_table.html b/web/templates/events/plan_personal_table.html
index edae46b4..88edb888 100644
--- a/web/templates/events/plan_personal_table.html
+++ b/web/templates/events/plan_personal_table.html
@@ -27,14 +27,20 @@
         {{ u.function|show_tree|safe }}
       </td>
       <td>
-        {{ availability.start.format("%R") }} bis {{ availability.end.format("%d.%m.%Y %R") }}
+        {{ availability.start|fmt_datetime(HourMinute) }} bis {{ availability.end|fmt_datetime(DayMonthYearHourMinute)
+        }}
       </td>
       <td>
-        {{ availability.comment.as_deref().unwrap_or("") }}
+        {{ availability.comment.as_deref().unwrap_or_default() }}
       </td>
       <td>
         <div class="dropdown">
-          <div class="dropdown-trigger">
+          <div class="dropdown-trigger"
+               _="on click[.dropdown does not contain target] from elsewhere
+                      or keyup[key is 'Escape'] from elsewhere
+                      or click[parentElement of me does not match .is-active]
+                      remove .is-active from .dropdown end
+                  on click toggle .is-active on the parentElement of me">
             <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
               {% match status %}
               {% when AvailabilityAssignmentState::AssignedPosten(_) %}
@@ -64,28 +70,28 @@
             <div class="dropdown-content" hx-target="closest table" hx-swap="outerHTML">
               {% if u.function.is_posten() %}
               <a class="dropdown-item"
-                hx-post="/assignments/new?event={{ event.id }}&availability={{ availability.id }}&function=1" {% if
-                !further_posten_required || status !=AvailabilityAssignmentState::Unassigned|ref %}disabled{% endif %}>
+                 hx-post="/assignments/new?event={{ event.id }}&availability={{ availability.id }}&function=1" {% if
+                 !further_posten_required || status !=AvailabilityAssignmentState::Unassigned|ref %}disabled{% endif %}>
                 als Posten planen</a>
               {% endif %}
               {% if u.function.is_fuehrungsassistent() %}
               <a class="dropdown-item"
-                hx-post="/assignments/new?event={{ event.id }}&availability={{ availability.id }}&function=5" {% if
-                !further_fuehrungsassistent_required || status !=AvailabilityAssignmentState::Unassigned|ref
-                %}disabled{% endif %}>als Führungsassistent planen</a>
+                 hx-post="/assignments/new?event={{ event.id }}&availability={{ availability.id }}&function=5" {% if
+                 !further_fuehrungsassistent_required || status !=AvailabilityAssignmentState::Unassigned|ref
+                 %}disabled{% endif %}>als Führungsassistent planen</a>
               {% endif %}
               {% if u.function.is_wachhabender() %}
               <a class="dropdown-item"
-                hx-post="/assignments/new?event={{ event.id }}&availability={{ availability.id }}&function=10" {% if
-                !further_wachhabender_required || status !=AvailabilityAssignmentState::Unassigned|ref %}disabled{%
-                endif %}>als Wachhabender planen</a>
+                 hx-post="/assignments/new?event={{ event.id }}&availability={{ availability.id }}&function=10" {% if
+                 !further_wachhabender_required || status !=AvailabilityAssignmentState::Unassigned|ref %}disabled{%
+                 endif %}>als Wachhabender planen</a>
               {% endif %}
               {% if status != AvailabilityAssignmentState::Unassigned|ref && status !=
               AvailabilityAssignmentState::Conflicting|ref %}
               <hr class="dropdown-divider" />
               <a class="dropdown-item"
-                hx-delete="/assignments/delete?event={{ event.id }}&availability={{ availability.id }}"
-                class="button is-small">entplanen</a>
+                 hx-delete="/assignments/delete?event={{ event.id }}&availability={{ availability.id }}"
+                 class="button is-small">entplanen</a>
               {% endif %}
             </div>
           </div>