Hide the thing ID

dashboard/app.js

@@ -29,7 +29,7 @@ class DashboardApp {
         this.refreshInFlight = false;
         this.chargers = new Map();
         this.chargerColumns = [
-            { key: 'id', label: 'ID' },
+            { key: 'id', label: 'ID', hidden: true },
             { key: 'name', label: 'Name' },
             { key: 'connected', label: 'Connected' },
             { key: 'chargingCurrent', label: 'Charging current' },
@@ -546,10 +546,12 @@ class DashboardApp {
             this.elements.chargerTableBody.appendChild(row);
         } else {
             this.chargerColumns.forEach(column => {
+                if (column.hidden)
+                    return;
                 const cell = row.querySelector(`td[data-column="${column.key}"]`);
                 if (!cell)
                     return;
-                cell.textContent = this.formatChargerValue(column.key, charger[column.key]);
+                this.renderCellValue(cell, column.key, charger[column.key]);
             });
         }
 
@@ -560,14 +562,38 @@ class DashboardApp {
         const row = document.createElement('tr');
         row.dataset.chargerId = this.getChargerKey(charger) || '';
         this.chargerColumns.forEach(column => {
+            if (column.hidden)
+                return;
             const cell = document.createElement('td');
             cell.dataset.column = column.key;
-            cell.textContent = this.formatChargerValue(column.key, charger[column.key]);
+            this.renderCellValue(cell, column.key, charger[column.key]);
             row.appendChild(cell);
         });
         return row;
     }
 
+    renderCellValue(cell, key, value) {
+        if (!cell)
+            return;
+
+        if (typeof value === 'boolean') {
+            cell.innerHTML = '';
+            const dot = document.createElement('span');
+            dot.className = `value-dot ${value ? 'value-dot-true' : 'value-dot-false'}`;
+            dot.setAttribute('role', 'img');
+            dot.setAttribute('aria-label', value ? 'True' : 'False');
+            dot.title = value ? 'True' : 'False';
+            const srText = document.createElement('span');
+            srText.className = 'sr-only';
+            srText.textContent = value ? 'True' : 'False';
+            cell.appendChild(dot);
+            cell.appendChild(srText);
+            return;
+        }
+
+        cell.textContent = this.formatChargerValue(key, value);
+    }
+
     removeCharger(identifier) {
         const key = this.getChargerKey(identifier);
         if (!key)

dashboard/index.html

@@ -174,17 +174,41 @@
             background: #f9fbfd;
         }
 
-        .chargers-table td[data-column="id"] {
-            font-family: "Fira Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
-            font-size: 0.85rem;
-        }
-
         .chargers-table .empty-row td {
             text-align: center;
             font-style: italic;
             color: var(--muted-text-color);
         }
 
+        .value-dot {
+            display: inline-flex;
+            width: 0.75rem;
+            height: 0.75rem;
+            border-radius: 50%;
+            margin-right: 0.35rem;
+            vertical-align: middle;
+            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+        }
+
+        .value-dot-true {
+            background: #2ecc71;
+        }
+
+        .value-dot-false {
+            background: #e74c3c;
+        }
+
+        .sr-only {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            border: 0;
+        }
+
         pre {
             margin: 0;
             background: #f8fafc;
@@ -373,7 +397,6 @@
                 <table class="chargers-table">
                     <thead>
                         <tr>
-                            <th scope="col">ID</th>
                             <th scope="col">Name</th>
                             <th scope="col">Connected</th>
                             <th scope="col">Charging current</th>
@@ -388,7 +411,7 @@
                     </thead>
                     <tbody id="chargerTableBody">
                         <tr id="chargerEmptyRow" class="empty-row">
-                            <td colspan="11">No chargers loaded yet.</td>
+                            <td colspan="10">No chargers loaded yet.</td>
                         </tr>
                     </tbody>
                 </table>