refactor: overview navigation
This commit is contained in:
parent
43169b585a
commit
d0c0b2aa38
@ -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());
|
||||
}
|
||||
|
||||
@ -43,6 +43,10 @@
|
||||
opacity: 0;
|
||||
transition: opacity 2s ease-in;
|
||||
}
|
||||
|
||||
section.htmx-request {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
@ -1,172 +1,177 @@
|
||||
{% extends "nav.html" %}
|
||||
|
||||
{% block content %}
|
||||
<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 }}">
|
||||
<span class="icon">
|
||||
<svg class="feather">
|
||||
<use href="/static/feather-sprite.svg#arrow-left" />
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<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(false) }}">
|
||||
<span class="icon">
|
||||
<svg class="feather">
|
||||
<use href="/static/feather-sprite.svg#arrow-left" />
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="control level-item is-flex-grow-0">
|
||||
<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">
|
||||
{% for area in areas %}
|
||||
{% if (user.area_id == area.id && selected_area.is_none()) || selected_area.is_some() &&
|
||||
selected_area.unwrap() == area.id %}
|
||||
<option selected value="{{ area.id }}">{{ area.name }}</option>
|
||||
{% else %}
|
||||
<option value="{{ area.id }}">{{ area.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="level-right">
|
||||
<a hx-boost="true" class="button is-link level-item"
|
||||
href="/?date={{ date.succ() }}{{ selected_area|show_area_query(false) }}">
|
||||
<span class="icon">
|
||||
<svg class="feather">
|
||||
<use href="/static/feather-sprite.svg#arrow-right" />
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control level-item is-flex-grow-0">
|
||||
<input id="date-selector" class="input" type="date" value="{{ date }}">
|
||||
{% 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">
|
||||
{% for area in areas %}
|
||||
{% if (user.area_id == area.id && selected_area.is_none()) || selected_area.is_some() &&
|
||||
selected_area.unwrap() == area.id %}
|
||||
<option selected value="{{ area.id }}">{{ area.name }}</option>
|
||||
{% else %}
|
||||
<option value="{{ area.id }}">{{ area.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
<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">
|
||||
<h3 class="title is-3">
|
||||
Events am {{ date.format("%d.%m.%Y") }}
|
||||
</h3>
|
||||
</div>
|
||||
{% 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="/events/new?date={{ date }}">Neues Event für diesen Tag</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="level-right">
|
||||
<a hx-boost="true" class="button is-link level-item"
|
||||
href="/?date={{ date.succ() }}{{ selected_area|show_area_query }}">
|
||||
<span class="icon">
|
||||
<svg class="feather">
|
||||
<use href="/static/feather-sprite.svg#arrow-right" />
|
||||
</svg>
|
||||
{% if events.len() == 0 %}
|
||||
<div class="box">
|
||||
<h5 class="subtitle is-5">keine Events geplant</h5>
|
||||
</div>
|
||||
{% else %}
|
||||
{% for event in events %}
|
||||
<div class="box">
|
||||
{% if event.canceled %}<b>Veranstaltung abgesagt!</b>{% endif %}
|
||||
<div class="level">
|
||||
<h5 class="title is-5 level-left">{{ event.name }}</h5>
|
||||
<span class="level-right">
|
||||
{% if user.role == Role::AreaManager || user.role == Role::Admin %}
|
||||
<a href="/assignments/new?event={{ event.id }}" class="button is-primary level-item">Planen</a>
|
||||
<a href="" class="button is-primary-light level-item">bearbeiten</a>
|
||||
<a href="" class="button is-warning level-item">als abgesagt markieren</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<h3 class="title is-3">
|
||||
Events am {{ date.format("%d.%m.%Y") }}
|
||||
</h3>
|
||||
</div>
|
||||
{% 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="/events/new?date={{ date }}">Neues Event für diesen Tag</a>
|
||||
</div>
|
||||
<p>Ort: {{ event.location.as_ref().unwrap().name }}</p>
|
||||
<p>Zeitraum: {{ event.start_time }} bis {{ event.end_time }}</p>
|
||||
<p>Anzahl der Posten: {{ event.amount_of_posten }}</p>
|
||||
<p>Wachhabender durch FF gestellt: {{ event.voluntary_wachhabender }}</p>
|
||||
<p>Kleidungsordnung: {{ event.clothing }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% if events.len() == 0 %}
|
||||
<div class="box">
|
||||
<h5 class="subtitle is-5">keine Events geplant</h5>
|
||||
</div>
|
||||
{% else %}
|
||||
{% for event in events %}
|
||||
<div class="box">
|
||||
{% if event.canceled %}<b>Veranstaltung abgesagt!</b>{% endif %}
|
||||
<section id="progress" class="section">
|
||||
<div class="container">
|
||||
<div class="level">
|
||||
<h5 class="title is-5 level-left">{{ event.name }}</h5>
|
||||
<span class="level-right">
|
||||
{% if user.role == Role::AreaManager || user.role == Role::Admin %}
|
||||
<a href="/assignments/new?event={{ event.id }}" class="button is-primary level-item">Planen</a>
|
||||
<a href="" class="button is-primary-light level-item">bearbeiten</a>
|
||||
<a href="" class="button is-warning level-item">als abgesagt markieren</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
<div class="level-left">
|
||||
<h3 class="title is-3">
|
||||
Verfügbarkeiten am {{ date.format("%d.%m.%Y") }}
|
||||
</h3>
|
||||
</div>
|
||||
{% 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>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p>Ort: {{ event.location.as_ref().unwrap().name }}</p>
|
||||
<p>Zeitraum: {{ event.start_time }} bis {{ event.end_time }}</p>
|
||||
<p>Anzahl der Posten: {{ event.amount_of_posten }}</p>
|
||||
<p>Wachhabender durch FF gestellt: {{ event.voluntary_wachhabender }}</p>
|
||||
<p>Kleidungsordnung: {{ event.clothing }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<h3 class="title is-3">
|
||||
Verfügbarkeiten am {{ date.format("%d.%m.%Y") }}
|
||||
</h3>
|
||||
{% if availabillities.len() == 0 %}
|
||||
<div class="box">
|
||||
<h5 class="subtitle is-5">keine Verfügbarkeiten eingetragen</h5>
|
||||
</div>
|
||||
{% if (user.role == Role::Admin || user.role == Role::AreaManager) && selected_area.is_some() &&
|
||||
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>
|
||||
{% else %}
|
||||
<div class="box">
|
||||
<table class="table is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Funktion</th>
|
||||
<th>Zeitraum</th>
|
||||
<th>Kommentar</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for availabillity in availabillities %}
|
||||
{% let u = availabillity.user.as_ref().unwrap() %}
|
||||
<tr id="availabillity-{{ availabillity.id }}">
|
||||
<td>{{ u.name }}</td>
|
||||
<td>
|
||||
{% match u.function %}
|
||||
{% when Function::Posten %}
|
||||
<span class="tag is-info is-light">Posten</span>
|
||||
{% when Function::Wachhabender %}
|
||||
<span class="tag is-info">Wachhabender</span>
|
||||
{% else %}
|
||||
{% endmatch %}
|
||||
</td>
|
||||
<td>
|
||||
{% if availabillity.start_time.is_some() && availabillity.end_time.is_some() %}
|
||||
{{ availabillity.start_time.as_ref().unwrap().format("%R") }} bis {{
|
||||
availabillity.end_time.as_ref().unwrap().format("%R") }}
|
||||
{% else %}
|
||||
ganztägig
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{{ availabillity.comment.as_deref().unwrap_or("") }}
|
||||
</td>
|
||||
<td>
|
||||
{% if availabillity.user_id == user.id %}
|
||||
<div class="buttons is-right">
|
||||
<a class="button is-link" href="/availabillity/edit/{{ availabillity.id }}">Bearbeiten</a>
|
||||
<button class="button is-danger" name="delete-availabillity">Löschen</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if availabillities.len() == 0 %}
|
||||
<div class="box">
|
||||
<h5 class="subtitle is-5">keine Verfügbarkeiten eingetragen</h5>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="box">
|
||||
<table class="table is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Funktion</th>
|
||||
<th>Zeitraum</th>
|
||||
<th>Kommentar</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for availabillity in availabillities %}
|
||||
{% let u = availabillity.user.as_ref().unwrap() %}
|
||||
<tr id="availabillity-{{ availabillity.id }}">
|
||||
<td>{{ u.name }}</td>
|
||||
<td>
|
||||
{% match u.function %}
|
||||
{% when Function::Posten %}
|
||||
<span class="tag is-info is-light">Posten</span>
|
||||
{% when Function::Wachhabender %}
|
||||
<span class="tag is-info">Wachhabender</span>
|
||||
{% else %}
|
||||
{% endmatch %}
|
||||
</td>
|
||||
<td>
|
||||
{% if availabillity.start_time.is_some() && availabillity.end_time.is_some() %}
|
||||
{{ availabillity.start_time.as_ref().unwrap().format("%R") }} bis {{
|
||||
availabillity.end_time.as_ref().unwrap().format("%R") }}
|
||||
{% else %}
|
||||
ganztägig
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{{ availabillity.comment.as_deref().unwrap_or("") }}
|
||||
</td>
|
||||
<td>
|
||||
{% if availabillity.user_id == user.id %}
|
||||
<div class="buttons is-right">
|
||||
<a class="button is-link" href="/availabillity/edit/{{ availabillity.id }}">Bearbeiten</a>
|
||||
<button class="button is-danger" name="delete-availabillity">Löschen</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% 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 %}
|
||||
|
||||
@ -5,84 +5,125 @@
|
||||
<div class="container">
|
||||
<h1 class="title">Profil</h1>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Name</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" value="{{ user.name }}" readonly>
|
||||
<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 is-static" type="text" value="{{ user.name }}" readonly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">E-Mail</label>
|
||||
<div class="control">
|
||||
<input class="input" type="email" value="{{ user.name }}" readonly>
|
||||
<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 is-static" type="email" value="{{ user.name }}" readonly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Rolle</label>
|
||||
<div class="control">
|
||||
{% match user.role %}
|
||||
{% when Role::Staff %}
|
||||
<span class="tag is-info is-light">Nutzer</span>
|
||||
{% when Role::AreaManager %}
|
||||
<span class="tag is-info is-light">Bereichsleiter</span>
|
||||
{% when Role::Admin %}
|
||||
<span class="tag is-info">Admin</span>
|
||||
{% else %}
|
||||
{% endmatch %}
|
||||
<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 %}
|
||||
<span class="tag is-info is-light">Nutzer</span>
|
||||
{% when Role::AreaManager %}
|
||||
<span class="tag is-info is-light">Bereichsleiter</span>
|
||||
{% when Role::Admin %}
|
||||
<span class="tag is-info">Admin</span>
|
||||
{% else %}
|
||||
{% endmatch %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Funktion</label>
|
||||
<div class="control">
|
||||
{% match user.function %}
|
||||
{% when Function::Posten %}
|
||||
<span class="tag is-info is-light">Posten</span>
|
||||
{% when Function::Wachhabender %}
|
||||
<span class="tag is-info">Wachhabender</span>
|
||||
{% else %}
|
||||
{% endmatch %}
|
||||
<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 %}
|
||||
<span class="tag is-info is-light">Posten</span>
|
||||
{% when Function::Wachhabender %}
|
||||
<span class="tag is-info">Wachhabender</span>
|
||||
{% else %}
|
||||
{% endmatch %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Bereich</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" value="{{ user.area.as_ref().unwrap().name }}" readonly>
|
||||
<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 is-static" type="text" value="{{ user.area.as_ref().unwrap().name }}" readonly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h5 class="title is-5">Benachrichtigungen</h5>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input hx-post="/users/{{ user.id }}/toggle?field=receiveNotifications" type="checkbox"
|
||||
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.
|
||||
<span id="success" class="result">
|
||||
<span class="icon mr-2">
|
||||
<svg class="feather">
|
||||
<use href="/static/feather-sprite.svg#check" />
|
||||
</svg>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label class="checkbox">
|
||||
<input hx-post="/users/{{ user.id }}/toggle?field=receiveNotifications" type="checkbox"
|
||||
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 Benachrichtigungen zu neuen Brasiwa-Einteilungen erhalten.
|
||||
<span id="success" class="result">
|
||||
<span class="icon mr-2">
|
||||
<svg class="feather">
|
||||
<use href="/static/feather-sprite.svg#check" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
gespeichert
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
gespeichert
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<button hx-get="/users/changepassword" hx-target="closest div.field" hx-swap="outerHTML"
|
||||
class="button is-link is-light">Passwort ändern</button>
|
||||
<section class="section">
|
||||
<h5 class="title is-5">Passwort</h5>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<button hx-get="/users/changepassword" hx-target="closest div.field" hx-swap="outerHTML"
|
||||
class="button is-link is-light">Passwort ändern</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user