From 5c64529e77f150f8b83930f17e792b2cb8e38a87 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jans.tuomi@gmail.com>
Date: Thu, 29 Feb 2024 21:10:43 +0200
Subject: Add whole day mode, various improvements

---
 templates/index.html.j2                      | 21 +--------
 templates/manage.html.j2                     | 70 ++++++++++++++++------------
 templates/poll_choice_datetime_range.html.j2 | 24 ++++++++++
 templates/poll_info_table.html.j2            | 24 ++++++++++
 templates/poll_vote_list.html.j2             | 21 +--------
 templates/poll_vote_table.html.j2            | 20 +-------
 6 files changed, 92 insertions(+), 88 deletions(-)
 create mode 100644 templates/poll_choice_datetime_range.html.j2
 create mode 100644 templates/poll_info_table.html.j2

(limited to 'templates')

diff --git a/templates/index.html.j2 b/templates/index.html.j2
index f84b428..db458da 100644
--- a/templates/index.html.j2
+++ b/templates/index.html.j2
@@ -3,26 +3,7 @@
 {% block content %}
 <h2>Create new diddle</h2>
 <form class="poll-form" action="/poll/create" method="post">
-  <table>
-    <tbody>
-      <tr>
-        <td><label for="title">Title</label></td>
-        <td><input type="text" name="title" required></td>
-      </tr>
-      <tr>
-        <td><label for="description">Description (optional)</label></td>
-        <td><textarea name="description"></textarea></td>
-      </tr>
-      <tr>
-        <td><label for="author_name">Your name</label></td>
-        <td><input type="text" name="author_name" required></td>
-      </tr>
-      <tr>
-        <td><label for="author_email">Your email (optional)</label></td>
-        <td><input type="text" name="author_email"></td>
-      </tr>
-    </tbody>
-  </table>
+  {% include "poll_info_table.html.j2" %}
 
   <p>You can add options after submitting.</p>
   <input class="green" type="submit" value="Create">
diff --git a/templates/manage.html.j2 b/templates/manage.html.j2
index 55a14bd..4a5da8d 100644
--- a/templates/manage.html.j2
+++ b/templates/manage.html.j2
@@ -14,27 +14,8 @@
 </p>
 
 <form class="poll-form" action="/manage/{{ poll.manage_code }}/update_info" method="post">
-  <table>
-    <tbody>
-      <tr>
-        <td><label for="title">Title</label></td>
-        <td><input type="text" name="title" value="{{ poll.title }}" required></td>
-      </tr>
-      <tr>
-        <td><label for="description">Description (optional)</label></td>
-        <td><textarea name="description">{{ poll.description }}</textarea></td>
-      </tr>
-      <tr>
-        <td><label for="author_name">Your name</label></td>
-        <td><input type="text" name="author_name" value="{{ poll.author_name }}" required></td>
-      </tr>
-      <tr>
-        <td><label for="author_email">Your email (optional)</label></td>
-        <td><input type="text" name="author_email" value="{{ poll.author_email }}"></td>
-      </tr>
-    </tbody>
-  </table>
-  <br>
+  {% include "poll_info_table.html.j2" %}
+  <p></p>
   <input type="submit" value="Update">
 </form>
 
@@ -55,11 +36,17 @@
     <form action="/manage/{{ poll.manage_code }}/delete_choice/{{ choice.id }}" method="post">
       <tr>
         <td>
-          <input type="datetime-local" name="start_datetime_{{ choice.id }}" value="{{ choice.start_datetime_notz() }}" disabled
+          <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}"
+                 name="start_datetime_{{ choice.id }}"
+                 value="{% if poll.is_whole_day %}{{ choice.start_date_notz() }}{% else %}{{ choice.start_datetime_notz() }}{% endif %}"
+                 disabled
                  {% if last_choice_id == choice.id %}id="last-start-datetime"{% endif %}>
         </td>
         <td>
-          <input type="datetime-local" name="end_datetime_{{ choice.id }}" value="{{ choice.end_datetime_notz() }}" disabled
+          <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}"
+                 name="end_datetime_{{ choice.id }}"
+                 value="{% if poll.is_whole_day %}{{ choice.end_date_notz() }}{% else %}{{ choice.end_datetime_notz() }}{% endif %}"
+                 disabled
                  {% if last_choice_id == choice.id %}id="last-end-datetime"{% endif %}>
         </td>
         <td>
