Add gate groups. Graphics adjustments

This commit is contained in:
Ettore
2026-05-07 23:42:27 +02:00
parent d30b320595
commit 893a5e4750
7 changed files with 86 additions and 27 deletions

View File

@@ -64,15 +64,46 @@ function renderGates(gates) {
loading.classList.add("hidden");
grid.classList.remove("hidden");
// Group gates by group_name; null/empty = ungrouped (rendered last, no heading)
const groups = new Map();
for (const gate of gates) {
const icon = gate.gate_type === "car" ? "🚘" : "🚶";
const label = gate.gate_type === "car" ? "Car" : "Pedestrian";
const btn = document.createElement("button");
btn.className = `gate-btn ${gate.gate_type}`;
btn.dataset.gateId = gate.id;
btn.innerHTML = `<span class="icon">${icon}</span><span>${gate.name}</span>`;
btn.addEventListener("click", () => handleOpenGate(btn, gate));
grid.appendChild(btn);
const key = gate.group_name || "";
if (!groups.has(key)) groups.set(key, []);
groups.get(key).push(gate);
}
const hasNamedGroups = [...groups.keys()].some(k => k !== "");
const sortedKeys = [...groups.keys()].sort((a, b) => {
if (a === "" && b !== "") return 1;
if (a !== "" && b === "") return -1;
return a.localeCompare(b);
});
for (const key of sortedKeys) {
const section = document.createElement("div");
section.className = "gate-group";
if (hasNamedGroups && key) {
const title = document.createElement("div");
title.className = "gate-group-title";
title.textContent = key;
section.appendChild(title);
}
const groupGrid = document.createElement("div");
groupGrid.className = "gate-group-grid";
for (const gate of groups.get(key)) {
const icon = gate.gate_type === "car" ? "🚘" : "🚶";
const btn = document.createElement("button");
btn.className = `gate-btn ${gate.gate_type}`;
btn.dataset.gateId = gate.id;
btn.innerHTML = `<span class="icon">${icon}</span><span>${gate.name}</span>`;
btn.addEventListener("click", () => handleOpenGate(btn, gate));
groupGrid.appendChild(btn);
}
section.appendChild(groupGrid);
grid.appendChild(section);
}
}