Master dev

src/pages/tasking/components/alerts.js

@@ -1,7 +1,7 @@
 import L from 'leaflet';
 import ko from 'knockout';
 
-const ruleState = new Map(); // key: rule.id -> { collapsed: boolean, lastCount: number }
+const ruleState = new Map(); // key: rule.id -> { collapsed: boolean, open: boolean, lastCount: number }
 
 /**
  * SVG hazard icon used in the header
@@ -37,22 +37,27 @@ function createLeafletControl(L) {
  * Render a list of active rules into the container. - RAW html no KO here yet
  * Each rule: { id, level, title, items:[{id,label}], count, onClick? }
  */
-function renderRules(container, rules) {
+function renderRules(container, rules, opts = {}) {
+  const allowCollapse = opts.allowCollapse !== false;
   container.style.display = rules.length ? '' : 'none';
   container.innerHTML = '';
 
   for (const rule of rules) {
     // --- restore / update state for this rule ---
     let state = ruleState.get(rule.id);
     if (!state) {
-      state = { collapsed: false, lastCount: rule.count };
+      state = { collapsed: false, open: false, lastCount: rule.count };
     } else {
       // if the count changed while collapsed, auto-expand
       if (state.collapsed && rule.count !== state.lastCount) {
         state.collapsed = false;
       }
       state.lastCount = rule.count;
     }
+    if (!allowCollapse) {
+      state.collapsed = false;
+      state.open = true;
+    }
     ruleState.set(rule.id, state);
 
     const div = document.createElement('div');
@@ -61,12 +66,15 @@ function renderRules(container, rules) {
     if (state.collapsed) {
       div.classList.add('alerts--collapsed');
       width = "24px"
-  }
+    }
+    if (!state.collapsed && state.open) {
+      div.classList.add('alerts--open');
+    }
 
     div.innerHTML = `
       <div class="alerts" style="width: ${width};">
         <div class="alerts__header">
-          <button type="button" class="alerts__btn" aria-expanded="${!state.collapsed}">
+          <button type="button" class="alerts__btn" aria-expanded="${!state.collapsed && !!state.open}">
             ${hazardSvg()}
             <span class="alerts__title">${rule.title}</span>
             <span class="alerts__count">${rule.count}</span>
@@ -83,43 +91,52 @@ function renderRules(container, rules) {
 
     const btn = div.querySelector('.alerts__btn');
     const hideBtn = div.querySelector('.alerts__hide-btn');
+    if (!allowCollapse) {
+      hideBtn.style.display = 'none';
+    }
 
     // main button: toggle open; if collapsed, un-collapse first
     btn.addEventListener('click', () => {
-      const st = ruleState.get(rule.id) || { collapsed: false, lastCount: rule.count };
+      const st = ruleState.get(rule.id) || { collapsed: false, open: false, lastCount: rule.count };
 
       if (st.collapsed) {
         st.collapsed = false;
+        st.open = true;
         ruleState.set(rule.id, st);
         div.classList.remove('alerts--collapsed');
-              div.querySelector('.alerts').style.width = '280px';
+        div.querySelector('.alerts').style.width = '280px';
 
       }
 
       const openNow = !div.classList.contains('alerts--open');
       div.classList.toggle('alerts--open', openNow);
       btn.setAttribute('aria-expanded', String(openNow));
+      st.open = openNow;
+      ruleState.set(rule.id, st);
     });
 
     // hide button: collapse down to icon
-    hideBtn.addEventListener('click', (ev) => {
-      ev.stopPropagation();
-      const st = ruleState.get(rule.id) || { collapsed: false, lastCount: rule.count };
-      st.collapsed = true;
-      st.lastCount = rule.count;
-      ruleState.set(rule.id, st);
+    if (allowCollapse) {
+      hideBtn.addEventListener('click', (ev) => {
+        ev.stopPropagation();
+        const st = ruleState.get(rule.id) || { collapsed: false, open: false, lastCount: rule.count };
+        st.collapsed = true;
+        st.open = false;
+        st.lastCount = rule.count;
+        ruleState.set(rule.id, st);
 
-      div.classList.remove('alerts--open');
-      btn.setAttribute('aria-expanded', 'false');
-
-      div.querySelector('.alerts').animate(
-        [{ width: '280px' }, { width: '24px' }],
-        { duration: 300, easing: 'ease-in-out' }
-      ).onfinish = () => {
-        div.querySelector('.alerts').style.width = '24px';
-      };
-      div.classList.add('alerts--collapsed');
-    });
+        div.classList.remove('alerts--open');
+        btn.setAttribute('aria-expanded', 'false');
+
+        div.querySelector('.alerts').animate(
+          [{ width: '280px' }, { width: '24px' }],
+          { duration: 300, easing: 'ease-in-out' }
+        ).onfinish = () => {
+          div.querySelector('.alerts').style.width = '24px';
+        };
+        div.classList.add('alerts--collapsed');
+      });
+    }
 
     // optional item click handler (e.g. fly to job)
     if (typeof rule.onClick === 'function') {
@@ -319,7 +336,9 @@ export function installAlerts(map, vm) {
 
   ko.computed(() => {
     const rules = computeActiveRules();
-    renderRules(el, rules);
+    renderRules(el, rules, {
+      allowCollapse: !!vm?.config?.alertsCollapsibleRules?.(),
+    });
   });
 
   return { control, registerAlertRule }; // allow caller to register later if desired

src/pages/tasking/main.js

@@ -59,6 +59,7 @@ import { renderFRAOSLayer } from "./mapLayers/frao.js";
 import { registerHazardWatchWarningsLayer } from "./mapLayers/hazardwatch.js"
 import { registerPowerBoundariesGridLayer } from "./mapLayers/power.js";
 import { registerWaterNSWBoundariesLayer, registerEPAContaminationSitesLayer } from "./mapLayers/waternsw.js";
+import { registerNSWDeclaredDamsLayer } from "./mapLayers/dams.js";
 import { registerBOMLandWarningsLayer } from "./mapLayers/bom.js";
 import { registerRainRadarLayer } from "./mapLayers/rainviewer.js";
 import { 
@@ -2464,6 +2465,7 @@ function VM() {
     registerPowerBoundariesGridLayer(self, map);
     registerWaterNSWBoundariesLayer(self);
     registerEPAContaminationSitesLayer(self);
+    registerNSWDeclaredDamsLayer(self);
     registerBOMLandWarningsLayer(self);
     registerBOMRainfallLayer(self, sourceUrl);
     registerBOMRadarLayer(self, sourceUrl);

src/pages/tasking/mapLayers/dams.js

@@ -0,0 +1,88 @@
+import L from "leaflet";
+import * as esri from "esri-leaflet";
+
+const DAMS_URL =
+  "https://portal.data.nsw.gov.au/arcgis/rest/services/Hosted/Dam_Safety_NSW_Declared_Dams/FeatureServer/0";
+
+function getNameFromProps(p) {
+  if (!p) return "Dam";
+  return (
+    p.dam_name ||
+    p.place_name ||
+    p.DAM_NAME ||
+    p.NAME ||
+    p.DAM ||
+    p.FACILITY_NAME ||
+    p.STORAGE_NAME ||
+    "Dam"
+  );
+}
+
+export function registerNSWDeclaredDamsLayer(vm) {
+  vm.mapVM.registerPollingLayer("nswDeclaredDams", {
+    label: "NSW Declared Dams",
+    menuGroup: "Public Service",
+    refreshMs: 0, // reference data – no auto-refresh
+    visibleByDefault: localStorage.getItem("ov.nswDeclaredDams") || false,
+    fetchFn: async () => ({ ok: true }),
+    drawFn: (layerGroup, data) => {
+      if (!data) return;
+
+      const featureLayer = esri.featureLayer({
+        url: DAMS_URL,
+        where: "1=1",
+        fields: [
+          "objectid",
+          "pkdamid",
+          "dam_name",
+          "place_name",
+          "company",
+          "owner_type",
+          "declared_status",
+          "longitude",
+          "latitude",
+        ],
+        pane: "pane-middle",
+        pointToLayer: (_geojson, latlng) => {
+          return L.circleMarker(latlng, {
+            pane: "pane-middle",
+            radius: 5,
+            weight: 1,
+            color: "#163a63",
+            fillColor: "#2b7bbb",
+            fillOpacity: 0.85,
+          });
+        },
+        style: () => ({
+          weight: 1.2,
+          color: "#163a63",
+          fillColor: "#2b7bbb",
+          fillOpacity: 0.25,
+        }),
+      });
+
+      featureLayer.bindPopup((layer) => {
+        const p = layer?.feature?.properties || {};
+        const name = getNameFromProps(p);
+        const place = p.place_name || "";
+        const company = p.company || "";
+        const ownerType = p.owner_type || "";
+        const declaredStatus = p.declared_status || "";
+        const damId = p.pkdamid ?? "";
+
+        return [
+          `<strong>${name}</strong>`,
+          place ? `<br><strong>Place:</strong> ${place}` : "",
+          company ? `<br><strong>Company:</strong> ${company}` : "",
+          ownerType ? `<br><strong>Owner Type:</strong> ${ownerType}` : "",
+          declaredStatus
+            ? `<br><strong>Declared Status:</strong> ${declaredStatus}`
+            : "",
+          damId !== "" ? `<br><strong>Dam ID:</strong> ${damId}` : "",
+        ].join("");
+      });
+
+      layerGroup.addLayer(featureLayer);
+    },
+  });
+}

src/pages/tasking/viewmodels/Config.js

@@ -90,6 +90,7 @@ export function ConfigVM(root, deps) {
     self.clusterEnabled = ko.observable(true);
     self.clusterRadius = ko.observable(60);   // maxClusterRadius in px (10–80)
     self.clusterRescueJobs = ko.observable(true);
+    self.alertsCollapsibleRules = ko.observable(true);
 
     // pinned rows
     self.pinnedTeamIds = ko.observableArray([]);
@@ -177,6 +178,7 @@ export function ConfigVM(root, deps) {
         clusterEnabled: !!self.clusterEnabled(),
         clusterRadius: Number(self.clusterRadius()) || 60,
         clusterRescueJobs: !!self.clusterRescueJobs(),
+        alertsCollapsibleRules: !!self.alertsCollapsibleRules(),
     });
 
     // Helpers
@@ -472,6 +474,9 @@ export function ConfigVM(root, deps) {
         if (typeof cfg.clusterRescueJobs === 'boolean') {
             self.clusterRescueJobs(cfg.clusterRescueJobs);
         }
+        if (typeof cfg.alertsCollapsibleRules === 'boolean') {
+            self.alertsCollapsibleRules(cfg.alertsCollapsibleRules);
+        }
 
 
         self.afterConfigLoad()
@@ -609,6 +614,10 @@ export function ConfigVM(root, deps) {
         self.save();
     })
 
+    self.alertsCollapsibleRules.subscribe(() => {
+        self.save();
+    })
+
     self.darkMode.subscribe((isDark) => {
         self._applyDarkMode();
 

static/pages/tasking.html

@@ -1970,6 +1970,19 @@ <h2 class="accordion-header" id="headingGeneral">
                                                         </div>
                                                         <div class="form-text">Reduces eye strain in low light environments.</div>
                                                     </div>
+                                                    <div class="col-sm-6 col-md-3">
+                                                        <label class="form-label">
+                                                            <i class="fa fa-bell me-1"></i>Alerts Panel
+                                                        </label>
+                                                        <div class="form-check form-switch mt-2">
+                                                            <input class="form-check-input" type="checkbox" id="alertsCollapsibleRulesToggle"
+                                                                data-bind="checked: config.alertsCollapsibleRules">
+                                                            <label class="form-check-label" for="alertsCollapsibleRulesToggle">
+                                                                Auto collapse alert popups
+                                                            </label>
+                                                        </div>
+                                                        <div class="form-text">Alerts will start collapsed.</div>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </div>