Add gate groups. Graphics adjustments
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user