Allow DLC to have date_finished set

games/static/js/add_edition.js

@@ -1,24 +1,24 @@
-import { syncSelectInputUntilChanged } from './utils.js';
+import { syncSelectInputUntilChanged } from "./utils.js";
 
 let syncData = [
   {
-    "source": "#id_game",
-    "source_value": "dataset.name",
-    "target": "#id_name",
-    "target_value": "value"
+    source: "#id_game",
+    source_value: "dataset.name",
+    target: "#id_name",
+    target_value: "value",
   },
   {
-    "source": "#id_game",
-    "source_value": "textContent",
-    "target": "#id_sort_name",
-    "target_value": "value"
+    source: "#id_game",
+    source_value: "textContent",
+    target: "#id_sort_name",
+    target_value: "value",
   },
   {
-    "source": "#id_game",
-    "source_value": "dataset.year",
-    "target": "#id_year_released",
-    "target_value": "value"
+    source: "#id_game",
+    source_value: "dataset.year",
+    target: "#id_year_released",
+    target_value: "value",
   },
-]
+];
 
 syncSelectInputUntilChanged(syncData, "form");

games/static/js/add_game.js

@@ -1,12 +1,12 @@
-import { syncSelectInputUntilChanged } from './utils.js'
+import { syncSelectInputUntilChanged } from "./utils.js";
 
 let syncData = [
   {
-    "source": "#id_name",
-    "source_value": "value",
-    "target": "#id_sort_name",
-    "target_value": "value"
-  }
-]
+    source: "#id_name",
+    source_value: "value",
+    target: "#id_sort_name",
+    target_value: "value",
+  },
+];
 
-syncSelectInputUntilChanged(syncData, "form")
+syncSelectInputUntilChanged(syncData, "form");

games/static/js/add_purchase.js

@@ -2,7 +2,7 @@ import {
   syncSelectInputUntilChanged,
   getEl,
   disableElementsWhenTrue,
-  disableElementsWhenFalse,
+  disableElementsWhenValueNotEqual,
 } from "./utils.js";
 
 let syncData = [
@@ -21,7 +21,11 @@ function setupElementHandlers() {
     "#id_name",
     "#id_related_purchase",
   ]);
-  disableElementsWhenFalse("#id_type", "game", ["#id_date_finished"]);
+  disableElementsWhenValueNotEqual(
+    "#id_type",
+    ["game", "dlc"],
+    ["#id_date_finished"]
+  );
 }
 
 document.addEventListener("DOMContentLoaded", setupElementHandlers);
@@ -30,13 +34,13 @@ getEl("#id_type").onchange = () => {
   setupElementHandlers();
 };
 
