feat: event input and display

closes #20

web/snapshots/brass_web__endpoints__events__get_edit__inner_produces_template.snap

@@ -5,8 +5,8 @@ snapshot_kind: text
 ---
 <section class="section">
   <div class="container">
-    
     <form method="post" action="/events/1/edit">
+      
       <h1 class="title">Event 'Vorstellung' bearbeiten</h1>
       
 
@@ -30,7 +30,9 @@ snapshot_kind: text
             </div>
             <div class="control">
               
-                <button class="button is-danger" type="button" hx-delete="/events/1"  hx-trigger="confirmed">
+              <button class="button is-danger" type="button"
+                      hx-delete="/events/1" 
+                      hx-trigger="confirmed">
                 <svg class="icon">
                   <use href="/static/feather-sprite.svg#x-circle" />
                 </svg>
@@ -43,8 +45,6 @@ snapshot_kind: text
       </div>
       
 
-        
-
       <div class="field is-horizontal">
         <div class="field-label">
           <label class="label">Veranstaltungsname</label>
@@ -52,7 +52,8 @@ snapshot_kind: text
         <div class="field-body">
           <div class="field">
             <div class="control">
-                <input class="input" name="name" placeholder="Wave Gotik Treffen" required  value="Vorstellung"   />
+              <input class="input" name="name" placeholder="Wave Gotik Treffen" required
+                     value="Vorstellung"  />
             </div>
           </div>
         </div>
@@ -63,12 +64,15 @@ snapshot_kind: text
           <label class="label">Startzeit - Endzeit</label>
         </div>
         <div class="field-body">
-            
           <div class="field">
-              <input class="input" type="time" id="from" name="from" required value="08:00"  />
+            <input class="input" type="time" name="start" required
+                   value="08:00"  />
           </div>
           <div class="field">
-              <input class="input" type="time" id="till" name="till" required value="10:00"  />
+            
+            <input class="input" type="datetime-local" name="end" required
+                   value="2025-01-01T10:00" 
+                   min="2025-01-01T00:00" max="2025-01-02T23:59" />
           </div>
         </div>
       </div>
@@ -83,7 +87,10 @@ snapshot_kind: text
               <div class="select is-fullwidth">
                 <select name="location" required >
                   
-                    <option value="1" selected>Hauptbahnhof - (Leipzig Ost)
+                  <option value="1"
+                          selected>
+                    Hauptbahnhof
+                     - (Leipzig Ost)
                   </option>
                   
                 </select>
@@ -102,7 +109,9 @@ snapshot_kind: text
             
             <div class="control">
               <label class="checkbox">
-                  <input class="checkbox" type="checkbox" name="voluntarywachhabender" value="true"     >
+                <input class="checkbox" type="checkbox" name="voluntarywachhabender" value="true"
+                       
+                       >
               </label>
             </div>
             
@@ -119,7 +128,9 @@ snapshot_kind: text
             
             <div class="control">
               <label class="checkbox">
-                  <input class="checkbox" type="checkbox" name="voluntaryfuehrungsassistent" value="true"     >
+                <input class="checkbox" type="checkbox" name="voluntaryfuehrungsassistent" value="true"
+                       
+                       >
               </label>
             </div>
             
@@ -136,8 +147,8 @@ snapshot_kind: text
             
             <div class="control">
               <input class="input" type="number" name="amount"
-                  min="1" max="100" required
+                     min="0" max="100"
-                   value="2"   />
+                     required value="2"  />
             </div>
             
           </div>
@@ -151,8 +162,8 @@ snapshot_kind: text
         <div class="field-body">
           <div class="field">
             <div class="control">
-                <input class="input" name="clothing" placeholder="Tuchuniform" required 
+              <input class="input" name="clothing" placeholder="Tuchuniform" required value="Tuchuniform"
-                  value="Tuchuniform"   />
+                      />
             </div>
           </div>
         </div>
@@ -181,9 +192,7 @@ snapshot_kind: text
                   <use href="/static/feather-sprite.svg#check-circle" />
                 </svg>
                 <span>
-                    
                   Speichern
-                    
                 </span>
               </button>
             </div>

web/src/endpoints/events/get_edit.rs

