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

refactor: overview navigation

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/filters.rs
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 { if let Some(a) = a {
return Ok(format!("&area={}", a)); return Ok(format!("{}area={}", char, a));
} else { } else {
return Ok(String::new()); return Ok(String::new());
} }

4
templates/base.html
View File

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

308
templates/index.html
View File

@ -1,172 +1,177 @@
{% extends "nav.html" %} {% extends "nav.html" %}
{% block content %} {% block content %}
<section class="section"> <div hx-indicator="#progress">
<div class="container"> <section class="section">
<div class="level"> <div class="container">
<div class="level-left"> <div class="level">
<a hx-boost="true" class="button is-link level-item" <div class="level-left">
href="/?date={{ date.pred() }}{{ selected_area|show_area_query }}"> <a hx-boost="true" class="button is-link level-item"
<span class="icon"> href="/?date={{ date.pred() }}{{ selected_area|show_area_query(false) }}">
<svg class="feather"> <span class="icon">
<use href="/static/feather-sprite.svg#arrow-left" /> <svg class="feather">
</svg> <use href="/static/feather-sprite.svg#arrow-left" />
</span> </svg>
</a> </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>
<div class="control level-item is-flex-grow-0"> <progress id="progress" class="progress is-small is-link is-light htmx-indicator" max="100" />
<input id="date-selector" class="input" type="date" value="{{ date }}"> </div>
{% if user.role == Role::Admin %} </section>
<div class="select ml-2">
<select hx-get="/?date={{ date }}" hx-target="closest body" hx-push-url="true" name="area"> <section id="progress" class="section">
{% for area in areas %} <div class="container">
{% if (user.area_id == area.id && selected_area.is_none()) || selected_area.is_some() && <div class="level">
selected_area.unwrap() == area.id %} <div class="level-left">
<option selected value="{{ area.id }}">{{ area.name }}</option> <h3 class="title is-3">
{% else %} Events am {{ date.format("%d.%m.%Y") }}
<option value="{{ area.id }}">{{ area.name }}</option> </h3>
{% endif %} </div>
{% endfor %} {% if (user.role == Role::Admin || user.role == Role::AreaManager) && (selected_area.is_none() ||
</select> 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> </div>
{% endif %} {% endif %}
</div> </div>
<div class="level-right"> {% if events.len() == 0 %}
<a hx-boost="true" class="button is-link level-item" <div class="box">
href="/?date={{ date.succ() }}{{ selected_area|show_area_query }}"> <h5 class="subtitle is-5">keine Events geplant</h5>
<span class="icon"> </div>
<svg class="feather"> {% else %}
<use href="/static/feather-sprite.svg#arrow-right" /> {% for event in events %}
</svg> <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> </span>
</a> </div>
</div> <p>Ort: {{ event.location.as_ref().unwrap().name }}</p>
<p>Zeitraum: {{ event.start_time }} bis {{ event.end_time }}</p>
</div> <p>Anzahl der Posten: {{ event.amount_of_posten }}</p>
</div> <p>Wachhabender durch FF gestellt: {{ event.voluntary_wachhabender }}</p>
</section> <p>Kleidungsordnung: {{ event.clothing }}</p>
<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> </div>
{% endfor %}
{% endif %} {% endif %}
</div> </div>
</section>
{% if events.len() == 0 %} <section id="progress" class="section">
<div class="box"> <div class="container">
<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"> <div class="level">
<h5 class="title is-5 level-left">{{ event.name }}</h5> <div class="level-left">
<span class="level-right"> <h3 class="title is-3">
{% if user.role == Role::AreaManager || user.role == Role::Admin %} Verfügbarkeiten am {{ date.format("%d.%m.%Y") }}
<a href="/assignments/new?event={{ event.id }}" class="button is-primary level-item">Planen</a> </h3>
<a href="" class="button is-primary-light level-item">bearbeiten</a> </div>
<a href="" class="button is-warning level-item">als abgesagt markieren</a> {% if (user.role == Role::Admin || user.role == Role::AreaManager) && (selected_area.is_none() ||
{% endif %} selected_area.unwrap() == user.area_id) %}
</span> <div class="level-right">
<a class="button" href="/availabillity/new?date={{ date }}">Neue Verfügbarkeit für diesen Tag</a>
</div>
{% endif %}
</div> </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"> {% if availabillities.len() == 0 %}
<div class="container"> <div class="box">
<div class="level"> <h5 class="subtitle is-5">keine Verfügbarkeiten eingetragen</h5>
<div class="level-left">
<h3 class="title is-3">
Verfügbarkeiten am {{ date.format("%d.%m.%Y") }}
</h3>
</div> </div>
{% if (user.role == Role::Admin || user.role == Role::AreaManager) && selected_area.is_some() && {% else %}
selected_area.unwrap() == user.area_id %} <div class="box">
<div class="level-right"> <table class="table is-fullwidth">
<a class="button" href="/availabillity/new?date={{ date }}">Neue Verfügbarkeit für diesen Tag</a> <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> </div>
{% endif %} {% endif %}
</div>
{% if availabillities.len() == 0 %}
<div class="box">
<h5 class="subtitle is-5">keine Verfügbarkeiten eingetragen</h5>
</div> </div>
{% else %} </section>
<div class="box"> </div>
<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>
<script> <script>
document.getElementsByName("delete-availabillity") 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> </script>
{% endblock %} {% endblock %}

167
templates/user/profile.html
View File

@ -5,84 +5,125 @@
<div class="container"> <div class="container">
<h1 class="title">Profil</h1> <h1 class="title">Profil</h1>
<div class="field"> <section class="section">
<label class="label">Name</label> <h5 class="title is-5">Allgemeines</h5>
<div class="control">
<input class="input" type="text" value="{{ user.name }}" readonly> <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>
<div class="field"> <div class="field is-horizontal">
<label class="label">E-Mail</label> <div class="field-label is-normal">
<div class="control"> <label class="label">E-Mail</label>
<input class="input" type="email" value="{{ user.name }}" readonly> </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>
<div class="field"> <div class="field is-horizontal">
<label class="label">Rolle</label> <div class="field-label is-normal">
<div class="control"> <label class="label">Rolle</label>
{% match user.role %} </div>
{% when Role::Staff %} <div class="field-body">
<span class="tag is-info is-light">Nutzer</span> <div class="field">
{% when Role::AreaManager %} <div class="control">
<span class="tag is-info is-light">Bereichsleiter</span> {% match user.role %}
{% when Role::Admin %} {% when Role::Staff %}
<span class="tag is-info">Admin</span> <span class="tag is-info is-light">Nutzer</span>
{% else %} {% when Role::AreaManager %}
{% endmatch %} <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>
<div class="field"> <div class="field is-horizontal">
<label class="label">Funktion</label> <div class="field-label is-normal">
<div class="control"> <label class="label">Funktion</label>
{% match user.function %} </div>
{% when Function::Posten %} <div class="field-body">
<span class="tag is-info is-light">Posten</span> <div class="field">
{% when Function::Wachhabender %} <div class="control">
<span class="tag is-info">Wachhabender</span> {% match user.function %}
{% else %} {% when Function::Posten %}
{% endmatch %} <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>
<div class="field"> <div class="field is-horizontal">
<label class="label">Bereich</label> <div class="field-label is-normal">
<div class="control"> <label class="label">Bereich</label>
<input class="input" type="text" value="{{ user.area.as_ref().unwrap().name }}" readonly> </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>
</div> </section>
<section class="section">
<h5 class="title is-5">Benachrichtigungen</h5>
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<label class="checkbox"> <label class="checkbox">
<input hx-post="/users/{{ user.id }}/toggle?field=receiveNotifications" type="checkbox" <input hx-post="/users/{{ user.id }}/toggle?field=receiveNotifications" type="checkbox"
hx-on::before-request="document.getElementById('success').classList.remove('fadeout')" hx-on::before-request="document.getElementById('success').classList.remove('fadeout')"
hx-on::after-request="document.getElementById('success').classList.add('fadeout')" hx-on::after-request="document.getElementById('success').classList.add('fadeout')"
checked="{{ user.receive_notifications }}"> 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 id="success" class="result">
<span class="icon mr-2"> <span class="icon mr-2">
<svg class="feather"> <svg class="feather">
<use href="/static/feather-sprite.svg#check" /> <use href="/static/feather-sprite.svg#check" />
</svg> </svg>
</span>
<span>
gespeichert
</span>
</span> </span>
<span> </label>
gespeichert </div>
</span>
</span>
</label>
</div> </div>
</div> </section>
<div class="field"> <section class="section">
<div class="control"> <h5 class="title is-5">Passwort</h5>
<button hx-get="/users/changepassword" hx-target="closest div.field" hx-swap="outerHTML"
class="button is-link is-light">Passwort ändern</button> <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>
</div> </section>
</div> </div>
</section> </section>