Phase 23: UI redesign — responsive mobile + desktop layout

- Replace SB Admin 2 sidebar with a clean fixed sidebar (desktop) and a sticky bottom tab navigation (mobile, ≤767px) - Sidebar collapses to icon-only mode with state persisted in localStorage - Logo is a functional home link on all viewports - Mobile: full-width content, bottom nav replaces sidebar - Dashboard: 6 OBD stat cards (status, speed, RPM, coolant, throttle, fuel) wired to live socket events; removed all placeholder buttons/dropdowns - GPS info section cleaned up (lat/lon display instead of X/Y paragraphs) - DTC page: live /api/dtc wiring — MIL indicator + DTC table populated from API - New /api/dtc route added to app.py (mil + codes) - yaris.js: added obd_coolant_temp / obd_fuel_level / obd_throttle listeners - yaris.css: full rewrite — layout variables, sidebar, bottom nav, OBD cards, border-start utilities, mobile padding for bottom nav Co-authored-by: Copilot <[email protected]>
2026-08-09 22:57:12 -04:00
parent cdb032b888
commit 7edea446c5
7 changed files with 589 additions and 288 deletions
@@ -4,22 +4,86 @@
 {% block title %}DTC Codes - Yaris OBD{% endblock %}

 {% block content %}
-                    <h3 class="text-dark mb-4">DTC Codes</h3>
-                    <div class="card shadow">
-                        <div class="card-header py-3">
-                            <p class="text-primary m-0 fw-bold">Output</p>
-                        </div>
-                        <div class="card-body p-0">
-                            {{ data_table(
-                                "dtc-list",
-                                [
-                                    {"key": "code", "label": "Code", "sortable": true},
-                                    {"key": "description", "label": "Description", "sortable": true},
-                                    {"key": "actions", "label": "Actions", "sortable": false}
-                                ],
-                                "No trouble codes available",
-                                "Stored diagnostic trouble codes will appear here once OBD data is connected."
-                            ) }}
-                        </div>
-                    </div>
+<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
+    <h3 class="text-dark fw-bold mb-0">DTC Codes</h3>
+    <div class="d-flex align-items-center gap-3">
+        <div id="mil-indicator" class="d-flex align-items-center gap-2 px-3 py-1 rounded-pill border small fw-semibold" style="display:none!important">
+            <i class="fas fa-exclamation-circle"></i>
+            <span>Check Engine</span>
+        </div>
+        <button id="dtc-refresh-btn" class="btn btn-sm btn-secondary">
+            <i class="fas fa-sync-alt me-1"></i>Refresh
+        </button>
+    </div>
+</div>
+
+<div class="card shadow-sm">
+    <div class="card-header d-flex align-items-center justify-content-between">
+        <p class="text-primary m-0 fw-bold">Stored trouble codes</p>
+        <span id="dtc-updated" class="small text-muted"></span>
+    </div>
+    <div class="card-body p-0">
+        {{ data_table(
+            "dtc-list",
+            [
+                {"key": "code", "label": "Code", "sortable": true},
+                {"key": "description", "label": "Description", "sortable": true}
+            ],
+            "No trouble codes",
+            "No diagnostic trouble codes are currently stored. Great news!"
+        ) }}
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+(function () {
+    const milEl = document.getElementById('mil-indicator');
+    const updatedEl = document.getElementById('dtc-updated');
+    const refreshBtn = document.getElementById('dtc-refresh-btn');
+    const body = document.querySelector('#dtc-list [data-data-list-body]');
+
+    async function loadDtc() {
+        refreshBtn.disabled = true;
+        try {
+            const r = await fetch('/api/dtc');
+            const d = await r.json();
+
+            // MIL indicator
+            const milOn = d.mil === true;
+            milEl.style.removeProperty('display');
+            milEl.classList.toggle('text-danger', milOn);
+            milEl.classList.toggle('border-danger', milOn);
+            milEl.classList.toggle('text-muted', !milOn);
+            milEl.classList.toggle('border-secondary', !milOn);
+            milEl.querySelector('span').textContent = milOn ? 'Check Engine ON' : 'Check Engine OFF';
+
+            // Table rows
+            body.innerHTML = '';
+            const codes = d.codes || [];
+            codes.forEach(function (c) {
+                const code = c.code ?? (Array.isArray(c) ? c[0] : c);
+                const desc = c.description ?? (Array.isArray(c) ? c[1] : '—');
+                const row = document.createElement('tr');
+                row.dataset.code = code;
+                row.dataset.description = desc;
+                row.innerHTML = `
+                    <td><span class="badge bg-danger-subtle text-danger-emphasis fw-bold font-monospace">${code}</span></td>
+                    <td>${desc}</td>`;
+                body.appendChild(row);
+            });
+
+            updatedEl.textContent = 'Updated ' + new Date().toLocaleTimeString();
+        } catch (e) {
+            updatedEl.textContent = 'Failed to load';
+        } finally {
+            refreshBtn.disabled = false;
+        }
+    }
+
+    refreshBtn.addEventListener('click', loadDtc);
+    loadDtc();
+})();
+</script>
 {% endblock %}