Try unifying 3 different element interfaces

games/static/js/add_session.js

@@ -1,23 +0,0 @@
-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 == "copy") {
-      const oppositeName =
-        targetElement.name == "timestamp_start"
-          ? "timestamp_end"
-          : "timestamp_start";
-      document.querySelector(`[name='${oppositeName}']`).value =
-        targetElement.value;
-    } else if (type == "toggle") {
-      if (targetElement.type == "datetime-local") targetElement.type = "text";
-      else targetElement.type = "datetime-local";
-    }
-  });
-}

games/static/js/year_picker.js

@@ -0,0 +1,38 @@
+import { onSwap } from "./utils.js";
+
+onSwap("#year-picker-input", function(pickerEl) {
+    const selectedYear = pickerEl.dataset.selectedYear;
+    const urlTemplate = pickerEl.dataset.urlTemplate;
+    const currentYear = new Date().getFullYear();
+    const availableYears = new Set(
+        pickerEl.dataset.availableYears
+            .split(",")
+            .map(s => parseInt(s.trim()))
+            .filter(n => !isNaN(n))
+    );
+
+    const picker = new Datepicker(pickerEl, {
+        pickLevel: 2,
+        format: "yyyy",
+        minDate: new Date(1999, 0, 1),
+        maxDate: new Date(currentYear, 11, 31),
+        autohide: false,
+        orientation: "bottom end",
+        showOnClick: false,
+        showOnFocus: false,
+        beforeShowYear: (date) => ({ enabled: availableYears.has(date.getFullYear()) }),
+    });
+    pickerEl._pickerInstance = picker;
+
+    picker.element.addEventListener("changeDate", (event) => {
+        const year = event.detail.date?.getFullYear();
+        if (year && urlTemplate) {
+            window.location.href = urlTemplate.replace("__year__", year);
+        }
+    });
+
+    if (selectedYear) {
+        picker.dates = [new Date(parseInt(selectedYear), 0, 1)];
+        picker.update();
+    }
+});

games/views/game.py

@@ -354,7 +354,7 @@ _PLAYED_MENU = (
 def _played_row(game: Game, request: HttpRequest) -> Node:
     """'Played N times' control as a custom element (ts/elements/play-event-row.ts)."""
     from common.components import Element, custom_element
-    from common.components.custom_elements import PlayEventRowProps
+    from common.components.custom_elements import PlayEventRowProps, _PlayEventRow
 
     played = game.playevents.count()
 
@@ -397,19 +397,13 @@ def _played_row(game: Game, request: HttpRequest) -> Node:
     group = Div(class_="inline-flex items-stretch rounded-md shadow-2xs")[
         count_button, toggle_group
     ]
-    return custom_element(
-        "play-event-row",
-        PlayEventRowProps(
-            game_id=game.id,
-            csrf=get_token(request),
-            api_create_url=reverse("api-1.0.0:create_playevent"),
-        ),
-        children=[
-            Div(class_="flex gap-2 items-center")[
-                Span(class_="uppercase")["Played"], group
-            ]
-        ],
-    )
+    return _PlayEventRow(
+        game_id=game.id,
+        csrf=get_token(request),
+        api_create_url=reverse("api-1.0.0:create_playevent"),
+    )[Div(class_="flex gap-2 items-center")[
+        Span(class_="uppercase")["Played"], group
+    ]]
 
 
 def _stat_popover(popover_id: str, tooltip: str, svg_key: str, value: str) -> SafeText:

games/views/session.py

@@ -11,12 +11,12 @@ from django.utils import timezone
 from django.utils.safestring import SafeText, mark_safe
 
 from common.components import (
-    Fragment,
     A,
     AddForm,
     Button,
     ButtonGroup,
     Div,
+    Fragment,
     Icon,
     ModuleScript,
     NameWithIcon,
@@ -27,6 +27,7 @@ from common.components import (
     SessionDeviceSelector,
     paginated_table_content,
 )
+from common.components import SessionTimestampButtons
 from common.components.primitives import Span, Td, Tr
 from common.layout import render_page
 from common.time import (
@@ -208,32 +209,20 @@ def _session_fields(form) -> Fragment:
             this_side = "start" if field.name == "timestamp_start" else "end"
             other_side = "end" if field.name == "timestamp_start" else "start"
             children.append(
-                Span(
-                    attributes=[
-                        (
-                            "class",
-                            "form-row-button-group flex-row gap-3 justify-start mt-3",
-                        ),
-                        ("hx-boost", "false"),
+                SessionTimestampButtons(
+                    class_="form-row-button-group flex-row gap-3 justify-start mt-3",
+                    hx_boost="false",
+                )[
+                    Button(data_target=field.name, data_type="now", size="xs")[
+                        "Set to now"
                     ],
-                    children=[
-                        Button(
-                            [("data-target", field.name), ("data-type", "now")],
-                            "Set to now",
-                            size="xs",
-                        ),
-                        Button(
-                            [("data-target", field.name), ("data-type", "toggle")],
-                            "Toggle text",
-                            size="xs",
-                        ),
-                        Button(
-                            [("data-target", field.name), ("data-type", "copy")],
-                            f"Copy {this_side} value to {other_side}",
-                            size="xs",
-                        ),
+                    Button(data_target=field.name, data_type="toggle", size="xs")[
+                        "Toggle text"
                     ],
-                )
+                    Button(data_target=field.name, data_type="copy", size="xs")[
+                        f"Copy {this_side} value to {other_side}"
+                    ],
+                ]
             )
         rows.append(Div(children=children))
     return Fragment(*rows, separator="\n")
@@ -265,9 +254,7 @@ def add_session(request: HttpRequest, game_id: int = 0) -> HttpResponse:
         request,
         AddForm(form, request=request, fields=_session_fields(form), submit_class=""),
         title="Add New Session",
-        scripts=mark_safe(
-            ModuleScript("search_select.js") + ModuleScript("add_session.js")
-        ),
+        scripts=mark_safe(ModuleScript("search_select.js")),
     )
 
 
@@ -282,9 +269,7 @@ def edit_session(request: HttpRequest, session_id: int) -> HttpResponse:
         request,
         AddForm(form, request=request, fields=_session_fields(form), submit_class=""),
         title="Edit Session",
-        scripts=mark_safe(
-            ModuleScript("search_select.js") + ModuleScript("add_session.js")
-        ),
+        scripts=mark_safe(ModuleScript("search_select.js")),
     )