Hitonabi
474 lines
21 KiB
TypeScript
474 lines
21 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { Clock, Activity, AlertCircle, CheckCircle, Disc, Download, FileSpreadsheet, HardDrive, Trash2, LayoutGrid, List, RotateCcw } from 'lucide-react'
|
|
import { api } from '../lib/api'
|
|
import { useToast } from '../context/ToastContext'
|
|
import { PageHeader } from '../components/ui/PageHeader'
|
|
import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/Card'
|
|
import { Button } from '../components/ui/Button'
|
|
import { StatusBadge, TypeBadge } from '../components/ui/Badge'
|
|
import ConfirmDialog from '../components/ConfirmDialog'
|
|
import DeviceDiscovery from '../components/DeviceDiscovery'
|
|
import JobDetailModal from '../components/JobDetailModal'
|
|
import LiveLogSection from '../components/LiveLogSection'
|
|
import { HeroCinemaBanner } from '../components/HeroCinemaBanner'
|
|
import { RadialProgress } from '../components/ui/RadialProgress'
|
|
import { ENCODER_BADGES } from '../lib/design'
|
|
|
|
interface JobMeta {
|
|
year?: number
|
|
overview?: string
|
|
poster_path?: string
|
|
genres?: string[]
|
|
runtime?: number
|
|
type?: string
|
|
source?: string
|
|
}
|
|
|
|
interface Job {
|
|
id: string
|
|
type: 'cd' | 'dvd' | 'bluray' | 'uhd'
|
|
status: 'pending' | 'processing' | 'transcoding' | 'canceling' | 'completed' | 'failed'
|
|
device: string
|
|
startTime: string
|
|
endTime?: string
|
|
progress: number
|
|
title?: string
|
|
can_retry?: boolean
|
|
meta?: JobMeta | null
|
|
}
|
|
|
|
function posterUrl(meta?: JobMeta | null): string | null {
|
|
const p = meta?.poster_path
|
|
if (!p) return null
|
|
return p.startsWith('http') ? p : `https://image.tmdb.org/t/p/w342${p}`
|
|
}
|
|
|
|
async function fetchJobs(): Promise<Job[]> {
|
|
try {
|
|
const response = await api.get('/jobs')
|
|
return response.data
|
|
} catch {
|
|
return []
|
|
}
|
|
}
|
|
|
|
export default function Dashboard() {
|
|
const [jobs, setJobs] = useState<Job[]>([])
|
|
const [workers, setWorkers] = useState<WorkerInfo[]>([])
|
|
const [plaetze, setPlaetze] = useState<{ name: string, frei_gb: number, gesamt_gb: number }[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [detailJobId, setDetailJobId] = useState<string | null>(null)
|
|
const [aufraeumenOffen, setAufraeumenOffen] = useState(false)
|
|
const [viewMode, setViewMode] = useState<'grid' | 'table'>('grid')
|
|
const { toast } = useToast()
|
|
|
|
const jobLoeschen = async (job: Job) => {
|
|
try {
|
|
await api.delete(`/jobs/${job.id}`)
|
|
toast('success', `„${job.title || job.id.slice(0, 8)}" aus der Liste entfernt`)
|
|
setJobs(await fetchJobs())
|
|
} catch (e: any) {
|
|
toast('error', e?.response?.data?.detail || 'Entfernen fehlgeschlagen')
|
|
}
|
|
}
|
|
|
|
const erledigteAufraeumen = async () => {
|
|
setAufraeumenOffen(false)
|
|
try {
|
|
const r = await api.delete('/jobs')
|
|
toast('success', `${r.data.deleted} erledigte Jobs entfernt — Dateien bleiben liegen`)
|
|
setJobs(await fetchJobs())
|
|
} catch {
|
|
toast('error', 'Aufräumen fehlgeschlagen')
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
const loadData = async () => {
|
|
try {
|
|
setJobs(await fetchJobs())
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
loadData()
|
|
api.get('/capabilities').then(r => setWorkers(r.data.workers || [])).catch(() => {})
|
|
api.get('/system/info').then(r => setPlaetze(r.data.plaetze || [])).catch(() => {})
|
|
const interval = setInterval(loadData, 5000)
|
|
return () => clearInterval(interval)
|
|
}, [])
|
|
|
|
const aktiverJob = jobs.find(j => j.status === 'processing' || j.status === 'transcoding')
|
|
|
|
const stats = {
|
|
pending: jobs.filter(j => j.status === 'pending').length,
|
|
processing: jobs.filter(j => j.status === 'processing').length,
|
|
completed: jobs.filter(j => j.status === 'completed').length,
|
|
failed: jobs.filter(j => j.status === 'failed').length,
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[60vh]">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-500"></div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<PageHeader
|
|
title="Dashboard"
|
|
subtitle="Dein Heimkino-Control-Center für Discs, Rips & Medien-Server"
|
|
/>
|
|
|
|
{/* Hero Cinema Banner (3D Spinning Disc, Live Progress & Showcase) */}
|
|
<HeroCinemaBanner
|
|
aktiverJob={aktiverJob}
|
|
onDetailClick={id => setDetailJobId(id)}
|
|
onCancelClick={id => api.post(`/jobs/${id}/cancel`).catch(() => {})}
|
|
totalJobsCount={jobs.length}
|
|
completedCount={stats.completed}
|
|
/>
|
|
|
|
{/* System Telemetrie Leiste */}
|
|
<Card>
|
|
<CardContent className="p-4 flex flex-wrap items-center gap-x-8 gap-y-3 text-sm">
|
|
<div className="flex items-center gap-2.5">
|
|
<Activity size={17} className="text-amber-500" />
|
|
<span className="text-slate-500 dark:text-slate-400 font-medium">Encoder:</span>
|
|
{workers.length === 0 ? (
|
|
<span className="text-slate-400 dark:text-slate-500 italic">kein Worker</span>
|
|
) : (
|
|
workers.flatMap(w => w.encoders).filter((e, i, a) => a.indexOf(e) === i).map(e => (
|
|
<span key={e} className={`text-xs px-2.5 py-0.5 rounded-md font-medium border ${
|
|
e.startsWith('cpu')
|
|
? 'bg-slate-200/80 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-300 dark:border-slate-700'
|
|
: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/30'
|
|
}`}>
|
|
{ENCODER_BADGES[e]?.label || e}
|
|
</span>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2.5">
|
|
<Clock size={17} className="text-amber-500" />
|
|
<span className="text-slate-500 dark:text-slate-400 font-medium">Aktiv:</span>
|
|
{aktiverJob ? (
|
|
<span className="text-slate-900 dark:text-slate-200 font-medium">
|
|
{aktiverJob.status === 'transcoding' ? 'Komprimieren' : 'Rippen'} · {aktiverJob.progress} %
|
|
</span>
|
|
) : (
|
|
<span className="text-slate-400 dark:text-slate-500 italic">kein Job</span>
|
|
)}
|
|
</div>
|
|
|
|
{plaetze.length > 0 && (
|
|
<div className="flex items-center gap-2.5 ml-auto">
|
|
<HardDrive size={17} className="text-amber-500" />
|
|
<span className="text-slate-500 dark:text-slate-400 font-medium">Frei:</span>
|
|
{plaetze.map(p => (
|
|
<span
|
|
key={p.name}
|
|
title={`${p.name}: ${p.frei_gb} von ${p.gesamt_gb} GB frei`}
|
|
className={`text-xs px-2.5 py-0.5 rounded-md font-mono border ${
|
|
p.frei_gb < 60
|
|
? 'bg-amber-500/20 text-amber-700 dark:text-amber-300 border-amber-500/30 font-semibold'
|
|
: 'bg-slate-200/80 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-300 dark:border-slate-700'
|
|
}`}
|
|
>
|
|
{p.name.startsWith('Media') ? 'Media' : 'Arbeit'} {p.frei_gb} GB
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Laufwerke & Disc-Erkennung */}
|
|
<DeviceDiscovery />
|
|
|
|
{/* Stats Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<StatCard
|
|
icon={Clock}
|
|
label="Warteschlange"
|
|
value={stats.pending.toString()}
|
|
badgeStyle="bg-amber-500/15 text-amber-500 border-amber-500/20"
|
|
/>
|
|
<StatCard
|
|
icon={Activity}
|
|
label="Bearbeitung"
|
|
value={stats.processing.toString()}
|
|
badgeStyle="bg-sky-500/15 text-sky-500 border-sky-500/20"
|
|
/>
|
|
<StatCard
|
|
icon={CheckCircle}
|
|
label="Fertig"
|
|
value={stats.completed.toString()}
|
|
badgeStyle="bg-emerald-500/15 text-emerald-500 border-emerald-500/20"
|
|
/>
|
|
<StatCard
|
|
icon={AlertCircle}
|
|
label="Fehler"
|
|
value={stats.failed.toString()}
|
|
badgeStyle="bg-rose-500/15 text-rose-500 border-rose-500/20"
|
|
/>
|
|
</div>
|
|
|
|
{/* Recent Jobs: Choice between Visual Poster Grid & Classic Table */}
|
|
<Card className="overflow-hidden">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-3">
|
|
<CardTitle>Neueste Jobs</CardTitle>
|
|
<span className="text-xs text-slate-500 dark:text-slate-400">({jobs.length} insgesamt)</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
{/* View Mode Toggle Button */}
|
|
<div className="flex items-center p-1 rounded-xl bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
|
|
<button
|
|
onClick={() => setViewMode('grid')}
|
|
className={`p-1.5 rounded-lg text-xs font-medium transition-all ${
|
|
viewMode === 'grid'
|
|
? 'bg-amber-500 text-slate-950 shadow-sm font-bold'
|
|
: 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200'
|
|
}`}
|
|
title="Visuelle Poster-Kacheln"
|
|
>
|
|
<LayoutGrid size={15} />
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode('table')}
|
|
className={`p-1.5 rounded-lg text-xs font-medium transition-all ${
|
|
viewMode === 'table'
|
|
? 'bg-amber-500 text-slate-950 shadow-sm font-bold'
|
|
: 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200'
|
|
}`}
|
|
title="Kompakte Liste"
|
|
>
|
|
<List size={15} />
|
|
</button>
|
|
</div>
|
|
|
|
{jobs.length > 0 && (
|
|
<a
|
|
href="/api/jobs/export"
|
|
download
|
|
title="Job-Historie als CSV herunterladen"
|
|
className="inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
|
|
>
|
|
<FileSpreadsheet size={13} />
|
|
CSV
|
|
</a>
|
|
)}
|
|
{jobs.some(j => j.status === 'completed' || j.status === 'failed') && (
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => setAufraeumenOffen(true)}
|
|
title="Erledigte Jobs aufräumen"
|
|
>
|
|
<Trash2 size={13} />
|
|
Aufräumen
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
|
|
{jobs.length === 0 ? (
|
|
<div className="text-center py-16">
|
|
<div className="mx-auto w-16 h-16 rounded-2xl flex items-center justify-center mb-3 bg-slate-100 dark:bg-slate-800 text-slate-400">
|
|
<Disc size={32} />
|
|
</div>
|
|
<div className="mb-1 font-semibold text-slate-500 dark:text-slate-400">Noch keine Jobs</div>
|
|
<p className="text-sm text-slate-400 dark:text-slate-500">Lege eine CD, DVD oder Blu-ray ein, um zu starten</p>
|
|
</div>
|
|
) : viewMode === 'grid' ? (
|
|
/* Visual Poster Cards Grid View */
|
|
<div className="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
|
{jobs.slice(0, 9).map(job => {
|
|
const poster = posterUrl(job.meta)
|
|
return (
|
|
<div
|
|
key={job.id}
|
|
className="group relative rounded-2xl overflow-hidden border border-slate-200/80 dark:border-slate-800/80 bg-slate-50/50 dark:bg-slate-950/80 flex flex-col justify-between transition-all hover:border-amber-500/50 hover:shadow-xl hover:shadow-amber-500/10"
|
|
>
|
|
<div className="flex p-4 gap-4">
|
|
{poster ? (
|
|
<img src={poster} alt={job.title || ''} className="w-24 h-36 rounded-xl object-cover flex-shrink-0 shadow-md border border-slate-700/50 group-hover:scale-105 transition-transform duration-300" />
|
|
) : (
|
|
<div className="w-24 h-36 rounded-xl flex items-center justify-center flex-shrink-0 bg-slate-200 dark:bg-slate-900 text-slate-400 border border-slate-300 dark:border-slate-800">
|
|
<Disc size={32} />
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex-1 min-w-0 flex flex-col justify-between">
|
|
<div>
|
|
<div className="flex items-center gap-1.5 flex-wrap mb-1">
|
|
<TypeBadge type={job.type} />
|
|
<StatusBadge status={job.status} />
|
|
</div>
|
|
<button
|
|
onClick={() => setDetailJobId(job.id)}
|
|
className="text-base font-bold text-left text-slate-900 dark:text-slate-100 hover:text-amber-500 dark:hover:text-amber-400 transition-colors line-clamp-2"
|
|
>
|
|
{job.title || 'Unbekannter Titel'}
|
|
</button>
|
|
<p className="text-[11px] text-slate-500 dark:text-slate-400 mt-1 font-mono">
|
|
Laufwerk: {job.device}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="pt-2 flex items-center justify-between">
|
|
<RadialProgress progress={job.progress} size={48} strokeWidth={5} />
|
|
<span className="text-[10px] text-slate-400 font-mono">
|
|
{new Date(job.startTime).toLocaleTimeString('de-DE')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-4 py-2.5 bg-slate-100/70 dark:bg-slate-900/90 border-t border-slate-200/80 dark:border-slate-800/80 flex items-center justify-between">
|
|
<Button variant="ghost" size="sm" onClick={() => setDetailJobId(job.id)}>
|
|
Details
|
|
</Button>
|
|
|
|
<div className="flex items-center gap-2">
|
|
{job.status === 'completed' && (
|
|
<Button variant="amber" size="sm" onClick={() => setDetailJobId(job.id)}>
|
|
<Download size={13} /> Download
|
|
</Button>
|
|
)}
|
|
{job.status === 'failed' && job.can_retry && (
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => {
|
|
api.post(`/jobs/${job.id}/retry-transcode`)
|
|
.then(() => toast('success', 'Kompression neu eingereiht'))
|
|
.catch((e: any) => toast('error', e?.response?.data?.detail || 'Fehlgeschlagen'))
|
|
}}
|
|
>
|
|
<RotateCcw size={13} /> Neu
|
|
</Button>
|
|
)}
|
|
{(job.status === 'completed' || job.status === 'failed') && (
|
|
<button
|
|
onClick={() => jobLoeschen(job)}
|
|
className="p-1.5 rounded-lg text-rose-500 hover:bg-rose-500/10 transition-colors"
|
|
title="Löschen"
|
|
>
|
|
<Trash2 size={14} />
|
|
</button>
|
|
)}
|
|
{(job.status === 'pending' || job.status === 'processing' || job.status === 'transcoding') && (
|
|
<Button variant="danger" size="sm" onClick={() => api.post(`/jobs/${job.id}/cancel`).catch(() => {})}>
|
|
Abbrechen
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
) : (
|
|
/* Table View */
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-slate-50 dark:bg-slate-950/80 border-b border-slate-200/80 dark:border-slate-800">
|
|
<tr>
|
|
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Typ</th>
|
|
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Titel</th>
|
|
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Status</th>
|
|
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Gerät</th>
|
|
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Fortschritt</th>
|
|
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Startzeit</th>
|
|
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Aktion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-200/80 dark:divide-slate-800">
|
|
{jobs.slice(0, 10).map(job => (
|
|
<tr key={job.id} className="transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/40">
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<TypeBadge type={job.type} />
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<button
|
|
onClick={() => setDetailJobId(job.id)}
|
|
className="text-sm font-medium text-left hover:underline text-slate-900 dark:text-slate-100 hover:text-amber-500 dark:hover:text-amber-400 transition-colors"
|
|
>
|
|
{job.title || 'Unbekannt'}
|
|
</button>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<StatusBadge status={job.status} />
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-500 dark:text-slate-400">
|
|
{job.device}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<RadialProgress progress={job.progress} size={42} strokeWidth={4} />
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-slate-500 dark:text-slate-400">
|
|
{new Date(job.startTime).toLocaleString('de-DE')}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
{job.status === 'completed' && (
|
|
<Button variant="secondary" size="sm" onClick={() => setDetailJobId(job.id)}>
|
|
<Download size={13} className="text-emerald-500" /> Download
|
|
</Button>
|
|
)}
|
|
{(job.status === 'completed' || job.status === 'failed') && (
|
|
<button
|
|
onClick={() => jobLoeschen(job)}
|
|
className="ml-2 p-1.5 rounded-lg text-rose-500 hover:bg-rose-500/10 transition-colors"
|
|
>
|
|
<Trash2 size={14} />
|
|
</button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
<LiveLogSection />
|
|
|
|
<JobDetailModal jobId={detailJobId} onClose={() => setDetailJobId(null)} />
|
|
|
|
<ConfirmDialog
|
|
isOpen={aufraeumenOffen}
|
|
onClose={() => setAufraeumenOffen(false)}
|
|
onConfirm={erledigteAufraeumen}
|
|
title="Job-Liste aufräumen?"
|
|
message="Alle fertigen und fehlgeschlagenen Jobs verschwinden aus der Liste. Die gerippten Dateien bleiben selbstverständlich liegen."
|
|
confirmText="Aufräumen"
|
|
type="warning"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StatCard({ icon: Icon, label, value, badgeStyle }: { icon: any, label: string, value: string, badgeStyle: string }) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="p-5 flex items-center gap-4">
|
|
<div className={`p-3 rounded-xl border ${badgeStyle}`}>
|
|
<Icon className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-medium text-slate-500 dark:text-slate-400">{label}</p>
|
|
<p className="text-3xl font-extrabold text-slate-900 dark:text-slate-100">{value}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|