feat: Papierkorb, Abrufzaehler, WebP ohne Adressaenderung, ZIP hochladen
Vier Dinge, alle am laufenden Dienst gemessen. PAPIERKORB. Loeschen war endgueltig -- bei einem Knopf "alle 3861 waehlen" direkt neben "loeschen" ist das die falsche Haerte, und die Sicherung half nur bis zum letzten naechtlichen Lauf. Die Datei wandert jetzt nach /data/papierkorb, der Datensatz in eine eigene Tabelle, nach 30 Tagen raeumt der Dienst stuendlich selbst auf. Der Ablagename traegt eine laufende Nummer: unter demselben Pfad koennen nacheinander verschiedene Dateien gelegen haben, und beide sollen zurueckholbar sein. Geprueft: loeschen -> oeffentlich 404, Eintrag im Papierkorb, zurueckholen -> 200 samt neu gerechneter Vorschau. ABRUFZAEHLER. media.abrufe und zuletzt_abgerufen. Gezaehlt wird im Speicher und alle 30 Sekunden weggeschrieben -- ein UPDATE je Kachel waeren bei einer Galerieseite 120 Schreibvorgaenge. Der 304 zaehlt mit (der Aufrufer WOLLTE die Datei, er hatte sie nur schon), HEAD nicht. Was vor dem Einbau lag, steht als "nie geholt" da, auch wenn es taeglich benutzt wurde -- die Karte im Speicherbericht sagt das auch dazu, statt eine Zahl zu zeigen, die luegt. WEBP OHNE ADRESSAENDERUNG. Der Pfad ist die Adresse: aus items/foo.png darf nicht items/foo.webp werden. Die sparsame Fassung liegt deshalb DANEBEN und wird unter DERSELBEN Adresse ausgeliefert, wenn der Aufrufer per Accept sagt, dass er WebP versteht. Nachgemessen an einer Datei: 6448 Bytes fuer curl, 2758 fuer einen Browser. Ueber den ganzen Bestand: 3606 Fassungen, 199,3 MB -> 33,1 MB, gespart 166,2 MB. Bei 29 lohnt WebP nicht -- dort bleibt es beim Original. Zwei Dinge haengen daran, beide gegengeprueft: "Vary: Accept" (ohne die Zeile legt ein Zwischenspeicher die WebP-Fassung fuer alle ab, auch fuer die, die sie nicht lesen koennen) und getrennte ETags mit "-w" (sonst bekaeme jemand auf seinen If-None-Match hin ein 304 fuer das falsche Bild). Gemessen: derselbe ETag mit Accept -> 304, ohne Accept -> 200 mit dem PNG. ZIP HOCHLADEN. Ein Archiv wird ausgepackt statt abgelegt, die Ordner darin bleiben erhalten und haengen sich hinter den gewaehlten Zielordner. fflate und nicht adm-zip: reines JavaScript, keine native Bibliothek -- dieses Projekt hat schon einen halben Abend an einer ABI-Nummer verloren. Grenzen: 5000 Eintraege, 256 MB entpackt, geprueft VOR dem Entpacken (eine Zip-Bombe waere sonst schon im Speicher). Zip-Slip gemessen: "../../../../etc/passwd" und "..\..\windows\hosts" abgelehnt, die harmlose Datei im selben Archiv abgelegt. UND EIN KNOPF, DER GELOGEN HAT. Der erste Nachruestlauf ueber alle Dateien brauchte mehr als 90 Sekunden -- genau da gibt Nginx Proxy Manager auf. Der Aufrufer sah einen 504, waehrend die Arbeit im Hintergrund weiterlief und fertig wurde. Ein Knopf, der Erfolg als Fehler meldet, ist schlimmer als einer ohne Rueckmeldung. Beide Wartungsknoepfe laufen deshalb in Runden zu 300 Stueck: der Server meldet "offen" und "fertig", die Oberflaeche ruft erneut auf und zeigt dabei "280 erzeugt, noch 129 offen ...". Gemessen: 7,8 s je Runde statt 90+ am Stueck. Der Vorschau-Knopf hatte dieselbe Wand und wurde mitgezogen, obwohl er noch nicht dagegengelaufen war. Nebenbei: der Verwaisten-Sucher kennt jetzt auch /data/webp (gleiche Schleife, Ordner im Ergebnis vorangestellt), Verschieben und Loeschen nehmen die sparsame Fassung mit, und das Loeschen eines Ordners raeumt thumbs/ und webp/ hinterher. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -8,6 +8,7 @@ import {
|
||||
KeyRound,
|
||||
PieChart,
|
||||
Settings,
|
||||
Trash2,
|
||||
} from 'lucide-react'
|
||||
import { useStore } from './store'
|
||||
import { Anmelden } from './pages/Anmelden'
|
||||
@@ -19,6 +20,7 @@ import { Konto } from './pages/Konto'
|
||||
import { Einstellungen } from './pages/Einstellungen'
|
||||
import { Verlauf } from './pages/Verlauf'
|
||||
import { Api } from './pages/Api'
|
||||
import { Papierkorb } from './pages/Papierkorb'
|
||||
import { Meldungen } from './components/Meldungen'
|
||||
import { gehZu, usePfad } from './router'
|
||||
import { Kontomenue } from './components/Kontomenue'
|
||||
@@ -37,6 +39,7 @@ const seiten = [
|
||||
{ pfad: '/galerie', name: 'Galerie', kind: Images, Inhalt: Galerie },
|
||||
{ pfad: '/verlauf', name: 'Verlauf', kind: History, Inhalt: Verlauf },
|
||||
{ pfad: '/speicher', name: 'Speicher', kind: PieChart, Inhalt: Speicher },
|
||||
{ pfad: '/papierkorb', name: 'Papierkorb', kind: Trash2, Inhalt: Papierkorb },
|
||||
{ pfad: '/tokens', name: 'Token', kind: KeyRound, Inhalt: Tokens },
|
||||
{ pfad: '/api', name: 'API', kind: Code2, Inhalt: Api },
|
||||
{ pfad: '/einstellungen', name: 'Einstellungen', kind: Settings, Inhalt: Einstellungen },
|
||||
|
||||
+58
-1
@@ -110,6 +110,9 @@ export type MediaItem = {
|
||||
created_at: number
|
||||
updated_at: number
|
||||
url: string
|
||||
/** Wie oft die Datei oeffentlich geholt wurde. */
|
||||
abrufe: number
|
||||
zuletzt_abgerufen: number | null
|
||||
}
|
||||
|
||||
export type MediaPage = {
|
||||
@@ -127,6 +130,23 @@ export type Stats = {
|
||||
publicUrl: string
|
||||
}
|
||||
|
||||
export type PapierkorbEintrag = {
|
||||
id: number
|
||||
path: string
|
||||
size: number
|
||||
sha256: string
|
||||
mime: string
|
||||
geloescht: number
|
||||
von: string
|
||||
}
|
||||
|
||||
export type PapierkorbSeite = {
|
||||
items: PapierkorbEintrag[]
|
||||
n: number
|
||||
bytes: number
|
||||
haltbarTage: number
|
||||
}
|
||||
|
||||
export type Speicher = {
|
||||
nachArt: { art: string; files: number; bytes: number }[]
|
||||
groesste: MediaItem[]
|
||||
@@ -134,6 +154,9 @@ export type Speicher = {
|
||||
doppelte: { sha256: string; n: number; bytes: number; pfade: string }[]
|
||||
verschwendet: number
|
||||
stufen: { tage: number; files: number; bytes: number }[]
|
||||
/** Was seit dem Einbau des Zaehlers NIE geholt wurde. */
|
||||
nieGeholt: { n: number; bytes: number }
|
||||
beliebteste: MediaItem[]
|
||||
}
|
||||
|
||||
export type TokenRow = {
|
||||
@@ -206,7 +229,28 @@ export type Richtung = 'auf' | 'ab'
|
||||
export type Verwaiste = {
|
||||
dateiOhneDatensatz: { anzahl: number; beispiele: string[] }
|
||||
datensatzOhneDatei: { anzahl: number; beispiele: string[] }
|
||||
vorschauOhneBild: { anzahl: number; beispiele: string[] }
|
||||
/** Vorschauen UND sparsame Fassungen, deren Original es nicht mehr gibt.
|
||||
* Die Beispiele tragen den Ordner vorn — thumbs/… oder webp/…. */
|
||||
abgeleitetOhneBild: { anzahl: number; beispiele: string[] }
|
||||
}
|
||||
|
||||
/** Was EIN STAPEL „sparsame Fassungen nachziehen" zurueckmeldet.
|
||||
*
|
||||
* `fertig` ist der Punkt: der Server rechnet hoechstens ein paar hundert
|
||||
* Stueck je Aufruf, weil der Proxy nach 90 Sekunden aufgibt. Solange `fertig`
|
||||
* falsch ist, steht in `offen`, wieviele noch fehlen. */
|
||||
export type WebpLauf = {
|
||||
erzeugt: number
|
||||
vorhanden: number
|
||||
uebersprungen: number
|
||||
lohntNicht: number
|
||||
fehler: number
|
||||
gesamt: number
|
||||
offen: number
|
||||
fertig: boolean
|
||||
vorher: number
|
||||
nachher: number
|
||||
gespart: number
|
||||
}
|
||||
|
||||
/** Was das Sicherungsskript nach jedem Lauf zurueckmeldet. */
|
||||
@@ -296,6 +340,9 @@ export type ThumbLauf = {
|
||||
uebersprungen: number
|
||||
fehler: number
|
||||
gesamt: number
|
||||
/** Wieviele noch fehlen. Siehe WebpLauf — derselbe Grund. */
|
||||
offen: number
|
||||
fertig: boolean
|
||||
}
|
||||
|
||||
/** Die Adresse der Vorschau zu einem Pfad.
|
||||
@@ -380,8 +427,18 @@ export const api = {
|
||||
uebersicht: () => get<Uebersicht>('/api/dash/uebersicht'),
|
||||
stand: () => get<Stand>('/api/dash/stand'),
|
||||
speicher: () => get<Speicher>('/api/dash/speicher'),
|
||||
papierkorb: () => get<PapierkorbSeite>('/api/dash/papierkorb'),
|
||||
papierkorbZurueck: (ids: number[]) =>
|
||||
post<{
|
||||
zurueck: number
|
||||
fehlgeschlagen: number
|
||||
ergebnisse: { path: string; ok: boolean; error?: string }[]
|
||||
}>('/api/dash/papierkorb/zurueck', { ids }),
|
||||
papierkorbLeeren: (ids?: number[]) =>
|
||||
post<{ geleert: number }>('/api/dash/papierkorb/leeren', ids ? { ids } : {}),
|
||||
stats: () => get<Stats>('/api/dash/stats'),
|
||||
thumbsNachziehen: () => post<ThumbLauf>('/api/dash/maintenance/thumbs'),
|
||||
webpNachziehen: () => post<WebpLauf>('/api/dash/maintenance/webp'),
|
||||
verwaiste: () => get<Verwaiste>('/api/dash/maintenance/orphans'),
|
||||
verwaisteBehandeln: (aktion: 'aufnehmen' | 'aufraeumen') =>
|
||||
post<{ aktion: string; aufgenommen?: number; datensaetze?: number; vorschauen?: number }>(
|
||||
|
||||
@@ -151,6 +151,45 @@ export function SpeicherKarten() {
|
||||
</Karte>
|
||||
</div>
|
||||
|
||||
<Karte titel="Wird das überhaupt geholt?">
|
||||
<p className="mb-3 text-xs text-schrift-leise">
|
||||
Die Frage, die eine Aufbewahrungsregel wirklich braucht — und die sich von
|
||||
innen nicht beantworten lässt. Gezählt wird seit dem Einbau des Zählers;
|
||||
was davor lag, steht hier als „nie geholt", auch wenn es täglich benutzt
|
||||
wurde. Nach ein paar Wochen stimmt die Zahl.
|
||||
</p>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="rounded-md border border-rand bg-grund p-3">
|
||||
<p className="text-xs text-schrift-leise">Nie geholt</p>
|
||||
<p className="text-xl font-semibold">
|
||||
{daten.nieGeholt.n}{' '}
|
||||
<span className="text-sm font-normal text-schrift-leise">
|
||||
({bytes(daten.nieGeholt.bytes)})
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-md border border-rand bg-grund p-3">
|
||||
<p className="mb-1 text-xs text-schrift-leise">Am häufigsten geholt</p>
|
||||
{daten.beliebteste.length === 0 ? (
|
||||
<p className="text-sm text-schrift-leise">noch nichts gezählt</p>
|
||||
) : (
|
||||
<ul className="flex flex-col gap-0.5 text-xs">
|
||||
{daten.beliebteste.slice(0, 5).map((m) => (
|
||||
<li key={m.id} className="flex items-center gap-2">
|
||||
<span className="min-w-0 flex-1 truncate font-mono" title={m.path}>
|
||||
{m.path}
|
||||
</span>
|
||||
<span className="shrink-0 tabular-nums text-schrift-leise">
|
||||
{m.abrufe}×
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Karte>
|
||||
|
||||
<Karte titel="Wie alt der Bestand ist">
|
||||
<p className="mb-3 text-xs text-schrift-leise">
|
||||
Die Zahlen, die eine Aufbewahrungsregel braucht. „Alles älter als 90 Tage
|
||||
|
||||
@@ -0,0 +1,213 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { AlertTriangle, Loader2, RotateCcw, Trash2 } from 'lucide-react'
|
||||
import { api, type PapierkorbSeite, type PapierkorbEintrag } from '../api'
|
||||
import { run, useStore } from '../store'
|
||||
import { bytes, zeit } from '../format'
|
||||
import { Karte, Knopf, Leer, Nachfrage } from '../components/Bausteine'
|
||||
|
||||
/** Der Papierkorb.
|
||||
*
|
||||
* Löschen war bis vor Kurzem endgültig — die Sicherung half nur bis zum
|
||||
* letzten nächtlichen Lauf. Bei einem Knopf „alle 3670 wählen" direkt neben
|
||||
* „löschen" ist das die falsche Härte.
|
||||
*
|
||||
* Was hier steht, liegt weiterhin auf der Platte, nur nicht mehr unter seiner
|
||||
* öffentlichen Adresse. Nach 30 Tagen räumt der Dienst selbst auf. */
|
||||
export function Papierkorb() {
|
||||
const note = useStore((s) => s.note)
|
||||
const [daten, setDaten] = useState<PapierkorbSeite | null>(null)
|
||||
const [gewaehlt, setGewaehlt] = useState<Set<number>>(new Set())
|
||||
const [laeuft, setLaeuft] = useState(false)
|
||||
const [fragt, setFragt] = useState<PapierkorbEintrag[] | 'alles' | null>(null)
|
||||
|
||||
const laden = useCallback(async () => {
|
||||
try {
|
||||
setDaten(await api.papierkorb())
|
||||
} catch (err) {
|
||||
note('fehler', err instanceof Error ? err.message : 'Unbekannt')
|
||||
}
|
||||
}, [note])
|
||||
|
||||
useEffect(() => {
|
||||
void laden()
|
||||
}, [laden])
|
||||
|
||||
if (!daten) {
|
||||
return (
|
||||
<div className="flex justify-center py-16">
|
||||
<Loader2 className="animate-spin text-schrift-leise" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const items = daten.items
|
||||
const auswahl = items.filter((i) => gewaehlt.has(i.id))
|
||||
|
||||
async function zurueck(liste: PapierkorbEintrag[]) {
|
||||
setLaeuft(true)
|
||||
await run(
|
||||
() => api.papierkorbZurueck(liste.map((e) => e.id)),
|
||||
(r) =>
|
||||
r.fehlgeschlagen === 0
|
||||
? `${r.zurueck} zurückgeholt.`
|
||||
: `${r.zurueck} zurückgeholt, ${r.fehlgeschlagen} nicht: ` +
|
||||
r.ergebnisse
|
||||
.filter((e) => !e.ok)
|
||||
.slice(0, 3)
|
||||
.map((e) => `${e.path} (${e.error})`)
|
||||
.join('; '),
|
||||
)
|
||||
setLaeuft(false)
|
||||
setGewaehlt(new Set())
|
||||
void laden()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<span className="text-sm text-schrift-leise">
|
||||
{daten.n} {daten.n === 1 ? 'Eintrag' : 'Einträge'} · {bytes(daten.bytes)}
|
||||
</span>
|
||||
|
||||
{auswahl.length > 0 && (
|
||||
<>
|
||||
<Knopf
|
||||
art="haupt"
|
||||
wartet={laeuft}
|
||||
onClick={() => void zurueck(auswahl)}
|
||||
kind={
|
||||
<>
|
||||
<RotateCcw size={15} />
|
||||
{auswahl.length} zurückholen
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Knopf
|
||||
art="gefahr"
|
||||
onClick={() => setFragt(auswahl)}
|
||||
kind={`${auswahl.length} endgültig löschen`}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{items.length > 0 && (
|
||||
<Knopf
|
||||
art="gefahr"
|
||||
className="ml-auto"
|
||||
onClick={() => setFragt('alles')}
|
||||
kind={
|
||||
<>
|
||||
<Trash2 size={15} />
|
||||
Papierkorb leeren
|
||||
</>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Karte>
|
||||
{items.length === 0 ? (
|
||||
<Leer
|
||||
kind={<Trash2 size={26} className="text-schrift-leise/50" />}
|
||||
text="Der Papierkorb ist leer."
|
||||
/>
|
||||
) : (
|
||||
<table className="w-full table-fixed text-sm">
|
||||
<colgroup>
|
||||
<col className="w-10" />
|
||||
<col />
|
||||
<col className="w-24" />
|
||||
<col className="w-40" />
|
||||
<col className="w-32" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr className="text-left text-xs text-schrift-leise">
|
||||
<th className="px-3 pb-2" />
|
||||
<th className="px-3 pb-2 font-medium">Pfad</th>
|
||||
<th className="px-3 pb-2 text-right font-medium">Größe</th>
|
||||
<th className="px-3 pb-2 font-medium">Gelöscht</th>
|
||||
<th className="px-3 pb-2 font-medium">Von</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((e) => (
|
||||
<tr key={e.id} className="border-t border-rand">
|
||||
<td className="px-3 py-1.5">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={gewaehlt.has(e.id)}
|
||||
onChange={(ev) =>
|
||||
setGewaehlt((alt) => {
|
||||
const neu = new Set(alt)
|
||||
if (ev.target.checked) neu.add(e.id)
|
||||
else neu.delete(e.id)
|
||||
return neu
|
||||
})
|
||||
}
|
||||
className="accent-akzent"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
className="max-w-0 truncate px-3 py-1.5 font-mono text-xs"
|
||||
title={e.path}
|
||||
>
|
||||
{e.path}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 text-right tabular-nums">
|
||||
{bytes(e.size)}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap text-schrift-leise tabular-nums">
|
||||
{zeit(e.geloescht)}
|
||||
</td>
|
||||
<td className="truncate px-3 py-1.5 text-schrift-leise">
|
||||
{e.von}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</Karte>
|
||||
|
||||
<p className="text-xs text-schrift-leise">
|
||||
Einträge werden nach {daten.haltbarTage} Tagen von selbst endgültig entfernt.
|
||||
Solange sie hier stehen, liegen sie weiterhin auf der Platte — nur nicht mehr
|
||||
unter ihrer öffentlichen Adresse.
|
||||
</p>
|
||||
|
||||
<Nachfrage
|
||||
offen={fragt !== null}
|
||||
titel={fragt === 'alles' ? 'Papierkorb leeren?' : 'Endgültig löschen?'}
|
||||
bestaetigung="Endgültig löschen"
|
||||
wartet={laeuft}
|
||||
onNein={() => setFragt(null)}
|
||||
onJa={async () => {
|
||||
setLaeuft(true)
|
||||
await run(
|
||||
() =>
|
||||
api.papierkorbLeeren(
|
||||
fragt === 'alles' ? undefined : (fragt ?? []).map((e) => e.id),
|
||||
),
|
||||
(r) => `${r.geleert} endgültig entfernt.`,
|
||||
)
|
||||
setLaeuft(false)
|
||||
setFragt(null)
|
||||
setGewaehlt(new Set())
|
||||
void laden()
|
||||
}}
|
||||
text={
|
||||
<p className="flex items-start gap-2">
|
||||
<AlertTriangle size={16} className="mt-0.5 shrink-0 text-schlecht" />
|
||||
<span>
|
||||
{fragt === 'alles'
|
||||
? `Alle ${daten.n} Einträge werden von der Platte entfernt.`
|
||||
: `${(fragt as PapierkorbEintrag[])?.length} Einträge werden von der Platte entfernt.`}{' '}
|
||||
Danach hilft nur noch die Sicherung — und die ist bis zu 24 Stunden
|
||||
alt.
|
||||
</span>
|
||||
</p>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
|
||||
import {
|
||||
Check,
|
||||
Copy,
|
||||
FileArchive,
|
||||
Folder,
|
||||
HardDrive,
|
||||
Images,
|
||||
@@ -21,6 +22,8 @@ export function Speicher() {
|
||||
const [stats, setStats] = useState<Stats | null>(null)
|
||||
const [laedt, setLaedt] = useState(true)
|
||||
const [zieht, setZieht] = useState(false)
|
||||
const [spart, setSpart] = useState(false)
|
||||
const [fortschritt, setFortschritt] = useState({ thumbs: '', webp: '' })
|
||||
const [verwaiste, setVerwaiste] = useState<Verwaiste | null>(null)
|
||||
const [sucht, setSucht] = useState(false)
|
||||
const [handelt, setHandelt] = useState(false)
|
||||
@@ -52,6 +55,52 @@ export function Speicher() {
|
||||
|
||||
const groesster = Math.max(1, ...stats.folders.map((f) => f.bytes))
|
||||
|
||||
/** Eine Wartungsarbeit, die in RUNDEN läuft — für beide Knöpfe hier.
|
||||
*
|
||||
* WARUM ÜBERHAUPT RUNDEN: der Server rechnet höchstens ein paar hundert
|
||||
* Stück je Aufruf, weil der Proxy nach 90 Sekunden aufgibt. Der erste Lauf
|
||||
* über 3861 Dateien lief genau da hinein — der Anwender sah einen 504,
|
||||
* während die Arbeit im Hintergrund weiterlief. Ein Knopf, der Erfolg als
|
||||
* Fehler meldet, ist schlimmer als einer ohne Rückmeldung.
|
||||
*
|
||||
* Der Umbau kostet nichts und bringt etwas: statt eines Rädchens, das
|
||||
* minutenlang schweigt, steht eine Zahl da, die sich bewegt.
|
||||
*
|
||||
* Ein Fehler bricht ab, statt weiterzuschleifen — sonst rennt die Schleife
|
||||
* gegen dieselbe Wand und wiederholt dieselbe Meldung. */
|
||||
async function runden<T extends { erzeugt: number; offen: number; fertig: boolean }>(
|
||||
setzeWartet: (b: boolean) => void,
|
||||
welche: 'thumbs' | 'webp',
|
||||
lauf: () => Promise<T>,
|
||||
fertigText: (erzeugt: number, letzte: T) => string,
|
||||
) {
|
||||
setzeWartet(true)
|
||||
let erzeugt = 0
|
||||
|
||||
for (;;) {
|
||||
let r: T
|
||||
try {
|
||||
r = await lauf()
|
||||
} catch (err) {
|
||||
note('fehler', err instanceof Error ? err.message : 'Unbekannt')
|
||||
break
|
||||
}
|
||||
erzeugt += r.erzeugt
|
||||
|
||||
if (r.fertig) {
|
||||
note('ok', fertigText(erzeugt, r))
|
||||
break
|
||||
}
|
||||
setFortschritt((alt) => ({
|
||||
...alt,
|
||||
[welche]: `${erzeugt} erzeugt, noch ${r.offen} offen …`,
|
||||
}))
|
||||
}
|
||||
|
||||
setzeWartet(false)
|
||||
setFortschritt((alt) => ({ ...alt, [welche]: '' }))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
@@ -91,19 +140,18 @@ export function Speicher() {
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Knopf
|
||||
wartet={zieht}
|
||||
onClick={async () => {
|
||||
setZieht(true)
|
||||
await run(
|
||||
() => api.thumbsNachziehen(),
|
||||
(r) =>
|
||||
r.erzeugt === 0
|
||||
onClick={() =>
|
||||
void runden(
|
||||
setZieht,
|
||||
'thumbs',
|
||||
api.thumbsNachziehen,
|
||||
(erzeugt, r) =>
|
||||
(erzeugt === 0
|
||||
? `Nichts zu tun — ${r.vorhanden} Vorschauen sind schon da.`
|
||||
: `${r.erzeugt} Vorschauen erzeugt` +
|
||||
(r.fehler ? `, ${r.fehler} fehlgeschlagen` : '') +
|
||||
`. ${r.vorhanden} waren schon da.`,
|
||||
: `${erzeugt} Vorschauen erzeugt.`) +
|
||||
(r.fehler ? ` ${r.fehler} fehlgeschlagen.` : ''),
|
||||
)
|
||||
setZieht(false)
|
||||
}}
|
||||
}
|
||||
kind={
|
||||
<>
|
||||
<Images size={15} />
|
||||
@@ -111,10 +159,52 @@ export function Speicher() {
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<p className="text-xs text-schrift-leise">
|
||||
Die Galerie lädt Vorschauen statt Vollbilder. Was vor dieser Funktion
|
||||
hochgeladen wurde, hat noch keine.
|
||||
</p>
|
||||
{fortschritt.thumbs ? (
|
||||
<span className="text-sm tabular-nums">{fortschritt.thumbs}</span>
|
||||
) : (
|
||||
<p className="text-xs text-schrift-leise">
|
||||
Die Galerie lädt Vorschauen statt Vollbilder. Was vor dieser Funktion
|
||||
hochgeladen wurde, hat noch keine.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 border-t border-rand pt-4">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Knopf
|
||||
wartet={spart}
|
||||
onClick={() =>
|
||||
void runden(
|
||||
setSpart,
|
||||
'webp',
|
||||
api.webpNachziehen,
|
||||
(erzeugt, r) =>
|
||||
(erzeugt === 0
|
||||
? 'Nichts zu tun — alle Fassungen sind schon da.'
|
||||
: `${erzeugt} Fassungen erzeugt.`) +
|
||||
` Insgesamt ${bytes(r.vorher)} → ${bytes(r.nachher)}, spart ${bytes(r.gespart)}.` +
|
||||
(r.lohntNicht ? ` Bei ${r.lohntNicht} lohnt WebP nicht.` : '') +
|
||||
(r.fehler ? ` ${r.fehler} fehlgeschlagen.` : ''),
|
||||
)
|
||||
}
|
||||
kind={
|
||||
<>
|
||||
<FileArchive size={15} />
|
||||
Sparsame Fassungen erzeugen
|
||||
</>
|
||||
}
|
||||
/>
|
||||
{fortschritt.webp ? (
|
||||
<span className="text-sm tabular-nums">{fortschritt.webp}</span>
|
||||
) : (
|
||||
<p className="max-w-md text-xs text-schrift-leise">
|
||||
Legt neben jedes PNG und JPEG eine WebP-Fassung. Die Adresse
|
||||
ändert sich <strong className="text-schrift">nicht</strong> — wer
|
||||
WebP versteht, bekommt die kleine Datei, alle anderen unverändert
|
||||
das Original. Bei vielen Bildern läuft das in mehreren Runden.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 border-t border-rand pt-4">
|
||||
@@ -128,7 +218,7 @@ export function Speicher() {
|
||||
(r) =>
|
||||
r.dateiOhneDatensatz.anzahl +
|
||||
r.datensatzOhneDatei.anzahl +
|
||||
r.vorschauOhneBild.anzahl ===
|
||||
r.abgeleitetOhneBild.anzahl ===
|
||||
0
|
||||
? 'Alles passt zusammen.'
|
||||
: 'Abweichungen gefunden — siehe unten.',
|
||||
@@ -144,7 +234,7 @@ export function Speicher() {
|
||||
}
|
||||
/>
|
||||
<p className="text-xs text-schrift-leise">
|
||||
Dateien ohne Datensatz, Datensätze ohne Datei, Vorschauen ohne
|
||||
Dateien ohne Datensatz, Datensätze ohne Datei, Abgeleitetes ohne
|
||||
Bild. Sucht nur — verändert nichts.
|
||||
</p>
|
||||
</div>
|
||||
@@ -172,18 +262,18 @@ export function Speicher() {
|
||||
hinweis="Zeigen ins Leere — die Galerie zeigt ein kaputtes Bild."
|
||||
/>
|
||||
<Befund
|
||||
titel="Vorschauen ohne Bild"
|
||||
daten={verwaiste.vorschauOhneBild}
|
||||
hinweis="Belegen Platz, sonst harmlos."
|
||||
titel="Abgeleitetes ohne Bild"
|
||||
daten={verwaiste.abgeleitetOhneBild}
|
||||
hinweis="Vorschauen und sparsame Fassungen, deren Original weg ist. Belegen Platz, sonst harmlos."
|
||||
/>
|
||||
{(verwaiste.datensatzOhneDatei.anzahl > 0 ||
|
||||
verwaiste.vorschauOhneBild.anzahl > 0) && (
|
||||
verwaiste.abgeleitetOhneBild.anzahl > 0) && (
|
||||
<div>
|
||||
<Knopf
|
||||
art="gefahr"
|
||||
wartet={handelt}
|
||||
onClick={() => setFragt('aufraeumen')}
|
||||
kind="Leere Datensätze und Vorschauen entfernen"
|
||||
kind="Leere Datensätze und Abgeleitetes entfernen"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user