Add version info

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

page/index.html

@@ -130,9 +130,12 @@
     </div>
 </main>
 
-<footer class="bg-body-tertiary text-center p-3">
-    <a href="https://www.hardkernel.com/" target="_blank" class="link-secondary">Hardkernel</a> |
-    <a href="https://wiki.odroid.com/start" target="_blank" class="link-secondary">Wiki</a>
+<footer class="bg-body-tertiary text-center p-3 position-relative">
+    <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/api.js

@@ -110,3 +110,14 @@ export async function postControlCommand(command) {
     if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
     return response;
 }
+
+/**
+ * Fetches the firmware version from the server.
+ * @returns {Promise<Object>} A promise that resolves to an object containing the version.
+ * @throws {Error} Throws an error if the network request fails.
+ */
+export async function fetchVersion() {
+    const response = await fetch('/api/version');
+    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+    return await response.json();
+}

page/src/dom.js

@@ -86,3 +86,6 @@ export const mainValueSpan = document.getElementById('main-current-limit-value')
 export const usbSlider = document.getElementById('usb-current-limit-slider');
 export const usbValueSpan = document.getElementById('usb-current-limit-value');
 export const currentLimitApplyButton = document.getElementById('current-limit-apply-button');
+
+// --- Footer ---
+export const versionInfo = document.getElementById('version-info');

page/src/main.js

@@ -12,6 +12,7 @@ import './style.css';
 
 // --- Module Imports -- -
 import {StatusMessage} from './proto.js';
+import * as api from './api.js';
 import {initWebSocket} from './websocket.js';
 import {setupTerminal, term} from './terminal.js';
 import {
@@ -21,6 +22,7 @@ import {
     updateSensorUI,
     updateSwitchStatusUI,
     updateUptimeUI,
+    updateVersionUI,
     updateWebsocketStatus,
     updateWifiStatusUI
 } from './ui.js';
@@ -112,6 +114,18 @@ function onWsMessage(event) {
 
 // --- Application Initialization ---
 
+async function initializeVersion() {
+    try {
+        const versionData = await api.fetchVersion();
+        if (versionData && versionData.version) {
+            updateVersionUI(versionData.version);
+        }
+    } catch (error) {
+        console.error('Error fetching version:', error);
+        updateVersionUI('N/A');
+    }
+}
+
 function connect() {
     updateControlStatus();
     initWebSocket({ onOpen: onWsOpen, onClose: onWsClose, onMessage: onWsMessage });
@@ -120,6 +134,7 @@ function connect() {
 function initialize() {
     initUI();
     setupTerminal();
+    initializeVersion();
 
     const savedTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
     applyTheme(savedTheme);

page/src/ui.js

@@ -110,6 +110,16 @@ export function updateWifiStatusUI(data) {
     }
 }
 
+/**
+ * Updates the version information in the footer.
+ * @param {string} version - The firmware version string.
+ */
+export function updateVersionUI(version) {
+    if (version) {
+        dom.versionInfo.textContent = `${version}`;
+    }
+}
+
 /**
  * Initiates a Wi-Fi scan and updates the settings modal with the results.
  */