Improve forms, add helper buttons on add session form

games/static/js/add_session.js

@@ -0,0 +1,16 @@
+import { toISOUTCString } from "./utils.js";
+
+for (let button of document.querySelectorAll("[data-target]")) {
+  let target = button.getAttribute("data-target");
+  let type = button.getAttribute("data-type");
+  let targetElement = document.querySelector(`#id_${target}`);
+  button.addEventListener("click", (event) => {
+    event.preventDefault();
+    if (type == "now") {
+      targetElement.value = toISOUTCString(new Date);
+    } else if (type == "toggle") {
+      if (targetElement.type == "datetime-local") targetElement.type = "text";
+      else targetElement.type = "datetime-local";
+    }
+  });
+}

games/static/js/utils.js

@@ -0,0 +1,9 @@
+/**
+ * @description Formats Date to a UTC string accepted by the datetime-local input field.
+ * @param {Date} date
+ * @returns {string}
+ */
+export function toISOUTCString(date) {
+  let month = (date.getMonth() + 1).toString().padStart(2, 0);
+  return `${date.getFullYear()}-${month}-${date.getDate()}T${date.getHours()}:${date.getMinutes()}`;
+}

games/templates/add.html

@@ -9,8 +9,9 @@
 
         {{ form.as_table }}
         <tr>
+            <td></td>
             <td><input type="submit" value="Submit"/></td>
         </tr>
         </table>
     </form>
-{% endblock content %}
+{% endblock content %}

games/templates/add_edition.html

@@ -9,6 +9,7 @@
 
         {{ form.as_table }}
         <tr>
+            <td></td>
             <td><input type="submit" value="Submit"/></td>
         </tr>
         </table>
@@ -17,5 +18,5 @@
 
 {% block scripts %}
 {% load static %}
-<script type="module" src="{% static 'js/qol.js' %}"></script>
-{% endblock scripts %}
+<script type="module" src="{% static 'js/add_edition.js' %}"></script>
+{% endblock scripts %}

games/templates/add_session.html

@@ -0,0 +1,36 @@
+{% extends "base.html" %}
+
+{% block title %}{{ title }}{% endblock title %}
+
+{% block content %}
+    <form method="post" enctype="multipart/form-data">
+        <table class="mx-auto">
+        {% csrf_token %}
+
+        {% for field in form %}
+        <tr>
+            <th>{{ field.label_tag }}</th>
+            {% if field.name == "note" %}
+            <td>{{ field }}</td>
+            {% else %}
+            <td>{{ field }}</td>
+            {% endif %}
+            {% if field.name == "timestamp_start" or field.name == "timestamp_end" %}
+            <td>
+                <div class="basic-button-container">
+                    <button class="basic-button" data-target="{{field.name}}" data-type="now">Set to now</button>
+                    <button class="basic-button" data-target="{{field.name}}" data-type="toggle">Toggle text</button>
+                </div>
+            </td>
+            {% endif %}
+        </tr>
+        {% endfor %}
+        <tr>
+            <td></td>
+            <td><input type="submit" value="Submit"/></td>
+        </tr>
+        </table>
+    </form>
+    {% load static %}
+    <script type="module" src="{% static 'js/add_session.js' %}"></script>
+{% endblock content %}

games/views.py

@@ -45,7 +45,7 @@ def add_session(request):
 
     context["title"] = "Add New Session"
     context["form"] = form
-    return render(request, "add.html", context)
+    return render(request, "add_session.html", context)
 
 
 def update_session(request, session_id=None):