refactor: overview navigation

This commit is contained in:
Max Hohlfeld 2024-06-29 14:52:23 +02:00
parent 43169b585a
commit d0c0b2aa38
4 changed files with 268 additions and 221 deletions

View File

@ -1,6 +1,12 @@
pub fn show_area_query(a: &Option<i32>) -> ::askama::Result<String> {
pub fn show_area_query(a: &Option<i32>, first: bool) -> ::askama::Result<String> {
let char = if first {
'?'
} else {
'&'
};
if let Some(a) = a {
return Ok(format!("&area={}", a));
return Ok(format!("{}area={}", char, a));
} else {
return Ok(String::new());
}

View File

@ -43,6 +43,10 @@
opacity: 0;
transition: opacity 2s ease-in;
}
section.htmx-request {
visibility: hidden;
}
</style>
</head>

View File

@ -1,12 +1,13 @@
{% extends "nav.html" %}
{% block content %}
<section class="section">
<div hx-indicator="#progress">
<section class="section">
<div class="container">
<div class="level">
<div class="level-left">
<a hx-boost="true" class="button is-link level-item"
href="/?date={{ date.pred() }}{{ selected_area|show_area_query }}">
href="/?date={{ date.pred() }}{{ selected_area|show_area_query(false) }}">
<span class="icon">
<svg class="feather">
<use href="/static/feather-sprite.svg#arrow-left" />
@ -16,7 +17,9 @@
</div>
<div class="control level-item is-flex-grow-0">
<input id="date-selector" class="input" type="date" value="{{ date }}">
<input class="input" type="date" name="date" value="{{ date }}" hx-target="closest body"
hx-get="/{{ selected_area|show_area_query(true) }}" hx-push-url="true">
{% if user.role == Role::Admin %}
<div class="select ml-2">
<select hx-get="/?date={{ date }}" hx-target="closest body" hx-push-url="true" name="area">
@ -35,7 +38,7 @@
<div class="level-right">
<a hx-boost="true" class="button is-link level-item"
href="/?date={{ date.succ() }}{{ selected_area|show_area_query }}">
href="/?date={{ date.succ() }}{{ selected_area|show_area_query(false) }}">
<span class="icon">
<svg class="feather">
<use href="/static/feather-sprite.svg#arrow-right" />
@ -43,12 +46,13 @@
</span>
</a>
</div>
</div>
</div>
</section>
<section class="section">
<progress id="progress" class="progress is-small is-link is-light htmx-indicator" max="100" />
</div>
</section>
<section id="progress" class="section">
<div class="container">
<div class="level">
<div class="level-left">
@ -91,9 +95,9 @@
{% endfor %}
{% endif %}
</div>
</section>
</section>
<section class="section">
<section id="progress" class="section">
<div class="container">
<div class="level">
<div class="level-left">
@ -101,8 +105,8 @@
Verfügbarkeiten am {{ date.format("%d.%m.%Y") }}
</h3>
</div>
{% if (user.role == Role::Admin || user.role == Role::AreaManager) && selected_area.is_some() &&
selected_area.unwrap() == user.area_id %}
{% if (user.role == Role::Admin || user.role == Role::AreaManager) && (selected_area.is_none() ||
selected_area.unwrap() == user.area_id) %}
<div class="level-right">
<a class="button" href="/availabillity/new?date={{ date }}">Neue Verfügbarkeit für diesen Tag</a>
</div>
@ -166,7 +170,8 @@
{% endif %}
</div>
</section>
</section>
</div>
<script>
document.getElementsByName("delete-availabillity")
@ -184,14 +189,5 @@
}
});
}));
document.getElementById("date-selector").addEventListener("change", (event) => {
if (event.target.value) {
document.location.replace(`/?date=${event.target.value}`)
} else {
document.location.replace("/")
}
});
</script>
{% endblock %}

View File

@ -5,22 +5,41 @@
<div class="container">
<h1 class="title">Profil</h1>
<div class="field">
<section class="section">
<h5 class="title is-5">Allgemeines</h5>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Name</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" type="text" value="{{ user.name }}" readonly>
<input class="input is-static" type="text" value="{{ user.name }}" readonly>
</div>
</div>
</div>
</div>
<div class="field">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">E-Mail</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" type="email" value="{{ user.name }}" readonly>
<input class="input is-static" type="email" value="{{ user.name }}" readonly>
</div>
</div>
</div>
</div>
<div class="field">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Rolle</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
{% match user.role %}
{% when Role::Staff %}
@ -33,9 +52,15 @@
{% endmatch %}
</div>
</div>
</div>
</div>
<div class="field">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Funktion</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
{% match user.function %}
{% when Function::Posten %}
@ -46,14 +71,25 @@
{% endmatch %}
</div>
</div>
</div>
</div>
<div class="field">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Bereich</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" type="text" value="{{ user.area.as_ref().unwrap().name }}" readonly>
<input class="input is-static" type="text" value="{{ user.area.as_ref().unwrap().name }}" readonly>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<h5 class="title is-5">Benachrichtigungen</h5>
<div class="field">
<div class="control">
@ -62,7 +98,7 @@
hx-on::before-request="document.getElementById('success').classList.remove('fadeout')"
hx-on::after-request="document.getElementById('success').classList.add('fadeout')"
checked="{{ user.receive_notifications }}">
Ich möchte E-Mail Benachrichtungen zu neuen Brasiwa-Einteilungen erhalten.
Ich möchte E-Mail Benachrichtigungen zu neuen Brasiwa-Einteilungen erhalten.
<span id="success" class="result">
<span class="icon mr-2">
<svg class="feather">
@ -76,6 +112,10 @@
</label>
</div>
</div>
</section>
<section class="section">
<h5 class="title is-5">Passwort</h5>
<div class="field">
<div class="control">
@ -83,6 +123,7 @@
class="button is-link is-light">Passwort ändern</button>
</div>
</div>
</section>
</div>
</section>