tarcourt/snek
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: remove connecting badge and redundant button alert badge

Browse Source 
- Replaced connection status badge with a small colored dot in the header
  (green when connected, red when disconnected, gray while connecting)
- Removed the 'button' badge on device cards - it duplicated the info
  already shown when mode == Button and just added visual noise
This commit is contained in:
gitomarcourt
2026-07-03 18:09:13 +02:00
parent d84da9f9ae
commit 974f4f16d7
1 changed files with 7 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/static/index.html
+7 -14
View File
@@ -26,10 +26,7 @@
<h1 class="text-xl md:text-2xl font-semibold tracking-tight">SNEK Dashboard</h1>
<p class="text-sm text-slate-500 mt-0.5">Live Sens'it uplink decoding</p>
</div>
<div id="conn-badge" class="inline-flex items-center gap-2 text-xs px-2.5 py-1 rounded-md bg-slate-100 text-slate-600 border border-slate-200 w-fit">
<span id="conn-dot" class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
<span id="conn-text">connecting</span>
</div>
<span id="conn-dot" class="w-2 h-2 rounded-full bg-slate-300" title="disconnected"></span>
</header>
<!-- Devices -->
@@ -156,7 +153,6 @@ function renderDevices() {
<div class="mt-1 flex items-center gap-2 flex-wrap">
${badge(d.mode || 'Unknown', modeTone(d.mode))}
${d.format ? badge(d.format.replace('sensit_','').toUpperCase(), 'slate') : ''}
${d.button_alert ? badge('button', 'blue') : ''}
</div>
</div>
<div class="text-right shrink-0">
@@ -247,17 +243,14 @@ async function bootstrap() {
function setConn(state) {
const dot = document.getElementById('conn-dot');
const txt = document.getElementById('conn-text');
const bg = document.getElementById('conn-badge');
const map = {
live: ['bg-emerald-500', 'live', 'bg-emerald-50 text-emerald-700 border-emerald-200'],
off: ['bg-rose-500', 'reconnecting', 'bg-rose-50 text-rose-700 border-rose-200'],
idle: ['bg-slate-400', 'connecting', 'bg-slate-100 text-slate-600 border-slate-200'],
live: ['bg-emerald-500', 'connected'],
off: ['bg-rose-500', 'disconnected'],
idle: ['bg-slate-300', 'connecting'],
};
const [d, t, b] = map[state] || map.idle;
dot.className = `w-1.5 h-1.5 rounded-full ${d}`;
txt.textContent = t;
bg.className = `inline-flex items-center gap-2 text-xs px-2.5 py-1 rounded-md border w-fit ${b}`;
const [color, title] = map[state] || map.idle;
dot.className = `w-2 h-2 rounded-full ${color}`;
dot.title = title;
}
function connectSSE() {