basic of display management. Backend to register and give image for the device. front end to manage displays etc.
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
import Sidebar from "./lib/Sidebar.svelte";
|
||||
import TaskManager from "./lib/TaskManager.svelte";
|
||||
import UserManager from "./lib/UserManager.svelte";
|
||||
import DeviceManager from "./lib/DeviceManager.svelte";
|
||||
import Spinner from "./lib/Spinner.svelte";
|
||||
|
||||
/** @type {'loading' | 'ok' | 'error' | 'rebooting'} */
|
||||
@@ -13,7 +14,7 @@
|
||||
let showRebootConfirm = $state(false);
|
||||
let isRecovering = $state(false);
|
||||
|
||||
/** @type {'dashboard' | 'tasks' | 'users'} */
|
||||
/** @type {'dashboard' | 'tasks' | 'users' | 'devices'} */
|
||||
let currentView = $state("dashboard");
|
||||
let mobileMenuOpen = $state(false);
|
||||
|
||||
@@ -352,6 +353,11 @@
|
||||
<div class="bg-bg-card border border-border rounded-xl p-8 shadow-xl">
|
||||
<UserManager mode="manager" />
|
||||
</div>
|
||||
{:else if currentView === 'devices'}
|
||||
<!-- Device Management View -->
|
||||
<div class="bg-bg-card border border-border rounded-xl p-6 shadow-xl">
|
||||
<DeviceManager />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Reboot Confirmation Modal -->
|
||||
|
||||
148
Provider/frontend/src/lib/DeviceManager.svelte
Normal file
148
Provider/frontend/src/lib/DeviceManager.svelte
Normal file
@@ -0,0 +1,148 @@
|
||||
<script>
|
||||
import { getDevices, updateDeviceLayout } from './api.js';
|
||||
|
||||
let devices = $state([]);
|
||||
let loading = $state(true);
|
||||
let error = $state('');
|
||||
|
||||
// Track XML edits per device (keyed by MAC)
|
||||
let editingXml = $state({});
|
||||
let savingMac = $state('');
|
||||
let saveResult = $state('');
|
||||
|
||||
async function loadDevices() {
|
||||
loading = true;
|
||||
error = '';
|
||||
try {
|
||||
devices = await getDevices();
|
||||
} catch (e) {
|
||||
error = e.message || 'Failed to load devices';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSaveLayout(mac) {
|
||||
savingMac = mac;
|
||||
saveResult = '';
|
||||
try {
|
||||
await updateDeviceLayout(mac, editingXml[mac] || '');
|
||||
saveResult = 'ok';
|
||||
await loadDevices();
|
||||
} catch (e) {
|
||||
saveResult = e.message || 'Save failed';
|
||||
} finally {
|
||||
savingMac = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Runs once on mount — no reactive deps
|
||||
$effect(() => {
|
||||
loadDevices();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-text-primary">Device Manager</h2>
|
||||
<p class="text-xs text-text-secondary mt-1">
|
||||
Manage registered e-ink devices and their screen layouts.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onclick={loadDevices}
|
||||
class="px-3 py-1.5 text-xs font-medium rounded-lg bg-accent/10 text-accent border border-accent/20 hover:bg-accent/20 transition-colors"
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="text-center text-sm text-text-secondary py-8 animate-pulse">
|
||||
Loading devices...
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="text-center text-sm text-danger py-8">
|
||||
{error}
|
||||
</div>
|
||||
{:else if devices.length === 0}
|
||||
<div class="bg-bg-card-hover/50 border border-border rounded-xl p-8 text-center">
|
||||
<p class="text-text-secondary text-sm">No devices registered yet.</p>
|
||||
<p class="text-text-secondary text-xs mt-2">
|
||||
Use <code class="bg-bg-card px-1.5 py-0.5 rounded text-[11px] font-mono text-accent">
|
||||
curl -X POST -d '{{"mac":"AA:BB:CC:DD:EE:FF"}}' http://calendink.local/api/devices/register
|
||||
</code> to register a device.
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
{#each devices as device}
|
||||
<div class="bg-bg-card border border-border rounded-xl overflow-hidden shadow-lg">
|
||||
<!-- Device Header -->
|
||||
<div class="px-5 py-3 border-b border-border flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-base">📺</span>
|
||||
<span class="text-sm font-mono font-bold text-text-primary">{device.mac}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
{#if device.has_layout}
|
||||
<span class="text-[10px] bg-success/20 text-success px-2 py-0.5 rounded-full uppercase tracking-wider font-semibold">
|
||||
Layout Set
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-[10px] bg-border/50 text-text-secondary px-2 py-0.5 rounded-full uppercase tracking-wider font-semibold">
|
||||
No Layout
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- XML Editor -->
|
||||
<div class="p-5 space-y-3">
|
||||
<label class="text-xs font-semibold text-text-secondary uppercase tracking-wider">
|
||||
LVGL XML Layout
|
||||
</label>
|
||||
<!-- svelte-ignore a11y_autofocus -->
|
||||
<textarea
|
||||
class="w-full h-32 bg-bg-primary border border-border rounded-lg p-3 text-xs font-mono text-text-primary resize-y focus:border-accent focus:outline-none transition-colors placeholder:text-text-secondary/50"
|
||||
placeholder='<lv_label text="Hello World" align="center" />'
|
||||
value={editingXml[device.mac] ?? ''}
|
||||
oninput={(e) => editingXml[device.mac] = e.target.value}
|
||||
></textarea>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
{#if device.has_layout}
|
||||
<a
|
||||
href="/api/devices/screen.png?mac={device.mac}"
|
||||
target="_blank"
|
||||
class="text-xs text-accent hover:text-accent/80 transition-colors underline"
|
||||
>
|
||||
Preview PNG →
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
<button
|
||||
onclick={() => handleSaveLayout(device.mac)}
|
||||
disabled={savingMac === device.mac}
|
||||
class="px-4 py-2 text-xs font-medium rounded-lg transition-colors
|
||||
bg-accent/10 text-accent border border-accent/20
|
||||
hover:bg-accent/20 hover:border-accent/30
|
||||
disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
{savingMac === device.mac ? 'Saving...' : 'Save Layout'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if saveResult === 'ok' && savingMac === ''}
|
||||
<div class="text-xs text-success">✓ Layout saved successfully</div>
|
||||
{:else if saveResult && saveResult !== 'ok'}
|
||||
<div class="text-xs text-danger">✗ {saveResult}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -11,6 +11,7 @@
|
||||
|
||||
const navItems = [
|
||||
{ id: 'dashboard', label: 'Dashboard', icon: '🏠' },
|
||||
{ id: 'devices', label: 'Devices', icon: '📺' },
|
||||
{ id: 'tasks', label: 'Tasks', icon: '📋' },
|
||||
{ id: 'users', label: 'Users', icon: '👥' },
|
||||
];
|
||||
|
||||
@@ -274,3 +274,35 @@ export async function deleteTask(id) {
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// ─── Device Management ───────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Fetch all registered devices.
|
||||
* @returns {Promise<Array<{mac: string, has_layout: boolean}>>}
|
||||
*/
|
||||
export async function getDevices() {
|
||||
const res = await trackedFetch(`${API_BASE}/api/devices`);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the LVGL XML layout for a device.
|
||||
* @param {string} mac
|
||||
* @param {string} xml
|
||||
* @returns {Promise<{status: string}>}
|
||||
*/
|
||||
export async function updateDeviceLayout(mac, xml) {
|
||||
const res = await trackedFetch(`${API_BASE}/api/devices/layout`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ mac, xml })
|
||||
});
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text();
|
||||
throw new Error(`Failed (${res.status}): ${errorText || res.statusText}`);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user