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

refactor: style planning

Browse Source
This commit is contained in:
Max Hohlfeld 2025-01-26 13:55:10 +01:00
parent fdbc8c7ab5
commit 2cae816741
5 changed files with 89 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/models/availabillity.rs
View File

@ -27,7 +27,7 @@ pub enum AvailabillityAssignmentState {
// availabillity is assigned to this event as Führungsassistent
AssignedFührungsassistent(i32),
// availabillity is assigned to this event as Wachhabender
AssignedWachahabender(i32),
AssignedWachhabender(i32),
}
impl Display for AvailabillityAssignmentState {
@ -37,7 +37,7 @@ impl Display for AvailabillityAssignmentState {
AvailabillityAssignmentState::Conflicting => write!(f, "bereits anders zugewiesen"),
AvailabillityAssignmentState::AssignedPosten(_) => write!(f, "zugewiesen als Posten"),
AvailabillityAssignmentState::AssignedFührungsassistent(_) => write!(f, "zugewiesen als Führungsassistent"),
AvailabillityAssignmentState::AssignedWachahabender(_) => write!(f, "zugewiesen als Wachhabender"),
AvailabillityAssignmentState::AssignedWachhabender(_) => write!(f, "zugewiesen als Wachhabender"),
}
}
}

2
web/src/utils/event_planning_template.rs
View File

@ -35,7 +35,7 @@ pub async fn generate_availabillity_assignment_list(
)
}
Function::Wachhabender => {
AvailabillityAssignmentState::AssignedWachahabender(assignment.availabillity_id)
AvailabillityAssignmentState::AssignedWachhabender(assignment.availabillity_id)
}
};

7
web/static/style.scss
View File

@ -17,6 +17,7 @@ $primary: $crimson,
@forward "bulma/sass/components/pagination";
@forward "bulma/sass/components/navbar";
@forward "bulma/sass/components/message";
@forward "bulma/sass/components/dropdown";
@forward "bulma/sass/elements/button";
@forward "bulma/sass/elements/box";
@ -74,3 +75,9 @@ $primary: $crimson,
section.htmx-request {
visibility: hidden;
}
a.dropdown-item[disabled] {
color: hsl(221, 14%, 48%); // $grey;
cursor: default;
pointer-events: none;
}

24
web/static/utils.js
View File

@ -11,6 +11,30 @@ 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");

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

@ -14,8 +14,7 @@
<th>Funktion</th>
<th>Zeitraum</th>
<th>Kommentar</th>
<th>Status</th>
<th>Planen als</th>
<th>Planung</th>
<th></th>
</tr>
</thead>
@ -39,32 +38,63 @@
{{ availabillity.comment.as_deref().unwrap_or("") }}
</td>
<td>
{{ status }}
</td>
<td>
<div class="buttons has-addons">
<button hx-post="/assignments/new?event={{ event.id }}&availabillity={{ availabillity.id }}&function=1"
hx-target="closest table" hx-swap="outerHTML" class="button is-small" {% if !further_posten_required ||
status !=AvailabillityAssignmentState::Unassigned|ref %}disabled{% endif %}>Posten</button>
{% if u.function == Function::Wachhabender || u.function == Function::Fuehrungsassistent %}
<button hx-post="/assignments/new?event={{ event.id }}&availabillity={{ availabillity.id }}&function=5"
hx-target="closest table" hx-swap="outerHTML" class="button is-small" {% if
!further_fuehrungsassistent_required || status !=AvailabillityAssignmentState::Unassigned|ref
%}disabled{% endif %}>Führungsassistent</button>
{% endif %}
{% if u.function == Function::Wachhabender %}
<button hx-post="/assignments/new?event={{ event.id }}&availabillity={{ availabillity.id }}&function=10"
hx-target="closest table" hx-swap="outerHTML" class="button is-small" {% if !further_wachhabender_required
|| status !=AvailabillityAssignmentState::Unassigned|ref %}disabled{% endif %}>Wachhabender</button>
{% endif %}
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
{% match status %}
{% when AvailabillityAssignmentState::AssignedPosten(_) %}
<span>als Posten geplant</span>
<svg class="icon">
<use href="/static/feather-sprite.svg#edit-2" />
</svg>
{% when AvailabillityAssignmentState::AssignedFührungsassistent(_) %}
<span>als Führungsassistent geplant</span>
<svg class="icon">
<use href="/static/feather-sprite.svg#edit-2" />
</svg>
{% when AvailabillityAssignmentState::AssignedWachhabender(_) %}
<span>als Wachhabender geplant</span>
<svg class="icon">
<use href="/static/feather-sprite.svg#edit" />
</svg>
{% when _ %}
<span>Planen</span>
<svg class="icon">
<use href="/static/feather-sprite.svg#chevron-down" />
</svg>
{% endmatch %}
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content" hx-target="closest table" hx-swap="outerHTML">
<a class="dropdown-item"
hx-post="/assignments/new?event={{ event.id }}&availabillity={{ availabillity.id }}&function=1" {% if
!further_posten_required || status !=AvailabillityAssignmentState::Unassigned|ref %}disabled{% endif %}>
als Posten planen</a>
{% if u.function == Function::Wachhabender || u.function == Function::Fuehrungsassistent %}
<a class="dropdown-item"
hx-post="/assignments/new?event={{ event.id }}&availabillity={{ availabillity.id }}&function=5" {% if
!further_fuehrungsassistent_required || status !=AvailabillityAssignmentState::Unassigned|ref
%}disabled{% endif %}>als Führungsassistent planen</a>
{% endif %}
{% if u.function == Function::Wachhabender %}
<a class="dropdown-item"
hx-post="/assignments/new?event={{ event.id }}&availabillity={{ availabillity.id }}&function=10" {% if
!further_wachhabender_required || status !=AvailabillityAssignmentState::Unassigned|ref %}disabled{%
endif %}>als Wachhabender planen</a>
{% endif %}
{% if status != AvailabillityAssignmentState::Unassigned|ref && status !=
AvailabillityAssignmentState::Conflicting|ref %}
<hr class="dropdown-divider" />
<a class="dropdown-item"
hx-delete="/assignments/delete?event={{ event.id }}&availabillity={{ availabillity.id }}"
class="button is-small">entplanen</a>
{% endif %}
</div>
</div>
</div>
</td>
<td>
{% if status != AvailabillityAssignmentState::Unassigned|ref && status !=
AvailabillityAssignmentState::Conflicting|ref %}
<button hx-delete="/assignments/delete?event={{ event.id }}&availabillity={{ availabillity.id }}"
hx-target="closest table" hx-swap="outerHTML" class="button is-small">Entplanen</button>
{% endif %}
</td>
</tr>
{% endfor %}