Update: Separate uptime UI updates and enhance logging for WebSocket messages

- Add `updateUptimeUI` function for dedicated uptime handling.
- Modify WebSocket message handling to update uptime separately from sensor data.
- Adjust logging to provide better clarity for unknown payload types.
- Fix formatting inconsistency in uptime display (`1d` -> `1days`).

Signed-off-by: YoungSoo Shin <shinys000114@gmail.com>

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) {

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.

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;
 }
 
 /**