Schwarztee/brass
1
0
Fork 0
Code Issues 16 Pull Requests Packages Projects 1 Releases Wiki Activity

refactor: use hyperscript instead of javascript

Browse Source
This commit is contained in:
Max Hohlfeld 2025-07-16 08:47:11 +02:00
parent 653dbb4233
commit 1d493b85b1
4 changed files with 29 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/snapshots/brass_web__endpoints__assignment__post_new__tests__inner_response_produces_updated_template.snap
View File

@ -30,7 +30,12 @@ snapshot_kind: text
</td> </td>
<td> <td>
<div class="dropdown"> <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"> <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>als Posten geplant</span> <span>als Posten geplant</span>

1
web/src/endpoints/assignment/mod.rs
View File

@ -1,6 +1,7 @@
use askama::Template; use askama::Template;
use crate::filters; use crate::filters;
use crate::utils::DateTimeFormat::{DayMonthYearHourMinute, HourMinute};
use brass_db::models::{Availability, AvailabilityAssignmentState, Event}; use brass_db::models::{Availability, AvailabilityAssignmentState, Event};
pub mod delete; pub mod delete;

24
web/static/utils.js
View File

@ -11,30 +11,6 @@ document.addEventListener("htmx:afterSwap", () => {
document.querySelectorAll("button[hx-trigger='confirmed']").forEach((value) => value.addEventListener("click", fireConfirmModal)); 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 // light / dark mode interpretation for first load and switch behaviour respecting localStorage and CSS prefers-color-scheme
const getCurrentTheme = () => { const getCurrentTheme = () => {
let current = localStorage.getItem("theme"); let current = localStorage.getItem("theme");

12
web/templates/events/plan_personal_table.html
View File

@ -27,14 +27,20 @@
{{ u.function|show_tree|safe }} {{ u.function|show_tree|safe }}
</td> </td>
<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>
<td> <td>
{{ availability.comment.as_deref().unwrap_or("") }} {{ availability.comment.as_deref().unwrap_or_default() }}
</td> </td>
<td> <td>
<div class="dropdown"> <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"> <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
{% match status %} {% match status %}
{% when AvailabilityAssignmentState::AssignedPosten(_) %} {% when AvailabilityAssignmentState::AssignedPosten(_) %}