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
438
studio-v2/components/geo-lernwelt/AOISelector.tsx
Normal file
438
studio-v2/components/geo-lernwelt/AOISelector.tsx
Normal file
@@ -0,0 +1,438 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useRef, useState, useCallback } from 'react'
|
||||
import { GeoJSONPolygon } from '@/app/geo-lernwelt/types'
|
||||
|
||||
// MapLibre GL JS types (imported dynamically)
|
||||
type MapInstance = {
|
||||
on: (event: string, callback: (...args: unknown[]) => void) => void
|
||||
addSource: (id: string, source: object) => void
|
||||
addLayer: (layer: object) => void
|
||||
getSource: (id: string) => { setData: (data: object) => void } | undefined
|
||||
removeLayer: (id: string) => void
|
||||
removeSource: (id: string) => void
|
||||
getCanvas: () => { style: { cursor: string } }
|
||||
remove: () => void
|
||||
fitBounds: (bounds: [[number, number], [number, number]], options?: object) => void
|
||||
}
|
||||
|
||||
interface AOISelectorProps {
|
||||
onPolygonDrawn: (polygon: GeoJSONPolygon) => void
|
||||
initialPolygon?: GeoJSONPolygon | null
|
||||
maxAreaKm2?: number
|
||||
geoServiceUrl: string
|
||||
}
|
||||
|
||||
// Germany bounds
|
||||
const GERMANY_BOUNDS: [[number, number], [number, number]] = [
|
||||
[5.87, 47.27],
|
||||
[15.04, 55.06],
|
||||
]
|
||||
|
||||
// Default center (Germany)
|
||||
const DEFAULT_CENTER: [number, number] = [10.45, 51.16]
|
||||
const DEFAULT_ZOOM = 6
|
||||
|
||||
export default function AOISelector({
|
||||
onPolygonDrawn,
|
||||
initialPolygon,
|
||||
maxAreaKm2 = 4,
|
||||
geoServiceUrl,
|
||||
}: AOISelectorProps) {
|
||||
const mapContainerRef = useRef<HTMLDivElement>(null)
|
||||
const mapRef = useRef<MapInstance | null>(null)
|
||||
const [isDrawing, setIsDrawing] = useState(false)
|
||||
const [drawPoints, setDrawPoints] = useState<[number, number][]>([])
|
||||
const [mapReady, setMapReady] = useState(false)
|
||||
const [areaKm2, setAreaKm2] = useState<number | null>(null)
|
||||
const [validationError, setValidationError] = useState<string | null>(null)
|
||||
|
||||
// Initialize map
|
||||
useEffect(() => {
|
||||
if (!mapContainerRef.current) return
|
||||
|
||||
const initMap = async () => {
|
||||
const maplibregl = await import('maplibre-gl')
|
||||
// CSS is loaded via CDN in head to avoid Next.js dynamic import issues
|
||||
if (!document.querySelector('link[href*="maplibre-gl.css"]')) {
|
||||
const link = document.createElement('link')
|
||||
link.rel = 'stylesheet'
|
||||
link.href = 'https://unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css'
|
||||
document.head.appendChild(link)
|
||||
}
|
||||
|
||||
const map = new maplibregl.Map({
|
||||
container: mapContainerRef.current!,
|
||||
style: {
|
||||
version: 8,
|
||||
name: 'GeoEdu Map',
|
||||
sources: {
|
||||
osm: {
|
||||
type: 'raster',
|
||||
tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
|
||||
tileSize: 256,
|
||||
attribution: '© OpenStreetMap contributors',
|
||||
},
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
id: 'osm-tiles',
|
||||
type: 'raster',
|
||||
source: 'osm',
|
||||
minzoom: 0,
|
||||
maxzoom: 19,
|
||||
},
|
||||
],
|
||||
},
|
||||
center: DEFAULT_CENTER,
|
||||
zoom: DEFAULT_ZOOM,
|
||||
maxBounds: [
|
||||
[GERMANY_BOUNDS[0][0] - 1, GERMANY_BOUNDS[0][1] - 1],
|
||||
[GERMANY_BOUNDS[1][0] + 1, GERMANY_BOUNDS[1][1] + 1],
|
||||
],
|
||||
}) as unknown as MapInstance
|
||||
|
||||
map.on('load', () => {
|
||||
// Add drawing layer sources
|
||||
map.addSource('draw-polygon', {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: [],
|
||||
},
|
||||
})
|
||||
|
||||
map.addSource('draw-points', {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: [],
|
||||
},
|
||||
})
|
||||
|
||||
// Add polygon fill layer
|
||||
map.addLayer({
|
||||
id: 'draw-polygon-fill',
|
||||
type: 'fill',
|
||||
source: 'draw-polygon',
|
||||
paint: {
|
||||
'fill-color': '#3b82f6',
|
||||
'fill-opacity': 0.3,
|
||||
},
|
||||
})
|
||||
|
||||
// Add polygon outline layer
|
||||
map.addLayer({
|
||||
id: 'draw-polygon-outline',
|
||||
type: 'line',
|
||||
source: 'draw-polygon',
|
||||
paint: {
|
||||
'line-color': '#3b82f6',
|
||||
'line-width': 2,
|
||||
},
|
||||
})
|
||||
|
||||
// Add points layer
|
||||
map.addLayer({
|
||||
id: 'draw-points-layer',
|
||||
type: 'circle',
|
||||
source: 'draw-points',
|
||||
paint: {
|
||||
'circle-radius': 6,
|
||||
'circle-color': '#3b82f6',
|
||||
'circle-stroke-color': '#ffffff',
|
||||
'circle-stroke-width': 2,
|
||||
},
|
||||
})
|
||||
|
||||
mapRef.current = map
|
||||
setMapReady(true)
|
||||
|
||||
// Load initial polygon if provided
|
||||
if (initialPolygon) {
|
||||
loadPolygon(map, initialPolygon)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
initMap()
|
||||
|
||||
return () => {
|
||||
if (mapRef.current) {
|
||||
mapRef.current.remove()
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Update polygon when initialPolygon changes
|
||||
useEffect(() => {
|
||||
if (mapReady && mapRef.current && initialPolygon) {
|
||||
loadPolygon(mapRef.current, initialPolygon)
|
||||
}
|
||||
}, [initialPolygon, mapReady])
|
||||
|
||||
const loadPolygon = (map: MapInstance, polygon: GeoJSONPolygon) => {
|
||||
const source = map.getSource('draw-polygon')
|
||||
if (source) {
|
||||
source.setData({
|
||||
type: 'Feature',
|
||||
geometry: polygon,
|
||||
properties: {},
|
||||
})
|
||||
}
|
||||
|
||||
// Calculate and validate area
|
||||
validatePolygon(polygon)
|
||||
|
||||
// Fit bounds to polygon
|
||||
const coords = polygon.coordinates[0]
|
||||
const bounds = coords.reduce<[[number, number], [number, number]]>(
|
||||
(acc, coord) => [
|
||||
[Math.min(acc[0][0], coord[0]), Math.min(acc[0][1], coord[1])],
|
||||
[Math.max(acc[1][0], coord[0]), Math.max(acc[1][1], coord[1])],
|
||||
],
|
||||
[
|
||||
[Infinity, Infinity],
|
||||
[-Infinity, -Infinity],
|
||||
]
|
||||
)
|
||||
|
||||
map.fitBounds(bounds, { padding: 50 })
|
||||
}
|
||||
|
||||
const validatePolygon = async (polygon: GeoJSONPolygon) => {
|
||||
try {
|
||||
const res = await fetch(`${geoServiceUrl}/api/v1/aoi/validate`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(polygon),
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setAreaKm2(data.area_km2)
|
||||
|
||||
if (!data.valid) {
|
||||
setValidationError(data.error || 'Ungueltiges Polygon')
|
||||
} else if (!data.within_germany) {
|
||||
setValidationError('Gebiet muss innerhalb Deutschlands liegen')
|
||||
} else if (!data.within_size_limit) {
|
||||
setValidationError(`Gebiet zu gross (max. ${maxAreaKm2} km²)`)
|
||||
} else {
|
||||
setValidationError(null)
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// Fallback to client-side calculation
|
||||
console.error('Validation error:', e)
|
||||
}
|
||||
}
|
||||
|
||||
const handleMapClick = useCallback(
|
||||
(e: { lngLat: { lng: number; lat: number } }) => {
|
||||
if (!isDrawing || !mapRef.current) return
|
||||
|
||||
const newPoint: [number, number] = [e.lngLat.lng, e.lngLat.lat]
|
||||
const newPoints = [...drawPoints, newPoint]
|
||||
setDrawPoints(newPoints)
|
||||
|
||||
// Update points layer
|
||||
const pointsSource = mapRef.current.getSource('draw-points')
|
||||
if (pointsSource) {
|
||||
pointsSource.setData({
|
||||
type: 'FeatureCollection',
|
||||
features: newPoints.map((pt) => ({
|
||||
type: 'Feature',
|
||||
geometry: { type: 'Point', coordinates: pt },
|
||||
properties: {},
|
||||
})),
|
||||
})
|
||||
}
|
||||
|
||||
// Update polygon preview if we have at least 3 points
|
||||
if (newPoints.length >= 3) {
|
||||
const polygonCoords = [...newPoints, newPoints[0]]
|
||||
const polygonSource = mapRef.current.getSource('draw-polygon')
|
||||
if (polygonSource) {
|
||||
polygonSource.setData({
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [polygonCoords],
|
||||
},
|
||||
properties: {},
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
[isDrawing, drawPoints]
|
||||
)
|
||||
|
||||
// Attach click handler when drawing
|
||||
useEffect(() => {
|
||||
if (!mapReady || !mapRef.current) return
|
||||
|
||||
const map = mapRef.current
|
||||
|
||||
if (isDrawing) {
|
||||
map.getCanvas().style.cursor = 'crosshair'
|
||||
map.on('click', handleMapClick as (...args: unknown[]) => void)
|
||||
} else {
|
||||
map.getCanvas().style.cursor = ''
|
||||
}
|
||||
|
||||
return () => {
|
||||
// Note: maplibre doesn't have off() in the same way, handled by cleanup
|
||||
}
|
||||
}, [isDrawing, mapReady, handleMapClick])
|
||||
|
||||
const startDrawing = () => {
|
||||
setIsDrawing(true)
|
||||
setDrawPoints([])
|
||||
setAreaKm2(null)
|
||||
setValidationError(null)
|
||||
|
||||
// Clear existing polygon
|
||||
if (mapRef.current) {
|
||||
const polygonSource = mapRef.current.getSource('draw-polygon')
|
||||
const pointsSource = mapRef.current.getSource('draw-points')
|
||||
if (polygonSource) {
|
||||
polygonSource.setData({ type: 'FeatureCollection', features: [] })
|
||||
}
|
||||
if (pointsSource) {
|
||||
pointsSource.setData({ type: 'FeatureCollection', features: [] })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const finishDrawing = () => {
|
||||
if (drawPoints.length < 3) {
|
||||
setValidationError('Mindestens 3 Punkte erforderlich')
|
||||
return
|
||||
}
|
||||
|
||||
setIsDrawing(false)
|
||||
|
||||
// Close the polygon
|
||||
const closedCoords = [...drawPoints, drawPoints[0]]
|
||||
const polygon: GeoJSONPolygon = {
|
||||
type: 'Polygon',
|
||||
coordinates: [closedCoords],
|
||||
}
|
||||
|
||||
// Clear points layer
|
||||
if (mapRef.current) {
|
||||
const pointsSource = mapRef.current.getSource('draw-points')
|
||||
if (pointsSource) {
|
||||
pointsSource.setData({ type: 'FeatureCollection', features: [] })
|
||||
}
|
||||
}
|
||||
|
||||
// Validate and callback
|
||||
validatePolygon(polygon)
|
||||
onPolygonDrawn(polygon)
|
||||
}
|
||||
|
||||
const cancelDrawing = () => {
|
||||
setIsDrawing(false)
|
||||
setDrawPoints([])
|
||||
|
||||
// Clear layers
|
||||
if (mapRef.current) {
|
||||
const polygonSource = mapRef.current.getSource('draw-polygon')
|
||||
const pointsSource = mapRef.current.getSource('draw-points')
|
||||
if (polygonSource) {
|
||||
polygonSource.setData({ type: 'FeatureCollection', features: [] })
|
||||
}
|
||||
if (pointsSource) {
|
||||
pointsSource.setData({ type: 'FeatureCollection', features: [] })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full">
|
||||
{/* Map Container */}
|
||||
<div ref={mapContainerRef} className="w-full h-full" />
|
||||
|
||||
{/* Drawing Toolbar */}
|
||||
<div className="absolute top-4 left-4 flex gap-2">
|
||||
{!isDrawing ? (
|
||||
<button
|
||||
onClick={startDrawing}
|
||||
className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg shadow-lg transition-colors flex items-center gap-2"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
|
||||
/>
|
||||
</svg>
|
||||
Gebiet zeichnen
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={finishDrawing}
|
||||
disabled={drawPoints.length < 3}
|
||||
className="px-4 py-2 bg-green-500 hover:bg-green-600 disabled:bg-gray-500 text-white rounded-lg shadow-lg transition-colors"
|
||||
>
|
||||
✓ Fertig ({drawPoints.length} Punkte)
|
||||
</button>
|
||||
<button
|
||||
onClick={cancelDrawing}
|
||||
className="px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg shadow-lg transition-colors"
|
||||
>
|
||||
✕ Abbrechen
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Drawing Instructions */}
|
||||
{isDrawing && (
|
||||
<div className="absolute top-4 right-4 bg-black/70 text-white px-4 py-2 rounded-lg text-sm max-w-xs">
|
||||
<p>Klicke auf die Karte um Punkte zu setzen.</p>
|
||||
<p className="text-white/60 mt-1">Mindestens 3 Punkte erforderlich.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Area Info */}
|
||||
{areaKm2 !== null && (
|
||||
<div className="absolute bottom-4 left-4 bg-black/70 text-white px-4 py-2 rounded-lg">
|
||||
<div className="text-sm">
|
||||
<span className="text-white/60">Flaeche: </span>
|
||||
<span className={areaKm2 > maxAreaKm2 ? 'text-red-400' : 'text-green-400'}>
|
||||
{areaKm2.toFixed(2)} km²
|
||||
</span>
|
||||
<span className="text-white/40"> / {maxAreaKm2} km² max</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Validation Error */}
|
||||
{validationError && (
|
||||
<div className="absolute bottom-4 right-4 bg-red-500/90 text-white px-4 py-2 rounded-lg text-sm max-w-xs">
|
||||
{validationError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading Overlay */}
|
||||
{!mapReady && (
|
||||
<div className="absolute inset-0 bg-slate-800 flex items-center justify-center">
|
||||
<div className="text-white/60 flex flex-col items-center gap-2">
|
||||
<div className="w-8 h-8 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
<span>Karte wird geladen...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user