diff --git a/src/pages/tasking/components/alerts.js b/src/pages/tasking/components/alerts.js index d7945c9c..62eed616 100644 --- a/src/pages/tasking/components/alerts.js +++ b/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,7 +37,8 @@ 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 = ''; @@ -45,7 +46,7 @@ function renderRules(container, 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) { @@ -53,6 +54,10 @@ function renderRules(container, rules) { } 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 = `
-
Reduces eye strain in low light environments.
+
+ +
+ + +
+
Alerts will start collapsed.
+