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

@@ -141,12 +141,12 @@ async function loadKeypasses() {
<td>${gatesCell}</td>
<td>${expiresCell}</td>
<td>${badge}</td>
<td style="text-align:right">
<td><div style="display:flex;gap:.5rem;justify-content:flex-end;white-space:nowrap">
${!kp.revoked ? `<button class="btn btn-ghost" style="font-size:.8rem;padding:.35rem .9rem"
data-edit-kp='${JSON.stringify({id:kp.id, description:kp.description, expires_at:kp.expires_at, allowed_gate_ids:kp.allowed_gate_ids})}'>Edit</button>` : ""}
${!kp.revoked && expMs >= now ? `<button class="btn btn-danger" style="font-size:.8rem;padding:.35rem .9rem"
data-kp-id="${kp.id}">Revoke</button>` : ""}
</td>`;
</div></td>`;
tbody.appendChild(tr);
}
@@ -345,17 +345,18 @@ async function loadGates() {
tr.innerHTML = `
<td>${g.id}</td>
<td>${esc(g.name)}</td>
<td>${g.group_name ? esc(g.group_name) : '<span style="color:var(--text-muted)">—</span>'}</td>
<td>${g.gate_type === "car" ? "🚘 Car" : "🚶 Pedestrian"}</td>
<td><code style="font-size:.85em">${esc(g.avconnect_macro_id)}</code></td>
<td>${badge}</td>
<td style="text-align:right;white-space:nowrap;display:flex;gap:.5rem;justify-content:flex-end">
<td><div style="text-align:right;white-space:nowrap;display:flex;gap:.5rem;justify-content:flex-end">
${g.status === 'enabled' ? `<button class="btn btn-primary" style="font-size:.8rem;padding:.35rem .9rem"
data-open-id="${g.id}">Open</button>` : ''}
${isAdmin ? `<button class="btn btn-ghost" style="font-size:.8rem;padding:.35rem .9rem"
data-edit-id="${g.id}" data-gate='${JSON.stringify(g)}'>Edit</button>
<button class="btn btn-danger" style="font-size:.8rem;padding:.35rem .9rem"
data-del-id="${g.id}">Delete</button>` : ''}
</td>`;
</div></td>`;
tbody.appendChild(tr);
}
@@ -390,10 +391,20 @@ function openGateModal(gate = null) {
document.getElementById("gate-modal-title").textContent = gate ? "Edit Gate" : "Add Gate";
document.getElementById("gate-edit-id").value = gate ? gate.id : "";
document.getElementById("gate-name").value = gate ? gate.name : "";
document.getElementById("gate-group-name").value = gate ? (gate.group_name || "") : "";
document.getElementById("gate-type").value = gate ? gate.gate_type : "car";
document.getElementById("gate-avconnect-macro-id").value = gate ? gate.avconnect_macro_id : "";
document.getElementById("gate-status").value = gate ? gate.status : "enabled";
document.getElementById("gate-error").classList.add("hidden");
// Populate group suggestions from existing gates
const dl = document.getElementById("gate-group-list");
dl.innerHTML = "";
const groups = [...new Set((_allGates || []).map(g => g.group_name).filter(Boolean))].sort();
for (const g of groups) {
const opt = document.createElement("option");
opt.value = g;
dl.appendChild(opt);
}
document.getElementById("gate-modal").classList.remove("hidden");
}
@@ -409,6 +420,7 @@ document.getElementById("gate-form").addEventListener("submit", async e => {
gate_type: document.getElementById("gate-type").value,
avconnect_macro_id: document.getElementById("gate-avconnect-macro-id").value.trim(),
status: document.getElementById("gate-status").value,
group_name: document.getElementById("gate-group-name").value.trim() || null,
};
const errEl = document.getElementById("gate-error");
errEl.classList.add("hidden");
@@ -505,11 +517,11 @@ async function loadAdmins() {
: '<span class="badge badge-muted" style="font-size:.75em">manager</span>';
const tr = document.createElement("tr");
tr.innerHTML = `
<td>${esc(u.username)}${u.username === me ? ' <span class="badge badge-green" style="font-size:.75em">you</span>' : ""} ${roleBadge}</td>
<td style="text-align:right;display:flex;gap:.5rem;justify-content:flex-end">
<td><div style="display:flex;align-items:center;gap:.4rem;flex-wrap:nowrap">${esc(u.username)}${u.username === me ? '<span class="badge badge-green" style="font-size:.75em">you</span>' : ""} ${roleBadge}</div></td>
<td><div style="text-align:right;display:flex;gap:.5rem;justify-content:flex-end">
<button class="btn btn-ghost" style="font-size:.8rem;padding:.35rem .9rem" data-chpw="${esc(u.username)}">Change password</button>
${u.username !== me ? `<button class="btn btn-danger" style="font-size:.8rem;padding:.35rem .9rem" data-del-admin="${esc(u.username)}">Delete</button>` : ""}
</td>`;
</div></td>`;
tbody.appendChild(tr);
}
tbody.querySelectorAll("[data-chpw]").forEach(btn => {