Updated

hubzilla/addon/scn01/view/js/scn01.js

@@ -1,8 +1,8 @@
-/* scn01 — Scenarios — v0.3.0 */
+/* scn01 — Scenarios — v0.4.0 */
 (function () {
     'use strict';
 
-    var MAX_PINNED = 5;
+    var MAX_PINNED = 3;
 
     function init() {
         var dataEl = document.getElementById('scn01-data');
@@ -18,14 +18,16 @@
         var scenarios = data.scenarios || [];
         if (!scenarios.length) return;
 
-        var cardEl    = document.getElementById('scn01-card');
+        var cardEl     = document.getElementById('scn01-card');
-        var pinnedEl  = document.getElementById('scn01-pinned');
+        var pinnedEl   = document.getElementById('scn01-pinned');
-        var prevBtn   = document.getElementById('scn01-prev');
+        var prevBtn    = document.getElementById('scn01-prev');
-        var nextBtn   = document.getElementById('scn01-next');
+        var nextBtn    = document.getElementById('scn01-next');
-        var fieldsEl  = document.getElementById('scn01-pinned-fields');
+        var fieldsEl   = document.getElementById('scn01-pinned-fields');
+        var categoryEl = document.getElementById('scn01-category');
 
         var index = 0;
         var pinned = []; // array of scenario ids, in pin order
+        var visible = scenarios; // current filtered list
 
         function findScenario(id) {
             for (var i = 0; i < scenarios.length; i++) {
@@ -34,9 +36,45 @@
             return null;
         }
 
+        function populateCategories() {
+            if (!categoryEl) return;
+            var seen = {};
+            var categories = [];
+            scenarios.forEach(function (s) {
+                if (!seen[s.category]) {
+                    seen[s.category] = true;
+                    categories.push(s.category);
+                }
+            });
+            categories.sort();
+            categories.forEach(function (cat) {
+                var opt = document.createElement('option');
+                opt.value = cat;
+                opt.textContent = cat;
+                categoryEl.appendChild(opt);
+            });
+            categoryEl.addEventListener('change', function () {
+                applyFilter(categoryEl.value);
+            });
+        }
+
+        function applyFilter(category) {
+            visible = category
+                ? scenarios.filter(function (s) { return s.category === category; })
+                : scenarios;
+            index = 0;
+            renderCard();
+        }
+
         function renderCard() {
             if (!cardEl) return;
-            var s = scenarios[index];
+
+            if (!visible.length) {
+                cardEl.innerHTML = '<p class="text-muted mb-0">No scenarios in this category.</p>';
+                return;
+            }
+
+            var s = visible[index];
             var isPinned = pinned.indexOf(s.id) !== -1;
             var atMax = pinned.length >= MAX_PINNED && !isPinned;
 
@@ -64,7 +102,7 @@
 
             var counter = document.createElement('div');
             counter.className = 'scn01-counter small text-muted';
-            counter.textContent = (index + 1) + ' / ' + scenarios.length;
+            counter.textContent = (index + 1) + ' / ' + visible.length;
             cardEl.appendChild(counter);
         }
 
@@ -74,26 +112,28 @@
 
             if (!pinned.length) {
                 pinnedEl.style.display = 'none';
-            } else {
+                return;
-                pinnedEl.style.display = '';
-                var label = document.createElement('div');
-                label.className = 'scn01-pinned-label small text-muted';
-                label.textContent = 'Selected (' + pinned.length + '/' + MAX_PINNED + '):';
-                pinnedEl.appendChild(label);
-
-                pinned.forEach(function (id) {
-                    var s = findScenario(id);
-                    if (!s) return;
-                    var chip = document.createElement('span');
-                    chip.className = 'scn01-pin-chip';
-                    chip.textContent = s.category;
-                    chip.title = s.text;
-                    chip.addEventListener('click', function () {
-                        togglePin(id);
-                    });
-                    pinnedEl.appendChild(chip);
-                });
             }
+
+            pinnedEl.style.display = 'block';
+
+            var label = document.createElement('div');
+            label.className = 'scn01-pinned-label small text-muted';
+            label.textContent = 'Selected (' + pinned.length + '/' + MAX_PINNED + '):';
+            pinnedEl.appendChild(label);
+
+            pinned.forEach(function (id) {
+                var s = findScenario(id);
+                if (!s) return;
+                var chip = document.createElement('span');
+                chip.className = 'scn01-pin-chip';
+                chip.textContent = s.category;
+                chip.title = s.text;
+                chip.addEventListener('click', function () {
+                    togglePin(id);
+                });
+                pinnedEl.appendChild(chip);
+            });
         }
 
         function renderFields() {
@@ -122,17 +162,18 @@
 
         if (prevBtn) {
             prevBtn.addEventListener('click', function () {
-                index = (index - 1 + scenarios.length) % scenarios.length;
+                index = (index - 1 + visible.length) % visible.length;
                 renderCard();
             });
         }
         if (nextBtn) {
             nextBtn.addEventListener('click', function () {
-                index = (index + 1) % scenarios.length;
+                index = (index + 1) % visible.length;
                 renderCard();
             });
         }
 
+        populateCategories();
         renderCard();
         renderPinned();
         renderFields();