Refactor WebSocket connection handlers: streamline logs and switch to warnings for closure events

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

page/index.html

@@ -53,7 +53,10 @@
                 <span id="power-display" class="text-primary">--.-- W</span>
             </div>
         </div>
-        <h1 class="text-primary text-center order-md-2 mx-auto">ODROID Power Mate</h1>
+        <div class="text-center order-md-2 mx-auto">
+            <h1 class="text-primary mb-0">ODROID Power Mate</h1>
+            <small class="text-muted" id="version-info"></small>
+        </div>
         <div class="d-flex align-items-center justify-content-end order-md-3 header-controls" style="flex: 1;">
             <div class="form-check form-switch">
                 <input class="form-check-input" type="checkbox" role="switch" id="theme-toggle">
@@ -159,12 +162,9 @@
     </div>
 </main>
 
-<footer class="bg-body-tertiary text-center p-3 position-relative">
+<footer class="bg-body-tertiary text-center p-3">
     <a href="https://www.hardkernel.com/" target="_blank" class="link-secondary text-decoration-none">Hardkernel</a> |
     <a href="https://wiki.odroid.com/start" target="_blank" class="link-secondary text-decoration-none">Wiki</a>
-    <div class="position-absolute end-0 top-50 translate-middle-y pe-3">
-        <small class="text-muted" id="version-info"></small>
-    </div>
 </footer>
 
 <!-- Settings Modal -->

page/src/events.js

@@ -7,10 +7,10 @@
 
 import * as dom from './dom.js';
 import * as api from './api.js';
+import {getAuthHeaders, handleResponse} from './api.js'; // Import auth functions
 import * as ui from './ui.js';
 import {clearTerminal, downloadTerminalOutput, fitTerminal} from './terminal.js';
 import {debounce, isMobile} from './utils.js';
-import {getAuthHeaders, handleResponse} from './api.js'; // Import auth functions
 
 // A flag to track if charts have been initialized
 let chartsInitialized = false;
@@ -60,7 +60,6 @@ export function setupEventListeners() {
         console.log("Event listeners already attached. Skipping.");
         return;
     }
-    console.log("Attaching event listeners...");
 
     // --- Terminal Controls ---
     dom.clearButton.addEventListener('click', clearTerminal);
@@ -189,5 +188,4 @@ export function setupEventListeners() {
     window.addEventListener('resize', debounce(ui.handleResize, 150));
 
     listenersAttached = true;
-    console.log("Event listeners attached successfully.");
 }

page/src/main.js

@@ -55,16 +55,12 @@ const confirmPasswordInput = document.getElementById('confirm-password');
 
 function onWsOpen() {
     updateWebsocketStatus(true);
-    if (term) {
+    console.log('Connected to WebSocket Server');
-        term.write('\x1b[32mConnected to WebSocket Server\x1b[0m\r\n');
-    }
 }
 
 function onWsClose() {
     updateWebsocketStatus(false);
-    if (term) {
+    console.warn('Connection closed. Reconnecting...');
-        term.write('\r\n\x1b[31mConnection closed. Reconnecting...\x1b[0m\r\n');
-    }
     setTimeout(connect, 2000);
 }
 

page/src/websocket.js

@@ -28,7 +28,6 @@ function startHeartbeat() {
     pingIntervalId = setInterval(() => {
         if (websocket && websocket.readyState === WebSocket.OPEN) {
             websocket.send('ping');
-            console.log('WebSocket: Ping sent.');
 
             // Set a timeout to check if a pong is received within HEARTBEAT_TIMEOUT
             pongTimeoutId = setTimeout(() => {
@@ -94,7 +93,6 @@ export function initWebSocket({onOpen, onClose, onMessage, onError}) {
 
     websocket.onmessage = (event) => {
         if (event.data === 'pong') {
-            console.log('WebSocket: Pong received.');
             // Clear the timeout as pong was received, resetting for the next ping
             clearTimeout(pongTimeoutId);
             pongTimeoutId = null;