ettore.dreucci/lagomareGates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add gate icon and remove gate type

Browse Source
This commit is contained in:
Ettore
2026-05-14 19:47:15 +02:00
parent db3966a1d7
commit e2de0ae1fa
9 changed files with 106 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/static/admin.html
View File

@@ -78,6 +78,20 @@
margin-bottom: 1rem;
}
.section-header h3 { font-size: 1rem; font-weight: 700; }
/* ── Gate icon picker ───────────────────────────────────────────────── */
.icon-opt {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: .4rem;
cursor: pointer;
font-size: 1.3rem;
line-height: 1;
padding: .3rem .45rem;
transition: border-color .12s, background .12s;
}
.icon-opt:hover { border-color: var(--primary); }
.icon-opt.selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, transparent); }
</style>
</head>
<body>
@@ -166,7 +180,7 @@
<th>ID</th>
<th>Name</th>
<th>Group</th>
<th>Type</th>
<th>Icon</th>
<th>Provider</th>
<th>Device / Macro ID</th>
<th>Status</th>
@@ -467,11 +481,32 @@
<datalist id="gate-group-list"></datalist>
</div>
<div class="field">
<label for="gate-type">Type</label>
<select id="gate-type">
<option value="car">Car</option>
<option value="pedestrian">Pedestrian</option>
</select>
<label>Icon</label>
<div style="display:flex;flex-direction:column;gap:.5rem">
<div style="display:flex;flex-wrap:wrap;gap:.35rem" id="gate-icon-grid">
<button type="button" class="icon-opt" data-icon="🚘">🚘</button>
<button type="button" class="icon-opt" data-icon="🚗">🚗</button>
<button type="button" class="icon-opt" data-icon="🚙">🚙</button>
<button type="button" class="icon-opt" data-icon="🚕">🚕</button>
<button type="button" class="icon-opt" data-icon="🚌">🚌</button>
<button type="button" class="icon-opt" data-icon="🚛">🚛</button>
<button type="button" class="icon-opt" data-icon="🚲">🚲</button>
<button type="button" class="icon-opt" data-icon="🏍️">🏍️</button>
<button type="button" class="icon-opt" data-icon="🚶">🚶</button>
<button type="button" class="icon-opt" data-icon="🧍">🧍</button>
<button type="button" class="icon-opt" data-icon="🚪">🚪</button>
<button type="button" class="icon-opt" data-icon="⛩️">⛩️</button>
<button type="button" class="icon-opt" data-icon="🏠">🏠</button>
<button type="button" class="icon-opt" data-icon="🏢">🏢</button>
<button type="button" class="icon-opt" data-icon="🔒">🔒</button>
<button type="button" class="icon-opt" data-icon="🔑">🔑</button>
</div>
<div style="display:flex;align-items:center;gap:.6rem">
<span id="gate-icon-preview" style="font-size:1.6rem;line-height:1;min-width:2rem;text-align:center">🚪</span>
<input id="gate-icon-input" type="text" placeholder="Type or paste any character…"
style="flex:1" maxlength="4" autocomplete="off" />
</div>
</div>
</div>
<div class="field">
<label for="gate-api-provider">API Provider</label>
@@ -486,7 +521,7 @@
</div>
<div class="field" id="gate-shelly-field" style="display:none">
<label for="gate-shelly-device-id">Shelly Device ID</label>
<input id="gate-shelly-device-id" type="text" placeholder="e.g. e0:98:06:xx:xx:xx" />
<input id="gate-shelly-device-id" type="text" placeholder="e.g. ab12cd34ef56" />
</div>
<div class="field">
<label for="gate-status">Status</label>