feat: Schnellerfassung vom Handy, auch ohne Netz
Ein Feld, ein Knopf, grosse Flaeche. Was ohne Netz erfasst wird, liegt in IndexedDB, bis es hinausgeht — nicht in localStorage: Ein Eintrag, der beim Aufraeumen des Speichers verschwindet, ist eine verlorene Aufgabe. Erst anstellen, dann senden. Andersherum ginge der Eintrag verloren, wenn der Browser mitten im Senden geschlossen wird. Jede Erfassung traegt eine vom Geraet vergebene Kennung, damit eine doppelt zugestellte Nachricht keine zweite Aufgabe ergibt. Der Dienstarbeiter haelt genau diese eine Seite offline bereit und sonst nichts. Ein halb veralteter Planer waere schlimmer als gar keiner — ein Eingabefeld dagegen veraltet nicht, und ohne die Seite naehme die Warteschlange im Geraet niemandem etwas ab. Dazu das Manifest, damit sich der Planer als Anwendung ablegen laesst. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Florian Wilde
co-authored by
Claude Opus 5
Claude Opus 5
parent
b17c42af56
commit
9565b9a920
@@ -0,0 +1,187 @@
|
||||
'use client'
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { CloudOff, Loader2, Plus, RefreshCw } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { abarbeiten, alle, anstellen, type Eintrag } from '@/lib/warteschlange'
|
||||
|
||||
/**
|
||||
* Schnellerfassung fürs Handy.
|
||||
*
|
||||
* Ein Feld, ein Knopf, große Fläche. Was erfasst wird, geht sofort hinaus —
|
||||
* und wenn kein Netz da ist, wartet es im Gerät, bis wieder eines da ist.
|
||||
*
|
||||
* Der Unterschied zur Erfassung auf der Startseite ist nicht die Optik,
|
||||
* sondern die Verlässlichkeit: Hier darf nichts verloren gehen, auch nicht
|
||||
* im Funkloch.
|
||||
*/
|
||||
export function Erfassung() {
|
||||
const [titel, setTitel] = useState('')
|
||||
const [laeuft, setLaeuft] = useState(false)
|
||||
const [wartend, setWartend] = useState<Eintrag[]>([])
|
||||
// Vor der Hydratation weiss der Server nichts vom Netz des Geraets;
|
||||
// "null" heisst schlicht: noch nicht nachgesehen.
|
||||
const [online, setOnline] = useState<boolean | null>(null)
|
||||
const feld = useRef<HTMLTextAreaElement>(null)
|
||||
|
||||
const nachsehen = useCallback(async () => {
|
||||
try {
|
||||
setWartend(await alle())
|
||||
} catch {
|
||||
// Ohne IndexedDB gibt es keine Warteschlange; erfassen geht trotzdem.
|
||||
}
|
||||
}, [])
|
||||
|
||||
const leeren = useCallback(async () => {
|
||||
const bericht = await abarbeiten()
|
||||
if (bericht.gesendet > 0) {
|
||||
toast.success(
|
||||
bericht.gesendet === 1
|
||||
? 'Eine gemerkte Aufgabe ist raus.'
|
||||
: `${bericht.gesendet} gemerkte Aufgaben sind raus.`,
|
||||
)
|
||||
}
|
||||
await nachsehen()
|
||||
}, [nachsehen])
|
||||
|
||||
useEffect(() => {
|
||||
function wiederDa() {
|
||||
setOnline(true)
|
||||
void leeren()
|
||||
}
|
||||
function weg() {
|
||||
setOnline(false)
|
||||
}
|
||||
|
||||
window.addEventListener('online', wiederDa)
|
||||
window.addEventListener('offline', weg)
|
||||
|
||||
// Den Anfangszustand nicht im Rumpf setzen, sondern als Antwort auf das
|
||||
// Aussenwelt-Ereignis "die Seite ist jetzt da".
|
||||
const ersteRunde = window.setTimeout(() => {
|
||||
setOnline(navigator.onLine)
|
||||
void nachsehen()
|
||||
void leeren()
|
||||
}, 0)
|
||||
|
||||
return () => {
|
||||
window.clearTimeout(ersteRunde)
|
||||
window.removeEventListener('online', wiederDa)
|
||||
window.removeEventListener('offline', weg)
|
||||
}
|
||||
}, [leeren, nachsehen])
|
||||
|
||||
// Der Dienstarbeiter hält die Seite selbst offline bereit. Ohne ihn wäre
|
||||
// die Warteschlange sinnlos: Man käme gar nicht erst auf die Seite.
|
||||
useEffect(() => {
|
||||
if ('serviceWorker' in navigator) {
|
||||
void navigator.serviceWorker.register('/sw.js').catch(() => undefined)
|
||||
}
|
||||
}, [])
|
||||
|
||||
async function erfassen(ereignis: React.FormEvent) {
|
||||
ereignis.preventDefault()
|
||||
const text = titel.trim()
|
||||
if (text.length === 0) return
|
||||
|
||||
setLaeuft(true)
|
||||
try {
|
||||
// Erst anstellen, dann senden. Andersherum ginge der Eintrag verloren,
|
||||
// wenn der Browser mitten im Senden geschlossen wird.
|
||||
const eintrag = await anstellen(text)
|
||||
setTitel('')
|
||||
feld.current?.focus()
|
||||
|
||||
const bericht = await abarbeiten()
|
||||
await nachsehen()
|
||||
|
||||
toast.success(
|
||||
bericht.gesendet > 0
|
||||
? 'Erfasst. Liegt in der Inbox.'
|
||||
: 'Gemerkt. Geht raus, sobald wieder Netz da ist.',
|
||||
)
|
||||
// Der Eintrag selbst interessiert nur, wenn er liegen bleibt.
|
||||
void eintrag
|
||||
} catch {
|
||||
toast.error('Das hat nicht geklappt.')
|
||||
} finally {
|
||||
setLaeuft(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<form onSubmit={(e) => void erfassen(e)} className="flex flex-col gap-3">
|
||||
<label htmlFor="titel" className="sr-only">
|
||||
Was ist zu tun?
|
||||
</label>
|
||||
<textarea
|
||||
id="titel"
|
||||
ref={feld}
|
||||
value={titel}
|
||||
onChange={(e) => setTitel(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
// Auf dem Handy ist Enter ein Zeilenumbruch; am Rechner will man
|
||||
// damit abschicken.
|
||||
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault()
|
||||
void erfassen(e)
|
||||
}
|
||||
}}
|
||||
rows={3}
|
||||
maxLength={200}
|
||||
autoFocus
|
||||
placeholder="Was ist zu tun?"
|
||||
className="border-rand bg-karte focus-visible:ring-betont/40 w-full resize-none rounded-lg border p-4 text-base outline-none focus-visible:ring-2"
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={laeuft || titel.trim().length === 0}
|
||||
className="h-12 text-base"
|
||||
>
|
||||
{laeuft ? (
|
||||
<Loader2 className="animate-spin" aria-hidden />
|
||||
) : (
|
||||
<Plus aria-hidden />
|
||||
)}
|
||||
Erfassen
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{online === false && (
|
||||
<p className="text-gedaempft-vordergrund flex items-center gap-2 text-sm">
|
||||
<CloudOff className="size-4 shrink-0" aria-hidden />
|
||||
Kein Netz. Erfasstes wird gemerkt und später verschickt.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{wartend.length > 0 && (
|
||||
<div className="border-rand flex flex-col gap-2 rounded-md border p-3">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<p className="text-sm font-medium">
|
||||
{wartend.length === 1 ? 'Eine wartet' : `${wartend.length} warten`}
|
||||
</p>
|
||||
<Button
|
||||
art="leise"
|
||||
groesse="klein"
|
||||
disabled={laeuft}
|
||||
onClick={() => void leeren()}
|
||||
>
|
||||
<RefreshCw aria-hidden />
|
||||
Jetzt versuchen
|
||||
</Button>
|
||||
</div>
|
||||
<ul className="text-gedaempft-vordergrund flex flex-col gap-1 text-sm">
|
||||
{wartend.map((e) => (
|
||||
<li key={e.ref} className="truncate">
|
||||
{e.titel}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import type { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
import { Inbox } from 'lucide-react'
|
||||
import { Erfassung } from '@/app/(app)/erfassen/erfassung'
|
||||
import { verlangeAnmeldung } from '@/server/berechtigung'
|
||||
import { db } from '@/server/db'
|
||||
|
||||
export const metadata: Metadata = { title: 'Erfassen' }
|
||||
|
||||
export default async function ErfassenSeite() {
|
||||
await verlangeAnmeldung('/erfassen')
|
||||
|
||||
const inbox = await db.aufgabe.count({
|
||||
where: { bereichId: null, status: { in: ['OFFEN', 'GEPLANT', 'WARTET'] } },
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex w-full max-w-md flex-col gap-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Erfassen</h1>
|
||||
<p className="text-gedaempft-vordergrund text-sm">
|
||||
Alles landet in der Inbox und wird später einsortiert. Ohne Netz wird es
|
||||
gemerkt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Erfassung />
|
||||
|
||||
<Link
|
||||
href="/inbox"
|
||||
className="text-gedaempft-vordergrund hover:text-vordergrund flex items-center gap-2 text-sm"
|
||||
>
|
||||
<Inbox className="size-4" aria-hidden />
|
||||
{inbox === 0
|
||||
? 'Inbox ist leer'
|
||||
: inbox === 1
|
||||
? 'Eine Aufgabe in der Inbox'
|
||||
: `${inbox} Aufgaben in der Inbox`}
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { NextResponse } from 'next/server'
|
||||
import { z } from 'zod'
|
||||
import { auditSchreiben } from '@/server/audit'
|
||||
import { verlangeAnmeldungFuerApi } from '@/server/berechtigung'
|
||||
import { db } from '@/server/db'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
/**
|
||||
* Die Annahmestelle der Schnellerfassung vom Handy.
|
||||
*
|
||||
* Getrennt von der öffentlichen Schnittstelle: Hier zählt die Sitzung, kein
|
||||
* Token. Das ist derselbe Benutzer, der auch die Oberfläche bedient — nur
|
||||
* eben über eine Seite, die auch ohne Netz funktioniert.
|
||||
*
|
||||
* Jede Erfassung trägt eine vom Gerät vergebene Kennung. Wird eine Nachricht
|
||||
* doppelt zugestellt — weil das Netz beim ersten Versuch wegbrach, die
|
||||
* Anfrage aber trotzdem ankam —, entsteht keine zweite Aufgabe.
|
||||
*/
|
||||
|
||||
const eingabe = z.object({
|
||||
titel: z.string().trim().min(1).max(200),
|
||||
/** Vom Gerät vergeben; macht den Aufruf wiederholbar. */
|
||||
ref: z.string().trim().min(8).max(64),
|
||||
})
|
||||
|
||||
export async function POST(anfrage: Request) {
|
||||
const benutzer = await verlangeAnmeldungFuerApi()
|
||||
if (!benutzer) {
|
||||
return NextResponse.json({ fehler: 'Nicht angemeldet.' }, { status: 401 })
|
||||
}
|
||||
|
||||
let inhalt: unknown
|
||||
try {
|
||||
inhalt = await anfrage.json()
|
||||
} catch {
|
||||
return NextResponse.json({ fehler: 'Ungültige Anfrage.' }, { status: 400 })
|
||||
}
|
||||
|
||||
const gelesen = eingabe.safeParse(inhalt)
|
||||
if (!gelesen.success) {
|
||||
return NextResponse.json({ fehler: 'Ungültige Anfrage.' }, { status: 400 })
|
||||
}
|
||||
|
||||
const { titel, ref } = gelesen.data
|
||||
|
||||
const vorhanden = await db.aufgabe.findUnique({
|
||||
where: { quelle_quelleRef: { quelle: 'MANUELL', quelleRef: ref } },
|
||||
select: { id: true, titel: true },
|
||||
})
|
||||
|
||||
// Schon da: Die Antwort ist dieselbe wie beim ersten Mal. Das Gerät soll
|
||||
// seinen Eintrag aus der Warteschlange nehmen dürfen, ohne zu grübeln.
|
||||
if (vorhanden) {
|
||||
return NextResponse.json({ ok: true, id: vorhanden.id, doppelt: true })
|
||||
}
|
||||
|
||||
const aufgabe = await db.aufgabe.create({
|
||||
data: { titel, quelle: 'MANUELL', quelleRef: ref },
|
||||
select: { id: true },
|
||||
})
|
||||
|
||||
await auditSchreiben({
|
||||
akteur: { id: benutzer.id, email: benutzer.email },
|
||||
aktion: 'aufgabe.erfasst',
|
||||
objektTyp: 'Aufgabe',
|
||||
objektId: aufgabe.id,
|
||||
details: { titel, ueber: 'schnellerfassung' },
|
||||
})
|
||||
|
||||
return NextResponse.json({ ok: true, id: aufgabe.id, doppelt: false })
|
||||
}
|
||||
@@ -11,6 +11,13 @@ export const metadata: Metadata = {
|
||||
description: 'Aufgaben, Ideen, Projekte und Zeitblöcke an einem Ort.',
|
||||
applicationName: 'Planer',
|
||||
robots: { index: false, follow: false },
|
||||
manifest: '/manifest.webmanifest',
|
||||
icons: {
|
||||
icon: '/symbol.svg',
|
||||
apple: '/symbol.svg',
|
||||
},
|
||||
// Auf dem iPhone laeuft eine hinzugefuegte Seite sonst mit Browserleiste.
|
||||
appleWebApp: { capable: true, title: 'Planer', statusBarStyle: 'default' },
|
||||
}
|
||||
|
||||
export const viewport: Viewport = {
|
||||
|
||||
Reference in New Issue
Block a user