Rodrigo Rodriguez (Pragmatismo)
e68a12176d
- Add askama.toml for template configuration (ui/ directory) - Add Suite app documentation with flow diagrams (SVG) - App launcher, chat flow, drive flow, tasks flow - Individual app docs: chat, drive, tasks, mail, etc. - Add HTML templates for Suite apps - Base template with header and app launcher - Auth login page - Chat, Drive, Mail, Meet, Tasks templates - Partial templates for messages, sessions, notifications - Add Extensions type to AppState for type-erased storage - Add mTLS module for service-to-service authentication - Update web handlers to use new template paths (suite/) - Fix auth module to avoid axum-extra TypedHeader dependency
608 lines
14 KiB
HTML
608 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Tasks - General Bots{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="tasks-container" id="tasks-app">
|
|
<!-- Header -->
|
|
<div class="tasks-header">
|
|
<div class="header-content">
|
|
<h1 class="tasks-title">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M9 11l3 3L22 4"/>
|
|
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
|
|
</svg>
|
|
Tasks
|
|
</h1>
|
|
<div class="header-stats" id="task-stats"
|
|
hx-get="/api/tasks/stats"
|
|
hx-trigger="load, taskUpdated from:body"
|
|
hx-swap="innerHTML">
|
|
<span class="stat-item">
|
|
<span class="stat-value">{{ total_count }}</span>
|
|
<span class="stat-label">Total</span>
|
|
</span>
|
|
<span class="stat-item">
|
|
<span class="stat-value">{{ active_count }}</span>
|
|
<span class="stat-label">Active</span>
|
|
</span>
|
|
<span class="stat-item">
|
|
<span class="stat-value">{{ completed_count }}</span>
|
|
<span class="stat-label">Completed</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Task Form -->
|
|
<div class="add-task-section">
|
|
<form class="add-task-form"
|
|
hx-post="/api/tasks"
|
|
hx-target="#task-list"
|
|
hx-swap="afterbegin"
|
|
hx-on::after-request="this.reset(); htmx.trigger('body', 'taskUpdated')">
|
|
<input type="text"
|
|
name="text"
|
|
class="task-input"
|
|
placeholder="What needs to be done?"
|
|
required
|
|
autofocus>
|
|
<select name="category" class="task-category-select">
|
|
<option value="">No Category</option>
|
|
<option value="work">💼 Work</option>
|
|
<option value="personal">🏠 Personal</option>
|
|
<option value="shopping">🛒 Shopping</option>
|
|
<option value="health">❤️ Health</option>
|
|
</select>
|
|
<input type="date"
|
|
name="dueDate"
|
|
class="task-date-input"
|
|
placeholder="Due date">
|
|
<select name="priority" class="task-priority-select">
|
|
<option value="">Priority</option>
|
|
<option value="high">🔴 High</option>
|
|
<option value="medium">🟡 Medium</option>
|
|
<option value="low">🟢 Low</option>
|
|
</select>
|
|
<button type="submit" class="add-task-btn">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
Add Task
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Filter Tabs -->
|
|
<div class="filter-tabs">
|
|
<button class="filter-tab active"
|
|
hx-get="/api/tasks?filter=all"
|
|
hx-target="#task-list"
|
|
hx-swap="innerHTML"
|
|
onclick="setActiveTab(this)">
|
|
<span class="tab-icon">📋</span>
|
|
<span>All</span>
|
|
<span class="tab-count" id="count-all">{{ total_count }}</span>
|
|
</button>
|
|
<button class="filter-tab"
|
|
hx-get="/api/tasks?filter=active"
|
|
hx-target="#task-list"
|
|
hx-swap="innerHTML"
|
|
onclick="setActiveTab(this)">
|
|
<span class="tab-icon">⏳</span>
|
|
<span>Active</span>
|
|
<span class="tab-count" id="count-active">{{ active_count }}</span>
|
|
</button>
|
|
<button class="filter-tab"
|
|
hx-get="/api/tasks?filter=completed"
|
|
hx-target="#task-list"
|
|
hx-swap="innerHTML"
|
|
onclick="setActiveTab(this)">
|
|
<span class="tab-icon">✓</span>
|
|
<span>Completed</span>
|
|
<span class="tab-count" id="count-completed">{{ completed_count }}</span>
|
|
</button>
|
|
<button class="filter-tab priority-tab"
|
|
hx-get="/api/tasks?filter=priority"
|
|
hx-target="#task-list"
|
|
hx-swap="innerHTML"
|
|
onclick="setActiveTab(this)">
|
|
<span class="tab-icon">⚡</span>
|
|
<span>Priority</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Task List -->
|
|
<div class="task-list-container">
|
|
<div id="task-list" class="task-list"
|
|
hx-get="/api/tasks?filter=all"
|
|
hx-trigger="load"
|
|
hx-swap="innerHTML">
|
|
<div class="task-loading">
|
|
<div class="spinner"></div>
|
|
<span>Loading tasks...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bulk Actions (shown when tasks selected) -->
|
|
<div class="bulk-actions" id="bulk-actions" style="display: none;">
|
|
<span class="selected-count">0 selected</span>
|
|
<button class="bulk-btn"
|
|
hx-post="/api/tasks/bulk/complete"
|
|
hx-include="[name='selected-tasks']"
|
|
hx-target="#task-list">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
Complete
|
|
</button>
|
|
<button class="bulk-btn danger"
|
|
hx-delete="/api/tasks/bulk"
|
|
hx-include="[name='selected-tasks']"
|
|
hx-target="#task-list"
|
|
hx-confirm="Delete selected tasks?">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
|
</svg>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.tasks-container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.tasks-header {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.tasks-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.header-stats {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
display: block;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.add-task-section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.add-task-form {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.task-input {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
padding: 0.75rem 1rem;
|
|
background: var(--surface);
|
|
border: 2px solid var(--border);
|
|
border-radius: 8px;
|
|
color: var(--text);
|
|
font-size: 1rem;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.task-input:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.task-input::placeholder {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.task-category-select,
|
|
.task-date-input,
|
|
.task-priority-select {
|
|
padding: 0.75rem;
|
|
background: var(--surface);
|
|
border: 2px solid var(--border);
|
|
border-radius: 8px;
|
|
color: var(--text);
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.task-date-input {
|
|
width: 140px;
|
|
}
|
|
|
|
.add-task-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.25rem;
|
|
background: var(--primary);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 0.9375rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.add-task-btn:hover {
|
|
background: var(--primary-hover);
|
|
}
|
|
|
|
.filter-tabs {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: 0.5rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.filter-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 1rem;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: var(--text-secondary);
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
transition: background 0.2s, color 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.filter-tab:hover {
|
|
background: var(--surface-hover);
|
|
color: var(--text);
|
|
}
|
|
|
|
.filter-tab.active {
|
|
background: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
.tab-count {
|
|
padding: 0.125rem 0.5rem;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 10px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.filter-tab:not(.active) .tab-count {
|
|
background: var(--surface);
|
|
}
|
|
|
|
.task-list-container {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.task-list {
|
|
min-height: 200px;
|
|
}
|
|
|
|
.task-loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 3rem;
|
|
color: var(--text-secondary);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.task-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--border);
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.task-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.task-item:hover {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.task-item.completed {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.task-item.completed .task-text {
|
|
text-decoration: line-through;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.task-checkbox {
|
|
width: 22px;
|
|
height: 22px;
|
|
border: 2px solid var(--border);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
background: transparent;
|
|
transition: background 0.2s, border-color 0.2s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.task-checkbox:checked {
|
|
background: var(--success);
|
|
border-color: var(--success);
|
|
}
|
|
|
|
.task-checkbox:checked::after {
|
|
content: '✓';
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.task-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.task-text {
|
|
font-size: 0.9375rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.task-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.task-category {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.task-due {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.task-due.overdue {
|
|
color: var(--error);
|
|
}
|
|
|
|
.task-due.today {
|
|
color: var(--warning);
|
|
}
|
|
|
|
.task-priority {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.task-priority.high { background: var(--error); }
|
|
.task-priority.medium { background: var(--warning); }
|
|
.task-priority.low { background: var(--success); }
|
|
|
|
.task-actions {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.task-item:hover .task-actions {
|
|
opacity: 1;
|
|
}
|
|
|
|
.task-action-btn {
|
|
padding: 0.375rem;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background 0.2s, color 0.2s;
|
|
}
|
|
|
|
.task-action-btn:hover {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
.task-action-btn.delete:hover {
|
|
color: var(--error);
|
|
}
|
|
|
|
.bulk-actions {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.selected-count {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.bulk-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: var(--primary);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.bulk-btn.danger {
|
|
background: var(--error);
|
|
}
|
|
|
|
.empty-tasks {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4rem 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-tasks svg {
|
|
width: 64px;
|
|
height: 64px;
|
|
color: var(--text-secondary);
|
|
opacity: 0.5;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.empty-tasks h3 {
|
|
font-size: 1.125rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.empty-tasks p {
|
|
color: var(--text-secondary);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.spinner {
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 2px solid var(--border);
|
|
border-top-color: var(--primary);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.tasks-container {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.add-task-form {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.task-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.header-content {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.filter-tabs {
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function setActiveTab(btn) {
|
|
document.querySelectorAll('.filter-tab').forEach(tab => {
|
|
tab.classList.remove('active');
|
|
});
|
|
btn.classList.add('active');
|
|
}
|
|
|
|
// Keyboard shortcuts
|
|
document.addEventListener('keydown', (e) => {
|
|
// Focus input on 'n' key
|
|
if (e.key === 'n' && !e.ctrlKey && !e.metaKey) {
|
|
const activeElement = document.activeElement;
|
|
if (activeElement.tagName !== 'INPUT' && activeElement.tagName !== 'TEXTAREA' && activeElement.tagName !== 'SELECT') {
|
|
e.preventDefault();
|
|
document.querySelector('.task-input').focus();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Task item interactions
|
|
document.addEventListener('click', (e) => {
|
|
const checkbox = e.target.closest('.task-checkbox');
|
|
if (checkbox) {
|
|
const taskItem = checkbox.closest('.task-item');
|
|
if (taskItem) {
|
|
taskItem.classList.toggle('completed', checkbox.checked);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Update stats after task changes
|
|
document.body.addEventListener('htmx:afterSwap', (e) => {
|
|
if (e.detail.target.id === 'task-list') {
|
|
htmx.trigger('body', 'taskUpdated');
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|