diff --git a/page/src/main.js b/page/src/main.js index 2d32cd3..7f8ab29 100644 --- a/page/src/main.js +++ b/page/src/main.js @@ -11,18 +11,19 @@ import 'bootstrap-icons/font/bootstrap-icons.css'; import './style.css'; // --- Module Imports -- - -import { StatusMessage } from './proto.js'; -import { initWebSocket } from './websocket.js'; -import { setupTerminal, term } from './terminal.js'; +import {StatusMessage} from './proto.js'; +import {initWebSocket} from './websocket.js'; +import {setupTerminal, term} from './terminal.js'; import { applyTheme, initUI, updateControlStatus, updateSensorUI, + updateUptimeUI, updateWebsocketStatus, updateWifiStatusUI } from './ui.js'; -import { setupEventListeners } from './events.js'; +import {setupEventListeners} from './events.js'; // --- Globals --- // StatusMessage is imported directly from the generated proto.js file. @@ -46,12 +47,9 @@ function onWsClose() { /** * Callback for when a message is received from the WebSocket server. - * This version includes extensive logging for debugging purposes. * @param {MessageEvent} event - The WebSocket message event. */ function onWsMessage(event) { - // Log any incoming message to the console for debugging. - if (!(event.data instanceof ArrayBuffer)) { console.warn('Message is not an ArrayBuffer, skipping protobuf decoding.'); return; @@ -66,14 +64,19 @@ function onWsMessage(event) { case 'sensorData': { const sensorData = decodedMessage.sensorData; if (sensorData) { + // Create a payload for the sensor UI (charts and header) const sensorPayload = { - ...sensorData, USB: sensorData.usb, MAIN: sensorData.main, VIN: sensorData.vin, + timestamp: sensorData.timestamp }; - // Log the exact data being sent to the UI function updateSensorUI(sensorPayload); + + // Update uptime separately from the sensor data payload + if (sensorData.uptimeSec !== undefined) { + updateUptimeUI(sensorData.uptimeSec); + } } break; } @@ -89,7 +92,9 @@ function onWsMessage(event) { break; default: - console.warn('Received message with unknown or empty payload type:', payloadType); + if (payloadType !== undefined) { + console.warn('Received message with unknown or empty payload type:', payloadType); + } break; } } catch (e) { diff --git a/page/src/ui.js b/page/src/ui.js index ae31e27..b880a00 100644 --- a/page/src/ui.js +++ b/page/src/ui.js @@ -47,14 +47,20 @@ export function updateSensorUI(data) { dom.powerDisplay.textContent = `${data.VIN.power.toFixed(2)} W`; } - if (data.uptime_sec !== undefined) { - dom.uptimeDisplay.textContent = formatUptime(data.uptime_sec); - } - // Pass the entire multi-channel data object to the charts updateCharts(data); } +/** + * Updates the system uptime display in the UI. + * @param {number} uptimeInSeconds - The system uptime in seconds. + */ +export function updateUptimeUI(uptimeInSeconds) { + if (uptimeInSeconds !== undefined) { + dom.uptimeDisplay.textContent = formatUptime(uptimeInSeconds); + } +} + /** * Updates the Wi-Fi status indicator in the header. * @param {Object} data - The Wi-Fi status object from the WebSocket. diff --git a/page/src/utils.js b/page/src/utils.js index 1229df6..41ea475 100644 --- a/page/src/utils.js +++ b/page/src/utils.js @@ -20,7 +20,7 @@ export function debounce(func, delay) { } /** - * Formats a duration in total seconds into a human-readable string (e.g., "1d 02:30:15"). + * Formats a duration in total seconds into a human-readable string (e.g., "2days 02:30:15"). * @param {number} totalSeconds The total seconds to format. * @returns {string} The formatted uptime string. */ @@ -31,7 +31,7 @@ export function formatUptime(totalSeconds) { const seconds = totalSeconds % 60; const pad = (num) => String(num).padStart(2, '0'); const timeString = `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`; - return days > 0 ? `${days}d ${timeString}` : timeString; + return days > 0 ? `${days}days ${timeString}` : timeString; } /**