fix: Restore all files lost during destructive rebase
A previous `git pull --rebase origin main` dropped 177 local commits,
losing 3400+ files across admin-v2, backend, studio-v2, website,
klausur-service, and many other services. The partial restore attempt
(660295e2) only recovered some files.
This commit restores all missing files from pre-rebase ref 98933f5e
while preserving post-rebase additions (night-scheduler, night-mode UI,
NightModeWidget dashboard integration).
Restored features include:
- AI Module Sidebar (FAB), OCR Labeling, OCR Compare
- GPU Dashboard, RAG Pipeline, Magic Help
- Klausur-Korrektur (8 files), Abitur-Archiv (5+ files)
- Companion, Zeugnisse-Crawler, Screen Flow
- Full backend, studio-v2, website, klausur-service
- All compliance SDKs, agent-core, voice-service
- CI/CD configs, documentation, scripts
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
266
studio-v2/components/CityMap.tsx
Normal file
266
studio-v2/components/CityMap.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import { useTheme } from '@/lib/ThemeContext'
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
// Leaflet Komponente dynamisch laden (nur Client-Side)
|
||||
const CityMapLeaflet = dynamic(
|
||||
() => import('./CityMapLeaflet'),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="h-64 rounded-2xl bg-slate-200 dark:bg-white/10 flex items-center justify-center">
|
||||
<div className="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
interface CityMapProps {
|
||||
bundesland: string
|
||||
bundeslandName: string
|
||||
selectedCity: string
|
||||
onSelectCity: (city: string, lat?: number, lng?: number) => void
|
||||
className?: string
|
||||
}
|
||||
|
||||
// Bundesland-Zentren für initiale Kartenposition
|
||||
const bundeslandCenters: Record<string, { lat: number; lng: number; zoom: number }> = {
|
||||
'SH': { lat: 54.2, lng: 9.9, zoom: 8 },
|
||||
'HH': { lat: 53.55, lng: 10.0, zoom: 11 },
|
||||
'MV': { lat: 53.9, lng: 12.4, zoom: 8 },
|
||||
'HB': { lat: 53.1, lng: 8.8, zoom: 11 },
|
||||
'NI': { lat: 52.8, lng: 9.5, zoom: 7 },
|
||||
'BE': { lat: 52.52, lng: 13.4, zoom: 11 },
|
||||
'BB': { lat: 52.4, lng: 13.2, zoom: 8 },
|
||||
'ST': { lat: 51.9, lng: 11.7, zoom: 8 },
|
||||
'NW': { lat: 51.5, lng: 7.5, zoom: 8 },
|
||||
'HE': { lat: 50.6, lng: 9.0, zoom: 8 },
|
||||
'TH': { lat: 50.9, lng: 11.0, zoom: 8 },
|
||||
'SN': { lat: 51.1, lng: 13.2, zoom: 8 },
|
||||
'RP': { lat: 49.9, lng: 7.5, zoom: 8 },
|
||||
'SL': { lat: 49.4, lng: 7.0, zoom: 9 },
|
||||
'BW': { lat: 48.7, lng: 9.0, zoom: 8 },
|
||||
'BY': { lat: 48.8, lng: 11.5, zoom: 7 },
|
||||
}
|
||||
|
||||
export function CityMap({
|
||||
bundesland,
|
||||
bundeslandName,
|
||||
selectedCity,
|
||||
onSelectCity,
|
||||
className = ''
|
||||
}: CityMapProps) {
|
||||
const { isDark } = useTheme()
|
||||
const [searchQuery, setSearchQuery] = useState(selectedCity || '')
|
||||
const [searchResults, setSearchResults] = useState<any[]>([])
|
||||
const [isSearching, setIsSearching] = useState(false)
|
||||
const [markerPosition, setMarkerPosition] = useState<[number, number] | null>(null)
|
||||
const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null)
|
||||
|
||||
const center = bundeslandCenters[bundesland] || { lat: 51.2, lng: 10.4, zoom: 6 }
|
||||
|
||||
// Nominatim-Suche mit Debouncing
|
||||
const searchCity = useCallback(async (query: string) => {
|
||||
if (query.length < 2) {
|
||||
setSearchResults([])
|
||||
return
|
||||
}
|
||||
|
||||
setIsSearching(true)
|
||||
try {
|
||||
// Nominatim API für Geocoding (OpenStreetMap)
|
||||
const response = await fetch(
|
||||
`https://nominatim.openstreetmap.org/search?` +
|
||||
`q=${encodeURIComponent(query)}, ${bundeslandName}, Deutschland&` +
|
||||
`format=json&addressdetails=1&limit=8&countrycodes=de`,
|
||||
{
|
||||
headers: {
|
||||
'Accept-Language': 'de',
|
||||
}
|
||||
}
|
||||
)
|
||||
const data = await response.json()
|
||||
|
||||
// Filtere nach relevanten Ergebnissen (Städte, Orte, Gemeinden)
|
||||
const filtered = data.filter((item: any) =>
|
||||
item.type === 'city' ||
|
||||
item.type === 'town' ||
|
||||
item.type === 'village' ||
|
||||
item.type === 'municipality' ||
|
||||
item.type === 'administrative' ||
|
||||
item.class === 'place'
|
||||
)
|
||||
|
||||
setSearchResults(filtered.length > 0 ? filtered : data.slice(0, 5))
|
||||
} catch (error) {
|
||||
console.error('Geocoding error:', error)
|
||||
setSearchResults([])
|
||||
} finally {
|
||||
setIsSearching(false)
|
||||
}
|
||||
}, [bundeslandName])
|
||||
|
||||
// Debounced Search
|
||||
useEffect(() => {
|
||||
if (searchTimeoutRef.current) {
|
||||
clearTimeout(searchTimeoutRef.current)
|
||||
}
|
||||
|
||||
searchTimeoutRef.current = setTimeout(() => {
|
||||
searchCity(searchQuery)
|
||||
}, 400)
|
||||
|
||||
return () => {
|
||||
if (searchTimeoutRef.current) {
|
||||
clearTimeout(searchTimeoutRef.current)
|
||||
}
|
||||
}
|
||||
}, [searchQuery, searchCity])
|
||||
|
||||
// Reverse Geocoding bei Kartenklick
|
||||
const handleMapClick = async (lat: number, lng: number) => {
|
||||
setMarkerPosition([lat, lng])
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`https://nominatim.openstreetmap.org/reverse?` +
|
||||
`lat=${lat}&lon=${lng}&format=json&addressdetails=1`,
|
||||
{
|
||||
headers: {
|
||||
'Accept-Language': 'de',
|
||||
}
|
||||
}
|
||||
)
|
||||
const data = await response.json()
|
||||
|
||||
// Extrahiere Stadt/Ort aus der Adresse
|
||||
const city = data.address?.city ||
|
||||
data.address?.town ||
|
||||
data.address?.village ||
|
||||
data.address?.municipality ||
|
||||
data.address?.county ||
|
||||
'Unbekannter Ort'
|
||||
|
||||
setSearchQuery(city)
|
||||
onSelectCity(city, lat, lng)
|
||||
} catch (error) {
|
||||
console.error('Reverse geocoding error:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// Suchergebnis auswählen
|
||||
const handleSelectResult = (result: any) => {
|
||||
const cityName = result.address?.city ||
|
||||
result.address?.town ||
|
||||
result.address?.village ||
|
||||
result.address?.municipality ||
|
||||
result.display_name.split(',')[0]
|
||||
|
||||
setSearchQuery(cityName)
|
||||
setMarkerPosition([parseFloat(result.lat), parseFloat(result.lon)])
|
||||
onSelectCity(cityName, parseFloat(result.lat), parseFloat(result.lon))
|
||||
setSearchResults([])
|
||||
}
|
||||
|
||||
// Manuelle Eingabe bestätigen
|
||||
const handleManualInput = () => {
|
||||
if (searchQuery.trim()) {
|
||||
onSelectCity(searchQuery.trim())
|
||||
setSearchResults([])
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`space-y-4 ${className}`}>
|
||||
{/* Suchfeld */}
|
||||
<div className="relative">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleManualInput()
|
||||
}
|
||||
}}
|
||||
placeholder={`Stadt in ${bundeslandName} suchen...`}
|
||||
className={`w-full px-5 py-4 pl-12 text-lg rounded-2xl border transition-all ${
|
||||
isDark
|
||||
? 'bg-white/10 border-white/20 text-white placeholder-white/40 focus:border-blue-400'
|
||||
: 'bg-white border-slate-300 text-slate-900 placeholder-slate-400 focus:border-blue-500'
|
||||
} focus:outline-none focus:ring-2 focus:ring-blue-500/30`}
|
||||
/>
|
||||
<svg
|
||||
className={`absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 ${
|
||||
isDark ? 'text-white/40' : 'text-slate-400'
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
{isSearching && (
|
||||
<div className={`absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 border-2 border-t-transparent rounded-full animate-spin ${
|
||||
isDark ? 'border-white/40' : 'border-slate-400'
|
||||
}`} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Suchergebnisse Dropdown */}
|
||||
{searchResults.length > 0 && (
|
||||
<div className={`absolute top-full left-0 right-0 mt-2 rounded-xl border shadow-xl z-50 max-h-64 overflow-y-auto ${
|
||||
isDark
|
||||
? 'bg-slate-800/95 border-white/20 backdrop-blur-xl'
|
||||
: 'bg-white/95 border-slate-200 backdrop-blur-xl'
|
||||
}`}>
|
||||
{searchResults.map((result, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => handleSelectResult(result)}
|
||||
className={`w-full px-4 py-3 text-left transition-colors flex items-center gap-3 ${
|
||||
isDark
|
||||
? 'hover:bg-white/10 text-white/90'
|
||||
: 'hover:bg-slate-100 text-slate-800'
|
||||
} ${index > 0 ? (isDark ? 'border-t border-white/10' : 'border-t border-slate-100') : ''}`}
|
||||
>
|
||||
<svg className={`w-4 h-4 flex-shrink-0 ${isDark ? 'text-white/50' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
</svg>
|
||||
<div className="min-w-0">
|
||||
<p className="font-medium truncate">
|
||||
{result.address?.city || result.address?.town || result.address?.village || result.display_name.split(',')[0]}
|
||||
</p>
|
||||
<p className={`text-xs truncate ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
||||
{result.display_name}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Karte */}
|
||||
<div className={`h-64 rounded-2xl overflow-hidden border ${
|
||||
isDark ? 'border-white/20' : 'border-slate-300'
|
||||
}`}>
|
||||
<CityMapLeaflet
|
||||
center={center}
|
||||
zoom={center.zoom}
|
||||
markerPosition={markerPosition}
|
||||
onMapClick={handleMapClick}
|
||||
isDark={isDark}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Hinweis */}
|
||||
<p className={`text-xs text-center ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
|
||||
Tippen Sie den Namen ein oder klicken Sie auf die Karte
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user