5a31f52310
Services: Admin-Lehrer, Backend-Lehrer, Studio v2, Website, Klausur-Service, School-Service, Voice-Service, Geo-Service, BreakPilot Drive, Agent-Core Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
364 lines
14 KiB
TypeScript
364 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
import { useTheme } from '@/lib/ThemeContext'
|
|
import { useLanguage } from '@/lib/LanguageContext'
|
|
import { useWorksheet } from '@/lib/worksheet-editor/WorksheetContext'
|
|
|
|
interface Session {
|
|
id: string
|
|
name: string
|
|
description?: string
|
|
vocabulary_count: number
|
|
page_count: number
|
|
status: string
|
|
created_at?: string
|
|
}
|
|
|
|
interface DocumentImporterProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
export function DocumentImporter({ isOpen, onClose }: DocumentImporterProps) {
|
|
const { isDark } = useTheme()
|
|
const { t } = useLanguage()
|
|
const { canvas, saveToHistory } = useWorksheet()
|
|
|
|
const [sessions, setSessions] = useState<Session[]>([])
|
|
const [selectedSession, setSelectedSession] = useState<Session | null>(null)
|
|
const [selectedPage, setSelectedPage] = useState(1)
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const [isImporting, setIsImporting] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [includeImages, setIncludeImages] = useState(true)
|
|
|
|
// Load available sessions
|
|
const loadSessions = useCallback(async () => {
|
|
setIsLoading(true)
|
|
setError(null)
|
|
|
|
try {
|
|
const { hostname, protocol } = window.location
|
|
const apiBase = hostname === 'localhost' ? 'http://localhost:8086' : `${protocol}//${hostname}:8086`
|
|
const response = await fetch(`${apiBase}/api/v1/worksheet/sessions/available`)
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}`)
|
|
}
|
|
|
|
const data = await response.json()
|
|
setSessions(data.sessions || [])
|
|
} catch (err) {
|
|
console.error('Failed to load sessions:', err)
|
|
setError('Konnte Sessions nicht laden. Ist der Server erreichbar?')
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
loadSessions()
|
|
}
|
|
}, [isOpen, loadSessions])
|
|
|
|
// Handle import
|
|
const handleImport = async () => {
|
|
if (!selectedSession || !canvas) return
|
|
|
|
setIsImporting(true)
|
|
setError(null)
|
|
|
|
try {
|
|
const { hostname, protocol } = window.location
|
|
const apiBase = hostname === 'localhost' ? 'http://localhost:8086' : `${protocol}//${hostname}:8086`
|
|
const response = await fetch(`${apiBase}/api/v1/worksheet/reconstruct-from-session`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
session_id: selectedSession.id,
|
|
page_number: selectedPage,
|
|
include_images: includeImages,
|
|
regenerate_graphics: false
|
|
})
|
|
})
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json().catch(() => ({ detail: 'Unknown error' }))
|
|
throw new Error(errorData.detail || `HTTP ${response.status}`)
|
|
}
|
|
|
|
const result = await response.json()
|
|
|
|
// Load canvas JSON
|
|
if (result.canvas_json) {
|
|
const canvasData = JSON.parse(result.canvas_json)
|
|
|
|
// Clear current canvas and load new content
|
|
canvas.clear()
|
|
canvas.loadFromJSON(canvasData, () => {
|
|
canvas.renderAll()
|
|
saveToHistory(`Imported: ${selectedSession.name} Page ${selectedPage}`)
|
|
})
|
|
|
|
// Close modal
|
|
onClose()
|
|
}
|
|
} catch (err) {
|
|
console.error('Import failed:', err)
|
|
setError(err instanceof Error ? err.message : 'Import fehlgeschlagen')
|
|
} finally {
|
|
setIsImporting(false)
|
|
}
|
|
}
|
|
|
|
if (!isOpen) return null
|
|
|
|
// Glassmorphism styles
|
|
const overlayStyle = 'fixed inset-0 bg-black/50 backdrop-blur-sm z-50'
|
|
const modalStyle = isDark
|
|
? 'backdrop-blur-xl bg-white/10 border border-white/20'
|
|
: 'backdrop-blur-xl bg-white/90 border border-black/10 shadow-2xl'
|
|
|
|
const cardStyle = (selected: boolean) => isDark
|
|
? selected
|
|
? 'bg-purple-500/30 border-purple-400/50'
|
|
: 'bg-white/5 border-white/10 hover:bg-white/10'
|
|
: selected
|
|
? 'bg-purple-100 border-purple-300'
|
|
: 'bg-white/50 border-slate-200 hover:bg-slate-50'
|
|
|
|
const labelStyle = isDark ? 'text-white/70' : 'text-slate-600'
|
|
|
|
return (
|
|
<div className={overlayStyle} onClick={onClose}>
|
|
<div
|
|
className={`fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl max-h-[80vh] rounded-3xl p-6 overflow-hidden flex flex-col ${modalStyle}`}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
|
|
isDark ? 'bg-blue-500/20' : 'bg-blue-100'
|
|
}`}>
|
|
<svg className={`w-7 h-7 ${isDark ? 'text-blue-300' : 'text-blue-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
|
Dokument importieren
|
|
</h2>
|
|
<p className={`text-sm ${labelStyle}`}>
|
|
Rekonstruiere ein Arbeitsblatt aus einer Vokabel-Session
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className={`p-2 rounded-xl transition-colors ${
|
|
isDark ? 'hover:bg-white/10 text-white/70' : 'hover:bg-slate-100 text-slate-500'
|
|
}`}
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
{/* Loading State */}
|
|
{isLoading && (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="w-8 h-8 border-4 border-purple-400 border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Error State */}
|
|
{error && (
|
|
<div className={`p-4 rounded-xl mb-4 ${
|
|
isDark ? 'bg-red-500/20 text-red-300' : 'bg-red-50 text-red-700'
|
|
}`}>
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* No Sessions */}
|
|
{!isLoading && sessions.length === 0 && (
|
|
<div className={`text-center py-12 ${labelStyle}`}>
|
|
<svg className="w-16 h-16 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
<p className="text-lg font-medium mb-2">Keine Sessions gefunden</p>
|
|
<p className="text-sm opacity-70">
|
|
Verarbeite zuerst ein Dokument im Vokabel-Arbeitsblatt Generator
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Session List */}
|
|
{!isLoading && sessions.length > 0 && (
|
|
<div className="space-y-3">
|
|
<label className={`block text-sm font-medium mb-2 ${labelStyle}`}>
|
|
Wähle eine Session:
|
|
</label>
|
|
|
|
{sessions.map((session) => (
|
|
<button
|
|
key={session.id}
|
|
onClick={() => {
|
|
setSelectedSession(session)
|
|
setSelectedPage(1)
|
|
}}
|
|
className={`w-full p-4 rounded-xl border text-left transition-all ${cardStyle(selectedSession?.id === session.id)}`}
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
<h3 className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
|
{session.name}
|
|
</h3>
|
|
{session.description && (
|
|
<p className={`text-sm mt-1 ${labelStyle}`}>
|
|
{session.description}
|
|
</p>
|
|
)}
|
|
<div className={`flex items-center gap-4 mt-2 text-xs ${labelStyle}`}>
|
|
<span className="flex items-center gap-1">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
|
</svg>
|
|
{session.vocabulary_count} Vokabeln
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
|
</svg>
|
|
{session.page_count} Seiten
|
|
</span>
|
|
<span className={`px-2 py-0.5 rounded-full ${
|
|
session.status === 'completed'
|
|
? isDark ? 'bg-green-500/20 text-green-300' : 'bg-green-100 text-green-700'
|
|
: isDark ? 'bg-yellow-500/20 text-yellow-300' : 'bg-yellow-100 text-yellow-700'
|
|
}`}>
|
|
{session.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{selectedSession?.id === session.id && (
|
|
<div className={`w-6 h-6 rounded-full flex items-center justify-center ${
|
|
isDark ? 'bg-purple-500' : 'bg-purple-600'
|
|
}`}>
|
|
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Page Selection */}
|
|
{selectedSession && selectedSession.page_count > 1 && (
|
|
<div className="mt-6">
|
|
<label className={`block text-sm font-medium mb-2 ${labelStyle}`}>
|
|
Welche Seite importieren?
|
|
</label>
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{Array.from({ length: selectedSession.page_count }, (_, i) => i + 1).map((page) => (
|
|
<button
|
|
key={page}
|
|
onClick={() => setSelectedPage(page)}
|
|
className={`w-10 h-10 rounded-lg font-medium transition-all ${
|
|
selectedPage === page
|
|
? isDark
|
|
? 'bg-purple-500 text-white'
|
|
: 'bg-purple-600 text-white'
|
|
: isDark
|
|
? 'bg-white/10 text-white/70 hover:bg-white/20'
|
|
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
{page}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Options */}
|
|
{selectedSession && (
|
|
<div className="mt-6 space-y-3">
|
|
<label className={`block text-sm font-medium mb-2 ${labelStyle}`}>
|
|
Optionen:
|
|
</label>
|
|
|
|
<label className={`flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-all ${
|
|
isDark
|
|
? 'bg-white/5 border-white/10 hover:bg-white/10'
|
|
: 'bg-white/50 border-slate-200 hover:bg-slate-50'
|
|
}`}>
|
|
<input
|
|
type="checkbox"
|
|
checked={includeImages}
|
|
onChange={(e) => setIncludeImages(e.target.checked)}
|
|
className="w-5 h-5 rounded"
|
|
/>
|
|
<div>
|
|
<span className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
|
Bilder extrahieren
|
|
</span>
|
|
<p className={`text-sm ${labelStyle}`}>
|
|
Versuche Grafiken aus dem Original-PDF zu übernehmen
|
|
</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="mt-6 flex items-center justify-end gap-3">
|
|
<button
|
|
onClick={onClose}
|
|
className={`px-5 py-2.5 rounded-xl font-medium transition-colors ${
|
|
isDark
|
|
? 'bg-white/10 text-white hover:bg-white/20'
|
|
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
onClick={handleImport}
|
|
disabled={!selectedSession || isImporting}
|
|
className={`px-5 py-2.5 rounded-xl font-medium transition-all flex items-center gap-2 ${
|
|
isDark
|
|
? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:shadow-lg hover:shadow-purple-500/30'
|
|
: 'bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:shadow-lg hover:shadow-purple-600/30'
|
|
} disabled:opacity-50 disabled:cursor-not-allowed`}
|
|
>
|
|
{isImporting ? (
|
|
<>
|
|
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
|
Rekonstruiere...
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
|
</svg>
|
|
Importieren
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|