rippy-ui-modern: API UI Modernisiert & Import-Fixes
- Doppelte Arcane-Einträge behoben (rippy statt Rippy) - Import-Fixes: relative → absolute imports in main.py, cache/__init__.py, prescan/__init__.py, clients/__init__.py - Neue Dateien: cache.py, prescan.py, Settings.tsx - API-Port 8000 in docker-compose.yml gemappt - UI mit Sidebar, Dark Mode, Einstellungen-Tabs Fixes: #2978 (doppelte Einträge), #2888 (Import-Fehler)
This commit is contained in:
Hitonabi
@@ -1,7 +1,6 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import axios from 'axios'
|
||||
import { Clock, Activity, HardDrive, BarChart, AlertCircle, CheckCircle } from 'lucide-react'
|
||||
import type { LucideIcon } from 'lucide-react'
|
||||
import { Clock, Activity, HardDrive, BarChart, AlertCircle, CheckCircle, Disc, Play, Pause, SkipForward } from 'lucide-react'
|
||||
|
||||
interface Job {
|
||||
id: string
|
||||
@@ -11,6 +10,7 @@ interface Job {
|
||||
startTime: string
|
||||
endTime?: string
|
||||
progress: number
|
||||
title?: string
|
||||
}
|
||||
|
||||
interface Device {
|
||||
@@ -43,33 +43,56 @@ async function fetchDevices(): Promise<Device[]> {
|
||||
|
||||
function StatusBadge({ status }: { status: string }) {
|
||||
const styles = {
|
||||
pending: 'bg-yellow-100 text-yellow-800',
|
||||
processing: 'bg-blue-100 text-blue-800',
|
||||
completed: 'bg-green-100 text-green-800',
|
||||
failed: 'bg-red-100 text-red-800',
|
||||
pending: 'bg-amber-100 text-amber-700 ring-amber-600/20',
|
||||
processing: 'bg-blue-100 text-blue-700 ring-blue-600/20',
|
||||
completed: 'bg-emerald-100 text-emerald-700 ring-emerald-600/20',
|
||||
failed: 'bg-rose-100 text-rose-700 ring-rose-600/20',
|
||||
}
|
||||
|
||||
const labels = {
|
||||
pending: 'In Warteschlange',
|
||||
processing: 'In Bearbeitung',
|
||||
completed: 'Abgeschlossen',
|
||||
failed: 'Fehlgeschlagen',
|
||||
pending: 'Wartend',
|
||||
processing: 'Bearbeitung',
|
||||
completed: 'Fertig',
|
||||
failed: 'Fehler',
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${styles[status as keyof typeof styles] || 'bg-gray-100 text-gray-800'}`}>
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ring-1 ring-inset ${styles[status as keyof typeof styles] || 'bg-gray-100 text-gray-700 ring-gray-600/10'}`}>
|
||||
{labels[status as keyof typeof labels] || status}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function TypeBadge({ type }: { type: string }) {
|
||||
const icons = {
|
||||
cd: Disc,
|
||||
dvd: Disc,
|
||||
bluray: Disc,
|
||||
}
|
||||
const Icon = icons[type as keyof typeof icons] || Disc
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium bg-slate-100 text-slate-700">
|
||||
<Icon size={14} />
|
||||
{type.toUpperCase()}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function ProgressBar({ progress }: { progress: number }) {
|
||||
return (
|
||||
<div className="w-full bg-gray-200 rounded-full h-2.5">
|
||||
<div
|
||||
className="bg-blue-600 h-2.5 rounded-full transition-all duration-300"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
<div className="w-32">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs font-medium text-slate-500">Fortschritt</span>
|
||||
<span className="text-xs font-medium text-slate-900">{progress}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-slate-200 rounded-full h-2 overflow-hidden">
|
||||
<div
|
||||
className={`h-2 rounded-full transition-all duration-500 ease-out ${
|
||||
progress === 100 ? 'bg-emerald-500' : 'bg-gradient-to-r from-indigo-500 to-purple-600'
|
||||
}`}
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -107,112 +130,181 @@ export default function Dashboard() {
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
|
||||
<p className="text-gray-600 mt-1">Übersicht über alle Ripping-Jobs und Geräte</p>
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-3xl font-bold text-slate-900">Dashboard</h1>
|
||||
<p className="text-slate-500">Übersicht über alle Ripping-Jobs und Geräte</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
<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()}
|
||||
color="yellow"
|
||||
color="amber"
|
||||
/>
|
||||
<StatCard
|
||||
icon={Activity}
|
||||
label="In Bearbeitung"
|
||||
label="Bearbeitung"
|
||||
value={stats.processing.toString()}
|
||||
color="blue"
|
||||
/>
|
||||
<StatCard
|
||||
icon={CheckCircle}
|
||||
label="Abgeschlossen"
|
||||
label="Fertig"
|
||||
value={stats.completed.toString()}
|
||||
color="green"
|
||||
color="emerald"
|
||||
/>
|
||||
<StatCard
|
||||
icon={AlertCircle}
|
||||
label="Fehlgeschlagen"
|
||||
label="Fehler"
|
||||
value={stats.failed.toString()}
|
||||
color="red"
|
||||
color="rose"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-slate-900 mb-4">Schnellaktionen</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border border-slate-200 hover:border-indigo-500 hover:bg-indigo-50 transition-all group">
|
||||
<div className="p-3 bg-indigo-100 rounded-full group-hover:bg-indigo-200 transition-colors">
|
||||
<Disc className="text-indigo-600" size={24} />
|
||||
</div>
|
||||
<span className="text-sm font-medium text-slate-700">Neuer Job</span>
|
||||
</button>
|
||||
<button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50 transition-all group">
|
||||
<div className="p-3 bg-emerald-100 rounded-full group-hover:bg-emerald-200 transition-colors">
|
||||
<Play className="text-emerald-600" size={24} />
|
||||
</div>
|
||||
<span className="text-sm font-medium text-slate-700">Alle starten</span>
|
||||
</button>
|
||||
<button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border border-slate-200 hover:border-amber-500 hover:bg-amber-50 transition-all group">
|
||||
<div className="p-3 bg-amber-100 rounded-full group-hover:bg-amber-200 transition-colors">
|
||||
<Pause className="text-amber-600" size={24} />
|
||||
</div>
|
||||
<span className="text-sm font-medium text-slate-700">Pausieren</span>
|
||||
</button>
|
||||
<button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border border-slate-200 hover:border-rose-500 hover:bg-rose-50 transition-all group">
|
||||
<div className="p-3 bg-rose-100 rounded-full group-hover:bg-rose-200 transition-colors">
|
||||
<SkipForward className="text-rose-600" size={24} />
|
||||
</div>
|
||||
<span className="text-sm font-medium text-slate-700">Überspringen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Devices */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-4">Geräte</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-slate-200">
|
||||
<h2 className="text-lg font-semibold text-slate-900">Geräte</h2>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
{devices.length === 0 ? (
|
||||
<div className="text-gray-500">Keine Geräte gefunden</div>
|
||||
) : (
|
||||
devices.map(device => (
|
||||
<div key={device.id} className="bg-white p-4 rounded-lg shadow">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="font-medium">{device.name}</h3>
|
||||
<span className="text-sm text-gray-500 capitalize">{device.type}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<HardDrive size={16} />
|
||||
<span>{device.path}</span>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${
|
||||
device.status === 'empty' ? 'bg-gray-100 text-gray-600' :
|
||||
device.status === 'ready' ? 'bg-green-100 text-green-700' :
|
||||
'bg-blue-100 text-blue-700'
|
||||
}`}>
|
||||
{device.status === 'empty' ? 'Leer' :
|
||||
device.status === 'ready' ? 'Bereit' :
|
||||
'Rippt'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-center py-12">
|
||||
<div className="mx-auto w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mb-4">
|
||||
<HardDrive className="text-slate-400" size={32} />
|
||||
</div>
|
||||
))
|
||||
<p className="text-slate-500">Keine Geräte gefunden</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{devices.map(device => (
|
||||
<div key={device.id} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-2 rounded-lg ${
|
||||
device.type === 'cd' ? 'bg-blue-100 text-blue-600' :
|
||||
device.type === 'dvd' ? 'bg-purple-100 text-purple-600' :
|
||||
'bg-pink-100 text-pink-600'
|
||||
}`}>
|
||||
<Disc size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-slate-900">{device.name}</h3>
|
||||
<p className="text-xs text-slate-500 font-mono">{device.path}</p>
|
||||
</div>
|
||||
</div>
|
||||
<TypeBadge type={device.type} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
<span className={`px-2.5 py-1 rounded-md text-xs font-medium ${
|
||||
device.status === 'empty' ? 'bg-slate-100 text-slate-600' :
|
||||
device.status === 'ready' ? 'bg-emerald-100 text-emerald-700' :
|
||||
'bg-blue-100 text-blue-700'
|
||||
}`}>
|
||||
{device.status === 'empty' ? 'Leer' :
|
||||
device.status === 'ready' ? 'Bereit' :
|
||||
'Rippt'}
|
||||
</span>
|
||||
<button className="text-sm font-medium text-indigo-600 hover:text-indigo-700">
|
||||
Details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Jobs */}
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-4">Neueste Jobs</h2>
|
||||
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-slate-900">Neueste Jobs</h2>
|
||||
<span className="text-sm text-slate-500">{jobs.length} Jobs insgesamt</span>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50">
|
||||
<thead className="bg-slate-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Typ</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Gerät</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Fortschritt</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Startzeit</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Typ</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Titel</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Gerät</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Fortschritt</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Startzeit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
<tbody className="divide-y divide-slate-200">
|
||||
{jobs.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-6 py-4 text-center text-gray-500">
|
||||
Keine Jobs vorhanden
|
||||
<td colSpan={6} className="px-6 py-12 text-center">
|
||||
<div className="text-slate-400 mb-2">Noch keine Jobs</div>
|
||||
<p className="text-sm text-slate-500">Füge eine CD, DVD oder Blu-ray hinzu, um zu starten</p>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
jobs.slice(0, 10).map(job => (
|
||||
<tr key={job.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium capitalize">{job.type}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap"><StatusBadge status={job.status} /></td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{job.device}</td>
|
||||
<tr key={job.id} className="hover:bg-slate-50 transition-colors">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<TypeBadge type={job.type} />
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm font-medium text-slate-900">
|
||||
{job.title || 'Unbekannt'}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<StatusBadge status={job.status} />
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
|
||||
{job.device}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<ProgressBar progress={job.progress} />
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
|
||||
{new Date(job.startTime).toLocaleString('de-DE')}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -226,21 +318,30 @@ export default function Dashboard() {
|
||||
)
|
||||
}
|
||||
|
||||
function StatCard({ icon: Icon, label, value, color }: { icon: LucideIcon, label: string, value: string, color: string }) {
|
||||
function StatCard({ icon: Icon, label, value, color }: { icon: any, label: string, value: string, color: string }) {
|
||||
const colors = {
|
||||
yellow: 'bg-yellow-50 text-yellow-600',
|
||||
blue: 'bg-blue-50 text-blue-600',
|
||||
green: 'bg-green-50 text-green-600',
|
||||
red: 'bg-red-50 text-red-600',
|
||||
amber: 'bg-amber-500',
|
||||
blue: 'bg-blue-500',
|
||||
emerald: 'bg-emerald-500',
|
||||
rose: 'bg-rose-500',
|
||||
}
|
||||
|
||||
const textColors = {
|
||||
amber: 'text-amber-600',
|
||||
blue: 'text-blue-600',
|
||||
emerald: 'text-emerald-600',
|
||||
rose: 'text-rose-600',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`p-4 rounded-lg ${colors[color as keyof typeof colors]}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
<Icon size={24} />
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 hover:shadow-md transition-shadow">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`${colors[color as keyof typeof colors]} p-3 rounded-lg`}>
|
||||
<Icon className={`${textColors[color as keyof typeof textColors]} w-6 h-6`} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium opacity-90">{label}</p>
|
||||
<p className="text-2xl font-bold">{value}</p>
|
||||
<p className="text-sm font-medium text-slate-500">{label}</p>
|
||||
<p className="text-3xl font-bold text-slate-900">{value}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user