Use date and datetime inputs

Properly implements 4d91a76513

.gitignore

@@ -5,6 +5,5 @@ __pycache__
 node_modules
 package-lock.json
 db.sqlite3
-static/admin/
-static/django_extensions/
+/static/
 dist/

games/forms.py

@@ -2,6 +2,11 @@ from django import forms
 
 from games.models import Game, Platform, Purchase, Session, Edition, Device
 
+custom_date_widget = forms.DateInput(attrs={"type": "date"})
+custom_datetime_widget = forms.DateTimeInput(
+    attrs={"type": "datetime-local"}, format="%Y-%m-%d %H:%M"
+)
+
 
 class SessionForm(forms.ModelForm):
     purchase = forms.ModelChoiceField(
@@ -9,6 +14,10 @@ class SessionForm(forms.ModelForm):
     )
 
     class Meta:
+        widgets = {
+            "timestamp_start": custom_datetime_widget,
+            "timestamp_end": custom_datetime_widget,
+        }
         model = Session
         fields = [
             "purchase",
@@ -30,6 +39,10 @@ class PurchaseForm(forms.ModelForm):
     platform = forms.ModelChoiceField(queryset=Platform.objects.order_by("name"))
 
     class Meta:
+        widgets = {
+            "date_purchased": custom_date_widget,
+            "date_refunded": custom_date_widget,
+        }
         model = Purchase
         fields = [
             "edition",
@@ -43,6 +56,7 @@ class PurchaseForm(forms.ModelForm):
 
 
 class EditionForm(forms.ModelForm):
+    game = forms.ModelChoiceField(queryset=Game.objects.order_by("name"))
     platform = forms.ModelChoiceField(queryset=Platform.objects.order_by("name"))
 
     class Meta:

games/static/js/qol.js

@@ -0,0 +1,29 @@
+/**
+ * @description Sync select field with input field until user focuses it.
+ * @param {HTMLSelectElement} sourceElementSelector
+ * @param {HTMLInputElement} targetElementSelector
+ */
+function syncSelectInputUntilChanged(
+  sourceElementSelector,
+  targetElementSelector
+) {
+  const sourceElement = document.querySelector(sourceElementSelector);
+  const targetElement = document.querySelector(targetElementSelector);
+  function sourceElementHandler(event) {
+    let selected = event.target.value;
+    let selectedValue = document.querySelector(
+      `#id_game option[value='${selected}']`
+    ).textContent;
+    targetElement.value = selectedValue;
+  }
+  function targetElementHandler(event) {
+    sourceElement.removeEventListener("change", sourceElementHandler);
+  }
+
+  sourceElement.addEventListener("change", sourceElementHandler);
+  targetElement.addEventListener("focus", targetElementHandler);
+}
+
+window.addEventListener("load", () => {
+  syncSelectInputUntilChanged("#id_game", "#id_name");
+});

games/static/main.js

@@ -0,0 +1,43 @@
+function elt(type, props, ...children) {
+  let dom = document.createElement(type);
+  if (props) Object.assign(dom, props);
+  for (let child of children) {
+    if (typeof child != "string") dom.appendChild(child);
+    else dom.appendChild(document.createTextNode(child));
+  }
+  return dom;
+}
+
+/**
+ * @param {Node} targetNode
+ */
+function addToggleButton(targetNode) {
+  let manualToggleButton = elt(
+    "td",
+    {},
+    elt(
+      "div",
+      { className: "basic-button" },
+      elt(
+        "button",
+        {
+          onclick: (event) => {
+            let textInputField = elt("input", { type: "text", id: targetNode.id });
+            targetNode.replaceWith(textInputField);
+            event.target.addEventListener("click", (event) => {
+              textInputField.replaceWith(targetNode);
+            });
+          },
+        },
+        "Toggle manual"
+      )
+    )
+  );
+  targetNode.parentElement.appendChild(manualToggleButton);
+}
+
+const toggleableFields = ["#id_game", "#id_edition", "#id_platform"];
+
+toggleableFields.map((selector) => {
+  addToggleButton(document.querySelector(selector));
+});

games/templates/add_edition.html

@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+
+{% block title %}{{ title }}{% endblock title %}
+
+{% block content %}
+    <form method="post" enctype="multipart/form-data">
+        <table class="mx-auto">
+        {% csrf_token %}
+
+        {{ form.as_table }}
+        <tr>
+            <td><input type="submit" value="Submit"/></td>
+        </tr>
+        </table>
+    </form>
+{% endblock content %}
+
+{% block scripts %}
+{% load static %}
+<script type="module" src="{% static 'js/qol.js' %}"></script>
+{% endblock scripts %}

games/templates/base.html

@@ -12,7 +12,7 @@
         <link rel="stylesheet" href="https://rsms.me/inter/inter.css"/>
         <link rel="stylesheet" href="{% static 'base.css' %}" />
     </head>
-
+    
     <body class="dark">
         <div class="dark:bg-gray-800 min-h-screen">
             <nav class="mb-4 bg-white dark:bg-gray-900 border-gray-200 rounded">
@@ -47,6 +47,7 @@
         </div>
         {% load version %}
         <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span>
+    {% block scripts %}{% endblock scripts %}
     </body>
 
 </html>

games/views.py

@@ -221,7 +221,7 @@ def add_edition(request):
 
     context["form"] = form
     context["title"] = "Add New Edition"
-    return render(request, "add.html", context)
+    return render(request, "add_edition.html", context)
 
 
 def add_platform(request):

timetracker/settings.py

@@ -149,3 +149,5 @@ if _csrf_trusted_origins:
     CSRF_TRUSTED_ORIGINS = _csrf_trusted_origins.split(",")
 else:
     CSRF_TRUSTED_ORIGINS = []
+
+USE_L10N = False