feat(cards): Karten speichern und Meine Karten
- account/cards.ts: Kartendienst (neu/bestehend speichern mit Aufräumen halber Uploads, Umbenennen, Löschen, Laden) über ein schmales CardsApi-Interface, Appwrite-Anschluss mit 22.4.1-Objektparametern, fetchFile über client.prepareRequest (Projekt-Header + Cookie, kein getFileView) - account/with-login.ts: bei 401 Nutzer neu prüfen, einmal anmelden, wiederholen - editor/save.ts: Speichern-Ablauf (ein Lauf zur Zeit, 401 -> Login -> einmal wiederholen, deutsche Fehlermeldung) - Editor: Speichern mit Schnappschuss und 480-px-Vorschau, Karte öffnen über ?karte=<id>, Bildwechsel während des Speicherns gesperrt - pages/cards-page.ts: /karten mit Kacheln, Öffnen, Herunterladen, Umbenennen, Löschen (eigener Dialog), Abmelde- und Leer-Ansicht - Tests für Dienst, withLogin, Speichern-Ablauf, Karten-Seite und Editor-Anbindung Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed
1 parent
a147d3b496
commit
ba4d9f76d4
14 files changed
+2849
-16
No files matched your search
@@ -0,0 +1,417 @@
|
||||
// Seite /karten („Meine Karten“): Kacheln mit Vorschau; Öffnen, Herunterladen, Umbenennen, Löschen.
|
||||
import '../account/account.css';
|
||||
import './cards.css';
|
||||
import { getCurrentUser, onAuthChange } from '../account/auth';
|
||||
import { cardsService, normalizeName, type SavedCard } from '../account/cards';
|
||||
import { errorMessage, errorType } from '../account/errors';
|
||||
import { requireLogin } from '../account/login-dialog';
|
||||
import { LoginCancelled, withLogin } from '../account/with-login';
|
||||
import { clampCrop } from '../card/crop';
|
||||
import { CARD_W } from '../card/geometry';
|
||||
import { exportCard, loadCardAssets } from '../card/render';
|
||||
import { el } from '../editor/dom';
|
||||
import { downloadFileName, pngSizeWarning, saveBlobAs } from '../editor/download';
|
||||
import type { EditorStore } from '../editor/state';
|
||||
import { READ_MESSAGE, decodeImage } from '../editor/upload';
|
||||
import { navigate } from './router';
|
||||
|
||||
const LOADING = 'Karten werden geladen …';
|
||||
const LOGGED_OUT = 'Melde dich an, um deine Karten zu sehen.';
|
||||
const EMPTY = 'Noch keine Karten gespeichert.';
|
||||
const LOGIN_NEEDED = 'Bitte melde dich an, um fortzufahren.';
|
||||
const PREVIEW_PARALLEL = 4;
|
||||
|
||||
/** `dd.mm.yyyy` in der Zeitzone des Betrachters; leer, wenn das Datum unlesbar ist. */
|
||||
export function formatDate(iso: string): string {
|
||||
const date = new Date(iso);
|
||||
if (Number.isNaN(date.getTime())) return '';
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
return `${pad(date.getDate())}.${pad(date.getMonth() + 1)}.${date.getFullYear()}`;
|
||||
}
|
||||
|
||||
/** Fragt, ob die Karte wirklich gelöscht werden soll (eigener Dialog statt window.confirm). */
|
||||
function confirmDelete(name: string): Promise<boolean> {
|
||||
return new Promise<boolean>((resolve, reject) => {
|
||||
const cancel = el('button', { type: 'button', class: 'auth-btn' }, 'Abbrechen');
|
||||
const remove = el('button', { type: 'button', class: 'auth-btn cards-btn-danger' }, 'Löschen');
|
||||
const dialog = el(
|
||||
'dialog',
|
||||
{ class: 'confirm-dialog', 'aria-labelledby': 'confirm-title' },
|
||||
el(
|
||||
'div',
|
||||
{ class: 'confirm-card' },
|
||||
el('h2', { id: 'confirm-title', class: 'confirm-title' }, `Karte „${name}“ löschen?`),
|
||||
el('p', { class: 'confirm-text' }, 'Die Karte und ihr Bild werden endgültig gelöscht.'),
|
||||
el('div', { class: 'confirm-actions' }, cancel, remove),
|
||||
),
|
||||
);
|
||||
|
||||
let answered = false;
|
||||
const finish = (ok: boolean) => {
|
||||
if (answered) return;
|
||||
answered = true;
|
||||
if (dialog.open) dialog.close();
|
||||
dialog.remove();
|
||||
resolve(ok);
|
||||
};
|
||||
cancel.addEventListener('click', () => finish(false));
|
||||
remove.addEventListener('click', () => finish(true));
|
||||
// Esc schließt nativ und löst `close` aus.
|
||||
dialog.addEventListener('close', () => finish(false));
|
||||
// Hintergrund = Klick auf das <dialog> selbst (die Karte füllt es ganz aus).
|
||||
dialog.addEventListener('click', (event) => {
|
||||
if (event.target === dialog) finish(false);
|
||||
});
|
||||
|
||||
document.body.append(dialog);
|
||||
try {
|
||||
dialog.showModal();
|
||||
} catch (err) {
|
||||
answered = true;
|
||||
dialog.remove();
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
cancel.focus(); // das Ungefährliche zuerst
|
||||
});
|
||||
}
|
||||
|
||||
export function mountCardsPage(root: HTMLElement, store: EditorStore): () => void {
|
||||
const service = cardsService();
|
||||
let disposed = false;
|
||||
let state: 'loading' | 'loggedOut' | 'error' | 'list' = 'loading';
|
||||
let loadToken = 0;
|
||||
let cards: SavedCard[] = [];
|
||||
|
||||
// Vorschaubilder: Object-URLs je Vorschau-Datei, beim Verlassen der Seite (und wenn sie nicht mehr gebraucht werden) freigegeben.
|
||||
const previewUrls = new Map<string, string>();
|
||||
const previewFailed = new Set<string>();
|
||||
const previewQueued = new Set<string>();
|
||||
const thumbSlots = new Map<string, HTMLElement>();
|
||||
const queue: SavedCard[] = [];
|
||||
let activeLoads = 0;
|
||||
|
||||
const heading = el('h1', { tabindex: '-1' }, 'Meine Karten');
|
||||
const body = el('section', { class: 'cards-page', 'aria-label': 'Gespeicherte Karten' });
|
||||
root.replaceChildren(heading, body);
|
||||
|
||||
function revokePreviews(keep: ReadonlySet<string> = new Set()): void {
|
||||
for (const [fileId, url] of previewUrls) {
|
||||
if (keep.has(fileId)) continue;
|
||||
URL.revokeObjectURL(url);
|
||||
previewUrls.delete(fileId);
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Vorschaubilder laden (höchstens PREVIEW_PARALLEL gleichzeitig) ----
|
||||
|
||||
function fillThumb(card: SavedCard): void {
|
||||
const slot = thumbSlots.get(card.id);
|
||||
if (!slot) return;
|
||||
const url = previewUrls.get(card.previewFileId);
|
||||
if (url) {
|
||||
slot.replaceChildren(el('img', { src: url, alt: `Vorschau von „${card.name}“`, width: 480, height: 303 }));
|
||||
} else if (previewFailed.has(card.previewFileId)) {
|
||||
slot.replaceChildren(el('span', {}, 'Keine Vorschau'));
|
||||
} else {
|
||||
slot.replaceChildren(el('span', {}, 'Vorschau lädt …'));
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPreview(card: SavedCard): Promise<void> {
|
||||
try {
|
||||
const blob = await withLogin(() => service.loadPreview(card));
|
||||
// Die Karte kann inzwischen gelöscht oder die Liste neu geladen worden sein.
|
||||
if (disposed || !cards.some((c) => c.previewFileId === card.previewFileId)) return;
|
||||
previewUrls.set(card.previewFileId, URL.createObjectURL(blob));
|
||||
} catch {
|
||||
if (disposed) return;
|
||||
previewFailed.add(card.previewFileId);
|
||||
} finally {
|
||||
previewQueued.delete(card.previewFileId);
|
||||
}
|
||||
const current = cards.find((c) => c.previewFileId === card.previewFileId);
|
||||
if (current) fillThumb(current);
|
||||
}
|
||||
|
||||
function pump(): void {
|
||||
while (!disposed && activeLoads < PREVIEW_PARALLEL && queue.length > 0) {
|
||||
const next = queue.shift() as SavedCard;
|
||||
activeLoads += 1;
|
||||
void loadPreview(next).finally(() => {
|
||||
activeLoads -= 1;
|
||||
pump();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function queuePreview(card: SavedCard): void {
|
||||
if (previewUrls.has(card.previewFileId) || previewFailed.has(card.previewFileId)) return;
|
||||
if (previewQueued.has(card.previewFileId)) return;
|
||||
previewQueued.add(card.previewFileId);
|
||||
queue.push(card);
|
||||
pump();
|
||||
}
|
||||
|
||||
// ---- Ansichten ----
|
||||
|
||||
function show(...nodes: Node[]): void {
|
||||
body.replaceChildren(...nodes);
|
||||
}
|
||||
|
||||
function showStatus(text: string): void {
|
||||
show(el('p', { class: 'cards-msg', role: 'status' }, text));
|
||||
}
|
||||
|
||||
function showLoggedOut(): void {
|
||||
state = 'loggedOut';
|
||||
cards = [];
|
||||
queue.length = 0;
|
||||
previewQueued.clear();
|
||||
thumbSlots.clear();
|
||||
revokePreviews();
|
||||
const signIn = el('button', { type: 'button', class: 'auth-btn auth-btn-primary' }, 'Anmelden');
|
||||
signIn.addEventListener('click', () => void requireLogin('login'));
|
||||
show(el('p', { class: 'cards-msg' }, LOGGED_OUT), el('p', { class: 'cards-actions' }, signIn));
|
||||
}
|
||||
|
||||
function showError(text: string): void {
|
||||
state = 'error';
|
||||
const retry = el('button', { type: 'button', class: 'auth-btn auth-btn-primary' }, 'Nochmal versuchen');
|
||||
retry.addEventListener('click', () => void load());
|
||||
show(el('p', { class: 'cards-msg cards-msg-error', role: 'alert' }, text), el('p', { class: 'cards-actions' }, retry));
|
||||
}
|
||||
|
||||
/** Setzt `cards` und hält den Editor-Zustand in Einklang (er überlebt Seitenwechsel). */
|
||||
function syncEditor(change: { renamed?: SavedCard; removedId?: string }): void {
|
||||
const s = store.get();
|
||||
if (!s.saved) return;
|
||||
if (change.renamed && s.saved.id === change.renamed.id) {
|
||||
store.set({
|
||||
saved: { ...s.saved, name: change.renamed.name, updatedAt: change.renamed.updatedAt },
|
||||
cardName: change.renamed.name,
|
||||
});
|
||||
}
|
||||
// Die Karte im Editor gibt es nicht mehr: ein späteres Speichern legt eine neue an, statt ins Leere zu schreiben.
|
||||
if (change.removedId && s.saved.id === change.removedId) store.set({ saved: null });
|
||||
}
|
||||
|
||||
function renderList(focusId?: string, focusAction?: string): void {
|
||||
state = 'list';
|
||||
thumbSlots.clear();
|
||||
if (cards.length === 0) {
|
||||
const toEditor = el('a', { class: 'auth-btn auth-btn-primary cards-link-btn', href: '/', 'data-link': true }, 'Zum Editor');
|
||||
show(el('p', { class: 'cards-msg' }, EMPTY), el('p', { class: 'cards-actions' }, toEditor));
|
||||
return;
|
||||
}
|
||||
const grid = el('ul', { class: 'cards-grid' });
|
||||
for (const card of cards) grid.append(buildTile(card));
|
||||
show(grid);
|
||||
for (const card of cards) {
|
||||
fillThumb(card);
|
||||
queuePreview(card);
|
||||
}
|
||||
if (focusId) {
|
||||
const tile = [...body.querySelectorAll<HTMLElement>('.card-tile')].find((t) => t.dataset.card === focusId);
|
||||
tile?.querySelector<HTMLElement>(`[data-action="${focusAction ?? 'open'}"]`)?.focus();
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Kacheln und Aktionen ----
|
||||
|
||||
function buildTile(card: SavedCard): HTMLElement {
|
||||
const thumb = el('div', { class: 'card-thumb' });
|
||||
thumbSlots.set(card.id, thumb);
|
||||
const nameSlot = el('div', { class: 'card-name-slot' }, el('h2', { class: 'card-name' }, card.name));
|
||||
const date = formatDate(card.updatedAt);
|
||||
const message = el('p', { class: 'card-msg', role: 'alert' });
|
||||
const action = (key: string, text: string, className = 'auth-btn auth-btn-small') =>
|
||||
el('button', { type: 'button', class: className, 'data-action': key }, text);
|
||||
const openButton = action('open', 'Öffnen', 'auth-btn auth-btn-small auth-btn-primary');
|
||||
const downloadButton = action('download', 'Herunterladen');
|
||||
const renameButton = action('rename', 'Umbenennen');
|
||||
const deleteButton = action('delete', 'Löschen', 'auth-btn auth-btn-small cards-btn-danger');
|
||||
const buttons = [openButton, downloadButton, renameButton, deleteButton];
|
||||
|
||||
const tile = el(
|
||||
'li',
|
||||
{ class: 'card-tile', 'data-card': card.id },
|
||||
thumb,
|
||||
nameSlot,
|
||||
date ? el('p', { class: 'card-date' }, el('time', { datetime: card.updatedAt }, date)) : '',
|
||||
el('div', { class: 'card-buttons' }, ...buttons),
|
||||
message,
|
||||
);
|
||||
|
||||
// Eine Aktion je Kachel zur Zeit; Fehler stehen an der Kachel.
|
||||
async function run(task: () => Promise<void>, busyButton?: HTMLButtonElement, busyText?: string): Promise<void> {
|
||||
const label = busyButton?.textContent ?? '';
|
||||
message.textContent = '';
|
||||
message.classList.remove('is-warning');
|
||||
for (const b of buttons) b.disabled = true;
|
||||
tile.setAttribute('aria-busy', 'true');
|
||||
if (busyButton && busyText) busyButton.textContent = busyText;
|
||||
try {
|
||||
await task();
|
||||
} catch (err) {
|
||||
if (!disposed) message.textContent = failureText(err);
|
||||
} finally {
|
||||
if (busyButton && busyText) busyButton.textContent = label;
|
||||
for (const b of buttons) b.disabled = false;
|
||||
tile.removeAttribute('aria-busy');
|
||||
}
|
||||
}
|
||||
|
||||
openButton.addEventListener('click', () => navigate(`/?karte=${encodeURIComponent(card.id)}`));
|
||||
|
||||
downloadButton.addEventListener('click', () => {
|
||||
void run(async () => {
|
||||
const blob = await withLogin(() => service.loadImage(card));
|
||||
const image = await decodeImage(blob);
|
||||
const config = { ...card.config, crop: clampCrop(image, card.config.crop) };
|
||||
const assets = await loadCardAssets(config, image);
|
||||
const png = await exportCard(config, assets, { width: CARD_W, type: 'image/png' });
|
||||
saveBlobAs(png, downloadFileName(card.name, new Date()));
|
||||
const warning = pngSizeWarning(png.size);
|
||||
if (warning && !disposed) {
|
||||
message.textContent = warning;
|
||||
message.classList.add('is-warning');
|
||||
}
|
||||
}, downloadButton, 'Wird erstellt …');
|
||||
});
|
||||
|
||||
renameButton.addEventListener('click', () => startRename());
|
||||
|
||||
deleteButton.addEventListener('click', () => {
|
||||
void run(async () => {
|
||||
if (!(await confirmDelete(card.name))) return;
|
||||
try {
|
||||
await withLogin(() => service.remove(card));
|
||||
} catch (err) {
|
||||
// Schon gelöscht (anderer Tab): das Ziel ist erreicht.
|
||||
if (errorType(err) !== 'row_not_found') throw err;
|
||||
}
|
||||
if (disposed) return;
|
||||
const url = previewUrls.get(card.previewFileId);
|
||||
if (url) URL.revokeObjectURL(url);
|
||||
previewUrls.delete(card.previewFileId);
|
||||
cards = cards.filter((c) => c.id !== card.id);
|
||||
syncEditor({ removedId: card.id });
|
||||
renderList();
|
||||
if (cards.length === 0) heading.focus();
|
||||
else body.querySelector<HTMLElement>('.card-tile [data-action="open"]')?.focus();
|
||||
});
|
||||
});
|
||||
|
||||
function startRename(): void {
|
||||
const input = el('input', {
|
||||
class: 'auth-input card-rename-input',
|
||||
type: 'text',
|
||||
value: card.name,
|
||||
autocomplete: 'off',
|
||||
'aria-label': `Neuer Name für „${card.name}“`,
|
||||
});
|
||||
const save = el('button', { type: 'submit', class: 'auth-btn auth-btn-small auth-btn-primary' }, 'Speichern');
|
||||
const cancel = el('button', { type: 'button', class: 'auth-btn auth-btn-small' }, 'Abbrechen');
|
||||
const form = el('form', { class: 'card-rename' }, input, save, cancel);
|
||||
const close = () => {
|
||||
nameSlot.replaceChildren(el('h2', { class: 'card-name' }, card.name));
|
||||
renameButton.focus();
|
||||
};
|
||||
|
||||
cancel.addEventListener('click', close);
|
||||
input.addEventListener('keydown', (event) => {
|
||||
if (event.key !== 'Escape') return;
|
||||
event.preventDefault();
|
||||
close();
|
||||
});
|
||||
form.addEventListener('submit', (event) => {
|
||||
event.preventDefault();
|
||||
if (normalizeName(input.value) === card.name) {
|
||||
close();
|
||||
return;
|
||||
}
|
||||
input.readOnly = true;
|
||||
save.disabled = true;
|
||||
cancel.disabled = true;
|
||||
void run(async () => {
|
||||
let updated: SavedCard;
|
||||
try {
|
||||
updated = await withLogin(() => service.rename(card.id, input.value));
|
||||
} catch (err) {
|
||||
// Das Formular bleibt offen, damit nichts getippt werden muss.
|
||||
input.readOnly = false;
|
||||
save.disabled = false;
|
||||
cancel.disabled = false;
|
||||
throw err;
|
||||
}
|
||||
if (disposed) return;
|
||||
// Der Server sortiert nach „zuletzt geändert“; die umbenannte Karte steht danach vorn.
|
||||
cards = [updated, ...cards.filter((c) => c.id !== updated.id)];
|
||||
syncEditor({ renamed: updated });
|
||||
renderList(updated.id, 'rename');
|
||||
});
|
||||
});
|
||||
|
||||
nameSlot.replaceChildren(form);
|
||||
input.focus();
|
||||
input.select();
|
||||
}
|
||||
|
||||
return tile;
|
||||
}
|
||||
|
||||
function failureText(err: unknown): string {
|
||||
if (err instanceof LoginCancelled) return LOGIN_NEEDED;
|
||||
if (err instanceof Error && err.message === READ_MESSAGE) return READ_MESSAGE;
|
||||
return errorMessage(err, 'load');
|
||||
}
|
||||
|
||||
// ---- Laden ----
|
||||
|
||||
async function load(): Promise<void> {
|
||||
const token = ++loadToken;
|
||||
state = 'loading';
|
||||
showStatus(LOADING);
|
||||
try {
|
||||
const user = await getCurrentUser();
|
||||
if (disposed || token !== loadToken) return;
|
||||
if (!user) {
|
||||
showLoggedOut();
|
||||
return;
|
||||
}
|
||||
const list = await withLogin(() => service.list());
|
||||
if (disposed || token !== loadToken) return;
|
||||
cards = list;
|
||||
revokePreviews(new Set(list.map((c) => c.previewFileId)));
|
||||
previewFailed.clear();
|
||||
renderList();
|
||||
} catch (err) {
|
||||
if (disposed || token !== loadToken) return;
|
||||
if (err instanceof LoginCancelled) showLoggedOut();
|
||||
else showError(errorMessage(err, 'load'));
|
||||
}
|
||||
}
|
||||
|
||||
// Abmelden (auch durch eine abgelaufene Sitzung) räumt die Liste weg, Anmelden holt sie.
|
||||
const offAuth = onAuthChange((user) => {
|
||||
if (disposed) return;
|
||||
if (!user) {
|
||||
if (state !== 'loggedOut') {
|
||||
loadToken += 1;
|
||||
showLoggedOut();
|
||||
}
|
||||
} else if (state === 'loggedOut') {
|
||||
void load();
|
||||
}
|
||||
});
|
||||
|
||||
void load();
|
||||
|
||||
return () => {
|
||||
disposed = true;
|
||||
offAuth();
|
||||
queue.length = 0;
|
||||
revokePreviews();
|
||||
};
|
||||
}
|
||||
Reference in new issue
Block a user