@@ -71,10 +58,10 @@
     <form action="/manage/{{ poll.manage_code }}/add_choice" method="post">
       <tr>
         <td>
-          <input type="datetime-local" name="start_datetime" required>
+          <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}" name="start_datetime" required>
         </td>
         <td>
-          <input type="datetime-local" name="end_datetime" required>
+          <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}" name="end_datetime" required>
         </td>
         <td>
           <input class="green" type="submit" value="Add">
@@ -94,7 +81,9 @@
 </div>
 
 <script>
+const isWholeDay = {% if poll.is_whole_day %}true{% else %}false{% endif %};
 const hour = 1000 * 60 * 60;
+const day = hour * 24;
 
 const startDatetimeInput = document.querySelector('input[name="start_datetime"]');
 const endDatetimeInput = document.querySelector('input[name="end_datetime"]');
@@ -103,15 +92,38 @@ const lastStartDatetimeInput = document.getElementById('last-start-datetime');
 const lastEndDatetimeInput = document.getElementById('last-end-datetime');
 
 if (lastStartDatetimeInput !== null && startDatetimeInput.valueAsDate === null) {
-  startDatetimeInput.valueAsDate = new Date(lastStartDatetimeInput.valueAsDate.getTime() + hour);
+  if (isWholeDay) {
+    // set the start date to the last end date + 1 day if in whole day mode
+    startDatetimeInput.valueAsDate = new Date(lastEndDatetimeInput.valueAsDate.getTime() + day);
+    endDatetimeInput.valueAsDate = new Date(startDatetimeInput.valueAsDate.getTime());
+  } else {
+    // set the start date to the last end date + 1 hour if not in whole day mode
+    startDatetimeInput.valueAsDate = new Date(lastEndDatetimeInput.valueAsDate.getTime());
+    endDatetimeInput.valueAsDate = new Date(startDatetimeInput.valueAsDate.getTime() + hour);
+  }
 }
 
-startDatetimeInput.addEventListener('blur', onStartDatetimeBlur);
+startDatetimeInput.addEventListener('change', onStartDatetimeChange);
 