@@ -10,7 +10,7 @@ use crate::utils::test_helper::{
 use chrono::{NaiveDate, NaiveTime};
 
 use crate::{
-    endpoints::{events::NewEventTemplate, IdPath},
+    endpoints::{events::NewOrEditEventTemplate, IdPath},
     models::{Assignment, Event, Function, Location, Role, User},
     utils::{ApplicationError, TemplateResponse},
 };
@@ -37,11 +37,10 @@ pub async fn get(
 
     let assignments = Assignment::read_all_by_event(pool.get_ref(), event.id).await?;
 
-    let template = NewEventTemplate {
+    let template = NewOrEditEventTemplate {
         user: user.into_inner(),
         date: event.start.date(),
         locations,
-        event: Some(event),
         amount_of_planned_posten: assignments
             .iter()
             .filter(|x| x.function == Function::Posten)
@@ -52,6 +51,17 @@ pub async fn get(
         is_wachhabender_planned: assignments
             .iter()
             .any(|x| x.function == Function::Wachhabender),
+        id: Some(event.id),
+        start: event.start.time(),
+        end: event.end,
+        name: Some(event.name),
+        location: Some(event.location_id),
+        voluntary_wachhabender: event.voluntary_wachhabender,
+        voluntary_fuehrungsassistent: event.voluntary_fuehrungsassistent,
+        amount_of_posten: Some(event.amount_of_posten),
+        clothing: Some(event.clothing),
+        canceled: event.canceled,
+        note: event.note,
     };
 
     Ok(template.to_response()?)

web/src/endpoints/events/get_new.rs

@@ -1,8 +1,9 @@
 use actix_web::{web, Responder};
+use chrono::NaiveTime;
 use sqlx::PgPool;
 
 use crate::{
-    endpoints::{events::NewEventTemplate, NaiveDateQuery},
+    endpoints::{events::NewOrEditEventTemplate, NaiveDateQuery},
     models::{Location, Role, User},
     utils::{ApplicationError, TemplateResponse},
 };
@@ -23,14 +24,26 @@ pub async fn get(
         Location::read_by_area(pool.get_ref(), user.area_id).await?
     };
 
-    let template = NewEventTemplate {
+    let template = NewOrEditEventTemplate {
         user: user.into_inner(),
         date: query.date,
         locations,
-        event: None,
         amount_of_planned_posten: 0,
         is_fuehrungsassistent_planned: false,
         is_wachhabender_planned: false,
+        id: None,
+        start: NaiveTime::from_hms_opt(18, 0, 0).unwrap(),
+        end: query
+            .date
+            .and_time(NaiveTime::from_hms_opt(23, 00, 00).unwrap()),
+        name: None,
+        location: None,
+        voluntary_wachhabender: false,
+        voluntary_fuehrungsassistent: false,
+        amount_of_posten: None,
+        clothing: None,
+        canceled: false,
+        note: None,
     };
 
     Ok(template.to_response()?)

web/src/endpoints/events/mod.rs

@@ -1,9 +1,10 @@
-use chrono::Days;
 use crate::filters;
-use chrono::NaiveDate;
 use askama::Template;
+use chrono::{Days, NaiveDateTime};
+use chrono::{NaiveDate, NaiveTime};
+use serde::Deserialize;
 
-use crate::models::{Event, Location, Role, User};
+use crate::models::{Location, Role, User};
 
 pub mod delete;
 pub mod get_edit;
@@ -16,12 +17,52 @@ pub mod put_cancelation;
 #[derive(Template)]
 #[cfg_attr(not(test), template(path = "events/new_or_edit.html"))]
 #[cfg_attr(test, template(path = "events/new_or_edit.html", block = "content"))]
-pub struct NewEventTemplate {
+pub struct NewOrEditEventTemplate {
     user: User,
     date: NaiveDate,
     locations: Vec<Location>,
-    event: Option<Event>,
+    id: Option<i32>,
+    start: NaiveTime,
+    end: NaiveDateTime,
+    name: Option<String>,
+    location: Option<i32>,
+    voluntary_wachhabender: bool,
+    voluntary_fuehrungsassistent: bool,
+    amount_of_posten: Option<i16>,
+    clothing: Option<String>,
+    canceled: bool,
+    note: Option<String>,
     amount_of_planned_posten: usize,
     is_fuehrungsassistent_planned: bool,
     is_wachhabender_planned: bool,
 }
+
+#[derive(Deserialize)]
+pub struct NewOrEditEventForm {
+    name: String,
+    date: NaiveDate,
+    start: NaiveTime,
+    #[serde(with = "short_date_time_format")]
+    end: NaiveDateTime,
+    location: i32,
+    voluntarywachhabender: Option<bool>,
+    voluntaryfuehrungsassistent: Option<bool>,
+    amount: i16,
+    clothing: String,
+    note: Option<String>,
+}
+
+mod short_date_time_format {
+    use chrono::NaiveDateTime;
+    use serde::{self, Deserialize, Deserializer};
+
+    pub fn deserialize<'de, D>(deserializer: D) -> Result<NaiveDateTime, D::Error>
+    where
+        D: Deserializer<'de>,
+    {
+        const FORMAT: &'static str = "%Y-%m-%dT%H:%M";
+        let s = String::deserialize(deserializer)?;
+        let dt = NaiveDateTime::parse_from_str(&s, FORMAT).map_err(serde::de::Error::custom)?;
+        Ok(dt)
+    }
+}

web/src/endpoints/events/post_edit.rs

@@ -1,11 +1,10 @@
 use actix_web::{http::header::LOCATION, web, HttpResponse, Responder};
-use chrono::{Days, NaiveDateTime};
+use chrono::Days;
 use garde::Validate;
-use serde::Deserialize;
 use sqlx::PgPool;
 
 use crate::{
-    endpoints::IdPath,
+    endpoints::{events::NewOrEditEventForm, IdPath},
     models::{
         Assignment, AssignmentChangeset, Availability, Event, EventChangeset, EventContext,
         Function, Location, Role, User,
@@ -14,24 +13,11 @@ use crate::{
     END_OF_DAY, START_OF_DAY,
 };
 
-#[derive(Deserialize)]
-pub struct EditEventForm {
-    name: String,
-    from: NaiveDateTime,
-    till: NaiveDateTime,
-    location: i32,
-    voluntarywachhabender: Option<bool>,
-    voluntaryfuehrungsassistent: Option<bool>,
-    amount: i16,
-    clothing: String,
-    note: Option<String>,
-}
-
 #[actix_web::post("/events/{id}/edit")]
 pub async fn post(
     user: web::ReqData<User>,
     pool: web::Data<PgPool>,
-    form: web::Form<EditEventForm>,
+    form: web::Form<NewOrEditEventForm>,
     path: web::Path<IdPath>,
 ) -> Result<impl Responder, ApplicationError> {
     if user.role != Role::Admin && user.role != Role::AreaManager {
@@ -61,7 +47,7 @@ pub async fn post(
         amount_of_posten: form.amount,
         clothing: form.clothing.clone(),
         location_id: form.location,
-        time: (form.from, form.till),
+        time: (form.date.and_time(form.start), form.end),
         name: form.name.clone(),
         note: form
             .note
@@ -161,7 +147,7 @@ pub async fn post(
 
     Event::update(pool.get_ref(), event.id, changeset).await?;
 
-    let url = utils::get_return_url_for_date(&form.from.date());
+    let url = utils::get_return_url_for_date(&form.date);
     //println!("redirecto to {url}");
     Ok(HttpResponse::Found()
         .insert_header((LOCATION, url.clone()))

web/src/endpoints/events/post_new.rs

@@ -1,32 +1,18 @@
 use actix_web::{http::header::LOCATION, web, HttpResponse, Responder};
-use chrono::NaiveDateTime;
 use garde::Validate;
-use serde::Deserialize;
 use sqlx::PgPool;
 
 use crate::{
+    endpoints::events::NewOrEditEventForm,
     models::{Event, EventChangeset, Location, Role, User},
     utils::{self, ApplicationError},
 };
 
-#[derive(Deserialize)]
-pub struct NewEventForm {
-    name: String,
-    from: NaiveDateTime,
-    till: NaiveDateTime,
-    location: i32,
-    voluntarywachhabender: Option<bool>,
-    voluntaryfuehrungsassistent: Option<bool>,
-    amount: i16,
-    clothing: String,
-    note: Option<String>,
-}
-
 #[actix_web::post("/events/new")]
 pub async fn post(
     user: web::ReqData<User>,
     pool: web::Data<PgPool>,
-    form: web::Form<NewEventForm>,
+    form: web::Form<NewOrEditEventForm>,
 ) -> Result<impl Responder, ApplicationError> {
     if user.role != Role::Admin && user.role != Role::AreaManager {
         return Err(ApplicationError::Unauthorized);
@@ -44,7 +30,7 @@ pub async fn post(
         amount_of_posten: form.amount,
         clothing: form.clothing.clone(),
         location_id: form.location,
-        time: (form.from, form.till),
+        time: (form.date.and_time(form.start), form.end),
         name: form.name.clone(),
         note: form
             .note
@@ -60,7 +46,7 @@ pub async fn post(
 
     Event::create(pool.get_ref(), changeset).await?;
 
-    let url = utils::get_return_url_for_date(&form.from.date());
+    let url = utils::get_return_url_for_date(&form.date);
     //println!("redirecto to {url}");
     Ok(HttpResponse::Found()
         .insert_header((LOCATION, url.clone()))

web/src/filters.rs

@@ -74,11 +74,11 @@ pub fn show_tree(f: &UserFunction) -> askama::Result<String> {
 }
 
 pub fn dt_f(v: &NaiveDateTime) -> askama::Result<String> {
-    Ok(v.format("%F").to_string())
+    Ok(v.format("%Y-%m-%dT%H:%M").to_string())
 }
 
-pub fn dt_d(v: &NaiveDateTime) -> askama::Result<String> {
+pub fn dt_ff(v: &NaiveDateTime) -> askama::Result<String> {
-    Ok(v.format("%d.%m.%Y").to_string())
+    Ok(v.format("%d.%m.%Y %H:%M").to_string())
 }
 
 pub fn date_d(v: &NaiveDate) -> askama::Result<String> {

web/templates/events/new_or_edit.html

@@ -3,27 +3,28 @@
 {% block content %}
 <section class="section">
   <div class="container">
-    {% if let Some(event) = event %}
+    <form method="post" action="/events/{% if let Some(id) = id %}{{ id }}/edit{% else %}new{% endif %}">
-    <form method="post" action="/events/{{ event.id }}/edit">
+      {% if let Some(name) = name %}
-      <h1 class="title">Event '{{ event.name }}' bearbeiten</h1>
+      <h1 class="title">Event '{{ name }}' bearbeiten</h1>
       {% else %}
-      <form method="post" action="/events/new">
       <h1 class="title">Neues Event anlegen für den {{ date|date_d }}</h1>
       {% endif %}
 
-        {% if let Some(event) = event %}
+      <input type="hidden" name="date" value="{{ date }}">
+
+      {% if let Some(id) = id %}
       <div class="field is-horizontal">
         <div class="field-label"></div>
         <div class="field-body">
           <div class="field is-grouped">
             <div class="control">
               <button class="button is-warning" type="button"
-                        hx-put="/events/{{ event.id }}/{% if event.canceled %}uncancel{% else %}cancel{% endif %}">
+                      hx-put="/events/{{ id }}/{% if canceled %}uncancel{% else %}cancel{% endif %}">
                 <svg class="icon">
                   <use href="/static/feather-sprite.svg#alert-circle" />
                 </svg>
                 <span>
-                    {% if event.canceled %}Absage zurücknehmen{% else %}Als abgesagt markieren{% endif %}
+                  {% if canceled %}Absage zurücknehmen{% else %}Als abgesagt markieren{% endif %}
                 </span>
               </button>
             </div>
@@ -31,7 +32,7 @@
               {% let delete_disabled = amount_of_planned_posten > 0 || is_wachhabender_planned ||
               is_fuehrungsassistent_planned %}
               <button class="button is-danger" type="button"
-                        hx-delete="/events/{{ event.id }}" {{ delete_disabled|cond_show("disabled") }}
+                      hx-delete="/events/{{ id }}" {{ delete_disabled|cond_show("disabled") }}
                       hx-trigger="confirmed">
                 <svg class="icon">
                   <use href="/static/feather-sprite.svg#x-circle" />
@@ -49,8 +50,6 @@
       </div>
       {% endif %}
 
-        {% let disabled = event.is_some() && event.as_ref().unwrap().canceled %}
-
       <div class="field is-horizontal">
         <div class="field-label">
           <label class="label">Veranstaltungsname</label>
@@ -59,8 +58,7 @@
           <div class="field">
             <div class="control">
               <input class="input" name="name" placeholder="Wave Gotik Treffen" required
-                       {% if let Some(event)=event %} value="{{ event.name }}" {% endif %}
+                     {{ name|insert_value|safe }} {{ canceled|cond_show("disabled") }} />
-                       {{ disabled|cond_show("disabled") }} />
             </div>
           </div>
         </div>
@@ -72,16 +70,14 @@
         </div>
         <div class="field-body">
           <div class="field">
-              <input class="input" type="datetime-local" id="from" name="from" required
+            <input class="input" type="time" name="start" required
-                     value="{% if let Some(event)=event %}{{ event.start|dt_f }}{% else %}{{ date }}{% endif
+                   value="{{ start|time }}" {{ canceled|cond_show("disabled") }} />
-                     %}"
-                     {{ disabled|cond_show("disabled") }} min="{{ date }}T00:00" max="{{ date }}T23:59" />
           </div>
           <div class="field">
-              <input class="input" type="datetime-local" id="till" name="till" required
+            {% let tomorrow = date.checked_add_days(Days::new(1)).unwrap() %}
-                     value="{% if let Some(event)=event %}{{ event.end|dt_f }}{% else %}{{ date }}{% endif %}"
+            <input class="input" type="datetime-local" name="end" required
-                     {{ disabled|cond_show("disabled") }} min="{{ date }}T00:00"
+                   value="{{ end|dt_f }}" {{ canceled|cond_show("disabled") }}
-                     max="{{ date.checked_add_days(Days::new(1)).unwrap() }}T23:59" />
+                   min="{{ date }}T00:00" max="{{ tomorrow }}T23:59" />
           </div>
         </div>
       </div>
@@ -94,13 +90,12 @@
           <div class="field is-narrow">
             <div class="control">
               <div class="select is-fullwidth">
-                  <select name="location" required {{ disabled|cond_show("disabled") }}>
+                <select name="location" required {{ canceled|cond_show("disabled") }}>
-                    {% for location in locations %}
+                  {% for l in locations %}
-                    <option value="{{ location.id }}" {% if let Some(event)=event %}{{
+                  <option value="{{ l.id }}"
-                            (event.location_id==location.id)|cond_show("selected") }}{% endif %}>{{ location.name }}{%
+                          {{ (location.is_some() && *location.as_ref().unwrap()==l.id)|cond_show("selected") }}>
-                      if
+                    {{ l.name }}
-                      user.role == Role::Admin %} - ({{
+                    {% if user.role == Role::Admin %} - ({{ l.area.as_ref().unwrap().name }}){% endif %}
-                      location.area.as_ref().unwrap().name }}){% endif %}
                   </option>
                   {% endfor %}
                 </select>
@@ -116,14 +111,12 @@
         </div>
         <div class="field-body">
           <div class="field is-narrow">
-              {% let wh_disabled = event.is_some() && is_wachhabender_planned %}
+            {% let wh_disabled = id.is_some() && is_wachhabender_planned %}
             <div class="control">
               <label class="checkbox">
-                  <input class="checkbox" type="checkbox" name="voluntarywachhabender" value="true" {{
+                <input class="checkbox" type="checkbox" name="voluntarywachhabender" value="true"
-                         wh_disabled|cond_show("disabled")}} {% if let Some(event)=event %} {{
+                       {{ (wh_disabled || canceled)|cond_show("disabled")}}
-                         event.voluntary_wachhabender|cond_show("checked") }} {% endif %} {{
+                       {{ voluntary_wachhabender|cond_show("checked") }}>
-                         disabled|cond_show("disabled")
-                         }}>
               </label>
             </div>
             {% if wh_disabled %}
@@ -141,13 +134,12 @@
         </div>
         <div class="field-body">
           <div class="field is-narrow">
-              {% let fa_disabled = event.is_some() && is_fuehrungsassistent_planned %}
+            {% let fa_disabled = id.is_some() && is_fuehrungsassistent_planned %}
             <div class="control">
               <label class="checkbox">
-                  <input class="checkbox" type="checkbox" name="voluntaryfuehrungsassistent" value="true" {{
+                <input class="checkbox" type="checkbox" name="voluntaryfuehrungsassistent" value="true"
-                         fa_disabled|cond_show("disabled") }} {% if let Some(event)=event %} {{
+                       {{ (fa_disabled || canceled)|cond_show("disabled") }}
-                         event.voluntary_fuehrungsassistent|cond_show("checked") }} {% endif %} {{
+                       {{ voluntary_fuehrungsassistent|cond_show("checked") }}>
-                         disabled|cond_show("disabled") }}>
               </label>
             </div>
             {% if fa_disabled %}
@@ -165,19 +157,16 @@
         </div>
         <div class="field-body">
           <div class="field">
-              {% let posten_planned = event.is_some() && amount_of_planned_posten > 0 %}
+            {% let posten_planned = id.is_some() && amount_of_planned_posten > 0 %}
             <div class="control">
               <input class="input" type="number" name="amount"
                      min="{% if posten_planned %}{{ amount_of_planned_posten }}{% else %}0{% endif %}" max="100"
-                       required
+                     required {{ amount_of_posten|insert_value|safe }} {{ canceled|cond_show("disabled") }} />
-                       {% if let Some(event)=event %} value="{{ event.amount_of_posten }}" {% endif %} {{
-                       disabled|cond_show("disabled") }} />
             </div>
             {% if posten_planned %}
             <p class="help">
               Mindestens {{ amount_of_planned_posten }} Posten, da bereits diese Anzahl eingeplant ist. Zum
-                verringern
+              verringern diese erst entplanen!
-                diese erst entplanen!
             </p>
             {% endif %}
           </div>
@@ -191,8 +180,8 @@
         <div class="field-body">
           <div class="field">
             <div class="control">
-                <input class="input" name="clothing" placeholder="Tuchuniform" required {% if let Some(event)=event %}
+              <input class="input" name="clothing" placeholder="Tuchuniform" required {{ clothing|insert_value|safe }}
-                       value="{{ event.clothing }}" {% endif %} {{ disabled|cond_show("disabled") }} />
+                     {{ canceled|cond_show("disabled") }} />
             </div>
           </div>
         </div>
@@ -205,8 +194,7 @@
         <div class="field-body">
           <div class="field">
             <div class="control">
-                <input class="input" name="note" {% if let Some(event)=event %} {{ event.note|insert_value }} {% endif
+              <input class="input" name="note" {{ note|insert_value|safe }} {{ canceled|cond_show("disabled") }} />
-                       %} {{ disabled|cond_show("disabled") }} />
             </div>
           </div>
         </div>
@@ -217,16 +205,12 @@
         <div class="field-body">
           <div class="field is-grouped">
             <div class="control">
-                <button class="button is-success" {{ disabled|cond_show("disabled") }}>
+              <button class="button is-success" {{ canceled|cond_show("disabled") }}>
                 <svg class="icon">
                   <use href="/static/feather-sprite.svg#check-circle" />
                 </svg>
                 <span>
-                    {% if event.is_some() %}
+                  {% if id.is_some() %}Speichern{% else %}Erstellen{% endif %}
-                    Speichern
-                    {% else %}
-                    Erstellen
-                    {% endif %}
                 </span>
               </button>
             </div>

web/templates/index.html

@@ -53,7 +53,7 @@
       <div class="level">
         <div class="level-left">
           <h3 class="title is-3">
-            Events am {{ date.format("%d.%m.%Y") }}
+            Events am {{ date|date_d }}
           </h3>
         </div>
         {% if user.role == Role::Admin || user.role == Role::AreaManager && (selected_area.is_none() ||
@@ -106,7 +106,7 @@
             {% endif %}
 
             <div class="cell">
-              <p><b>Uhrzeit:</b> {{ event.start|dt_t }} Uhr - {{ event.end|dt_f }} Uhr</p>
+              <p><b>Uhrzeit:</b> {{ event.start|dt_t }} Uhr - {{ event.end|dt_ff }} Uhr</p>
             </div>
 
             <div class="cell">
@@ -135,9 +135,11 @@
             </div>
             {% endif %}
 
+            {% if wachhabender.is_some() || fuehrungsassistent.is_some() || posten.len() > 0 || vehicle.len() > 0 %}
             <div class="cell is-col-span-2">
               <hr class="my-1">
             </div>
+            {% endif %}
 
             {% if let Some(wh) = wachhabender %}
             <div class="cell">
@@ -178,7 +180,7 @@
       <div class="level">
         <div class="level-left">
           <h3 class="title is-3">
-            Verfügbarkeiten am {{ date.format("%d.%m.%Y") }}
+            Verfügbarkeiten am {{ date|date_d }}
           </h3>
         </div>
         {% if selected_area.is_none() || selected_area.unwrap() == user.area_id %}
@@ -220,7 +222,7 @@
                 {{ u.function|show_tree|safe }}
               </td>
               <td>
-                {{ availabillity.start.format("%R") }} bis {{ availabillity.end.format("%d.%m.%Y %R") }}
+                {{ availabillity.start|dt_t }} Uhr bis {{ availabillity.end|dt_ff }} Uhr
               </td>
               <td>
                 {{ availabillity.comment.as_deref().unwrap_or("") }}