From 5047530a3d63be250b7341d1923aeee24572740d Mon Sep 17 00:00:00 2001
From: Max Hohlfeld <maxhohlfeld@posteo.de>
Date: Sun, 11 May 2025 20:07:05 +0200
Subject: [PATCH] feat: styling of availability input

---
 web/src/filters.rs                          |  4 ++
 web/src/models/availability_changeset.rs    |  6 +--
 web/templates/availability/new_or_edit.html | 42 +++++++++++----------
 3 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/web/src/filters.rs b/web/src/filters.rs
index c4e00543..f07337ae 100644
--- a/web/src/filters.rs
+++ b/web/src/filters.rs
@@ -89,6 +89,10 @@ pub fn date_c(v: &NaiveDate) -> askama::Result<String> {
     Ok(v.format("%d.%m").to_string())
 }
 
+pub fn date_c_and_time(v: &NaiveDateTime) -> askama::Result<String> {
+    Ok(v.format("%d.%m. %H:%M").to_string())
+}
+
 pub fn time(v: &NaiveTime) -> askama::Result<String> {
     Ok(v.format("%H:%M").to_string())
 }
diff --git a/web/src/models/availability_changeset.rs b/web/src/models/availability_changeset.rs
index e3a921a2..072fd101 100644
--- a/web/src/models/availability_changeset.rs
+++ b/web/src/models/availability_changeset.rs
@@ -1,4 +1,4 @@
-use chrono::NaiveDateTime;
+use chrono::{Days, NaiveDateTime};
 use garde::Validate;
 
 use crate::{END_OF_DAY, START_OF_DAY};
@@ -80,9 +80,9 @@ pub fn find_free_date_time_slots(
     //println!("zeiten unified {times:?}");
 
     let date = times.first().unwrap().0.date();
+    let date_next_day = date.checked_add_days(Days::new(1)).unwrap();
     let start_of_day = date.and_time(START_OF_DAY);
-    // for now only calculate suggestions for the same day (if not add one day for end_of_Day:)
-    let end_of_day = date.and_time(END_OF_DAY);
+    let end_of_day = date_next_day.and_time(END_OF_DAY);
 
     // now times contains unified list of existing availabilities -> now calculate the "inverse"
 
diff --git a/web/templates/availability/new_or_edit.html b/web/templates/availability/new_or_edit.html
index b5dda845..3f673b31 100644
--- a/web/templates/availability/new_or_edit.html
+++ b/web/templates/availability/new_or_edit.html
@@ -22,14 +22,18 @@
             <p class="help">noch mögliche Zeiträume:</p>
             <div class="tags help">
               {% for (s, e) in slot_suggestions %}
-              <span class="tag">{{ *s|dt_t }} - {{ *e|dt_t }}</span>
+              <span class="tag">{{ *s|date_c_and_time }} - {{ *e|date_c_and_time }}</span>
               {% endfor %}
             </div>
             {% endif %}
           </div>
           <div class="field">
             <input class="input" type="time" name="endtime" required {{ end|insert_time_value|safe }}
-                   _='on change put the value of me into #et then if (value of the previous <input/>) is greater than (value of me) then set the value of #enddate to "{{ datetomorrow }}" then add @disabled to #nextbtn then remove @disabled from #samebtn then put "{{ datetomorrow|date_c }}" into #ed end' />
+                   _='on change put the value of me into #et
+                   then if (value of the previous <input/>) is greater than (value of me)
+                    then set the value of #enddate to "{{ datetomorrow }}"
+                    then put "{{ datetomorrow|date_c }}" into #ed
+                   end' />
           </div>
         </div>
       </div>
@@ -41,21 +45,22 @@
         <div class="field-body">
           <div class="field is-narrow">
             {% let is_overnight = enddate.is_some() && enddate.as_ref().unwrap() == datetomorrow|ref %}
-            <button id="samebtn" class="button is-small is-success is-light" type="button"
-                    {{ is_overnight|invert|ref|cond_show("disabled")|safe }}
-                    _='on click set the value of #enddate to "{{ date }}" then toggle @disabled on me then toggle @disabled on #nextbtn then put "{{ date|date_c }}" into #ed'>am
-              selben Tag</button>
-          </div>
-          <div class="field is-narrow">
-            <button id="nextbtn" class="button is-small is-info is-light" type="button"
-                    {{ is_overnight|cond_show("disabled")|safe }}
-                    _='on click set the value of #enddate to "{{ datetomorrow }}" then toggle @disabled on me then toggle @disabled on #samebtn then put "{{ datetomorrow|date_c }}" into #ed'>am
-              Tag darauf</button>
+            <div class="control">
+              <label class="radio">
+                <input type="radio" name="isovernight" {{ is_overnight|invert|ref|cond_show("checked")|safe }}
+                       _='on click set the value of #enddate to "{{ date }}" then put "{{ date|date_c }}" into #ed'>
+                am selben Tag
+              </label>
+              <label class="radio ml-3">
+                <input type="radio" name="isovernight" {{ is_overnight|cond_show("checked")|safe }}
+                       _='on click set the value of #enddate to "{{ datetomorrow }}" then put "{{ datetomorrow|date_c }}" into #ed'>
+                am Tag darauf
+              </label>
+            </div>
           </div>
         </div>
       </div>
 
-
       <div class="field is-horizontal">
         <div class="field-label">
           <label class="label">Kommentar</label>
@@ -67,6 +72,9 @@
                 comment.unwrap_or("") }}</textarea>
             </div>
             <p class="help is-info">
+              <svg class="icon is-small">
+                <use href="/static/feather-sprite.svg#info" />
+              </svg>
               verfügbar von {{ date|date_c }} <span id="st">{{ start|time_opt("10:00")|safe }}</span> Uhr
               bis <span id="ed">{{ enddate.as_ref().unwrap_or(date)|date_c }}</span>
               <span id="et">{{ end|time_opt("20:00")|safe }}</span> Uhr
@@ -84,13 +92,7 @@
                 <svg class="icon">
                   <use href="/static/feather-sprite.svg#check-circle" />
                 </svg>
-                <span>
-                  {% if id.is_some() %}
-                  Speichern
-                  {% else %}
-                  Erstellen
-                  {% endif %}
-                </span>
+                <span>{% if is_edit %}Speichern{% else %}Erstellen{% endif %}</span>
               </button>
             </div>
             <div class="control">