Initialize repo and add session changes (2025-09-08)

resources/js/guest/queue/hooks.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { enqueue, list, processQueue, clearDone, type QueueItem } from './queue';
+
+export function useUploadQueue() {
+  const [items, setItems] = React.useState<QueueItem[]>([]);
+  const [loading, setLoading] = React.useState(true);
+
+  const refresh = React.useCallback(async () => {
+    setLoading(true);
+    const all = await list();
+    setItems(all);
+    setLoading(false);
+  }, []);
+
+  const add = React.useCallback(async (it: Parameters<typeof enqueue>[0]) => {
+    await enqueue(it);
+    await refresh();
+    await processQueue();
+  }, [refresh]);
+
+  const retryAll = React.useCallback(async () => {
+    await processQueue();
+    await refresh();
+  }, [refresh]);
+
+  const clearFinished = React.useCallback(async () => {
+    await clearDone();
+    await refresh();
+  }, [refresh]);
+
+  React.useEffect(() => {
+    refresh();
+    const online = () => processQueue().then(refresh);
+    window.addEventListener('online', online);
+    return () => window.removeEventListener('online', online);
+  }, [refresh]);
+
+  return { items, loading, refresh, add, retryAll, clearFinished } as const;
+}
+

resources/js/guest/queue/idb.ts

@@ -0,0 +1,34 @@
+export type TxMode = 'readonly' | 'readwrite';
+
+export function openDB(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open('guest-upload-queue', 1);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains('items')) {
+        const store = db.createObjectStore('items', { keyPath: 'id', autoIncrement: true });
+        store.createIndex('status', 'status', { unique: false });
+        store.createIndex('nextAttemptAt', 'nextAttemptAt', { unique: false });
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+export async function withStore<T>(mode: TxMode, fn: (store: IDBObjectStore) => void | Promise<T>): Promise<T> {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction('items', mode);
+    const store = tx.objectStore('items');
+    let result: any;
+    const wrap = async () => {
+      try { result = await fn(store); } catch (e) { reject(e); }
+    };
+    wrap();
+    tx.oncomplete = () => resolve(result);
+    tx.onerror = () => reject(tx.error);
+    tx.onabort = () => reject(tx.error);
+  });
+}
+

resources/js/guest/queue/notify.ts

@@ -0,0 +1,11 @@
+export function notify(text: string, type: 'success'|'error') {
+  // Lazy import to avoid cycle
+  import('../components/ToastHost').then(({ useToast }) => {
+    try {
+      // This only works inside React tree; for SW-triggered, we fallback
+      const evt = new CustomEvent('guest-toast', { detail: { text, type } });
+      window.dispatchEvent(evt);
+    } catch {}
+  });
+}
+

resources/js/guest/queue/queue.ts