-function onStartDatetimeBlur(event) {
+function onStartDatetimeChange(event) {
   const endDatetimeInput = document.querySelector('input[name="end_datetime"]');
   if (endDatetimeInput.valueAsDate === null) {
-    endDatetimeInput.valueAsDate = new Date(event.target.valueAsDate.getTime() + hour);
+    if (isWholeDay) {
+      // set the end date to the start date if in whole day mode
+      endDatetimeInput.valueAsDate = new Date(event.target.valueAsDate.getTime());
+    } else {
+      // set the end date to the start date + 1 hour if not in whole day mode
+      endDatetimeInput.valueAsDate = new Date(event.target.valueAsDate.getTime() + hour);
+    }
+  }
+}
+
+const query = new URLSearchParams(window.location.search);
+const focusNext = query.get('focus_next');
+if (focusNext !== null) {
+  const nextInput = document.querySelector(`input[name="start_datetime"]`);
+  if (nextInput !== null) {
+    nextInput.focus();
   }
 }
 </script>
diff --git a/templates/poll_choice_datetime_range.html.j2 b/templates/poll_choice_datetime_range.html.j2
new file mode 100644
index 0000000..ddfa970
--- /dev/null
+++ b/templates/poll_choice_datetime_range.html.j2
@@ -0,0 +1,24 @@
+<span>
+{{ choice.start_datetime.strftime("%a %d.%m") }}
+</span>
+<span>
+  {% if now.year != choice.start_datetime.year %}.{{choice.start_datetime.year}}{% endif %}
+</span>
+<span>
+  {% if not poll.is_whole_day %}{{ choice.start_datetime.strftime("%H:%M") }}{% endif %}
+</span>
+{% if (poll.is_whole_day and not choice.ends_on_same_day()) or (not poll.is_whole_day and not choice.ends_at_same_datetime()) %}
+<span>&mdash;</span>
+{% endif %}
+
+{% if not choice.ends_on_same_day() %}
+<span>
+  {{ choice.end_datetime.strftime("%a %d.%m") }}
+</span>
+<span>
+  {% if now.year != choice.end_datetime.year %}.{{choice.end_datetime.year}}{% endif %}
+</span>
+{% endif %}
+<span>
+  {% if not poll.is_whole_day %}{{ choice.end_datetime.strftime("%H:%M") }}{% endif %}
+</span>
diff --git a/templates/poll_info_table.html.j2 b/templates/poll_info_table.html.j2
new file mode 100644
index 0000000..7955ca8
--- /dev/null
+++ b/templates/poll_info_table.html.j2
@@ -0,0 +1,24 @@
+<table>
+  <tbody>
+    <tr>
+      <td><label for="title">Title</label></td>
+      <td><input type="text" name="title" value="{% if poll %}{{ poll.title }}{% endif %}" required></td>
+    </tr>
+    <tr>
+      <td><label for="description">Description (optional)</label></td>
+      <td><textarea name="description">{% if poll %}{{ poll.description }}{% endif %}</textarea></td>
+    </tr>
+    <tr>
+      <td><label for="author_name">Your name</label></td>
+      <td><input type="text" name="author_name" value="{% if poll %}{{ poll.author_name }}{% endif %}" required></td>
+    </tr>
+    <tr>
+      <td><label for="author_email">Your email (optional)</label></td>
+      <td><input type="text" name="author_email" value="{% if poll %}{{ poll.author_email }}{% endif %}"></td>
+    </tr>
+    <tr>
+      <td><label for="is_whole_day">Whole day event?</label></td>
+      <td class="checkbox-field"><input type="checkbox" name="is_whole_day" {% if poll and poll.is_whole_day %}checked{% endif %}></td>
+    </tr>
+  </tbody>
+</table>
diff --git a/templates/poll_vote_list.html.j2 b/templates/poll_vote_list.html.j2
index c18b3e0..845356b 100644
--- a/templates/poll_vote_list.html.j2
+++ b/templates/poll_vote_list.html.j2
@@ -4,26 +4,7 @@
     <label for="choice_{{ choice.id }}">
       <input type="checkbox" name="choice_{{ choice.id }}" id="choice_{{ choice.id }}">
       <strong>
-        {{ choice.start_datetime.strftime("%a %d.%m") }}
-        <span>
-          {% if now.year != choice.start_datetime.year %}.{{choice.start_datetime.year}}{% endif %}
-        </span>
-        <span>
-          {{ choice.start_datetime.strftime("%H:%M") }}
-        </span>
-        <span>&mdash;</span>
-        {% if not choice.ends_on_same_day() %}
-        <span>
-          {{ choice.end_datetime.strftime("%a %d.%m") }}
-        </span>
-        <span>
-          {% if now.year != choice.end_datetime.year %}.{{choice.end_datetime.year}}{% endif %}
-        </span>
-        {% endif %}
-        <span>
-        {{ choice.end_datetime.strftime("%H:%M") }}
-        </span>
-        </span>
+        {% include "poll_choice_datetime_range.html.j2" %}
       </strong>
       <span>
         <i>{{ choice.votes | length }} votes</i>
diff --git a/templates/poll_vote_table.html.j2 b/templates/poll_vote_table.html.j2
index cfa336a..97fcac5 100644
--- a/templates/poll_vote_table.html.j2
+++ b/templates/poll_vote_table.html.j2
@@ -3,25 +3,7 @@
     <th></th>
     {% for choice in choices %}
     <th>
-      {{ choice.start_datetime.strftime("%a %d.%m") }}
-      <span>
-        {% if now.year != choice.start_datetime.year %}.{{choice.start_datetime.year}}{% endif %}
-      </span>
-      <span>
-        {{ choice.start_datetime.strftime("%H:%M") }}
-      </span>
-      <span>&mdash;</span>
-      {% if not choice.ends_on_same_day() %}
-      <span>
-        {{ choice.end_datetime.strftime("%a %d.%m") }}
-      </span>
-      <span>
-        {% if now.year != choice.end_datetime.year %}.{{choice.end_datetime.year}}{% endif %}
-      </span>
-      {% endif %}
-      <span>
-        {{ choice.end_datetime.strftime("%H:%M") }}
-      </span>
+      {% include "poll_choice_datetime_range.html.j2" %}
       <span>
         <i>{{ choice.votes | length }} votes</i>
       </span>
-- 
cgit v1.3