-document.body.addEventListener('htmx:beforeRequest', function(event) {
+document.body.addEventListener("htmx:beforeRequest", function (event) {
   // Assuming 'Purchase1' is the element that triggers the HTMX request
-  if (event.target.id === 'id_edition') {
-      var idEditionValue = document.getElementById('id_edition').value;
+  if (event.target.id === "id_edition") {
+    var idEditionValue = document.getElementById("id_edition").value;
 
     // Condition to check - replace this with your actual logic
-      if (idEditionValue != '') {
+    if (idEditionValue != "") {
       event.preventDefault(); // This cancels the HTMX request
     }
   }

games/static/js/add_session.js

@@ -7,10 +7,14 @@ for (let button of document.querySelectorAll("[data-target]")) {
   button.addEventListener("click", (event) => {
     event.preventDefault();
     if (type == "now") {
-      targetElement.value = toISOUTCString(new Date);
+      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;
+      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/utils.js

@@ -75,7 +75,14 @@ function syncSelectInputUntilChanged(syncData, parentSelector = document) {
  * @param {string} property - The property to retrieve the value from.
  */
 function getValueFromProperty(sourceElement, property) {
-  let source = (sourceElement instanceof HTMLSelectElement) ? sourceElement.selectedOptions[0] : sourceElement
+  let source =
+    sourceElement instanceof HTMLSelectElement
+      ? sourceElement.selectedOptions[0]
+      : sourceElement;
+  let source =
+    sourceElement instanceof HTMLSelectElement
+      ? sourceElement.selectedOptions[0]
+      : sourceElement;
   if (property.startsWith("dataset.")) {
     let datasetKey = property.slice(8); // Remove 'dataset.' part
     return source.dataset[datasetKey];
@@ -93,13 +100,11 @@ function getValueFromProperty(sourceElement, property) {
  */
 function getEl(selector) {
   if (selector.startsWith("#")) {
-    return document.getElementById(selector.slice(1))
-  }
-  else if (selector.startsWith(".")) {
-    return document.getElementsByClassName(selector)
-  }
-  else {
-    return document.getElementsByTagName(selector)
+    return document.getElementById(selector.slice(1));
+  } else if (selector.startsWith(".")) {
+    return document.getElementsByClassName(selector);
+  } else {
+    return document.getElementsByTagName(selector);
   }
 }
 
@@ -116,7 +121,7 @@ function getEl(selector) {
 function conditionalElementHandler(...configs) {
   configs.forEach(([condition, targetElements, callbackfn1, callbackfn2]) => {
     if (condition()) {
-      targetElements.forEach(elementName => {
+      targetElements.forEach((elementName) => {
         let el = getEl(elementName);
         if (el === null) {
           console.error(`Element ${elementName} doesn't exist.`);
@@ -125,7 +130,7 @@ function conditionalElementHandler(...configs) {
         }
       });
     } else {
-      targetElements.forEach(elementName => {
+      targetElements.forEach((elementName) => {
         let el = getEl(elementName);
         if (el === null) {
           console.error(`Element ${elementName} doesn't exist.`);
@@ -137,16 +142,44 @@ function conditionalElementHandler(...configs) {
   });
 }
 
-function disableElementsWhenFalse(targetSelect, targetValue, elementList) {
+function disableElementsWhenValueNotEqual(
+  targetSelect,
+  targetValue,
+  elementList
+) {
   return conditionalElementHandler([
     () => {
-      return getEl(targetSelect).value != targetValue;
+      let target = getEl(targetSelect);
+      console.debug(
+        `${disableElementsWhenTrue.name}: triggered on ${target.id}`
+      );
+      console.debug(`
+      ${disableElementsWhenTrue.name}: matching against value(s): ${targetValue}`);
+      if (targetValue instanceof Array) {
+        if (targetValue.every((value) => target.value != value)) {
+          console.debug(
+            `${disableElementsWhenTrue.name}: none of the values is equal to ${target.value}, returning true.`
+          );
+          return true;
+        }
+      } else {
+        console.debug(
+          `${disableElementsWhenTrue.name}: none of the values is equal to ${target.value}, returning true.`
+        );
+        return target.value != targetValue;
+      }
     },
     elementList,
     (el) => {
+      console.debug(
+        `${disableElementsWhenTrue.name}: evaluated true, disabling ${el.id}.`
+      );
       el.disabled = "disabled";
     },
     (el) => {
+      console.debug(
+        `${disableElementsWhenTrue.name}: evaluated false, NOT disabling ${el.id}.`
+      );
       el.disabled = "";
     },
   ]);
@@ -167,4 +200,12 @@ function disableElementsWhenTrue(targetSelect, targetValue, elementList) {
   ]);
 }
 
-export { toISOUTCString, syncSelectInputUntilChanged, getEl, conditionalElementHandler, disableElementsWhenFalse, disableElementsWhenTrue, getValueFromProperty };
+export {
+  toISOUTCString,
+  syncSelectInputUntilChanged,
+  getEl,
+  conditionalElementHandler,
+  disableElementsWhenFalse,
+  disableElementsWhenTrue,
+  getValueFromProperty,
+};