Add amounts and translations to plamo filters.

portfolio/site.hs

@@ -532,6 +532,11 @@ isUpcoming cutoff item = do
 
 langDict :: String -> Context a
 langDict "nl" =
+    constField "filter" "Filter" <>
+    constField "filter-plamo-in-box" "Nog in het doosje" <>
+    constField "filter-plamo-building" "Aan het bouwen" <>
+    constField "filter-plamo-built" "Gebouwd" <>
+    constField "filter-plamo-complete" "Compleet" <>
     constField "switcher" "Taal" <>
     constField "title-japan" "Japan" <>
     constField "title-plamo" "Plamo" <>
@@ -558,6 +563,11 @@ langDict "nl" =
     mempty
 
 langDict "jp" =
+    constField "filter" "フィルター" <>
+    constField "filter-plamo-in-box" "未開封" <>
+    constField "filter-plamo-building" "製作中" <>
+    constField "filter-plamo-built" "組立完了" <>
+    constField "filter-plamo-complete" "完成" <>
     constField "switcher" "言語" <>
     constField "title-japan" "日本" <>
     constField "title-plamo" "プラモ" <>
@@ -584,6 +594,11 @@ langDict "jp" =
     mempty
 
 langDict "en" =
+    constField "filter" "Filter" <>
+    constField "filter-plamo-in-box" "Still in box" <>
+    constField "filter-plamo-building" "Building" <>
+    constField "filter-plamo-built" "Built" <>
+    constField "filter-plamo-complete" "Complete" <>
     constField "switcher" "Language" <>
     constField "title-japan" "Japan" <>
     constField "title-plamo" "Plamo" <>

portfolio/templates/model-kits.html

@@ -2,28 +2,23 @@
 
 <div class="filters">
   <fieldset>
-    <legend>Filter by status</legend>
-
+    <legend>$filter$</legend>
     <label>
-      <input type="checkbox" value="Still in box" checked>
-      Still in box
+      <input class="me-2" type="checkbox" value="$filter-plamo-in-box$" checked>
+      $filter-plamo-in-box$
     </label>
-
     <label>
-      <input type="checkbox" value="Building" checked>
-      Building
+      <input class="me-2" type="checkbox" value="$filter-plamo-building$" checked>
+      $filter-plamo-building$
     </label>
-
     <label>
-      <input type="checkbox" value="Built" checked>
-      Built
+      <input class="me-2" type="checkbox" value="$filter-plamo-built$" checked>
+      $filter-plamo-built$
     </label>
-
     <label>
-      <input type="checkbox" value="Complete" checked>
-      Complete
+      <input class="me-2" type="checkbox" value="$filter-plamo-complete$" checked>
+      $filter-plamo-complete$
     </label>
-
   </fieldset>
 </div>
 
@@ -82,6 +77,26 @@ document.addEventListener("DOMContentLoaded", function () {
     const checkboxes = document.querySelectorAll(".filters input[type=checkbox]");
     const kits = document.querySelectorAll(".kit");
 
+    // Count by status.
+    const counts = {};
+    kits.forEach(kit => {
+        const status = kit.dataset.status;
+        counts[status] = (counts[status] || 0) + 1;
+    });
+
+    // Update each filter label with the count.
+    document.querySelectorAll(".filters input[type='checkbox']")
+    .forEach(checkbox => {
+          const value = checkbox.value;
+          const count = counts[value] || 0;
+
+          // Update label text
+          const label = checkbox.parentElement;
+          const textNode = label.childNodes[label.childNodes.length - 1];
+
+          textNode.textContent = textNode.textContent.trim() + " (" + count + ")";
+    });
+
     function updateFilter() {
         const selected = Array.from(checkboxes)
             .filter(cb => cb.checked)