@@ -0,0 +1,113 @@
+import { withStore } from './idb';
+import { getDeviceId } from '../lib/device';
+import { createUpload } from './xhr';
+import { notify } from './notify';
+
+export type QueueItem = {
+  id?: number;
+  slug: string;
+  fileName: string;
+  blob: Blob;
+  emotion_id?: number | null;
+  task_id?: number | null;
+  status: 'pending' | 'uploading' | 'done' | 'error';
+  retries: number;
+  nextAttemptAt?: number | null;
+  createdAt: number;
+  photoId?: number;
+};
+
+let processing = false;
+
+export async function enqueue(item: Omit<QueueItem, 'id' | 'status' | 'retries' | 'createdAt'>) {
+  const now = Date.now();
+  await withStore('readwrite', (store) => {
+    store.add({ ...item, status: 'pending', retries: 0, createdAt: now });
+  });
+  // Register background sync if available
+  if ('serviceWorker' in navigator && 'SyncManager' in window) {
+    try { const reg = await navigator.serviceWorker.ready; await reg.sync.register('upload-queue'); } catch {}
+  }
+}
+
+export async function list(): Promise<QueueItem[]> {
+  return withStore('readonly', (store) => new Promise((resolve) => {
+    const req = store.getAll();
+    req.onsuccess = () => resolve(req.result as QueueItem[]);
+  }));
+}
+
+export async function clearDone() {
+  const items = await list();
+  await withStore('readwrite', (store) => {
+    for (const it of items) {
+      if (it.status === 'done') store.delete(it.id!);
+    }
+  });
+}
+
+export async function processQueue() {
+  if (processing) return; processing = true;
+  try {
+    const now = Date.now();
+    let items = await list();
+    for (const it of items) {
+      if (it.status === 'done') continue;
+      if (it.nextAttemptAt && it.nextAttemptAt > now) continue;
+      await markStatus(it.id!, 'uploading');
+      const ok = await attemptUpload(it);
+      if (ok) {
+        await markStatus(it.id!, 'done');
+      } else {
+        const retries = (it.retries ?? 0) + 1;
+        const backoffSec = Math.min(60, Math.pow(2, Math.min(retries, 5))); // 2,4,8,16,32,60
+        await update(it.id!, { status: 'error', retries, nextAttemptAt: Date.now() + backoffSec * 1000 });
+      }
+    }
+  } finally {
+    processing = false;
+  }
+}
+
+async function attemptUpload(it: QueueItem): Promise<boolean> {
+  if (!navigator.onLine) return false;
+  try {
+    const json = await createUpload(
+      `/api/v1/events/${encodeURIComponent(it.slug)}/photos`,
+      it,
+      getDeviceId(),
+      (pct) => {
+        try {
+          window.dispatchEvent(new CustomEvent('queue-progress', { detail: { id: it.id, progress: pct } }));
+        } catch {}
+      }
+    );
+    // mark my-photo-ids for "Meine"
+    try {
+      const raw = localStorage.getItem('my-photo-ids');
+      const arr: number[] = raw ? JSON.parse(raw) : [];
+      if (json.id && !arr.includes(json.id)) localStorage.setItem('my-photo-ids', JSON.stringify([json.id, ...arr]));
+    } catch {}
+    notify('Upload erfolgreich', 'success');
+    return true;
+  } catch {
+    notify('Upload fehlgeschlagen', 'error');
+    return false;
+  }
+}
+
+async function markStatus(id: number, status: QueueItem['status']) {
+  await update(id, { status });
+}
+
+async function update(id: number, patch: Partial<QueueItem>) {
+  await withStore('readwrite', (store) => new Promise<void>((resolve, reject) => {
+    const getReq = store.get(id);
+    getReq.onsuccess = () => {
+      const val = getReq.result as QueueItem;
+      store.put({ ...val, ...patch, id });
+      resolve();
+    };
+    getReq.onerror = () => reject(getReq.error);
+  }));
+}

resources/js/guest/queue/xhr.ts

@@ -0,0 +1,33 @@
+import type { QueueItem } from './queue';
+
+export async function createUpload(
+  url: string,
+  it: QueueItem,
+  deviceId: string,
+  onProgress?: (percent: number) => void
+): Promise<any> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', url, true);
+    xhr.setRequestHeader('X-Device-Id', deviceId);
+    const form = new FormData();
+    form.append('photo', it.blob, it.fileName);
+    if (it.emotion_id) form.append('emotion_id', String(it.emotion_id));
+    if (it.task_id) form.append('task_id', String(it.task_id));
+    xhr.upload.onprogress = (ev) => {
+      if (onProgress && ev.lengthComputable) {
+        const pct = Math.min(100, Math.round((ev.loaded / ev.total) * 100));
+        onProgress(pct);
+      }
+    };
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        try { resolve(JSON.parse(xhr.responseText)); } catch { resolve({}); }
+      } else {
+        reject(new Error('upload failed'));
+      }
+    };
+    xhr.onerror = () => reject(new Error('network error'));
+    xhr.send(form);
+  });
+}