feat: Implement web dashboard with system information, reboot, and OTA update functionality.
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { getSystemInfo, reboot } from "./lib/api.js";
|
||||
import { getSystemInfo, reboot, getOTAStatus } from "./lib/api.js";
|
||||
import OTAUpdate from "./lib/OTAUpdate.svelte";
|
||||
|
||||
/** @type {'loading' | 'ok' | 'error' | 'rebooting'} */
|
||||
@@ -16,6 +16,12 @@
|
||||
connection: "—",
|
||||
});
|
||||
|
||||
let otaStatus = $state({
|
||||
partitions: [],
|
||||
active_partition: "—",
|
||||
running_firmware_label: "—"
|
||||
});
|
||||
|
||||
/** Format uptime seconds into human-readable string */
|
||||
function formatUptime(seconds) {
|
||||
const d = Math.floor(seconds / 86400);
|
||||
@@ -37,9 +43,11 @@
|
||||
return `${bytes} B`;
|
||||
}
|
||||
|
||||
async function fetchInfo() {
|
||||
async function fetchAll() {
|
||||
try {
|
||||
systemInfo = await getSystemInfo();
|
||||
const [sys, ota] = await Promise.all([getSystemInfo(), getOTAStatus()]);
|
||||
systemInfo = sys;
|
||||
otaStatus = ota;
|
||||
status = "ok";
|
||||
errorMsg = "";
|
||||
} catch (e) {
|
||||
@@ -62,7 +70,10 @@
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
fetchInfo();
|
||||
fetchAll();
|
||||
// Poll for status updates every 5 seconds
|
||||
const interval = setInterval(fetchAll, 5000);
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
|
||||
// Resilient recovery polling: Only poll when we are waiting for a reboot
|
||||
@@ -93,120 +104,153 @@
|
||||
]);
|
||||
</script>
|
||||
|
||||
<main class="min-h-screen bg-bg-primary flex items-center justify-center p-4">
|
||||
<div class="w-full max-w-xl space-y-4">
|
||||
<main class="min-h-screen bg-bg-primary p-4 md:p-8 flex flex-col items-center">
|
||||
<div class="w-full max-w-6xl space-y-8">
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-6">
|
||||
<h1 class="text-2xl font-bold text-accent">Calendink Provider 🚀</h1>
|
||||
<div class="text-center">
|
||||
<h1 class="text-2xl font-bold text-accent">Calendink Provider 🚀🚀🚀</h1>
|
||||
<p class="text-text-secondary text-sm">ESP32-S3 System Dashboard v{__APP_VERSION__}</p>
|
||||
</div>
|
||||
|
||||
<!-- Status Badge -->
|
||||
<div class="flex justify-center">
|
||||
{#if status === "loading"}
|
||||
<div
|
||||
class="inline-flex items-center gap-2 bg-accent/10 border border-accent/20 rounded-full px-4 py-2 text-sm text-accent"
|
||||
>
|
||||
<span class="w-2 h-2 rounded-full bg-accent animate-pulse"></span>
|
||||
<span>Connecting to ESP32...</span>
|
||||
</div>
|
||||
{:else if status === "ok"}
|
||||
<div
|
||||
class="inline-flex items-center gap-2 bg-success/10 border border-success/20 rounded-full px-4 py-2 text-sm text-success"
|
||||
>
|
||||
<span class="w-2 h-2 rounded-full bg-success animate-pulse"></span>
|
||||
<span>Connected</span>
|
||||
</div>
|
||||
{:else if status === "rebooting"}
|
||||
<div
|
||||
class="inline-flex items-center gap-2 bg-amber-500/10 border border-amber-500/20 rounded-full px-4 py-2 text-sm text-amber-400"
|
||||
>
|
||||
<span class="w-2 h-2 rounded-full bg-amber-400 animate-pulse"></span>
|
||||
<span>Rebooting...</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="inline-flex items-center gap-2 bg-danger/10 border border-danger/20 rounded-full px-4 py-2 text-sm text-danger"
|
||||
>
|
||||
<span class="w-2 h-2 rounded-full bg-danger"></span>
|
||||
<span>Offline — {errorMsg}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- System Info Card -->
|
||||
<div class="bg-bg-card border border-border rounded-xl overflow-hidden">
|
||||
<div class="px-5 py-3 border-b border-border">
|
||||
<h2
|
||||
class="text-sm font-semibold text-text-primary uppercase tracking-wider"
|
||||
>
|
||||
System Info
|
||||
</h2>
|
||||
</div>
|
||||
<div class="divide-y divide-border">
|
||||
{#each infoItems as item}
|
||||
<div
|
||||
class="flex items-center justify-between px-5 py-3 hover:bg-bg-card-hover transition-colors"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-base">{item.icon}</span>
|
||||
<span class="text-sm text-text-secondary">{item.label}</span>
|
||||
</div>
|
||||
<span class="text-sm font-mono text-text-primary">
|
||||
{#if status === "loading"}
|
||||
<span
|
||||
class="inline-block w-16 h-4 bg-border rounded animate-pulse"
|
||||
></span>
|
||||
{:else}
|
||||
{item.value}
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<!-- Status Badge -->
|
||||
<div class="flex justify-center mt-4">
|
||||
{#if status === "loading"}
|
||||
<div class="inline-flex items-center gap-2 bg-accent/10 border border-accent/20 rounded-full px-4 py-1.5 text-xs text-accent">
|
||||
<span class="w-2 h-2 rounded-full bg-accent animate-pulse"></span>
|
||||
<span>Connecting...</span>
|
||||
</div>
|
||||
{/each}
|
||||
{:else if status === "ok"}
|
||||
<div class="inline-flex items-center gap-2 bg-success/10 border border-success/20 rounded-full px-4 py-1.5 text-xs text-success">
|
||||
<span class="w-2 h-2 rounded-full bg-success animate-pulse"></span>
|
||||
<span>Connected</span>
|
||||
</div>
|
||||
{:else if status === "rebooting"}
|
||||
<div class="inline-flex items-center gap-2 bg-amber-500/10 border border-amber-500/20 rounded-full px-4 py-1.5 text-xs text-amber-400">
|
||||
<span class="w-2 h-2 rounded-full bg-amber-400 animate-pulse"></span>
|
||||
<span>Rebooting...</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="inline-flex items-center gap-2 bg-danger/10 border border-danger/20 rounded-full px-4 py-1.5 text-xs text-danger">
|
||||
<span class="w-2 h-2 rounded-full bg-danger"></span>
|
||||
<span>Offline — {errorMsg}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Device Control Section (Reboot) -->
|
||||
<div class="bg-bg-card border border-border rounded-xl p-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-sm font-semibold text-text-primary uppercase tracking-wider">
|
||||
Device Control
|
||||
</h2>
|
||||
<p class="text-xs text-text-secondary mt-1">
|
||||
Restart the ESP32 microcontroller
|
||||
</p>
|
||||
<!-- 2-Column Grid Layout -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
|
||||
|
||||
<!-- Left Column: System Info & Partition Table -->
|
||||
<div class="space-y-8">
|
||||
<!-- System Info Card -->
|
||||
<div class="bg-bg-card border border-border rounded-xl overflow-hidden shadow-xl">
|
||||
<div class="px-5 py-3 border-b border-border">
|
||||
<h2 class="text-sm font-semibold text-text-primary uppercase tracking-wider">
|
||||
System Info
|
||||
</h2>
|
||||
</div>
|
||||
<div class="divide-y divide-border">
|
||||
{#each infoItems as item}
|
||||
<div class="flex items-center justify-between px-5 py-3 hover:bg-bg-card-hover transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-base">{item.icon}</span>
|
||||
<span class="text-sm text-text-secondary">{item.label}</span>
|
||||
</div>
|
||||
<span class="text-sm font-mono text-text-primary">
|
||||
{#if status === "loading"}
|
||||
<span class="inline-block w-16 h-4 bg-border rounded animate-pulse"></span>
|
||||
{:else}
|
||||
{item.value}
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onclick={() => (showRebootConfirm = true)}
|
||||
disabled={status === "rebooting" || status === "loading"}
|
||||
class="px-4 py-2 text-sm font-medium rounded-lg transition-colors
|
||||
bg-danger/10 text-danger border border-danger/20
|
||||
hover:bg-danger/20 hover:border-danger/30
|
||||
disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
Reboot
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Frontend Info & OTA Section -->
|
||||
<OTAUpdate onReboot={() => (status = "rebooting")} />
|
||||
<!-- Partition Table Card -->
|
||||
<div class="bg-bg-card border border-border rounded-xl overflow-hidden shadow-xl">
|
||||
<div class="px-5 py-3 border-b border-border flex items-center justify-between">
|
||||
<h2 class="text-sm font-semibold text-text-primary uppercase tracking-wider">
|
||||
Partition Table
|
||||
</h2>
|
||||
<span class="text-[10px] text-text-secondary font-mono">Flash: 16MB</span>
|
||||
</div>
|
||||
<div class="divide-y divide-border">
|
||||
{#if status === "loading"}
|
||||
<div class="p-5 text-center text-xs text-text-secondary animate-pulse">Loading memory layout...</div>
|
||||
{:else}
|
||||
{#each otaStatus.partitions as part}
|
||||
<div class="px-5 py-2.5 flex items-center justify-between hover:bg-bg-card-hover transition-colors">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[11px] font-mono font-bold {part.label === otaStatus.active_partition || part.label === otaStatus.running_firmware_label ? 'text-accent' : 'text-text-primary'}">
|
||||
{part.label}
|
||||
</span>
|
||||
{#if part.label === otaStatus.active_partition || part.label === otaStatus.running_firmware_label}
|
||||
<span class="text-[8px] bg-accent/20 text-accent px-1 rounded uppercase tracking-tighter">Active</span>
|
||||
{/if}
|
||||
</div>
|
||||
<span class="text-[9px] text-text-secondary uppercase">
|
||||
Type {part.type} / Sub {part.subtype}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-right flex flex-col items-end">
|
||||
<div class="text-[11px] font-mono text-text-primary">{formatBytes(part.size)}</div>
|
||||
{#if part.app_version}
|
||||
<div class="text-[9px] text-accent font-bold">v{part.app_version}</div>
|
||||
{:else if part.free !== undefined}
|
||||
<div class="text-[9px] {part.free > 0 ? 'text-success' : 'text-text-secondary'} font-bold">
|
||||
{formatBytes(part.free)} free
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Device Control & OTA Updates -->
|
||||
<div class="space-y-8">
|
||||
<!-- Device Control Card -->
|
||||
<div class="bg-bg-card border border-border rounded-xl p-5 shadow-xl">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-sm font-semibold text-text-primary uppercase tracking-wider">
|
||||
Device Control
|
||||
</h2>
|
||||
<p class="text-xs text-text-secondary mt-1">
|
||||
Restart the ESP32 microcontroller
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onclick={() => (showRebootConfirm = true)}
|
||||
disabled={status === "rebooting" || status === "loading"}
|
||||
class="px-4 py-2 text-sm font-medium rounded-lg transition-colors
|
||||
bg-danger/10 text-danger border border-danger/20
|
||||
hover:bg-danger/20 hover:border-danger/30
|
||||
disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
Reboot
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Updates & Maintenance Card -->
|
||||
<OTAUpdate onReboot={() => { status = "rebooting"; isRecovering = true; }} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Reboot Confirmation Modal -->
|
||||
{#if showRebootConfirm}
|
||||
<div
|
||||
class="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4"
|
||||
>
|
||||
<div
|
||||
class="bg-bg-card border border-border rounded-xl p-6 max-w-sm w-full space-y-4"
|
||||
>
|
||||
<h3 class="text-lg font-semibold text-text-primary">
|
||||
Confirm Reboot
|
||||
</h3>
|
||||
<div class="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
|
||||
<div class="bg-bg-card border border-border rounded-xl p-6 max-w-sm w-full space-y-4 shadow-2xl">
|
||||
<h3 class="text-lg font-semibold text-text-primary">Confirm Reboot</h3>
|
||||
<p class="text-sm text-text-secondary">
|
||||
Are you sure you want to reboot the ESP32? The device will be
|
||||
temporarily unavailable.
|
||||
Are you sure you want to reboot the ESP32? The device will be temporarily unavailable.
|
||||
</p>
|
||||
<div class="flex gap-3 justify-end">
|
||||
<button
|
||||
@@ -217,7 +261,7 @@
|
||||
</button>
|
||||
<button
|
||||
onclick={handleReboot}
|
||||
class="px-4 py-2 text-sm font-medium rounded-lg bg-danger text-white hover:bg-danger-hover transition-colors"
|
||||
class="px-4 py-2 text-sm font-medium rounded-lg bg-danger text-white hover:bg-danger-hover transition-colors shadow-lg shadow-danger/20"
|
||||
>
|
||||
Reboot Now
|
||||
</button>
|
||||
|
||||
@@ -1,28 +1,36 @@
|
||||
<script>
|
||||
let { onReboot = null } = $props();
|
||||
import { getOTAStatus, uploadOTAFrontend } from "./api.js";
|
||||
import { getOTAStatus, uploadOTAFrontend, uploadOTAFirmware, getSystemInfo } from "./api.js";
|
||||
|
||||
const IS_DEV = import.meta.env.DEV;
|
||||
|
||||
/** @type {'idle' | 'loading_status' | 'uploading' | 'success' | 'error'} */
|
||||
let status = $state("idle");
|
||||
let errorMsg = $state("");
|
||||
let uploadProgress = $state(0); // 0 to 100
|
||||
let uploadProgress = $state(0);
|
||||
|
||||
let otaInfo = $state({
|
||||
active_slot: -1,
|
||||
active_partition: "—",
|
||||
target_partition: "—",
|
||||
partitions: [],
|
||||
running_firmware_label: "—"
|
||||
});
|
||||
|
||||
let systemInfo = $state({
|
||||
firmware: "—"
|
||||
});
|
||||
|
||||
let selectedFile = $state(null);
|
||||
let showAdvanced = $state(false);
|
||||
/** @type {'frontend' | 'firmware'} */
|
||||
let updateMode = $state("frontend");
|
||||
let isDragging = $state(false);
|
||||
|
||||
async function fetchStatus() {
|
||||
status = "loading_status";
|
||||
try {
|
||||
otaInfo = await getOTAStatus();
|
||||
[otaInfo, systemInfo] = await Promise.all([getOTAStatus(), getSystemInfo()]);
|
||||
status = "idle";
|
||||
} catch (e) {
|
||||
status = "error";
|
||||
@@ -30,25 +38,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch status on mount
|
||||
$effect(() => {
|
||||
fetchStatus();
|
||||
});
|
||||
|
||||
function handleFileChange(event) {
|
||||
const files = event.target.files;
|
||||
if (files && files.length > 0) {
|
||||
processFile(files[0]);
|
||||
}
|
||||
if (files && files.length > 0) processFile(files[0]);
|
||||
}
|
||||
|
||||
function handleDrop(event) {
|
||||
event.preventDefault();
|
||||
isDragging = false;
|
||||
const files = event.dataTransfer.files;
|
||||
if (files && files.length > 0) {
|
||||
processFile(files[0]);
|
||||
}
|
||||
if (files && files.length > 0) processFile(files[0]);
|
||||
}
|
||||
|
||||
function processFile(file) {
|
||||
@@ -73,7 +76,11 @@
|
||||
}, 500);
|
||||
|
||||
try {
|
||||
await uploadOTAFrontend(selectedFile);
|
||||
if (updateMode === "frontend") {
|
||||
await uploadOTAFrontend(selectedFile);
|
||||
} else {
|
||||
await uploadOTAFirmware(selectedFile);
|
||||
}
|
||||
clearInterval(progressInterval);
|
||||
uploadProgress = 100;
|
||||
status = "success";
|
||||
@@ -85,119 +92,136 @@
|
||||
errorMsg = e.message;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
function toggleMode(mode) {
|
||||
if (showAdvanced && updateMode === mode) {
|
||||
showAdvanced = false;
|
||||
} else {
|
||||
showAdvanced = true;
|
||||
updateMode = mode;
|
||||
selectedFile = null;
|
||||
errorMsg = "";
|
||||
}
|
||||
}
|
||||
|
||||
const currentTarget = $derived(() => {
|
||||
if (updateMode === 'frontend') return otaInfo.target_partition;
|
||||
// For firmware, target is the slot that is NOT the running one
|
||||
const runningLabel = otaInfo.running_firmware_label || 'ota_0';
|
||||
return runningLabel === 'ota_0' ? 'ota_1' : 'ota_0';
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if !IS_DEV}
|
||||
<div class="bg-bg-card border border-border rounded-xl overflow-hidden mt-4">
|
||||
<div class="px-5 py-3 border-b border-border flex items-center justify-between">
|
||||
<h2 class="text-sm font-semibold text-text-primary uppercase tracking-wider">
|
||||
Frontend Info
|
||||
</h2>
|
||||
<button
|
||||
onclick={() => showAdvanced = !showAdvanced}
|
||||
class="text-[10px] font-bold uppercase tracking-tight px-2 py-1 rounded bg-border text-text-secondary hover:text-text-primary transition-colors"
|
||||
>
|
||||
{showAdvanced ? 'Hide Tools' : 'OTA Update'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-5 space-y-4">
|
||||
<!-- Version & Slot Info -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-bg-primary/30 p-3 rounded-lg border border-border/50">
|
||||
<div class="text-[10px] uppercase text-text-secondary font-bold mb-1">Version</div>
|
||||
<div class="text-sm font-mono text-accent">v{__APP_VERSION__}</div>
|
||||
</div>
|
||||
<div class="bg-bg-primary/30 p-3 rounded-lg border border-border/50">
|
||||
<div class="text-[10px] uppercase text-text-secondary font-bold mb-1">Active Slot</div>
|
||||
<div class="text-xs font-mono text-text-primary">
|
||||
{otaInfo.active_partition}
|
||||
{#if otaInfo.partitions}
|
||||
<span class="text-text-secondary ml-1">
|
||||
({(otaInfo.partitions.find(p => p.label === otaInfo.active_partition)?.free / 1024 / 1024).toFixed(2)} MB free)
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if showAdvanced}
|
||||
<div class="pt-2 border-t border-border/50 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-xs font-bold text-text-primary">OTA Upgrade</h3>
|
||||
<div class="text-[10px] text-text-secondary">
|
||||
Target: <span class="font-mono">{otaInfo.target_partition}</span>
|
||||
{#if otaInfo.partitions}
|
||||
<span class="ml-1">
|
||||
({(otaInfo.partitions.find(p => p.label === otaInfo.target_partition)?.size / 1024 / 1024).toFixed(2)} MB capacity)
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if status === "success"}
|
||||
<div class="bg-success/10 border border-success/20 text-success p-3 rounded-lg text-xs flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-success"></span>
|
||||
Update successful! The device is rebooting...
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Drag and Drop Zone -->
|
||||
<div
|
||||
role="button"
|
||||
aria-label="Upload partition image"
|
||||
tabindex="0"
|
||||
class="relative border-2 border-dashed rounded-xl p-6 transition-all duration-200 flex flex-col items-center justify-center gap-2
|
||||
{isDragging ? 'border-accent bg-accent/5' : 'border-border hover:border-border-hover bg-bg-primary/20'}
|
||||
{status === 'uploading' ? 'opacity-50 pointer-events-none' : ''}"
|
||||
ondragover={(e) => { e.preventDefault(); isDragging = true; }}
|
||||
ondragleave={() => isDragging = false}
|
||||
ondrop={handleDrop}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
accept=".bin"
|
||||
onchange={handleFileChange}
|
||||
class="absolute inset-0 opacity-0 cursor-pointer"
|
||||
/>
|
||||
|
||||
<div class="text-2xl">📦</div>
|
||||
{#if selectedFile}
|
||||
<div class="text-xs font-medium text-text-primary">{selectedFile.name}</div>
|
||||
<div class="text-[10px] text-text-secondary">{(selectedFile.size / 1024).toFixed(1)} KB</div>
|
||||
{:else}
|
||||
<div class="text-xs text-text-primary">Drag & Drop .bin here</div>
|
||||
<div class="text-[10px] text-text-secondary">or click to browse</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if selectedFile}
|
||||
<button
|
||||
onclick={handleUpload}
|
||||
disabled={status === "uploading"}
|
||||
class="w-full py-2 text-xs font-bold rounded-lg transition-colors
|
||||
bg-accent text-white hover:brightness-110
|
||||
disabled:opacity-40"
|
||||
>
|
||||
{status === "uploading" ? 'Processing Update...' : `Flash to ${otaInfo.target_partition}`}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if status === "uploading"}
|
||||
<div class="w-full bg-border rounded-full h-1 mt-1 overflow-hidden">
|
||||
<div
|
||||
class="bg-accent h-1 rounded-full transition-all duration-300"
|
||||
style="width: {uploadProgress}%"
|
||||
></div>
|
||||
</div>
|
||||
{:else if status === "error"}
|
||||
<p class="text-[10px] text-danger mt-1 bg-danger/5 p-2 rounded border border-danger/10">
|
||||
{errorMsg}
|
||||
</p>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if !IS_DEV}
|
||||
<div class="bg-bg-card border border-border rounded-xl overflow-hidden mt-4">
|
||||
<div class="px-5 py-3 border-b border-border flex items-center justify-between">
|
||||
<h2 class="text-sm font-semibold text-text-primary uppercase tracking-wider">
|
||||
Updates & Maintenance
|
||||
</h2>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
onclick={() => toggleMode('frontend')}
|
||||
class="text-[10px] font-bold uppercase tracking-tight px-2 py-1 rounded transition-colors
|
||||
{showAdvanced && updateMode === 'frontend' ? 'bg-accent text-white' : 'bg-border text-text-secondary hover:text-text-primary'}"
|
||||
>
|
||||
Frontend OTA
|
||||
</button>
|
||||
<button
|
||||
onclick={() => toggleMode('firmware')}
|
||||
class="text-[10px] font-bold uppercase tracking-tight px-2 py-1 rounded transition-colors
|
||||
{showAdvanced && updateMode === 'firmware' ? 'bg-accent text-white' : 'bg-border text-text-secondary hover:text-text-primary'}"
|
||||
>
|
||||
Firmware OTA
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-bg-primary/30 p-3 rounded-lg border border-border/50">
|
||||
<div class="text-[10px] uppercase text-text-secondary font-bold mb-1">UI Version</div>
|
||||
<div class="text-sm font-mono text-accent">v{__APP_VERSION__}</div>
|
||||
<div class="text-[9px] text-text-secondary mt-1">
|
||||
Slot: {otaInfo.active_partition}
|
||||
{#if otaInfo.partitions}
|
||||
({(otaInfo.partitions.find(p => p.label === otaInfo.active_partition)?.free / 1024).toFixed(0)} KB free)
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-bg-primary/30 p-3 rounded-lg border border-border/50">
|
||||
<div class="text-[10px] uppercase text-text-secondary font-bold mb-1">FW Version</div>
|
||||
<div class="text-sm font-mono text-text-primary">{systemInfo.firmware}</div>
|
||||
<div class="text-[9px] text-text-secondary mt-1">
|
||||
Active: {otaInfo.active_slot === 0 ? 'ota_0' : 'ota_1'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if showAdvanced}
|
||||
<div class="pt-2 border-t border-border/50 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-xs font-bold text-text-primary">
|
||||
OTA Upgrade ({updateMode === 'frontend' ? 'UI' : 'Firmware'})
|
||||
</h3>
|
||||
<div class="text-[10px] text-text-secondary">
|
||||
Target: <span class="font-mono text-accent">{currentTarget()}</span>
|
||||
{#if updateMode === 'frontend' && otaInfo.partitions}
|
||||
<span class="ml-1">
|
||||
({(otaInfo.partitions.find(p => p.label === otaInfo.target_partition)?.size / 1024 / 1024).toFixed(1)} MB)
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if status === "success"}
|
||||
<div class="bg-success/10 border border-success/20 text-success p-3 rounded-lg text-xs flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-success"></span>
|
||||
Update successful! Rebooting device...
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
role="button"
|
||||
aria-label="Upload data"
|
||||
tabindex="0"
|
||||
class="relative border-2 border-dashed rounded-xl p-6 transition-all duration-200 flex flex-col items-center justify-center gap-2
|
||||
{isDragging ? 'border-accent bg-accent/5' : 'border-border hover:border-border-hover bg-bg-primary/20'}
|
||||
{status === 'uploading' ? 'opacity-50 pointer-events-none' : ''}"
|
||||
ondragover={(e) => { e.preventDefault(); isDragging = true; }}
|
||||
ondragleave={() => isDragging = false}
|
||||
ondrop={handleDrop}
|
||||
>
|
||||
<input type="file" accept=".bin" onchange={handleFileChange} class="absolute inset-0 opacity-0 cursor-pointer" />
|
||||
<div class="text-2xl">{updateMode === 'frontend' ? '🎨' : '⚙️'}</div>
|
||||
{#if selectedFile}
|
||||
<div class="text-xs font-medium text-text-primary">{selectedFile.name}</div>
|
||||
<div class="text-[10px] text-text-secondary">{(selectedFile.size / 1024).toFixed(1)} KB</div>
|
||||
{:else}
|
||||
<div class="text-xs text-text-primary">Drop {updateMode} .bin here</div>
|
||||
<div class="text-[10px] text-text-secondary">or click to browse</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if selectedFile}
|
||||
<button
|
||||
onclick={handleUpload}
|
||||
disabled={status === "uploading"}
|
||||
class="w-full py-2 text-xs font-bold rounded-lg transition-colors bg-accent text-white hover:brightness-110 disabled:opacity-40"
|
||||
>
|
||||
{status === "uploading" ? 'Flashing...' : `Update ${updateMode === 'frontend' ? 'UI' : 'Firmware'}`}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if status === "uploading"}
|
||||
<div class="w-full bg-border rounded-full h-1 mt-1 overflow-hidden">
|
||||
<div class="bg-accent h-1 rounded-full transition-all duration-300" style="width: {uploadProgress}%"></div>
|
||||
</div>
|
||||
{:else if status === "error"}
|
||||
<p class="text-[10px] text-danger mt-1 bg-danger/5 p-2 rounded border border-danger/10">{errorMsg}</p>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
@@ -40,7 +40,7 @@ export async function reboot() {
|
||||
|
||||
/**
|
||||
* Fetch OTA status from the ESP32.
|
||||
* @returns {Promise<{active_slot: number, active_partition: string, target_partition: string}>}
|
||||
* @returns {Promise<{active_slot: number, active_partition: string, target_partition: string, partitions: any[], running_firmware_label: string, running_firmware_slot: number}>}
|
||||
*/
|
||||
export async function getOTAStatus() {
|
||||
const res = await fetch(`${API_BASE}/api/ota/status`);
|
||||
@@ -73,3 +73,24 @@ export async function uploadOTAFrontend(file) {
|
||||
|
||||
return res.json();
|
||||
}
|
||||
/**
|
||||
* Upload a new firmware binary image.
|
||||
* @param {File} file The firmware binary file to upload.
|
||||
* @returns {Promise<{status: string, message: string}>}
|
||||
*/
|
||||
export async function uploadOTAFirmware(file) {
|
||||
const res = await fetch(`${API_BASE}/api/ota/firmware`, {
|
||||
method: 'POST',
|
||||
body: file,
|
||||
headers: {
|
||||
'Content-Type': 'application/octet-stream'
|
||||
}
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text();
|
||||
throw new Error(`Upload failed (${res.status}): ${errorText || res.statusText}`);
|
||||
}
|
||||
|
||||
return res.json();
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"major": 0,
|
||||
"minor": 1,
|
||||
"revision": 7
|
||||
"revision": 12
|
||||
}
|
||||
Reference in New Issue
Block a user