ui: remove connecting badge and redundant button alert badge
- 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:
@@ -26,10 +26,7 @@
|
|||||||
<h1 class="text-xl md:text-2xl font-semibold tracking-tight">SNEK Dashboard</h1>
|
<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>
|
<p class="text-sm text-slate-500 mt-0.5">Live Sens'it uplink decoding</p>
|
||||||
</div>
|
</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-2 h-2 rounded-full bg-slate-300" title="disconnected"></span>
|
||||||
<span id="conn-dot" class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
|
|
||||||
<span id="conn-text">connecting</span>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Devices -->
|
<!-- Devices -->
|
||||||
@@ -156,7 +153,6 @@ function renderDevices() {
|
|||||||
<div class="mt-1 flex items-center gap-2 flex-wrap">
|
<div class="mt-1 flex items-center gap-2 flex-wrap">
|
||||||
${badge(d.mode || 'Unknown', modeTone(d.mode))}
|
${badge(d.mode || 'Unknown', modeTone(d.mode))}
|
||||||
${d.format ? badge(d.format.replace('sensit_','').toUpperCase(), 'slate') : ''}
|
${d.format ? badge(d.format.replace('sensit_','').toUpperCase(), 'slate') : ''}
|
||||||
${d.button_alert ? badge('button', 'blue') : ''}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-right shrink-0">
|
<div class="text-right shrink-0">
|
||||||
@@ -247,17 +243,14 @@ async function bootstrap() {
|
|||||||
|
|
||||||
function setConn(state) {
|
function setConn(state) {
|
||||||
const dot = document.getElementById('conn-dot');
|
const dot = document.getElementById('conn-dot');
|
||||||
const txt = document.getElementById('conn-text');
|
|
||||||
const bg = document.getElementById('conn-badge');
|
|
||||||
const map = {
|
const map = {
|
||||||
live: ['bg-emerald-500', 'live', 'bg-emerald-50 text-emerald-700 border-emerald-200'],
|
live: ['bg-emerald-500', 'connected'],
|
||||||
off: ['bg-rose-500', 'reconnecting', 'bg-rose-50 text-rose-700 border-rose-200'],
|
off: ['bg-rose-500', 'disconnected'],
|
||||||
idle: ['bg-slate-400', 'connecting', 'bg-slate-100 text-slate-600 border-slate-200'],
|
idle: ['bg-slate-300', 'connecting'],
|
||||||
};
|
};
|
||||||
const [d, t, b] = map[state] || map.idle;
|
const [color, title] = map[state] || map.idle;
|
||||||
dot.className = `w-1.5 h-1.5 rounded-full ${d}`;
|
dot.className = `w-2 h-2 rounded-full ${color}`;
|
||||||
txt.textContent = t;
|
dot.title = title;
|
||||||
bg.className = `inline-flex items-center gap-2 text-xs px-2.5 py-1 rounded-md border w-fit ${b}`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function connectSSE() {
|
function connectSSE() {
|
||||||
|
|||||||
Reference in New Issue
Block a user