25 lines
No EOL
1.4 KiB
HTML
25 lines
No EOL
1.4 KiB
HTML
<h1>tasks-page works!</h1>
|
|
|
|
<h2>Task List</h2>
|
|
@if (tasks$ | async; as tasks) {
|
|
<ul>
|
|
@for (task of tasks; track task) {
|
|
<li>
|
|
<span>{{ task.title }}</span>
|
|
<button class="trash-btn" (click)="removeTask(task.id)" title="Delete task">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="20" height="20" style="display:inline-block;vertical-align:middle;fill:currentColor;"><path d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"/></svg>
|
|
</button>
|
|
</li>
|
|
}
|
|
</ul>
|
|
} @else {
|
|
<p>Loading tasks...</p>
|
|
}
|
|
|
|
<p>Elapsed time: <span style="font-family:monospace;font-size:1.2em">{{ elapsedClock }}</span></p>
|
|
|
|
<!-- Add a task -->
|
|
<form (submit)="onAddTaskSubmit($event)" style="margin-top:1em;display:flex;gap:0.5em;align-items:center;">
|
|
<input type="text" name="taskTitle" placeholder="Task name" required style="padding:0.3em 0.7em;border-radius:4px;border:1px solid #ccc;min-width:120px;" />
|
|
<button type="submit">+ Add a task</button>
|
|
</form> |