init
This commit is contained in:
150
web/app.js
Normal file
150
web/app.js
Normal file
@@ -0,0 +1,150 @@
|
||||
const API_BASE = 'http://localhost:8080/api/v1';
|
||||
let token = '';
|
||||
|
||||
const sessionState = document.getElementById('sessionState');
|
||||
const loginBtn = document.getElementById('loginBtn');
|
||||
const createForm = document.getElementById('createForm');
|
||||
const taskList = document.getElementById('taskList');
|
||||
const refreshBtn = document.getElementById('refreshBtn');
|
||||
const clearBtn = document.getElementById('clearBtn');
|
||||
const template = document.getElementById('taskTemplate');
|
||||
|
||||
function setSessionState(text) {
|
||||
sessionState.textContent = text;
|
||||
}
|
||||
|
||||
function getHeaders() {
|
||||
return {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: token ? `Bearer ${token}` : '',
|
||||
};
|
||||
}
|
||||
|
||||
async function login() {
|
||||
const response = await fetch(`${API_BASE}/auth/login`, {
|
||||
method: 'POST',
|
||||
});
|
||||
if (!response.ok) {
|
||||
setSessionState('Login failed');
|
||||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
token = data.token || 'demo-token';
|
||||
setSessionState('Connected');
|
||||
await loadTasks();
|
||||
}
|
||||
|
||||
function buildMeta(task) {
|
||||
const parts = [];
|
||||
if (task.status) parts.push(task.status.toUpperCase());
|
||||
if (task.due_at) parts.push(`Due: ${task.due_at}`);
|
||||
if (task.priority) parts.push(`P${task.priority}`);
|
||||
if (task.tags && task.tags.length > 0) parts.push(task.tags.join(', '));
|
||||
return parts.join(' • ');
|
||||
}
|
||||
|
||||
function renderTasks(tasks) {
|
||||
taskList.innerHTML = '';
|
||||
if (!tasks || tasks.length === 0) {
|
||||
taskList.innerHTML = '<div class="empty">No tasks yet.</div>';
|
||||
return;
|
||||
}
|
||||
tasks.forEach((task) => {
|
||||
const node = template.content.cloneNode(true);
|
||||
node.querySelector('h3').textContent = task.title || 'Untitled task';
|
||||
node.querySelector('.meta').textContent = buildMeta(task);
|
||||
node.querySelector('.desc').textContent = task.description || '';
|
||||
node.querySelector('.badge').textContent = task.status || 'todo';
|
||||
node.querySelector('.toggle').addEventListener('click', () => toggleStatus(task));
|
||||
node.querySelector('.delete').addEventListener('click', () => deleteTask(task));
|
||||
taskList.appendChild(node);
|
||||
});
|
||||
}
|
||||
|
||||
async function loadTasks() {
|
||||
const response = await fetch(`${API_BASE}/tasks`, {
|
||||
headers: getHeaders(),
|
||||
});
|
||||
if (!response.ok) {
|
||||
setSessionState('Auth required');
|
||||
renderTasks([]);
|
||||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
renderTasks(data);
|
||||
}
|
||||
|
||||
async function createTask(event) {
|
||||
event.preventDefault();
|
||||
const form = new FormData(createForm);
|
||||
const payload = {
|
||||
title: form.get('title'),
|
||||
description: form.get('description'),
|
||||
due_at: toISO(form.get('due_at')),
|
||||
priority: Number(form.get('priority') || 0),
|
||||
tags: String(form.get('tags') || '')
|
||||
.split(',')
|
||||
.map((tag) => tag.trim())
|
||||
.filter(Boolean),
|
||||
};
|
||||
|
||||
const response = await fetch(`${API_BASE}/tasks`, {
|
||||
method: 'POST',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
setSessionState('Failed to create task');
|
||||
return;
|
||||
}
|
||||
|
||||
createForm.reset();
|
||||
await loadTasks();
|
||||
}
|
||||
|
||||
async function toggleStatus(task) {
|
||||
const nextStatus = task.status === 'done' ? 'todo' : 'done';
|
||||
await fetch(`${API_BASE}/tasks/${task.id}`, {
|
||||
method: 'PUT',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify({ status: nextStatus }),
|
||||
});
|
||||
await loadTasks();
|
||||
}
|
||||
|
||||
async function deleteTask(task) {
|
||||
await fetch(`${API_BASE}/tasks/${task.id}`, {
|
||||
method: 'DELETE',
|
||||
headers: getHeaders(),
|
||||
});
|
||||
await loadTasks();
|
||||
}
|
||||
|
||||
async function clearCompleted() {
|
||||
const response = await fetch(`${API_BASE}/api/tasks`, {
|
||||
headers: getHeaders(),
|
||||
});
|
||||
if (!response.ok) {
|
||||
return;
|
||||
}
|
||||
const tasks = await response.json();
|
||||
const completed = tasks.filter((task) => task.status === 'done');
|
||||
for (const task of completed) {
|
||||
await deleteTask(task);
|
||||
}
|
||||
}
|
||||
|
||||
loginBtn.addEventListener('click', login);
|
||||
createForm.addEventListener('submit', createTask);
|
||||
refreshBtn.addEventListener('click', loadTasks);
|
||||
clearBtn.addEventListener('click', clearCompleted);
|
||||
|
||||
setSessionState('Not connected');
|
||||
|
||||
function toISO(value) {
|
||||
if (!value) return '';
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return '';
|
||||
return date.toISOString();
|
||||
}
|
||||
92
web/index.html
Normal file
92
web/index.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Todo Control Room</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-orbit"></div>
|
||||
<main class="shell">
|
||||
<header class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Distributed todo playground</p>
|
||||
<h1>Todo Control Room</h1>
|
||||
<p class="subhead">A bold, focused UI to drive your task workflow from a single cockpit.</p>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<h2>Session</h2>
|
||||
<p id="sessionState">Not connected</p>
|
||||
<button id="loginBtn" class="btn primary">Login (demo)</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panel-head">
|
||||
<h2>New Task</h2>
|
||||
<p>Create tasks quickly with priority and due date.</p>
|
||||
</div>
|
||||
<form id="createForm" class="form-grid">
|
||||
<label>
|
||||
<span>Title</span>
|
||||
<input type="text" name="title" placeholder="Plan service split" required />
|
||||
</label>
|
||||
<label>
|
||||
<span>Due</span>
|
||||
<input type="datetime-local" name="due_at" />
|
||||
</label>
|
||||
<label>
|
||||
<span>Priority</span>
|
||||
<select name="priority">
|
||||
<option value="1">High</option>
|
||||
<option value="2">Medium</option>
|
||||
<option value="3">Low</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Tags (comma)</span>
|
||||
<input type="text" name="tags" placeholder="backend, microservices" />
|
||||
</label>
|
||||
<label class="full">
|
||||
<span>Description</span>
|
||||
<textarea name="description" placeholder="Outline scope, list risks..."></textarea>
|
||||
</label>
|
||||
<button class="btn primary" type="submit">Create Task</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panel-head">
|
||||
<h2>Tasks</h2>
|
||||
<div class="actions">
|
||||
<button id="refreshBtn" class="btn ghost">Refresh</button>
|
||||
<button id="clearBtn" class="btn ghost">Clear Completed</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="taskList" class="task-list">
|
||||
<div class="empty">No tasks yet.</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<template id="taskTemplate">
|
||||
<article class="task-card">
|
||||
<div class="task-main">
|
||||
<div>
|
||||
<h3></h3>
|
||||
<p class="meta"></p>
|
||||
<p class="desc"></p>
|
||||
</div>
|
||||
<div class="badge"></div>
|
||||
</div>
|
||||
<div class="task-actions">
|
||||
<button class="btn ghost toggle">Toggle Status</button>
|
||||
<button class="btn ghost delete">Delete</button>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
267
web/styles.css
Normal file
267
web/styles.css
Normal file
@@ -0,0 +1,267 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@600;700&display=swap');
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #f6f3ef;
|
||||
--bg-alt: #efe7de;
|
||||
--ink: #1b1a17;
|
||||
--muted: #6c5f57;
|
||||
--accent: #d97706;
|
||||
--accent-dark: #a35503;
|
||||
--card: #fff7ed;
|
||||
--stroke: rgba(27, 26, 23, 0.1);
|
||||
--shadow: 0 24px 60px rgba(27, 26, 23, 0.15);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
background: radial-gradient(circle at top, #fff2d9 0%, var(--bg) 40%, var(--bg-alt) 100%);
|
||||
color: var(--ink);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bg-orbit {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at 20% 20%, rgba(217, 119, 6, 0.2), transparent 50%),
|
||||
radial-gradient(circle at 80% 10%, rgba(30, 64, 175, 0.15), transparent 45%),
|
||||
radial-gradient(circle at 70% 80%, rgba(190, 24, 93, 0.12), transparent 60%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.shell {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 24px 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 280px;
|
||||
gap: 24px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.subhead {
|
||||
font-size: 1rem;
|
||||
color: var(--muted);
|
||||
margin-top: 12px;
|
||||
max-width: 42ch;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--stroke);
|
||||
border-radius: 18px;
|
||||
padding: 20px;
|
||||
box-shadow: var(--shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.status-card p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border: 1px solid var(--stroke);
|
||||
border-radius: 28px;
|
||||
padding: 28px;
|
||||
backdrop-filter: blur(6px);
|
||||
box-shadow: var(--shadow);
|
||||
animation: floatIn 0.6s ease both;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.panel-head p {
|
||||
color: var(--muted);
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px 20px;
|
||||
}
|
||||
|
||||
.form-grid label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.form-grid input,
|
||||
.form-grid select,
|
||||
.form-grid textarea {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--stroke);
|
||||
padding: 12px 14px;
|
||||
font-size: 0.95rem;
|
||||
font-family: inherit;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.form-grid textarea {
|
||||
min-height: 90px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-grid .full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 999px;
|
||||
padding: 10px 18px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
box-shadow: 0 12px 24px rgba(217, 119, 6, 0.3);
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
background: transparent;
|
||||
border: 1px solid var(--stroke);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.task-list {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
background: var(--card);
|
||||
border-radius: 20px;
|
||||
padding: 18px;
|
||||
border: 1px solid var(--stroke);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
animation: riseIn 0.4s ease both;
|
||||
}
|
||||
|
||||
.task-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.task-card h3 {
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.task-card .meta {
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.task-card .desc {
|
||||
margin: 6px 0 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
background: rgba(217, 119, 6, 0.15);
|
||||
color: var(--accent-dark);
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 20px;
|
||||
border: 1px dashed var(--stroke);
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@keyframes floatIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes riseIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user