refactor: overview navigation

src/filters.rs

@@ -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());
     }

templates/base.html

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

templates/index.html

@@ -1,12 +1,13 @@
 {% extends "nav.html" %}
 
 {% block content %}
+<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>
+
+      <progress id="progress" class="progress is-small is-link is-light htmx-indicator" max="100" />
     </div>
   </section>
 
-<section class="section">
+  <section id="progress" class="section">
     <div class="container">
       <div class="level">
         <div class="level-left">
@@ -93,7 +97,7 @@
     </div>
   </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() &&
+        {% if (user.role == Role::Admin || user.role == Role::AreaManager) && (selected_area.is_none() ||
-      selected_area.unwrap() == user.area_id %}
+        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>
@@ -167,6 +171,7 @@
 
     </div>
   </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 %}

templates/user/profile.html

@@ -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>