Refactor: Apply consistent formatting and improve code style across all modules

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

page/src/api.js

@@ -25,8 +25,8 @@ export async function fetchWifiScan() {
 export async function postWifiConnect(ssid, password) {
     const response = await fetch('/api/setting', { // Updated URL
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: {'Content-Type': 'application/json'},
-        body: JSON.stringify({ ssid, password }),
+        body: JSON.stringify({ssid, password}),
     });
     if (!response.ok) {
         const errorText = await response.text();
@@ -44,7 +44,7 @@ export async function postWifiConnect(ssid, password) {
 export async function postNetworkSettings(payload) {
     const response = await fetch('/api/setting', { // Updated URL
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: {'Content-Type': 'application/json'},
         body: JSON.stringify(payload),
     });
     if (!response.ok) {
@@ -63,8 +63,8 @@ export async function postNetworkSettings(payload) {
 export async function postBaudRateSetting(baudrate) {
     const response = await fetch('/api/setting', {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: {'Content-Type': 'application/json'},
-        body: JSON.stringify({ baudrate }),
+        body: JSON.stringify({baudrate}),
     });
     if (!response.ok) {
         const errorText = await response.text();

page/src/chart.js

@@ -4,8 +4,8 @@
  * It handles initialization, theme updates, data updates, and resizing for the three separate charts.
  */
 
-import { Chart, registerables } from 'chart.js';
+import {Chart, registerables} from 'chart.js';
-import { powerChartCtx, voltageChartCtx, currentChartCtx, htmlEl, graphTabPane } from './dom.js';
+import {currentChartCtx, graphTabPane, htmlEl, powerChartCtx, voltageChartCtx} from './dom.js';
 
 // Register all necessary Chart.js components
 Chart.register(...registerables);
@@ -47,13 +47,13 @@ function createChartOptions(title, minValue, maxValue) {
     return {
         responsive: true,
         maintainAspectRatio: false,
-        interaction: { mode: 'index', intersect: false },
+        interaction: {mode: 'index', intersect: false},
         plugins: {
-            legend: { position: 'top' },
+            legend: {position: 'top'},
-            title: { display: true, text: title }
+            title: {display: true, text: title}
         },
         scales: {
-            x: { ticks: { autoSkipPadding: 10, maxRotation: 0, minRotation: 0 } },
+            x: {ticks: {autoSkipPadding: 10, maxRotation: 0, minRotation: 0}},
             y: {
                 min: minValue,
                 max: maxValue,

page/src/events.js

@@ -8,8 +8,8 @@
 import * as dom from './dom.js';
 import * as api from './api.js';
 import * as ui from './ui.js';
-import { clearTerminal, fitTerminal, downloadTerminalOutput } from './terminal.js';
+import {clearTerminal, downloadTerminalOutput, fitTerminal} from './terminal.js';
-import { debounce, isMobile } from './utils.js';
+import {debounce, isMobile} from './utils.js';
 
 // A flag to track if charts have been initialized
 let chartsInitialized = false;

page/src/main.js

@@ -11,17 +11,17 @@ import 'bootstrap-icons/font/bootstrap-icons.css';
 import './style.css';
 
 // --- Module Imports ---
-import { initWebSocket } from './websocket.js';
+import {initWebSocket} from './websocket.js';
-import { setupTerminal, term } from './terminal.js';
+import {setupTerminal, term} from './terminal.js';
 import {
     applyTheme,
     initUI,
     updateControlStatus,
     updateSensorUI,
-    updateWifiStatusUI,
+    updateWebsocketStatus,
-    updateWebsocketStatus
+    updateWifiStatusUI
 } from './ui.js';
-import { setupEventListeners } from './events.js';
+import {setupEventListeners} from './events.js';
 
 // --- WebSocket Event Handlers ---
 

page/src/style.css

@@ -2,16 +2,16 @@
 :root {
     --bs-body-font-family: 'Courier New', Courier, monospace;
     /* Chart Channel Colors */
-    --chart-usb-color: #0d6efd;  /* Bootstrap Blue */
+    --chart-usb-color: #0d6efd; /* Bootstrap Blue */
     --chart-main-color: #198754; /* Bootstrap Green */
-    --chart-vin-color: #dc3545;   /* Bootstrap Red */
+    --chart-vin-color: #dc3545; /* Bootstrap Red */
 }
 
 [data-bs-theme="dark"] {
     /* Chart Channel Colors for Dark Theme */
-    --chart-usb-color: #569cd6;  /* A lighter blue for dark backgrounds */
+    --chart-usb-color: #569cd6; /* A lighter blue for dark backgrounds */
     --chart-main-color: #4ec9b0; /* A teal/cyan for dark backgrounds */
-    --chart-vin-color: #d16969;   /* A softer red for dark backgrounds */
+    --chart-vin-color: #d16969; /* A softer red for dark backgrounds */
 }
 
 body, .card, .modal-content, .list-group-item, .nav-tabs .nav-link {

page/src/terminal.js

@@ -4,12 +4,12 @@
  * theme handling, and data communication with the WebSocket.
  */
 
-import { Terminal } from '@xterm/xterm';
+import {Terminal} from '@xterm/xterm';
 import '@xterm/xterm/css/xterm.css';
-import { FitAddon } from '@xterm/addon-fit';
+import {FitAddon} from '@xterm/addon-fit';
-import { terminalContainer } from './dom.js';
+import {terminalContainer} from './dom.js';
-import { isMobile } from './utils.js';
+import {isMobile} from './utils.js';
-import { websocket, sendWebsocketMessage } from './websocket.js';
+import {sendWebsocketMessage} from './websocket.js';
 
 // Exported terminal instance and addon for global access
 export let term;
@@ -41,7 +41,7 @@ export function setupTerminal() {
     }
 
     fitAddon = new FitAddon();
-    term = new Terminal({ convertEol: true, cursorBlink: true });
+    term = new Terminal({convertEol: true, cursorBlink: true});
     term.loadAddon(fitAddon);
     term.open(terminalContainer);
 
@@ -114,7 +114,7 @@ export function downloadTerminalOutput() {
     }
 
     // Create a blob from the text content
-    const blob = new Blob([fullText], { type: 'text/plain;charset=utf-8' });
+    const blob = new Blob([fullText], {type: 'text/plain;charset=utf-8'});
 
     // Create a link element to trigger the download
     const link = document.createElement('a');

page/src/ui.js

@@ -8,9 +8,9 @@
 import * as bootstrap from 'bootstrap';
 import * as dom from './dom.js';
 import * as api from './api.js';
-import { formatUptime, isMobile } from './utils.js';
+import {formatUptime, isMobile} from './utils.js';
-import { applyTerminalTheme, fitTerminal } from './terminal.js';
+import {applyTerminalTheme, fitTerminal} from './terminal.js';
-import { applyChartsTheme, resizeCharts, updateCharts } from './chart.js';
+import {applyChartsTheme, resizeCharts, updateCharts} from './chart.js';
 
 // Instance of the Bootstrap Modal for Wi-Fi connection
 let wifiModal;
@@ -115,7 +115,7 @@ export async function scanForWifi() {
                     wifiModal.show();
                     dom.wifiModalEl.addEventListener('shown.bs.modal', () => {
                         dom.wifiPasswordConnectInput.focus();
-                    }, { once: true });
+                    }, {once: true});
                 });
 
                 dom.wifiApList.appendChild(row);
@@ -184,10 +184,10 @@ export async function applyNetworkSettings() {
             return;
         }
 
-        payload = { net_type: 'static', ip, gateway, subnet, dns1 };
+        payload = {net_type: 'static', ip, gateway, subnet, dns1};
         if (dns2) payload.dns2 = dns2;
     } else {
-        payload = { net_type: 'dhcp' };
+        payload = {net_type: 'dhcp'};
     }
 
     try {
@@ -208,7 +208,7 @@ export async function applyNetworkSettings() {
  */
 export async function applyApModeSettings() {
     const mode = dom.apModeToggle.checked ? 'apsta' : 'sta';
-    let payload = { mode };
+    let payload = {mode};
 
     dom.apModeApplyButton.disabled = true;
     dom.apModeApplyButton.innerHTML = `<span class="spinner-border spinner-border-sm" aria-hidden="true"></span> Applying...`;

page/src/websocket.js

@@ -18,7 +18,7 @@ const gateway = `ws://${window.location.host}/ws`;
  * @param {function} callbacks.onClose - Called when the connection is closed.
  * @param {function} callbacks.onMessage - Called when a message is received from the server.
  */
-export function initWebSocket({ onOpen, onClose, onMessage }) {
+export function initWebSocket({onOpen, onClose, onMessage}) {
     console.log(`Trying to open a WebSocket connection to ${gateway}...`);
     websocket = new WebSocket(gateway);
     // Set binary type to arraybuffer to handle raw binary data from the UART.