Hitonabi/rippy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): Laufwerke & im Laufwerk erkannte Disc nach ganz oben verschoben, Ripping Queue exakt nach SC1 aufgebaut
Ampel / ampel (push) Successful in 28s
Details

Browse Source
This commit is contained in:
Hitonabi
2026-07-24 16:39:56 +02:00
parent e18315814c
commit 60abf42359
1 changed files with 47 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/ui/src/pages/Dashboard.tsx
+44 -34
View File
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Cpu, HardDrive, Disc, Download, Trash2, Activity, Film, Server, RotateCcw, FileSpreadsheet, List, LayoutGrid } from 'lucide-react' import { Cpu, HardDrive, Disc, Download, Trash2, Activity, Film, Server, RotateCcw, FileSpreadsheet } from 'lucide-react'
import { api } from '../lib/api' import { api } from '../lib/api'
import { useToast } from '../context/ToastContext' import { useToast } from '../context/ToastContext'
import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/Card' import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/Card'
@@ -9,8 +9,6 @@ import ConfirmDialog from '../components/ConfirmDialog'
import DeviceDiscovery from '../components/DeviceDiscovery' import DeviceDiscovery from '../components/DeviceDiscovery'
import JobDetailModal from '../components/JobDetailModal' import JobDetailModal from '../components/JobDetailModal'
import LiveLogSection from '../components/LiveLogSection' import LiveLogSection from '../components/LiveLogSection'
import { HeroCinemaBanner } from '../components/HeroCinemaBanner'
import { RadialProgress } from '../components/ui/RadialProgress'
interface JobMeta { interface JobMeta {
year?: number year?: number
@@ -145,21 +143,16 @@ export default function Dashboard() {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
{/* 1. Top Hero Cinema Showcase (5 Kacheln vollständig ausgefüllt) */} {/* 1. GANZ OBEN: Laufwerke & Erkannte Disc im Laufwerk (Akira / Auto Pre-Scan Banner) */}
<HeroCinemaBanner <DeviceDiscovery />
aktiverJob={aktiverJob}
completedJobs={completedJobs}
onDetailClick={id => setDetailJobId(id)}
onCancelClick={id => api.post(`/jobs/${id}/cancel`).catch(() => {})}
/>
{/* 2. Main 2-Column Grid Layout (SC1 Mockup Bereich) */} {/* 2. MAIN 2-COLUMN GRID LAYOUT (EXAKT NACH SC1 MOCKUP) */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
{/* LEFT COLUMN (lg:col-span-7) */} {/* LEFT COLUMN (lg:col-span-7) */}
<div className="lg:col-span-7 space-y-6"> <div className="lg:col-span-7 space-y-6">
{/* Current Job Card */} {/* Current Job Card (SC1 Left Top) */}
<Card className="border border-amber-500/30 bg-[#0f1422] shadow-xl"> <Card className="border border-amber-500/30 bg-[#0f1422] shadow-xl">
<CardHeader className="border-b border-slate-800"> <CardHeader className="border-b border-slate-800">
<CardTitle className="text-amber-400 flex items-center gap-2"> <CardTitle className="text-amber-400 flex items-center gap-2">
@@ -218,28 +211,49 @@ export default function Dashboard() {
</CardContent> </CardContent>
</Card> </Card>
{/* Ripping Queue Card */} {/* Ripping Queue Card (EXAKT NACH SC1 MOCKUP METHODIK) */}
<Card className="border border-slate-800 bg-[#0f1422]"> <Card className="border border-slate-800 bg-[#0f1422]">
<CardHeader className="border-b border-slate-800"> <CardHeader className="border-b border-slate-800">
<CardTitle className="text-slate-200">Ripping Queue ({queueJobs.length})</CardTitle> <CardTitle className="text-slate-200">Ripping Queue ({queueJobs.length})</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="p-4"> <CardContent className="p-4 space-y-2.5">
{queueJobs.length === 0 ? ( {queueJobs.length > 0 ? (
<div className="py-4 text-center text-xs font-mono text-slate-500"> queueJobs.map((j, idx) => (
Warteschlange ist leer (0 Jobs eingereiht) <div key={j.id} className="flex items-center justify-between p-3 rounded-xl bg-slate-900/80 border border-slate-800 text-sm">
</div> <div className="flex items-center gap-3 min-w-0">
{posterUrl(j.meta) ? (
<img src={posterUrl(j.meta)!} alt="" className="w-8 h-10 rounded object-cover flex-shrink-0" />
) : ( ) : (
<div className="space-y-2"> <div className="w-8 h-10 rounded bg-slate-800 flex items-center justify-center flex-shrink-0 text-slate-500">
{queueJobs.map((j, idx) => ( <Disc size={16} />
<div key={j.id} className="flex items-center justify-between p-3 rounded-xl bg-slate-900/60 border border-slate-800 text-sm"> </div>
<div className="flex items-center gap-3"> )}
<span className="font-mono text-amber-400 font-bold">{idx + 1}.</span> <span className="font-mono text-amber-400 font-bold flex-shrink-0">{idx + 2}.</span>
<span className="font-medium text-slate-200">{j.title || 'Unbekannt'}</span> <span className="font-semibold text-slate-100 truncate">{j.title || 'Unbekannt'}</span>
<TypeBadge type={j.type} /> <TypeBadge type={j.type} />
</div> </div>
<span className="text-xs text-slate-400 font-mono">Wartend</span> <span className="text-xs text-slate-400 font-mono px-2 py-1 rounded bg-slate-800 border border-slate-700 flex-shrink-0">
Queue {idx + 1}
</span>
</div>
))
) : (
/* SC1 Styled Queue List slots (sauberes SC1 Queue Layout ohne hässliches Loch) */
<div className="space-y-2">
<div className="flex items-center justify-between p-3 rounded-xl bg-slate-900/40 border border-slate-800/60 text-sm">
<div className="flex items-center gap-3">
<span className="font-mono text-amber-400/80 font-bold">2.</span>
<span className="font-medium text-slate-400">Bereit für nächste Disc...</span>
</div>
<span className="text-xs text-slate-500 font-mono">Queue 1</span>
</div>
<div className="flex items-center justify-between p-3 rounded-xl bg-slate-900/40 border border-slate-800/60 text-sm">
<div className="flex items-center gap-3">
<span className="font-mono text-amber-400/80 font-bold">3.</span>
<span className="font-medium text-slate-400">Bereit für nächste Disc...</span>
</div>
<span className="text-xs text-slate-500 font-mono">Queue 2</span>
</div> </div>
))}
</div> </div>
)} )}
</CardContent> </CardContent>
@@ -311,10 +325,10 @@ export default function Dashboard() {
</CardContent> </CardContent>
</Card> </Card>
{/* Recently Ripped Card */} {/* Recently Ripped Card (SC1 Right Bottom) */}
<Card className="border border-slate-800 bg-[#0f1422]"> <Card className="border border-slate-800 bg-[#0f1422]">
<CardHeader className="border-b border-slate-800 flex items-center justify-between"> <CardHeader className="border-b border-slate-800 flex items-center justify-between">
<CardTitle className="text-slate-200">Zuletzt gerippt ({completedJobs.length})</CardTitle> <CardTitle className="text-slate-200">Recently Ripped ({completedJobs.length})</CardTitle>
{completedJobs.length > 0 && ( {completedJobs.length > 0 && (
<Button variant="ghost" size="sm" onClick={() => setAufraeumenOffen(true)}> <Button variant="ghost" size="sm" onClick={() => setAufraeumenOffen(true)}>
<Trash2 size={13} /> Aufräumen <Trash2 size={13} /> Aufräumen
@@ -367,10 +381,7 @@ export default function Dashboard() {
</div> </div>
{/* 3. Laufwerke & Disc-Erkennung (Device Discovery Slot) */} {/* 3. VOLLSTÄNDIGE JOB-TABELLE & MEDIEN-BIBLIOTHEK (MIT INHALTSANGABEN / BESCHREIBUNGEN) */}
<DeviceDiscovery />
{/* 4. VOLLSTÄNDIGE JOB-TABELLE & MEDIEN-BIBLIOTHEK (AUS DEM ALTEN DESIGN + METADATEN/BESCHREIBUNGEN) */}
<Card className="border border-slate-800 bg-[#0f1422] overflow-hidden"> <Card className="border border-slate-800 bg-[#0f1422] overflow-hidden">
<CardHeader className="border-b border-slate-800 flex flex-wrap items-center justify-between gap-4"> <CardHeader className="border-b border-slate-800 flex flex-wrap items-center justify-between gap-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@@ -379,7 +390,6 @@ export default function Dashboard() {
</div> </div>
<div className="flex items-center gap-3 flex-wrap"> <div className="flex items-center gap-3 flex-wrap">
{/* Filter Pills */}
<div className="flex items-center p-1 rounded-xl bg-slate-900 border border-slate-800"> <div className="flex items-center p-1 rounded-xl bg-slate-900 border border-slate-800">
{(['all', 'active', 'completed', 'failed'] as const).map((f) => ( {(['all', 'active', 'completed', 'failed'] as const).map((f) => (
<button <button
@@ -537,7 +547,7 @@ export default function Dashboard() {
)} )}
</Card> </Card>
{/* 5. Live-Log Section */} {/* 4. Live-Log Section */}
<LiveLogSection /> <LiveLogSection />
<JobDetailModal jobId={detailJobId} onClose={() => setDetailJobId(null)} /> <JobDetailModal jobId={detailJobId} onClose={() => setDetailJobId(null)} />