diff --git a/src/static/admin.js b/src/static/admin.js
index 2658354..822ab25 100644
--- a/src/static/admin.js
+++ b/src/static/admin.js
@@ -203,7 +203,7 @@ async function loadKeypasses() {
const lbl = document.createElement("label");
lbl.style.cssText = "display:flex;align-items:center;gap:.75rem;cursor:pointer;padding:.5rem .75rem;background:var(--surface2);border-radius:6px;border:1px solid var(--border);margin:0";
const checked = allowedIds && allowedIds.includes(g.id) ? "checked" : "";
- lbl.innerHTML = `
${esc(g.name)} ${g.gate_type === 'car' ? '🚘 Car' : '🚶 Pedestrian'}`;
+ lbl.innerHTML = `
${esc(g.name)} ${g.gate_icon || ''}`;
checksContainer.appendChild(lbl);
}
const allGatesCb = document.getElementById("kp-edit-all-gates");
@@ -281,7 +281,7 @@ document.getElementById("btn-new-keypass").addEventListener("click", () => {
for (const g of _allGates) {
const lbl = document.createElement("label");
lbl.style.cssText = "display:flex;align-items:center;gap:.75rem;cursor:pointer;padding:.5rem .75rem;background:var(--surface2);border-radius:6px;border:1px solid var(--border);margin:0";
- lbl.innerHTML = `
${esc(g.name)} ${g.gate_type === 'car' ? '🚘 Car' : '🚶 Pedestrian'}`;
+ lbl.innerHTML = `
${esc(g.name)} ${g.gate_icon || ''}`;
checksContainer.appendChild(lbl);
}
// Reset All gates checkbox
@@ -436,7 +436,7 @@ async function loadGates() {
${g.id} |
${esc(g.name)} |
${g.group_name ? esc(g.group_name) : '\u2014'} |
-
${g.gate_type === "car" ? "\u{1F698} Car" : "\u{1F6B6} Pedestrian"} |
+
${g.gate_icon || ''} |
${esc(providerLabel)} |
${esc(deviceId)} |
${badge} |
@@ -478,12 +478,35 @@ async function loadGates() {
});
}
+function _setGateIcon(icon) {
+ document.getElementById("gate-icon-input").value = icon;
+ document.getElementById("gate-icon-preview").textContent = icon;
+ document.querySelectorAll("#gate-icon-grid .icon-opt").forEach(btn => {
+ btn.classList.toggle("selected", btn.dataset.icon === icon);
+ });
+}
+
+// Icon grid clicks + manual input sync
+document.getElementById("gate-icon-grid").addEventListener("click", e => {
+ const btn = e.target.closest(".icon-opt");
+ if (btn) _setGateIcon(btn.dataset.icon);
+});
+document.getElementById("gate-icon-input").addEventListener("input", e => {
+ const val = [...e.target.value].slice(0, 2).join(""); // keep at most one composed char
+ if (val) {
+ document.getElementById("gate-icon-preview").textContent = val;
+ document.querySelectorAll("#gate-icon-grid .icon-opt").forEach(btn => {
+ btn.classList.toggle("selected", btn.dataset.icon === val);
+ });
+ }
+});
+
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";
+ _setGateIcon(gate ? (gate.gate_icon || "🚪") : "🚪");
const provider = gate ? (gate.api_provider || "avconnect") : "avconnect";
document.getElementById("gate-api-provider").value = provider;
document.getElementById("gate-avconnect-macro-id").value = gate ? (gate.avconnect_macro_id || "") : "";
@@ -536,7 +559,7 @@ document.getElementById("gate-form").addEventListener("submit", async e => {
const provider = document.getElementById("gate-api-provider").value;
const payload = {
name: document.getElementById("gate-name").value.trim(),
- gate_type: document.getElementById("gate-type").value,
+ gate_icon: document.getElementById("gate-icon-input").value.trim() || "\uD83D\uDEAA",
api_provider: provider,
avconnect_macro_id: provider === "avconnect" ? document.getElementById("gate-avconnect-macro-id").value.trim() : null,
shelly_device_id: provider === "shelly" ? document.getElementById("gate-shelly-device-id").value.trim() : null,
@@ -565,7 +588,7 @@ document.getElementById("gate-form").addEventListener("submit", async e => {
// ── Credentials ───────────────────────────────────────────────────────────────
async function loadCredentials() {
try {
- const list = await api("GET", "/api/admin/credentials");
+ const list = await api("GET", "/api/admin/credentials/avconnect");
if (list.length) {
document.getElementById("cred-username").value = list[0].username;
}
@@ -604,7 +627,7 @@ document.getElementById("credentials-form").addEventListener("submit", async e =
return;
}
try {
- await api("PUT", "/api/admin/credentials", { username, password });
+ await api("PUT", "/api/admin/credentials/avconnect", { username, password });
document.getElementById("cred-password").value = "";
showToast("AVConnect credentials saved");
} catch (e) {
diff --git a/src/static/app.js b/src/static/app.js
index a676a18..328214f 100644
--- a/src/static/app.js
+++ b/src/static/app.js
@@ -118,7 +118,6 @@ async function updateMap(gates) {
const popup = L.popup().setContent(
`
`
);
- const marker = L.marker([gate.lat, gate.lon], { icon: _gateIcon(gate.gate_type) })
+ const marker = L.marker([gate.lat, gate.lon], { icon: _gateIcon() })
.bindPopup(popup)
.addTo(_map);
_mapMarkers.push(marker);
@@ -189,9 +188,9 @@ function renderGates(gates) {
groupGrid.className = "gate-group-grid";
for (const gate of groups.get(key)) {
- const icon = gate.gate_type === "car" ? "🚘" : "🚶";
+ const icon = gate.gate_icon || '🚪';
const btn = document.createElement("button");
- btn.className = `gate-btn ${gate.gate_type}`;
+ btn.className = "gate-btn";
btn.dataset.gateId = gate.id;
btn.innerHTML = `
${icon}${gate.name}`;
btn.addEventListener("click", () => handleOpenGate(btn, gate));
diff --git a/src/static/style.css b/src/static/style.css
index c6d0766..defebca 100644
--- a/src/static/style.css
+++ b/src/static/style.css
@@ -105,8 +105,7 @@ label {
overflow: hidden;
}
.gate-btn .icon { font-size: 1.8rem; line-height: 1; }
-.gate-btn.car { background: var(--primary); color: #fff; }
-.gate-btn.pedestrian { background: var(--green); color: #fff; }
+.gate-btn { background: var(--primary); color: #fff; }
.gate-btn:not(:disabled):active { transform: scale(.94); }
.gate-btn:disabled { opacity: .55; cursor: not-allowed; }