diff --git a/dashboard/app.js b/dashboard/app.js index 2ef97f3..ffbc5f8 100644 --- a/dashboard/app.js +++ b/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) diff --git a/dashboard/index.html b/dashboard/index.html index a53ae55..e99c7d2 100644 --- a/dashboard/index.html +++ b/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 @@ - @@ -388,7 +411,7 @@ - +
ID Name Connected Charging current
No chargers loaded yet.No chargers loaded yet.