style(ui): Visuelle Hero Showcase Banner & Poster Cards Grid auf dem Dashboard
Ampel / ampel (push) Successful in 28s
Ampel / ampel (push) Successful in 28s
This commit is contained in:
Hitonabi
@@ -100,6 +100,7 @@ export default function Dashboard() {
|
||||
}, [])
|
||||
|
||||
const aktiverJob = jobs.find(j => j.status === 'processing' || j.status === 'transcoding')
|
||||
const latestJob = jobs.find(j => j.status === 'completed') || jobs[0] || null
|
||||
|
||||
const stats = {
|
||||
pending: jobs.filter(j => j.status === 'pending').length,
|
||||
@@ -123,9 +124,10 @@ export default function Dashboard() {
|
||||
subtitle="Dein Heimkino-Control-Center für Discs, Rips & Medien-Server"
|
||||
/>
|
||||
|
||||
{/* Hero Cinema Banner (3D Spinning Disc, Live Progress & Showcase) */}
|
||||
{/* Hero Cinema Banner (Aktiver Rip ODER zuletzt geripptes Medium Showcase) */}
|
||||
<HeroCinemaBanner
|
||||
aktiverJob={aktiverJob}
|
||||
latestJob={latestJob}
|
||||
onDetailClick={id => setDetailJobId(id)}
|
||||
onCancelClick={id => api.post(`/jobs/${id}/cancel`).catch(() => {})}
|
||||
totalJobsCount={jobs.length}
|
||||
@@ -133,19 +135,19 @@ export default function Dashboard() {
|
||||
/>
|
||||
|
||||
{/* System Telemetrie Leiste */}
|
||||
<Card>
|
||||
<Card className="glass-panel">
|
||||
<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>
|
||||
<Activity size={17} className="text-amber-400" />
|
||||
<span className="text-slate-400 font-medium">Encoder:</span>
|
||||
{workers.length === 0 ? (
|
||||
<span className="text-slate-400 dark:text-slate-500 italic">kein Worker</span>
|
||||
<span className="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'
|
||||
? 'bg-slate-800 text-slate-300 border-slate-700'
|
||||
: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30'
|
||||
}`}>
|
||||
{ENCODER_BADGES[e]?.label || e}
|
||||
</span>
|
||||
@@ -154,29 +156,29 @@ export default function Dashboard() {
|
||||
</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>
|
||||
<Clock size={17} className="text-amber-400" />
|
||||
<span className="text-slate-400 font-medium">Aktiv:</span>
|
||||
{aktiverJob ? (
|
||||
<span className="text-slate-900 dark:text-slate-200 font-medium">
|
||||
<span className="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>
|
||||
<span className="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>
|
||||
<HardDrive size={17} className="text-amber-400" />
|
||||
<span className="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'
|
||||
? 'bg-amber-500/20 text-amber-300 border-amber-500/30 font-semibold'
|
||||
: 'bg-slate-800 text-slate-300 border-slate-700'
|
||||
}`}
|
||||
>
|
||||
{p.name.startsWith('Media') ? 'Media' : 'Arbeit'} {p.frei_gb} GB
|
||||
@@ -196,45 +198,45 @@ export default function Dashboard() {
|
||||
icon={Clock}
|
||||
label="Warteschlange"
|
||||
value={stats.pending.toString()}
|
||||
badgeStyle="bg-amber-500/15 text-amber-500 border-amber-500/20"
|
||||
badgeStyle="bg-amber-500/20 text-amber-400 border-amber-500/30 shadow-[0_0_15px_rgba(245,158,11,0.2)]"
|
||||
/>
|
||||
<StatCard
|
||||
icon={Activity}
|
||||
label="Bearbeitung"
|
||||
value={stats.processing.toString()}
|
||||
badgeStyle="bg-sky-500/15 text-sky-500 border-sky-500/20"
|
||||
badgeStyle="bg-sky-500/20 text-sky-400 border-sky-500/30 shadow-[0_0_15px_rgba(14,165,233,0.2)]"
|
||||
/>
|
||||
<StatCard
|
||||
icon={CheckCircle}
|
||||
label="Fertig"
|
||||
value={stats.completed.toString()}
|
||||
badgeStyle="bg-emerald-500/15 text-emerald-500 border-emerald-500/20"
|
||||
badgeStyle="bg-emerald-500/20 text-emerald-400 border-emerald-500/30 shadow-[0_0_15px_rgba(16,185,129,0.2)]"
|
||||
/>
|
||||
<StatCard
|
||||
icon={AlertCircle}
|
||||
label="Fehler"
|
||||
value={stats.failed.toString()}
|
||||
badgeStyle="bg-rose-500/15 text-rose-500 border-rose-500/20"
|
||||
badgeStyle="bg-rose-500/20 text-rose-400 border-rose-500/30 shadow-[0_0_15px_rgba(244,63,94,0.2)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Recent Jobs: Choice between Visual Poster Grid & Classic Table */}
|
||||
<Card className="overflow-hidden">
|
||||
<Card className="glass-panel 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>
|
||||
<span className="text-xs text-slate-400 font-mono">({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">
|
||||
<div className="flex items-center p-1 rounded-xl bg-slate-900 border 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'
|
||||
? 'bg-amber-500 text-slate-950 shadow-md font-bold'
|
||||
: 'text-slate-400 hover:text-slate-200'
|
||||
}`}
|
||||
title="Visuelle Poster-Kacheln"
|
||||
>
|
||||
@@ -244,8 +246,8 @@ export default function Dashboard() {
|
||||
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'
|
||||
? 'bg-amber-500 text-slate-950 shadow-md font-bold'
|
||||
: 'text-slate-400 hover:text-slate-200'
|
||||
}`}
|
||||
title="Kompakte Liste"
|
||||
>
|
||||
@@ -258,7 +260,7 @@ export default function Dashboard() {
|
||||
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"
|
||||
className="inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-xl border border-slate-700 bg-slate-800/80 text-slate-300 hover:bg-slate-700 transition-colors"
|
||||
>
|
||||
<FileSpreadsheet size={13} />
|
||||
CSV
|
||||
@@ -280,11 +282,11 @@ export default function Dashboard() {
|
||||
|
||||
{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">
|
||||
<div className="mx-auto w-16 h-16 rounded-2xl flex items-center justify-center mb-3 bg-slate-800/80 border border-slate-700 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 className="mb-1 font-semibold text-slate-400">Noch keine Jobs</div>
|
||||
<p className="text-sm text-slate-500">Lege eine CD, DVD oder Blu-ray ein, um zu starten</p>
|
||||
</div>
|
||||
) : viewMode === 'grid' ? (
|
||||
/* Visual Poster Cards Grid View */
|
||||
@@ -294,31 +296,32 @@ export default function Dashboard() {
|
||||
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"
|
||||
className="group relative rounded-2xl overflow-hidden border border-slate-800 bg-slate-900/90 backdrop-blur-xl flex flex-col justify-between transition-all hover:border-amber-500/50 hover:shadow-2xl 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" />
|
||||
<img src={poster} alt={job.title || ''} className="w-24 h-36 rounded-xl object-cover flex-shrink-0 shadow-md border border-slate-700/60 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 className="w-24 h-36 rounded-xl bg-gradient-to-br from-slate-800 via-slate-900 to-slate-950 border border-slate-800 flex flex-col items-center justify-center flex-shrink-0 text-slate-400 shadow-md p-2 text-center">
|
||||
<Disc size={28} className="text-amber-400 mb-1" />
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-slate-500">{job.type}</span>
|
||||
</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">
|
||||
<div className="flex items-center gap-1.5 flex-wrap mb-1.5">
|
||||
<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"
|
||||
className="text-base font-bold text-left text-slate-100 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 className="text-[11px] text-slate-400 mt-1 font-mono">
|
||||
{job.device}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -331,7 +334,7 @@ export default function Dashboard() {
|
||||
</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">
|
||||
<div className="px-4 py-2.5 bg-slate-950/80 border-t border-slate-800/80 flex items-center justify-between">
|
||||
<Button variant="ghost" size="sm" onClick={() => setDetailJobId(job.id)}>
|
||||
Details
|
||||
</Button>
|
||||
@@ -379,27 +382,27 @@ export default function Dashboard() {
|
||||
/* 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">
|
||||
<thead className="bg-slate-950/90 border-b 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>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-400">Typ</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-400">Titel</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-400">Status</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-400">Gerät</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-400">Fortschritt</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-400">Startzeit</th>
|
||||
<th className="px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-400">Aktion</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-200/80 dark:divide-slate-800">
|
||||
<tbody className="divide-y divide-slate-800/80">
|
||||
{jobs.slice(0, 10).map(job => (
|
||||
<tr key={job.id} className="transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/40">
|
||||
<tr key={job.id} className="transition-colors 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"
|
||||
className="text-sm font-bold text-left hover:underline text-slate-100 hover:text-amber-400 transition-colors"
|
||||
>
|
||||
{job.title || 'Unbekannt'}
|
||||
</button>
|
||||
@@ -407,19 +410,19 @@ export default function Dashboard() {
|
||||
<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">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono 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">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-mono 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
|
||||
<Download size={13} className="text-emerald-400" /> Download
|
||||
</Button>
|
||||
)}
|
||||
{(job.status === 'completed' || job.status === 'failed') && (
|
||||
@@ -458,14 +461,14 @@ export default function Dashboard() {
|
||||
|
||||
function StatCard({ icon: Icon, label, value, badgeStyle }: { icon: any, label: string, value: string, badgeStyle: string }) {
|
||||
return (
|
||||
<Card>
|
||||
<Card className="glass-panel">
|
||||
<CardContent className="p-5 flex items-center gap-4">
|
||||
<div className={`p-3 rounded-xl border ${badgeStyle}`}>
|
||||
<div className={`p-3 rounded-2xl 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>
|
||||
<p className="text-xs font-medium text-slate-400">{label}</p>
|
||||
<p className="text-3xl font-extrabold text-slate-100">{value}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user