Initial commit: memo app with FastAPI, SQLite, APScheduler, Discord notifications
This commit is contained in:
+202
@@ -0,0 +1,202 @@
|
||||
const api = {
|
||||
async get(path) {
|
||||
const r = await fetch(path); return r.json();
|
||||
},
|
||||
async post(path, body) {
|
||||
const r = await fetch(path, { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(body) });
|
||||
return r.status === 204 ? null : r.json();
|
||||
},
|
||||
async put(path, body) {
|
||||
const r = await fetch(path, { method: 'PUT', headers: {'Content-Type':'application/json'}, body: JSON.stringify(body) });
|
||||
return r.json();
|
||||
},
|
||||
async del(path) {
|
||||
await fetch(path, { method: 'DELETE' });
|
||||
}
|
||||
};
|
||||
|
||||
let memos = [];
|
||||
let currentTab = 'pending';
|
||||
|
||||
function fmt(time) { return time ? time.slice(0,5) : ''; }
|
||||
function fmtDate(dt) { return dt ? dt.slice(0,10) : ''; }
|
||||
|
||||
function renderMemo(m) {
|
||||
const isDone = !!m.is_done;
|
||||
const div = document.createElement('div');
|
||||
div.className = 'memo-item' + (isDone ? ' done' : '');
|
||||
div.dataset.id = m.id;
|
||||
|
||||
const check = document.createElement('button');
|
||||
check.className = 'memo-check' + (isDone ? ' checked' : '');
|
||||
check.title = isDone ? 'Rouvrir' : 'Marquer comme fait';
|
||||
check.innerHTML = isDone ? '✓' : '';
|
||||
check.onclick = () => toggleDone(m.id, isDone);
|
||||
|
||||
const body = document.createElement('div');
|
||||
body.className = 'memo-body';
|
||||
|
||||
const title = document.createElement('div');
|
||||
title.className = 'memo-title' + (isDone ? ' done-text' : '');
|
||||
title.textContent = m.title;
|
||||
|
||||
body.appendChild(title);
|
||||
|
||||
if (m.description) {
|
||||
const desc = document.createElement('div');
|
||||
desc.className = 'memo-desc';
|
||||
desc.textContent = m.description;
|
||||
body.appendChild(desc);
|
||||
}
|
||||
|
||||
const meta = document.createElement('div');
|
||||
meta.className = 'memo-meta';
|
||||
if (!isDone) {
|
||||
meta.innerHTML = `<span>🔔 ${fmt(m.reminder_time)}</span><span>📅 ${fmtDate(m.created_at)}</span>`;
|
||||
} else {
|
||||
meta.innerHTML = `<span>✅ Fait le ${fmtDate(m.done_at)}</span>`;
|
||||
}
|
||||
body.appendChild(meta);
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'memo-actions';
|
||||
const editBtn = document.createElement('button');
|
||||
editBtn.className = 'btn-icon';
|
||||
editBtn.title = 'Modifier';
|
||||
editBtn.textContent = '✏️';
|
||||
editBtn.onclick = () => openEdit(m);
|
||||
actions.appendChild(editBtn);
|
||||
|
||||
div.appendChild(check);
|
||||
div.appendChild(body);
|
||||
div.appendChild(actions);
|
||||
return div;
|
||||
}
|
||||
|
||||
function render() {
|
||||
const pending = memos.filter(m => !m.is_done);
|
||||
const done = memos.filter(m => m.is_done);
|
||||
|
||||
const badge = document.getElementById('badge-pending');
|
||||
badge.textContent = pending.length > 0 ? pending.length : '';
|
||||
|
||||
const listPending = document.getElementById('list-pending');
|
||||
const listDone = document.getElementById('list-done');
|
||||
listPending.innerHTML = '';
|
||||
listDone.innerHTML = '';
|
||||
|
||||
if (pending.length === 0) {
|
||||
listPending.innerHTML = '<div class="empty-state">Aucun mémo en cours 🎉</div>';
|
||||
} else {
|
||||
pending.forEach(m => listPending.appendChild(renderMemo(m)));
|
||||
}
|
||||
|
||||
if (done.length === 0) {
|
||||
listDone.innerHTML = '<div class="empty-state">Aucun mémo terminé</div>';
|
||||
} else {
|
||||
done.forEach(m => listDone.appendChild(renderMemo(m)));
|
||||
}
|
||||
}
|
||||
|
||||
async function load() {
|
||||
memos = await api.get('/api/memos');
|
||||
render();
|
||||
}
|
||||
|
||||
async function toggleDone(id, isDone) {
|
||||
const path = isDone ? `/api/memos/${id}/undone` : `/api/memos/${id}/done`;
|
||||
const updated = await api.post(path, {});
|
||||
const idx = memos.findIndex(m => m.id === id);
|
||||
if (idx !== -1) memos[idx] = updated;
|
||||
render();
|
||||
}
|
||||
|
||||
// Add form
|
||||
document.getElementById('btn-add').onclick = async () => {
|
||||
const title = document.getElementById('input-title').value.trim();
|
||||
if (!title) { document.getElementById('input-title').focus(); return; }
|
||||
const desc = document.getElementById('input-desc').value.trim();
|
||||
const time = document.getElementById('input-time').value || '09:00';
|
||||
const memo = await api.post('/api/memos', { title, description: desc, reminder_time: time });
|
||||
memos.unshift(memo);
|
||||
document.getElementById('input-title').value = '';
|
||||
document.getElementById('input-desc').value = '';
|
||||
render();
|
||||
// Switch to pending tab
|
||||
setTab('pending');
|
||||
};
|
||||
|
||||
document.getElementById('input-title').addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') document.getElementById('btn-add').click();
|
||||
});
|
||||
|
||||
// Tabs
|
||||
function setTab(tab) {
|
||||
currentTab = tab;
|
||||
document.querySelectorAll('.tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tab));
|
||||
document.getElementById('list-pending').classList.toggle('hidden', tab !== 'pending');
|
||||
document.getElementById('list-done').classList.toggle('hidden', tab !== 'done');
|
||||
}
|
||||
|
||||
document.querySelectorAll('.tab').forEach(t => {
|
||||
t.onclick = () => setTab(t.dataset.tab);
|
||||
});
|
||||
|
||||
// Settings modal
|
||||
document.getElementById('btn-settings').onclick = async () => {
|
||||
const settings = await api.get('/api/settings');
|
||||
document.getElementById('input-webhook').value = settings.discord_webhook || '';
|
||||
document.getElementById('modal-settings').classList.remove('hidden');
|
||||
};
|
||||
document.getElementById('btn-settings-cancel').onclick = () => {
|
||||
document.getElementById('modal-settings').classList.add('hidden');
|
||||
};
|
||||
document.getElementById('btn-settings-save').onclick = async () => {
|
||||
const webhook = document.getElementById('input-webhook').value.trim();
|
||||
await api.post('/api/settings', { discord_webhook: webhook });
|
||||
document.getElementById('modal-settings').classList.add('hidden');
|
||||
};
|
||||
|
||||
// Edit modal
|
||||
function openEdit(m) {
|
||||
document.getElementById('edit-id').value = m.id;
|
||||
document.getElementById('edit-title').value = m.title;
|
||||
document.getElementById('edit-desc').value = m.description || '';
|
||||
document.getElementById('edit-time').value = fmt(m.reminder_time);
|
||||
document.getElementById('modal-edit').classList.remove('hidden');
|
||||
}
|
||||
|
||||
document.getElementById('btn-edit-cancel').onclick = () => {
|
||||
document.getElementById('modal-edit').classList.add('hidden');
|
||||
};
|
||||
|
||||
document.getElementById('btn-edit-save').onclick = async () => {
|
||||
const id = parseInt(document.getElementById('edit-id').value);
|
||||
const updated = await api.put(`/api/memos/${id}`, {
|
||||
title: document.getElementById('edit-title').value.trim(),
|
||||
description: document.getElementById('edit-desc').value.trim(),
|
||||
reminder_time: document.getElementById('edit-time').value
|
||||
});
|
||||
const idx = memos.findIndex(m => m.id === id);
|
||||
if (idx !== -1) memos[idx] = updated;
|
||||
document.getElementById('modal-edit').classList.add('hidden');
|
||||
render();
|
||||
};
|
||||
|
||||
document.getElementById('btn-edit-delete').onclick = async () => {
|
||||
const id = parseInt(document.getElementById('edit-id').value);
|
||||
if (!confirm('Supprimer ce mémo ?')) return;
|
||||
await api.del(`/api/memos/${id}`);
|
||||
memos = memos.filter(m => m.id !== id);
|
||||
document.getElementById('modal-edit').classList.add('hidden');
|
||||
render();
|
||||
};
|
||||
|
||||
// Close modals on backdrop click
|
||||
document.querySelectorAll('.modal').forEach(modal => {
|
||||
modal.addEventListener('click', e => {
|
||||
if (e.target === modal) modal.classList.add('hidden');
|
||||
});
|
||||
});
|
||||
|
||||
load();
|
||||
@@ -0,0 +1,198 @@
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--surface: #1e293b;
|
||||
--surface2: #293548;
|
||||
--border: #334155;
|
||||
--text: #f1f5f9;
|
||||
--text-muted: #94a3b8;
|
||||
--primary: #6366f1;
|
||||
--primary-hover: #4f46e5;
|
||||
--success: #22c55e;
|
||||
--danger: #ef4444;
|
||||
--warning: #f59e0b;
|
||||
--radius: 10px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.app {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
header h1 { font-size: 1.5rem; font-weight: 700; }
|
||||
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.add-form { display: flex; flex-direction: column; gap: 10px; }
|
||||
|
||||
.form-row { display: flex; gap: 10px; }
|
||||
.form-row-sub { padding-left: 0; }
|
||||
.form-row-bottom { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
|
||||
|
||||
input[type="text"], input[type="time"], textarea {
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
color: var(--text);
|
||||
padding: 8px 12px;
|
||||
font-size: 0.95rem;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
input[type="text"]:focus, input[type="time"]:focus, textarea:focus {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
textarea { resize: vertical; font-family: inherit; }
|
||||
input[type="time"] { width: auto; min-width: 110px; }
|
||||
|
||||
label { font-size: 0.875rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, opacity 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-primary { background: var(--primary); color: #fff; }
|
||||
.btn-primary:hover { background: var(--primary-hover); }
|
||||
.btn-danger { background: var(--danger); color: #fff; }
|
||||
.btn-danger:hover { opacity: 0.85; }
|
||||
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
|
||||
.btn-ghost:hover { background: var(--surface2); color: var(--text); }
|
||||
.btn-icon { background: transparent; border: none; cursor: pointer; font-size: 1rem; padding: 4px 6px; border-radius: 6px; color: var(--text-muted); }
|
||||
.btn-icon:hover { background: var(--surface2); color: var(--text); }
|
||||
|
||||
/* Tabs */
|
||||
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
|
||||
.tab {
|
||||
padding: 8px 16px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
|
||||
|
||||
.badge {
|
||||
background: var(--warning);
|
||||
color: #000;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
padding: 1px 6px;
|
||||
border-radius: 99px;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.badge:empty { display: none; }
|
||||
|
||||
/* Memo list */
|
||||
.memo-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
.memo-list.hidden { display: none; }
|
||||
|
||||
.memo-item {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.memo-item:hover { border-color: var(--primary); }
|
||||
.memo-item.done { opacity: 0.55; }
|
||||
|
||||
.memo-check {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--border);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.memo-check:hover { border-color: var(--success); }
|
||||
.memo-check.checked { background: var(--success); border-color: var(--success); color: #fff; }
|
||||
|
||||
.memo-body { flex: 1; min-width: 0; }
|
||||
.memo-title { font-weight: 600; font-size: 0.95rem; word-break: break-word; }
|
||||
.memo-title.done-text { text-decoration: line-through; }
|
||||
.memo-desc { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; word-break: break-word; white-space: pre-wrap; }
|
||||
.memo-meta { display: flex; gap: 12px; margin-top: 6px; font-size: 0.78rem; color: var(--text-muted); flex-wrap: wrap; }
|
||||
.memo-meta span { display: flex; align-items: center; gap: 4px; }
|
||||
|
||||
.memo-actions { display: flex; gap: 4px; flex-shrink: 0; }
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
padding: 40px 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
padding: 16px;
|
||||
}
|
||||
.modal.hidden { display: none; }
|
||||
|
||||
.modal-box {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.modal-box h2 { font-size: 1.1rem; font-weight: 700; }
|
||||
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; flex-wrap: wrap; }
|
||||
Reference in New Issue
Block a user