initial commit

package/swupdate-scripts/files/custom.js

@@ -0,0 +1,154 @@
+/**
+ * Custom JavaScript for SWUpdate Web Interface
+ * Enhances the default web interface with additional functionality
+ */
+
+// Wait for DOM to be fully loaded
+document.addEventListener('DOMContentLoaded', function() {
+    // Add custom header
+    addHeader();
+    
+    // Add system information section
+    addSystemInfo();
+    
+    // Enhance progress display
+    enhanceProgressDisplay();
+    
+    // Initialize update status polling
+    initStatusPolling();
+});
+
+/**
+ * Adds a custom header to the page
+ */
+function addHeader() {
+    const header = document.createElement('div');
+    header.className = 'header';
+    header.innerHTML = '<h1>Auracaster System Update</h1>';
+    
+    const body = document.body;
+    body.insertBefore(header, body.firstChild);
+}
+
+/**
+ * Adds system information section to the page
+ */
+function addSystemInfo() {
+    const systemInfo = document.createElement('div');
+    systemInfo.className = 'system-info';
+    systemInfo.innerHTML = `
+        <h2>System Information</h2>
+        <div class="info-row">
+            <span class="info-label">Device:</span>
+            <span class="info-value">Raspberry Pi 3</span>
+        </div>
+        <div class="info-row">
+            <span class="info-label">Active Partition:</span>
+            <span class="info-value" id="active-partition">Loading...</span>
+        </div>
+        <div class="info-row">
+            <span class="info-label">Current Version:</span>
+            <span class="info-value" id="current-version">Loading...</span>
+        </div>
+        <div class="info-row">
+            <span class="info-label">Last Update:</span>
+            <span class="info-value" id="last-update">Loading...</span>
+        </div>
+        <div class="actions" style="margin-top: 15px;">
+            <button class="btn" id="refresh-info">Refresh</button>
+        </div>
+    `;
+    
+    // Insert before the upload form
+    const uploadForm = document.querySelector('form');
+    if (uploadForm) {
+        uploadForm.parentNode.insertBefore(systemInfo, uploadForm);
+    } else {
+        document.body.appendChild(systemInfo);
+    }
+    
+    // Add event listener for refresh button
+    document.getElementById('refresh-info').addEventListener('click', fetchSystemInfo);
+    
+    // Initial fetch of system info
+    fetchSystemInfo();
+}
+
+/**
+ * Fetches system information via AJAX
+ */
+function fetchSystemInfo() {
+    // In a real implementation, this would call an API endpoint
+    // For now, we'll use dummy data that would typically come from swupdate-check.sh
+    const activePartition = Math.random() > 0.5 ? 'A' : 'B';
+    const version = '1.0.' + Math.floor(Math.random() * 10);
+    const lastUpdate = new Date(Date.now() - Math.floor(Math.random() * 10000000000)).toLocaleString();
+    
+    document.getElementById('active-partition').textContent = activePartition;
+    document.getElementById('current-version').textContent = version;
+    document.getElementById('last-update').textContent = lastUpdate;
+}
+
+/**
+ * Enhances the progress display with better visuals
+ */
+function enhanceProgressDisplay() {
+    // Find the progress container (assuming it exists in the default UI)
+    const progressContainer = document.querySelector('.progress');
+    
+    if (!progressContainer) return;
+    
+    // Create enhanced progress container
+    const enhancedProgress = document.createElement('div');
+    enhancedProgress.className = 'progress-container';
+    enhancedProgress.innerHTML = `
+        <h2>Update Progress</h2>
+        <div class="progress-bar">
+            <div class="progress-bar-inner" id="progress-bar"></div>
+        </div>
+        <div class="status" id="progress-status">Waiting for update...</div>
+    `;
+    
+    // Replace the original progress container
+    progressContainer.parentNode.replaceChild(enhancedProgress, progressContainer);
+}
+
+/**
+ * Initializes polling for update status
+ */
+function initStatusPolling() {
+    // In a real implementation, this would poll an API endpoint
+    // For demonstration, we'll simulate progress updates
+    let progress = 0;
+    
+    const updateProgress = setInterval(() => {
+        // This would normally only run during an active update
+        // For demo purposes, it increments regardless
+        if (progress < 100) {
+            progress += Math.floor(Math.random() * 5);
+            if (progress > 100) progress = 100;
+            
+            const progressBar = document.getElementById('progress-bar');
+            const progressStatus = document.getElementById('progress-status');
+            
+            if (progressBar) {
+                progressBar.style.width = progress + '%';
+            }
+            
+            if (progressStatus) {
+                if (progress < 30) {
+                    progressStatus.textContent = 'Downloading update...';
+                } else if (progress < 60) {
+                    progressStatus.textContent = 'Verifying update...';
+                } else if (progress < 90) {
+                    progressStatus.textContent = 'Installing to inactive partition...';
+                } else if (progress < 100) {
+                    progressStatus.textContent = 'Finalizing update...';
+                } else {
+                    progressStatus.textContent = 'Update complete! Reboot to apply.';
+                    clearInterval(updateProgress);
+                }
+            }
+        }
+    }, 1000);
+}