Claude opus authored everything to make the user and task work. First iteration
This commit is contained in:
@@ -1,6 +1,8 @@
|
||||
<script>
|
||||
import { getSystemInfo, reboot, getOTAStatus } from "./lib/api.js";
|
||||
import { getSystemInfo, reboot, getOTAStatus, getUpcomingTasks } from "./lib/api.js";
|
||||
import OTAUpdate from "./lib/OTAUpdate.svelte";
|
||||
import Sidebar from "./lib/Sidebar.svelte";
|
||||
import TaskManager from "./lib/TaskManager.svelte";
|
||||
|
||||
/** @type {'loading' | 'ok' | 'error' | 'rebooting'} */
|
||||
let status = $state("loading");
|
||||
@@ -8,6 +10,9 @@
|
||||
let showRebootConfirm = $state(false);
|
||||
let isRecovering = $state(false);
|
||||
|
||||
/** @type {'dashboard' | 'tasks'} */
|
||||
let currentView = $state("dashboard");
|
||||
|
||||
let systemInfo = $state({
|
||||
chip: "—",
|
||||
freeHeap: 0,
|
||||
@@ -22,6 +27,8 @@
|
||||
running_firmware_label: "—"
|
||||
});
|
||||
|
||||
let upcomingData = $state({ users: [] });
|
||||
|
||||
/** Format uptime seconds into human-readable string */
|
||||
function formatUptime(seconds) {
|
||||
const d = Math.floor(seconds / 86400);
|
||||
@@ -43,11 +50,37 @@
|
||||
return `${bytes} B`;
|
||||
}
|
||||
|
||||
function formatRelativeDate(timestamp) {
|
||||
const now = Date.now() / 1000;
|
||||
const diff = timestamp - now;
|
||||
const absDiff = Math.abs(diff);
|
||||
|
||||
if (absDiff < 3600) {
|
||||
const mins = Math.round(absDiff / 60);
|
||||
return diff < 0 ? `${mins}m ago` : `in ${mins}m`;
|
||||
}
|
||||
if (absDiff < 86400) {
|
||||
const hours = Math.round(absDiff / 3600);
|
||||
return diff < 0 ? `${hours}h ago` : `in ${hours}h`;
|
||||
}
|
||||
const days = Math.round(absDiff / 86400);
|
||||
return diff < 0 ? `${days}d ago` : `in ${days}d`;
|
||||
}
|
||||
|
||||
function isOverdue(timestamp) {
|
||||
return timestamp < Date.now() / 1000;
|
||||
}
|
||||
|
||||
async function fetchAll() {
|
||||
try {
|
||||
const [sys, ota] = await Promise.all([getSystemInfo(), getOTAStatus()]);
|
||||
const [sys, ota, upcoming] = await Promise.all([
|
||||
getSystemInfo(),
|
||||
getOTAStatus(),
|
||||
getUpcomingTasks().catch(() => ({ users: [] }))
|
||||
]);
|
||||
systemInfo = sys;
|
||||
otaStatus = ota;
|
||||
upcomingData = upcoming;
|
||||
status = "ok";
|
||||
errorMsg = "";
|
||||
} catch (e) {
|
||||
@@ -104,174 +137,239 @@
|
||||
]);
|
||||
</script>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
{: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>
|
||||
<div class="app-layout">
|
||||
<Sidebar {currentView} onNavigate={(view) => currentView = view} />
|
||||
|
||||
<!-- 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>
|
||||
<main class="main-content">
|
||||
<div class="w-full max-w-6xl mx-auto space-y-8">
|
||||
<!-- Header -->
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
{: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>
|
||||
|
||||
<!-- 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}
|
||||
{#if currentView === 'dashboard'}
|
||||
<!-- Dashboard View -->
|
||||
<!-- 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-[9px] text-text-secondary uppercase">
|
||||
Type {part.type} / Sub {part.subtype}
|
||||
<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>
|
||||
<div class="text-right flex flex-col items-end">
|
||||
<div class="text-[11px] font-mono text-text-primary">{formatBytes(part.size)}</div>
|
||||
<div class="flex items-center gap-1.5 mt-0.5">
|
||||
{#if part.app_version}
|
||||
<span class="text-[9px] text-accent font-bold">v{part.app_version}</span>
|
||||
{/if}
|
||||
{#if part.free !== undefined}
|
||||
<span class="text-[9px] {part.free > 1024 ? 'text-success' : 'text-text-secondary'} font-bold">
|
||||
{formatBytes(part.free)} free
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-right flex flex-col items-end">
|
||||
<div class="text-[11px] font-mono text-text-primary">{formatBytes(part.size)}</div>
|
||||
<div class="flex items-center gap-1.5 mt-0.5">
|
||||
{#if part.app_version}
|
||||
<span class="text-[9px] text-accent font-bold">v{part.app_version}</span>
|
||||
{/if}
|
||||
{#if part.free !== undefined}
|
||||
<span class="text-[9px] {part.free > 1024 ? 'text-success' : 'text-text-secondary'} font-bold">
|
||||
{formatBytes(part.free)} free
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- Upcoming Tasks Section -->
|
||||
{#if upcomingData.users.length > 0}
|
||||
<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">
|
||||
📋 Upcoming Tasks
|
||||
</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-0 divide-y md:divide-y-0 md:divide-x divide-border">
|
||||
{#each upcomingData.users as user}
|
||||
<div class="p-4">
|
||||
<h3 class="text-xs font-bold text-accent mb-3 uppercase tracking-wider">{user.name}</h3>
|
||||
{#if user.tasks.length === 0}
|
||||
<p class="text-[11px] text-text-secondary italic">No pending tasks</p>
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each user.tasks as task}
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="text-[10px] mt-0.5 {isOverdue(task.due_date) ? 'text-danger' : 'text-text-secondary'} font-mono whitespace-nowrap">
|
||||
{formatRelativeDate(task.due_date)}
|
||||
</span>
|
||||
<span class="text-xs text-text-primary leading-tight">{task.title}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</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>
|
||||
{/if}
|
||||
|
||||
{:else if currentView === 'tasks'}
|
||||
<!-- Task Manager View -->
|
||||
<div class="bg-bg-card border border-border rounded-xl p-6 shadow-xl">
|
||||
<TaskManager />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Reboot Confirmation Modal -->
|
||||
{#if showRebootConfirm}
|
||||
<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.
|
||||
</p>
|
||||
<div class="flex gap-3 justify-end">
|
||||
<button
|
||||
onclick={() => (showRebootConfirm = false)}
|
||||
class="px-4 py-2 text-sm rounded-lg bg-border/30 text-text-secondary hover:bg-border/50 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</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 shadow-lg shadow-danger/20"
|
||||
>
|
||||
Reboot Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Updates & Maintenance Card -->
|
||||
<OTAUpdate onReboot={() => { status = "rebooting"; isRecovering = true; }} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Reboot Confirmation Modal -->
|
||||
{#if showRebootConfirm}
|
||||
<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.
|
||||
</p>
|
||||
<div class="flex gap-3 justify-end">
|
||||
<button
|
||||
onclick={() => (showRebootConfirm = false)}
|
||||
class="px-4 py-2 text-sm rounded-lg bg-border/30 text-text-secondary hover:bg-border/50 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</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 shadow-lg shadow-danger/20"
|
||||
>
|
||||
Reboot Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<style>
|
||||
.app-layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-primary);
|
||||
}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 16px 32px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-content {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
135
Provider/frontend/src/lib/Sidebar.svelte
Normal file
135
Provider/frontend/src/lib/Sidebar.svelte
Normal file
@@ -0,0 +1,135 @@
|
||||
<script>
|
||||
let { currentView = 'dashboard', onNavigate = () => {} } = $props();
|
||||
let collapsed = $state(false);
|
||||
|
||||
const navItems = [
|
||||
{ id: 'dashboard', label: 'Dashboard', icon: '🏠' },
|
||||
{ id: 'tasks', label: 'Tasks', icon: '📋' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<aside class="sidebar {collapsed ? 'collapsed' : ''}">
|
||||
<div class="sidebar-header">
|
||||
{#if !collapsed}
|
||||
<span class="sidebar-title">Menu</span>
|
||||
{/if}
|
||||
<button
|
||||
class="collapse-btn"
|
||||
onclick={() => collapsed = !collapsed}
|
||||
title={collapsed ? 'Expand' : 'Collapse'}
|
||||
>
|
||||
{collapsed ? '▶' : '◀'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
{#each navItems as item}
|
||||
<button
|
||||
class="nav-item {currentView === item.id ? 'active' : ''}"
|
||||
onclick={() => onNavigate(item.id)}
|
||||
title={item.label}
|
||||
>
|
||||
<span class="nav-icon">{item.icon}</span>
|
||||
{#if !collapsed}
|
||||
<span class="nav-label">{item.label}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.sidebar {
|
||||
width: 200px;
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-card);
|
||||
border-right: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: width 0.25s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 12px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
font-size: 10px;
|
||||
border-radius: 4px;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.collapse-btn:hover {
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-bg-card-hover);
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: var(--color-bg-card-hover);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: color-mix(in srgb, var(--color-accent) 15%, transparent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
456
Provider/frontend/src/lib/TaskManager.svelte
Normal file
456
Provider/frontend/src/lib/TaskManager.svelte
Normal file
@@ -0,0 +1,456 @@
|
||||
<script>
|
||||
import { getTasks, addTask, updateTask, deleteTask } from './api.js';
|
||||
import UserManager from './UserManager.svelte';
|
||||
|
||||
let selectedUserId = $state(null);
|
||||
let tasks = $state([]);
|
||||
let error = $state('');
|
||||
|
||||
// Add task form state
|
||||
let newTitle = $state('');
|
||||
let newDueDate = $state('');
|
||||
let showAddForm = $state(false);
|
||||
|
||||
// Edit state
|
||||
let editingTaskId = $state(null);
|
||||
let editTitle = $state('');
|
||||
let editDueDate = $state('');
|
||||
|
||||
// Confirm delete
|
||||
let confirmDeleteId = $state(null);
|
||||
|
||||
async function fetchTasks() {
|
||||
if (!selectedUserId) {
|
||||
tasks = [];
|
||||
return;
|
||||
}
|
||||
try {
|
||||
tasks = await getTasks(selectedUserId);
|
||||
// Sort by due_date ascending
|
||||
tasks.sort((a, b) => a.due_date - b.due_date);
|
||||
error = '';
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
// Refetch when selected user changes
|
||||
$effect(() => {
|
||||
if (selectedUserId) {
|
||||
fetchTasks();
|
||||
} else {
|
||||
tasks = [];
|
||||
}
|
||||
});
|
||||
|
||||
async function handleAddTask(e) {
|
||||
e.preventDefault();
|
||||
if (!newTitle.trim() || !newDueDate) return;
|
||||
|
||||
const dueTimestamp = Math.floor(new Date(newDueDate).getTime() / 1000);
|
||||
try {
|
||||
await addTask(selectedUserId, newTitle.trim(), dueTimestamp);
|
||||
newTitle = '';
|
||||
newDueDate = '';
|
||||
showAddForm = false;
|
||||
await fetchTasks();
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleToggleComplete(task) {
|
||||
try {
|
||||
await updateTask(task.id, { completed: !task.completed });
|
||||
await fetchTasks();
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
function startEditing(task) {
|
||||
editingTaskId = task.id;
|
||||
editTitle = task.title;
|
||||
editDueDate = formatDateForInput(task.due_date);
|
||||
}
|
||||
|
||||
async function saveEdit(e) {
|
||||
e.preventDefault();
|
||||
if (!editTitle.trim()) return;
|
||||
|
||||
const dueTimestamp = Math.floor(new Date(editDueDate).getTime() / 1000);
|
||||
try {
|
||||
await updateTask(editingTaskId, {
|
||||
title: editTitle.trim(),
|
||||
due_date: dueTimestamp
|
||||
});
|
||||
editingTaskId = null;
|
||||
await fetchTasks();
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(id) {
|
||||
try {
|
||||
await deleteTask(id);
|
||||
confirmDeleteId = null;
|
||||
await fetchTasks();
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
function formatDateForInput(timestamp) {
|
||||
const d = new Date(timestamp * 1000);
|
||||
return d.toISOString().slice(0, 16); // "YYYY-MM-DDTHH:mm"
|
||||
}
|
||||
|
||||
function formatRelativeDate(timestamp) {
|
||||
const now = Date.now() / 1000;
|
||||
const diff = timestamp - now;
|
||||
const absDiff = Math.abs(diff);
|
||||
|
||||
if (absDiff < 3600) {
|
||||
const mins = Math.round(absDiff / 60);
|
||||
return diff < 0 ? `${mins}m ago` : `in ${mins}m`;
|
||||
}
|
||||
if (absDiff < 86400) {
|
||||
const hours = Math.round(absDiff / 3600);
|
||||
return diff < 0 ? `${hours}h ago` : `in ${hours}h`;
|
||||
}
|
||||
const days = Math.round(absDiff / 86400);
|
||||
return diff < 0 ? `${days}d ago` : `in ${days}d`;
|
||||
}
|
||||
|
||||
function isOverdue(timestamp) {
|
||||
return timestamp < Date.now() / 1000;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="task-manager">
|
||||
<UserManager bind:selectedUserId onUsersChanged={fetchTasks} />
|
||||
|
||||
{#if selectedUserId}
|
||||
<div class="task-header">
|
||||
<h2 class="task-title">Tasks</h2>
|
||||
{#if !showAddForm}
|
||||
<button class="add-task-btn" onclick={() => showAddForm = true}>+ Add Task</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if showAddForm}
|
||||
<form class="add-task-form" onsubmit={handleAddTask}>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={newTitle}
|
||||
placeholder="Task title..."
|
||||
class="task-input"
|
||||
autofocus
|
||||
/>
|
||||
<input
|
||||
type="datetime-local"
|
||||
bind:value={newDueDate}
|
||||
class="task-date-input"
|
||||
/>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn-primary" disabled={!newTitle.trim() || !newDueDate}>Add</button>
|
||||
<button type="button" class="btn-secondary" onclick={() => { showAddForm = false; newTitle = ''; newDueDate = ''; }}>Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
<div class="task-list">
|
||||
{#each tasks as task}
|
||||
<div class="task-item {task.completed ? 'completed' : ''} {isOverdue(task.due_date) && !task.completed ? 'overdue' : ''}">
|
||||
{#if editingTaskId === task.id}
|
||||
<form class="edit-form" onsubmit={saveEdit}>
|
||||
<input type="text" bind:value={editTitle} class="task-input" />
|
||||
<input type="datetime-local" bind:value={editDueDate} class="task-date-input" />
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn-primary btn-sm">Save</button>
|
||||
<button type="button" class="btn-secondary btn-sm" onclick={() => editingTaskId = null}>Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
{:else}
|
||||
<div class="task-left">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={task.completed}
|
||||
onchange={() => handleToggleComplete(task)}
|
||||
class="task-checkbox"
|
||||
/>
|
||||
<div class="task-info">
|
||||
<span class="task-text">{task.title}</span>
|
||||
<span class="task-due {isOverdue(task.due_date) && !task.completed ? 'text-overdue' : ''}">
|
||||
{formatRelativeDate(task.due_date)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-actions">
|
||||
<button class="action-btn" onclick={() => startEditing(task)} title="Edit">✏️</button>
|
||||
{#if confirmDeleteId === task.id}
|
||||
<button class="action-btn text-danger" onclick={() => handleDelete(task.id)} title="Confirm">✓</button>
|
||||
<button class="action-btn" onclick={() => confirmDeleteId = null} title="Cancel">✕</button>
|
||||
{:else}
|
||||
<button class="action-btn" onclick={() => confirmDeleteId = task.id} title="Delete">🗑️</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="empty-state">No tasks yet. Add one above!</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="empty-state">Select or add a user to see their tasks.</div>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<div class="task-error">{error}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.task-manager {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.task-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.add-task-btn {
|
||||
padding: 6px 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-accent);
|
||||
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
|
||||
color: var(--color-accent);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.add-task-btn:hover {
|
||||
background: color-mix(in srgb, var(--color-accent) 20%, transparent);
|
||||
}
|
||||
|
||||
.add-task-form, .edit-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-card);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.task-input {
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-primary);
|
||||
color: var(--color-text-primary);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.task-input:focus {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.task-date-input {
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-primary);
|
||||
color: var(--color-text-primary);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.task-date-input:focus {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 6px 16px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
transition: filter 0.15s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
padding: 6px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--color-bg-card-hover);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.task-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-card);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.task-item:hover {
|
||||
background: var(--color-bg-card-hover);
|
||||
}
|
||||
|
||||
.task-item.completed {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.task-item.overdue {
|
||||
border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
|
||||
}
|
||||
|
||||
.task-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-checkbox {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: var(--color-accent);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.task-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-text {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.completed .task-text {
|
||||
text-decoration: line-through;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.task-due {
|
||||
font-size: 10px;
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.text-overdue {
|
||||
color: var(--color-danger) !important;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.15s;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
opacity: 1;
|
||||
background: var(--color-bg-card-hover);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.task-error {
|
||||
margin-top: 8px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
background: color-mix(in srgb, var(--color-danger) 10%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-danger) 20%, transparent);
|
||||
color: var(--color-danger);
|
||||
font-size: 11px;
|
||||
}
|
||||
</style>
|
||||
269
Provider/frontend/src/lib/UserManager.svelte
Normal file
269
Provider/frontend/src/lib/UserManager.svelte
Normal file
@@ -0,0 +1,269 @@
|
||||
<script>
|
||||
import { getUsers, addUser, removeUser } from './api.js';
|
||||
|
||||
let { selectedUserId = $bindable(null), onUsersChanged = () => {} } = $props();
|
||||
|
||||
let users = $state([]);
|
||||
let newUserName = $state('');
|
||||
let showAddForm = $state(false);
|
||||
let error = $state('');
|
||||
let confirmDeleteId = $state(null);
|
||||
|
||||
async function fetchUsers() {
|
||||
try {
|
||||
users = await getUsers();
|
||||
if (users.length > 0 && !selectedUserId) {
|
||||
selectedUserId = users[0].id;
|
||||
}
|
||||
// If selected user was deleted, select first available
|
||||
if (selectedUserId && !users.find(u => u.id === selectedUserId)) {
|
||||
selectedUserId = users.length > 0 ? users[0].id : null;
|
||||
}
|
||||
error = '';
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAddUser() {
|
||||
if (!newUserName.trim()) return;
|
||||
try {
|
||||
const user = await addUser(newUserName.trim());
|
||||
newUserName = '';
|
||||
showAddForm = false;
|
||||
await fetchUsers();
|
||||
selectedUserId = user.id;
|
||||
onUsersChanged();
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRemoveUser(id) {
|
||||
try {
|
||||
await removeUser(id);
|
||||
confirmDeleteId = null;
|
||||
await fetchUsers();
|
||||
onUsersChanged();
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
fetchUsers();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="user-manager">
|
||||
<div class="user-bar">
|
||||
<div class="user-chips">
|
||||
{#each users as user}
|
||||
<button
|
||||
class="user-chip {selectedUserId === user.id ? 'selected' : ''}"
|
||||
onclick={() => selectedUserId = user.id}
|
||||
>
|
||||
<span class="user-name">{user.name}</span>
|
||||
{#if confirmDeleteId === user.id}
|
||||
<span class="confirm-delete">
|
||||
<button class="confirm-yes" onclick={(e) => { e.stopPropagation(); handleRemoveUser(user.id); }} title="Confirm delete">✓</button>
|
||||
<button class="confirm-no" onclick={(e) => { e.stopPropagation(); confirmDeleteId = null; }} title="Cancel">✕</button>
|
||||
</span>
|
||||
{:else}
|
||||
<button
|
||||
class="remove-btn"
|
||||
onclick={(e) => { e.stopPropagation(); confirmDeleteId = user.id; }}
|
||||
title="Remove user"
|
||||
>✕</button>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
{#if showAddForm}
|
||||
<form class="add-user-form" onsubmit={(e) => { e.preventDefault(); handleAddUser(); }}>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={newUserName}
|
||||
placeholder="Name..."
|
||||
class="add-user-input"
|
||||
autofocus
|
||||
/>
|
||||
<button type="submit" class="add-user-submit" disabled={!newUserName.trim()}>+</button>
|
||||
<button type="button" class="add-user-cancel" onclick={() => { showAddForm = false; newUserName = ''; }}>✕</button>
|
||||
</form>
|
||||
{:else}
|
||||
<button class="add-user-btn" onclick={() => showAddForm = true}>
|
||||
+ User
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<div class="user-error">{error}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.user-manager {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.user-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.user-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.user-chip:hover {
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.user-chip.selected {
|
||||
background: color-mix(in srgb, var(--color-accent) 15%, transparent);
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.user-name {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
padding: 0 2px;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.15s, color 0.15s;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.remove-btn:hover {
|
||||
opacity: 1;
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.confirm-delete {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.confirm-yes, .confirm-no {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
padding: 0 2px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.confirm-yes {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.confirm-no {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.add-user-btn {
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
border: 1px dashed var(--color-border);
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.add-user-btn:hover {
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.add-user-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.add-user-input {
|
||||
padding: 5px 10px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-primary);
|
||||
color: var(--color-text-primary);
|
||||
font-size: 12px;
|
||||
width: 100px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.add-user-input:focus {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.add-user-submit {
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.add-user-submit:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.add-user-cancel {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.user-error {
|
||||
margin-top: 8px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
background: color-mix(in srgb, var(--color-danger) 10%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--color-danger) 20%, transparent);
|
||||
color: var(--color-danger);
|
||||
font-size: 11px;
|
||||
}
|
||||
</style>
|
||||
@@ -116,3 +116,127 @@ export async function uploadOTABundle(file) {
|
||||
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// ─── User Management ─────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Fetch all users.
|
||||
* @returns {Promise<Array<{id: number, name: string}>>}
|
||||
*/
|
||||
export async function getUsers() {
|
||||
const res = await fetch(`${API_BASE}/api/users`);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new user.
|
||||
* @param {string} name
|
||||
* @returns {Promise<{id: number, name: string}>}
|
||||
*/
|
||||
export async function addUser(name) {
|
||||
const res = await fetch(`${API_BASE}/api/users`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name })
|
||||
});
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text();
|
||||
throw new Error(`Failed (${res.status}): ${errorText || res.statusText}`);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a user and all their tasks.
|
||||
* @param {number} id
|
||||
* @returns {Promise<{status: string}>}
|
||||
*/
|
||||
export async function removeUser(id) {
|
||||
const res = await fetch(`${API_BASE}/api/users?id=${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text();
|
||||
throw new Error(`Failed (${res.status}): ${errorText || res.statusText}`);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// ─── Task Management ─────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Fetch tasks for a specific user.
|
||||
* @param {number} userId
|
||||
* @returns {Promise<Array<{id: number, user_id: number, title: string, due_date: number, completed: boolean}>>}
|
||||
*/
|
||||
export async function getTasks(userId) {
|
||||
const res = await fetch(`${API_BASE}/api/tasks?user_id=${userId}`);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch top 3 upcoming tasks per user (for Dashboard).
|
||||
* @returns {Promise<{users: Array<{id: number, name: string, tasks: Array}>}>}
|
||||
*/
|
||||
export async function getUpcomingTasks() {
|
||||
const res = await fetch(`${API_BASE}/api/tasks/upcoming`);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new task.
|
||||
* @param {number} userId
|
||||
* @param {string} title
|
||||
* @param {number} dueDate Unix timestamp in seconds
|
||||
* @returns {Promise<{id: number, user_id: number, title: string, due_date: number, completed: boolean}>}
|
||||
*/
|
||||
export async function addTask(userId, title, dueDate) {
|
||||
const res = await fetch(`${API_BASE}/api/tasks`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ user_id: userId, title, due_date: dueDate })
|
||||
});
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text();
|
||||
throw new Error(`Failed (${res.status}): ${errorText || res.statusText}`);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a task (partial update — only include fields you want to change).
|
||||
* @param {number} id
|
||||
* @param {Object} fields - { title?: string, due_date?: number, completed?: boolean }
|
||||
* @returns {Promise<{status: string}>}
|
||||
*/
|
||||
export async function updateTask(id, fields) {
|
||||
const res = await fetch(`${API_BASE}/api/tasks/update`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id, ...fields })
|
||||
});
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text();
|
||||
throw new Error(`Failed (${res.status}): ${errorText || res.statusText}`);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a task.
|
||||
* @param {number} id
|
||||
* @returns {Promise<{status: string}>}
|
||||
*/
|
||||
export async function deleteTask(id) {
|
||||
const res = await fetch(`${API_BASE}/api/tasks?id=${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
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