v1.1.0: keyboard shortcuts (CH), onboarding tour, admin projects tab, remember-me login, Luftbild CH removed, hose settings in admin, credit link, font Barlow, map auto-save viewport, rate-limit 10/5min
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "lageplan",
|
"name": "lageplan",
|
||||||
"version": "1.0.9",
|
"version": "1.1.0",
|
||||||
"description": "Feuerwehr Lageplan - Krokier-App für Einsatzdokumentation",
|
"description": "Feuerwehr Lageplan - Krokier-App für Einsatzdokumentation",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@@ -58,6 +58,7 @@ import {
|
|||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { TenantDetailDialog } from '@/components/admin/tenant-detail-dialog'
|
import { TenantDetailDialog } from '@/components/admin/tenant-detail-dialog'
|
||||||
|
import { HoseSettingsDialog } from '@/components/dialogs/hose-settings-dialog'
|
||||||
|
|
||||||
// --- Types ---
|
// --- Types ---
|
||||||
interface IconCategory {
|
interface IconCategory {
|
||||||
@@ -214,6 +215,14 @@ export default function AdminPage() {
|
|||||||
const [symbolScaleLoading, setSymbolScaleLoading] = useState(false)
|
const [symbolScaleLoading, setSymbolScaleLoading] = useState(false)
|
||||||
const [symbolScaleStatus, setSymbolScaleStatus] = useState<string | null>(null)
|
const [symbolScaleStatus, setSymbolScaleStatus] = useState<string | null>(null)
|
||||||
|
|
||||||
|
// Admin Projects (SERVER_ADMIN)
|
||||||
|
const [adminProjects, setAdminProjects] = useState<any[]>([])
|
||||||
|
const [adminProjectsLoading, setAdminProjectsLoading] = useState(false)
|
||||||
|
const [adminProjectTenantFilter, setAdminProjectTenantFilter] = useState<string>('all')
|
||||||
|
|
||||||
|
// Hose Settings (Tenant Admin)
|
||||||
|
const [isHoseSettingsOpen, setIsHoseSettingsOpen] = useState(false)
|
||||||
|
|
||||||
// Redirect to login if not authenticated, or to app if not admin
|
// Redirect to login if not authenticated, or to app if not admin
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (authLoading) return
|
if (authLoading) return
|
||||||
@@ -251,6 +260,25 @@ export default function AdminPage() {
|
|||||||
if (user?.role === 'SERVER_ADMIN') fetchGlobalDict()
|
if (user?.role === 'SERVER_ADMIN') fetchGlobalDict()
|
||||||
}, [user?.role])
|
}, [user?.role])
|
||||||
|
|
||||||
|
// Fetch admin projects (SERVER_ADMIN)
|
||||||
|
const fetchAdminProjects = async (tenantFilter?: string) => {
|
||||||
|
setAdminProjectsLoading(true)
|
||||||
|
try {
|
||||||
|
const url = tenantFilter && tenantFilter !== 'all'
|
||||||
|
? `/api/admin/projects?tenantId=${tenantFilter}`
|
||||||
|
: '/api/admin/projects'
|
||||||
|
const res = await fetch(url)
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json()
|
||||||
|
setAdminProjects(data.projects || [])
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
setAdminProjectsLoading(false)
|
||||||
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
if (user?.role === 'SERVER_ADMIN') fetchAdminProjects()
|
||||||
|
}, [user?.role])
|
||||||
|
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
try {
|
try {
|
||||||
@@ -683,11 +711,15 @@ export default function AdminPage() {
|
|||||||
<div className="container mx-auto py-6 px-4 max-w-7xl">
|
<div className="container mx-auto py-6 px-4 max-w-7xl">
|
||||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
|
||||||
{user?.role === 'SERVER_ADMIN' ? (
|
{user?.role === 'SERVER_ADMIN' ? (
|
||||||
<TabsList className="grid w-full grid-cols-6 max-w-3xl">
|
<TabsList className="grid w-full grid-cols-7 max-w-4xl">
|
||||||
<TabsTrigger value="tenants" className="gap-2">
|
<TabsTrigger value="tenants" className="gap-2">
|
||||||
<Shield className="w-4 h-4" />
|
<Shield className="w-4 h-4" />
|
||||||
Mandanten
|
Mandanten
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="projects" className="gap-2">
|
||||||
|
<Map className="w-4 h-4" />
|
||||||
|
Einsätze
|
||||||
|
</TabsTrigger>
|
||||||
<TabsTrigger value="icons" className="gap-2">
|
<TabsTrigger value="icons" className="gap-2">
|
||||||
<Image className="w-4 h-4" />
|
<Image className="w-4 h-4" />
|
||||||
Symbole
|
Symbole
|
||||||
@@ -710,7 +742,7 @@ export default function AdminPage() {
|
|||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
) : user?.role === 'TENANT_ADMIN' ? (
|
) : user?.role === 'TENANT_ADMIN' ? (
|
||||||
<TabsList className="grid w-full grid-cols-5 max-w-2xl">
|
<TabsList className="grid w-full grid-cols-6 max-w-3xl">
|
||||||
<TabsTrigger value="users" className="gap-2">
|
<TabsTrigger value="users" className="gap-2">
|
||||||
<Users className="w-4 h-4" />
|
<Users className="w-4 h-4" />
|
||||||
Benutzer
|
Benutzer
|
||||||
@@ -719,6 +751,10 @@ export default function AdminPage() {
|
|||||||
<ClipboardList className="w-4 h-4" />
|
<ClipboardList className="w-4 h-4" />
|
||||||
Wörterliste
|
Wörterliste
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="hose-types" className="gap-2">
|
||||||
|
<Settings className="w-4 h-4" />
|
||||||
|
Schläuche
|
||||||
|
</TabsTrigger>
|
||||||
<TabsTrigger value="donate" className="gap-2">
|
<TabsTrigger value="donate" className="gap-2">
|
||||||
<Heart className="w-4 h-4" />
|
<Heart className="w-4 h-4" />
|
||||||
Spenden
|
Spenden
|
||||||
@@ -960,6 +996,97 @@ export default function AdminPage() {
|
|||||||
</TabsContent>
|
</TabsContent>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* ===== PROJECTS TAB (SERVER_ADMIN — Einsätze verwalten) ===== */}
|
||||||
|
{user?.role === 'SERVER_ADMIN' && (
|
||||||
|
<TabsContent value="projects" className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{adminProjects.length} Einsatz/Einsätze
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-muted-foreground">Feuerwehr:</span>
|
||||||
|
<Select value={adminProjectTenantFilter} onValueChange={(val) => { setAdminProjectTenantFilter(val); fetchAdminProjects(val) }}>
|
||||||
|
<SelectTrigger className="w-[220px]">
|
||||||
|
<SelectValue placeholder="Alle Mandanten" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">Alle Mandanten</SelectItem>
|
||||||
|
{tenants.map(t => (
|
||||||
|
<SelectItem key={t.id} value={t.id}>{t.name}</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{adminProjectsLoading ? (
|
||||||
|
<div className="flex items-center justify-center py-12">
|
||||||
|
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
) : adminProjects.length === 0 ? (
|
||||||
|
<p className="text-center text-muted-foreground py-8">Keine Einsätze gefunden.</p>
|
||||||
|
) : (
|
||||||
|
<div className="border rounded-lg overflow-hidden">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead className="bg-muted/50">
|
||||||
|
<tr>
|
||||||
|
<th className="text-left px-4 py-2.5 font-medium">Einsatz-Nr</th>
|
||||||
|
<th className="text-left px-4 py-2.5 font-medium">Titel</th>
|
||||||
|
<th className="text-left px-4 py-2.5 font-medium">Ort</th>
|
||||||
|
<th className="text-left px-4 py-2.5 font-medium">Erstellt von</th>
|
||||||
|
<th className="text-left px-4 py-2.5 font-medium">Feuerwehr</th>
|
||||||
|
<th className="text-left px-4 py-2.5 font-medium">Elemente</th>
|
||||||
|
<th className="text-left px-4 py-2.5 font-medium">Geändert</th>
|
||||||
|
<th className="text-left px-4 py-2.5 font-medium">Aktion</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y">
|
||||||
|
{adminProjects.map((p: any) => (
|
||||||
|
<tr key={p.id} className="hover:bg-muted/30">
|
||||||
|
<td className="px-4 py-2.5 font-mono text-xs">{p.einsatzNr || '—'}</td>
|
||||||
|
<td className="px-4 py-2.5 font-semibold">{p.title}</td>
|
||||||
|
<td className="px-4 py-2.5 text-muted-foreground truncate max-w-[200px]">{p.location || '—'}</td>
|
||||||
|
<td className="px-4 py-2.5">
|
||||||
|
<span className="text-xs">{p.owner?.name || p.owner?.email || '—'}</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-2.5">
|
||||||
|
<span className="text-xs bg-primary/10 text-primary px-1.5 py-0.5 rounded">{p.tenant?.name || '—'}</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-2.5 text-center">{p._count?.features || 0}</td>
|
||||||
|
<td className="px-4 py-2.5 text-xs text-muted-foreground">{new Date(p.updatedAt).toLocaleString('de-CH')}</td>
|
||||||
|
<td className="px-4 py-2.5">
|
||||||
|
<Button size="sm" variant="outline" className="h-7 text-xs" onClick={() => window.open(`/app?project=${p.id}`, '_blank')}>
|
||||||
|
<Eye className="w-3 h-3 mr-1" />
|
||||||
|
Öffnen
|
||||||
|
</Button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</TabsContent>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ===== HOSE TYPES TAB (Schlauchtypen) ===== */}
|
||||||
|
<TabsContent value="hose-types" className="space-y-4">
|
||||||
|
<div className="border rounded-lg p-6">
|
||||||
|
<h3 className="font-semibold text-lg mb-2 flex items-center gap-2">
|
||||||
|
<Settings className="w-5 h-5" />
|
||||||
|
Schlauchtypen verwalten
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-muted-foreground mb-4">
|
||||||
|
Konfiguriere die Schlauchtypen für die Druckberechnung im Messwerkzeug. Der Standard-Schlauch wird automatisch für neue Berechnungen verwendet.
|
||||||
|
</p>
|
||||||
|
<Button variant="outline" onClick={() => setIsHoseSettingsOpen(true)}>
|
||||||
|
<Settings className="w-4 h-4 mr-2" />
|
||||||
|
Schlauchtypen bearbeiten
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<HoseSettingsDialog open={isHoseSettingsOpen} onOpenChange={setIsHoseSettingsOpen} />
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
{/* ===== SUGGESTIONS TAB (Word Library) ===== */}
|
{/* ===== SUGGESTIONS TAB (Word Library) ===== */}
|
||||||
<TabsContent value="suggestions" className="space-y-4">
|
<TabsContent value="suggestions" className="space-y-4">
|
||||||
<div className="border rounded-lg p-6">
|
<div className="border rounded-lg p-6">
|
||||||
|
|||||||
39
src/app/api/admin/projects/route.ts
Normal file
39
src/app/api/admin/projects/route.ts
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server'
|
||||||
|
import { getSession } from '@/lib/auth'
|
||||||
|
import { prisma } from '@/lib/db'
|
||||||
|
|
||||||
|
export async function GET(request: NextRequest) {
|
||||||
|
try {
|
||||||
|
const user = await getSession()
|
||||||
|
if (!user || user.role !== 'SERVER_ADMIN') {
|
||||||
|
return NextResponse.json({ error: 'Nicht autorisiert' }, { status: 401 })
|
||||||
|
}
|
||||||
|
|
||||||
|
const { searchParams } = new URL(request.url)
|
||||||
|
const tenantId = searchParams.get('tenantId')
|
||||||
|
|
||||||
|
const where: any = {}
|
||||||
|
if (tenantId) where.tenantId = tenantId
|
||||||
|
|
||||||
|
const projects = await (prisma as any).project.findMany({
|
||||||
|
where,
|
||||||
|
orderBy: { updatedAt: 'desc' },
|
||||||
|
include: {
|
||||||
|
owner: {
|
||||||
|
select: { id: true, name: true, email: true },
|
||||||
|
},
|
||||||
|
tenant: {
|
||||||
|
select: { id: true, name: true },
|
||||||
|
},
|
||||||
|
_count: {
|
||||||
|
select: { features: true },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return NextResponse.json({ projects })
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching admin projects:', error)
|
||||||
|
return NextResponse.json({ error: 'Serverfehler' }, { status: 500 })
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -22,11 +22,16 @@ export async function POST(request: NextRequest) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const { email, password } = validated.data
|
const { email, password } = validated.data
|
||||||
|
const rememberMe = body.rememberMe === true
|
||||||
const result = await login(email, password)
|
const result = await login(email, password)
|
||||||
|
|
||||||
if (!result.success || !result.user) {
|
if (!result.success || !result.user) {
|
||||||
|
const remaining = rl.remaining
|
||||||
|
const warningText = remaining <= 3 && remaining > 0
|
||||||
|
? ` (Noch ${remaining} Versuch${remaining === 1 ? '' : 'e'})`
|
||||||
|
: ''
|
||||||
return NextResponse.json(
|
return NextResponse.json(
|
||||||
{ error: result.error || 'Login fehlgeschlagen' },
|
{ error: (result.error || 'Login fehlgeschlagen') + warningText, remaining },
|
||||||
{ status: 401 }
|
{ status: 401 }
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -39,13 +44,13 @@ export async function POST(request: NextRequest) {
|
|||||||
})
|
})
|
||||||
} catch {}
|
} catch {}
|
||||||
|
|
||||||
const token = await createToken(result.user)
|
const token = await createToken(result.user, rememberMe)
|
||||||
|
|
||||||
;(await cookies()).set('auth-token', token, {
|
;(await cookies()).set('auth-token', token, {
|
||||||
httpOnly: true,
|
httpOnly: true,
|
||||||
secure: process.env.NODE_ENV === 'production',
|
secure: process.env.NODE_ENV === 'production',
|
||||||
sameSite: 'lax',
|
sameSite: 'lax',
|
||||||
maxAge: 60 * 60 * 24, // 24 hours
|
maxAge: rememberMe ? 60 * 60 * 24 * 30 : 60 * 60 * 24, // 30 days or 24 hours
|
||||||
path: '/',
|
path: '/',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -113,7 +113,19 @@ export async function PUT(
|
|||||||
}
|
}
|
||||||
|
|
||||||
const body = await request.json()
|
const body = await request.json()
|
||||||
const { features } = body as { features: Array<{ id?: string; type: string; geometry: object; properties?: object }> }
|
const { features, mapCenter, mapZoom } = body as {
|
||||||
|
features: Array<{ id?: string; type: string; geometry: object; properties?: object }>
|
||||||
|
mapCenter?: { lng: number; lat: number }
|
||||||
|
mapZoom?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
// Persist map viewport alongside features (if provided)
|
||||||
|
if (mapCenter && mapZoom !== undefined) {
|
||||||
|
await (prisma as any).project.update({
|
||||||
|
where: { id },
|
||||||
|
data: { mapCenter, mapZoom },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
await (prisma as any).feature.deleteMany({
|
await (prisma as any).feature.deleteMany({
|
||||||
where: { projectId: id },
|
where: { projectId: id },
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ import { jsPDF } from 'jspdf'
|
|||||||
import { Lock, Unlock, Eye, AlertTriangle, WifiOff } from 'lucide-react'
|
import { Lock, Unlock, Eye, AlertTriangle, WifiOff } from 'lucide-react'
|
||||||
import { getSocket, setSocketRoom } from '@/lib/socket'
|
import { getSocket, setSocketRoom } from '@/lib/socket'
|
||||||
import { CustomDragLayer } from '@/components/map/custom-drag-layer'
|
import { CustomDragLayer } from '@/components/map/custom-drag-layer'
|
||||||
|
import { OnboardingTour, resetOnboardingTour } from '@/components/onboarding/onboarding-tour'
|
||||||
import { addToSyncQueue, flushSyncQueue, getSyncQueue, isOnline as checkOnline } from '@/lib/offline-sync'
|
import { addToSyncQueue, flushSyncQueue, getSyncQueue, isOnline as checkOnline } from '@/lib/offline-sync'
|
||||||
|
|
||||||
export interface Project {
|
export interface Project {
|
||||||
@@ -92,6 +93,9 @@ export default function AppPage() {
|
|||||||
const [lastMapScreenshot, setLastMapScreenshot] = useState<string>('')
|
const [lastMapScreenshot, setLastMapScreenshot] = useState<string>('')
|
||||||
const [defaultSymbolScale, setDefaultSymbolScale] = useState(1.5)
|
const [defaultSymbolScale, setDefaultSymbolScale] = useState(1.5)
|
||||||
|
|
||||||
|
// Onboarding tour
|
||||||
|
const [showTour, setShowTour] = useState(false)
|
||||||
|
|
||||||
// Live editing lock state
|
// Live editing lock state
|
||||||
const [editingBy, setEditingBy] = useState<{ id: string; name: string; since: string } | null>(null)
|
const [editingBy, setEditingBy] = useState<{ id: string; name: string; since: string } | null>(null)
|
||||||
const [isEditingByMe, setIsEditingByMe] = useState(false)
|
const [isEditingByMe, setIsEditingByMe] = useState(false)
|
||||||
@@ -698,7 +702,13 @@ export default function AppPage() {
|
|||||||
const saveFeaturesToApi = useCallback(async () => {
|
const saveFeaturesToApi = useCallback(async () => {
|
||||||
if (!currentProject?.id) return
|
if (!currentProject?.id) return
|
||||||
const url = `/api/projects/${currentProject.id}/features`
|
const url = `/api/projects/${currentProject.id}/features`
|
||||||
const body = { features: featuresRef.current }
|
const mapInstance = mapRef.current
|
||||||
|
const body: any = { features: featuresRef.current }
|
||||||
|
if (mapInstance) {
|
||||||
|
const c = mapInstance.getCenter()
|
||||||
|
body.mapCenter = { lng: c.lng, lat: c.lat }
|
||||||
|
body.mapZoom = mapInstance.getZoom()
|
||||||
|
}
|
||||||
|
|
||||||
// If offline, queue the save for later sync
|
// If offline, queue the save for later sync
|
||||||
if (!navigator.onLine) {
|
if (!navigator.onLine) {
|
||||||
@@ -885,10 +895,16 @@ export default function AppPage() {
|
|||||||
|
|
||||||
setIsSaving(true)
|
setIsSaving(true)
|
||||||
try {
|
try {
|
||||||
|
const saveBody: any = { features }
|
||||||
|
if (mapRef.current) {
|
||||||
|
const c = mapRef.current.getCenter()
|
||||||
|
saveBody.mapCenter = { lng: c.lng, lat: c.lat }
|
||||||
|
saveBody.mapZoom = mapRef.current.getZoom()
|
||||||
|
}
|
||||||
let res = await fetch(`/api/projects/${currentProject.id}/features`, {
|
let res = await fetch(`/api/projects/${currentProject.id}/features`, {
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify({ features }),
|
body: JSON.stringify(saveBody),
|
||||||
})
|
})
|
||||||
|
|
||||||
// If project doesn't exist in DB (404), re-create it first then retry
|
// If project doesn't exist in DB (404), re-create it first then retry
|
||||||
@@ -1048,6 +1064,59 @@ export default function AppPage() {
|
|||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
// Keyboard shortcuts for tools
|
||||||
|
const [isShortcutHelpOpen, setIsShortcutHelpOpen] = useState(false)
|
||||||
|
useEffect(() => {
|
||||||
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
|
// Ignore when typing in inputs/textareas
|
||||||
|
const tag = (e.target as HTMLElement)?.tagName
|
||||||
|
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || (e.target as HTMLElement)?.isContentEditable) return
|
||||||
|
|
||||||
|
// ? or F1 → help
|
||||||
|
if (e.key === '?' || e.key === 'F1') { e.preventDefault(); setIsShortcutHelpOpen(true); return }
|
||||||
|
|
||||||
|
// DEL / Backspace → delete selected feature(s)
|
||||||
|
if (e.key === 'Delete' || e.key === 'Backspace') {
|
||||||
|
e.preventDefault()
|
||||||
|
// Remove all selected features
|
||||||
|
const current = featuresRef.current
|
||||||
|
const selected = current.filter(f => f.properties?._selected)
|
||||||
|
if (selected.length > 0) {
|
||||||
|
handleFeaturesChange(current.filter(f => !f.properties?._selected))
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ctrl/Cmd shortcuts (CH keyboard: Z and Y are swapped)
|
||||||
|
if (e.ctrlKey || e.metaKey) {
|
||||||
|
if (e.key === 'z') { e.preventDefault(); handleRedo(); return }
|
||||||
|
if (e.key === 'y') { e.preventDefault(); handleUndo(); return }
|
||||||
|
if (e.key === 's') { e.preventDefault(); handleSaveProject(); return }
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tool shortcuts (single key, no modifier)
|
||||||
|
const shortcuts: Record<string, DrawMode> = {
|
||||||
|
'v': 'select', 's': 'select',
|
||||||
|
'p': 'point',
|
||||||
|
'l': 'linestring',
|
||||||
|
'g': 'polygon',
|
||||||
|
'r': 'rectangle',
|
||||||
|
'c': 'circle',
|
||||||
|
'f': 'freehand',
|
||||||
|
'a': 'arrow',
|
||||||
|
't': 'text',
|
||||||
|
'e': 'eraser',
|
||||||
|
'm': 'measure',
|
||||||
|
'd': 'dangerzone',
|
||||||
|
}
|
||||||
|
const mode = shortcuts[e.key.toLowerCase()]
|
||||||
|
if (mode) { e.preventDefault(); setDrawMode(mode); return }
|
||||||
|
}
|
||||||
|
window.addEventListener('keydown', handleKeyDown)
|
||||||
|
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||||
|
}, [handleUndo, handleRedo, handleSaveProject, setDrawMode, handleFeaturesChange])
|
||||||
|
|
||||||
const handlePlanUpload = useCallback(() => {
|
const handlePlanUpload = useCallback(() => {
|
||||||
if (!currentProject) return
|
if (!currentProject) return
|
||||||
const input = document.createElement('input')
|
const input = document.createElement('input')
|
||||||
@@ -1455,6 +1524,7 @@ export default function AppPage() {
|
|||||||
userName={user?.name}
|
userName={user?.name}
|
||||||
userRole={user?.role}
|
userRole={user?.role}
|
||||||
onLogout={logout}
|
onLogout={logout}
|
||||||
|
onStartTour={() => { resetOnboardingTour(); setShowTour(true) }}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Offline banner */}
|
{/* Offline banner */}
|
||||||
@@ -1530,7 +1600,7 @@ export default function AppPage() {
|
|||||||
|
|
||||||
<div className="flex-1 flex overflow-hidden">
|
<div className="flex-1 flex overflow-hidden">
|
||||||
{/* Map view — always mounted, hidden via CSS to preserve state */}
|
{/* Map view — always mounted, hidden via CSS to preserve state */}
|
||||||
<div className={`contents ${activeTab !== 'map' ? 'hidden' : ''}`}>
|
<div data-tour="toolbar" className={`contents ${activeTab !== 'map' ? 'hidden' : ''}`}>
|
||||||
<LeftToolbar
|
<LeftToolbar
|
||||||
drawMode={drawMode}
|
drawMode={drawMode}
|
||||||
onDrawModeChange={setDrawMode}
|
onDrawModeChange={setDrawMode}
|
||||||
@@ -1583,6 +1653,7 @@ export default function AppPage() {
|
|||||||
|
|
||||||
{/* Right sidebar — always visible, contains Karte/Journal tabs */}
|
{/* Right sidebar — always visible, contains Karte/Journal tabs */}
|
||||||
<RightSidebar
|
<RightSidebar
|
||||||
|
data-tour="sidebar"
|
||||||
onSymbolDrop={handleSymbolDrop}
|
onSymbolDrop={handleSymbolDrop}
|
||||||
canEdit={canEdit}
|
canEdit={canEdit}
|
||||||
isOpen={isSidebarOpen}
|
isOpen={isSidebarOpen}
|
||||||
@@ -1616,6 +1687,39 @@ export default function AppPage() {
|
|||||||
lineType={(pendingLineFeature?.type as any) || 'linestring'}
|
lineType={(pendingLineFeature?.type as any) || 'linestring'}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* Keyboard Shortcuts Help Dialog */}
|
||||||
|
<Dialog open={isShortcutHelpOpen} onOpenChange={setIsShortcutHelpOpen}>
|
||||||
|
<DialogContent className="max-w-md">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Tastenkürzel</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="grid grid-cols-2 gap-x-6 gap-y-1.5 text-sm mt-2">
|
||||||
|
<div className="font-semibold text-muted-foreground col-span-2 mt-1 mb-0.5">Werkzeuge</div>
|
||||||
|
{[
|
||||||
|
['V', 'Auswählen'], ['P', 'Punkt'], ['L', 'Linie'], ['G', 'Polygon'],
|
||||||
|
['R', 'Rechteck'], ['C', 'Kreis'], ['F', 'Freihand'], ['A', 'Pfeil / Route'],
|
||||||
|
['T', 'Text'], ['E', 'Radiergummi'], ['M', 'Messen'], ['D', 'Gefahrenzone'],
|
||||||
|
].map(([key, label]) => (
|
||||||
|
<div key={key} className="flex items-center justify-between">
|
||||||
|
<span>{label}</span>
|
||||||
|
<kbd className="ml-2 px-1.5 py-0.5 bg-muted rounded border border-border font-mono text-xs">{key}</kbd>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="font-semibold text-muted-foreground col-span-2 mt-3 mb-0.5">Aktionen</div>
|
||||||
|
{[
|
||||||
|
['Ctrl+Y', 'Rückgängig'], ['Ctrl+Z', 'Wiederholen'],
|
||||||
|
['Ctrl+S', 'Speichern'], ['Del', 'Auswahl löschen'],
|
||||||
|
['Esc', 'Abbrechen'], ['?', 'Diese Hilfe'],
|
||||||
|
].map(([key, label]) => (
|
||||||
|
<div key={key} className="flex items-center justify-between">
|
||||||
|
<span>{label}</span>
|
||||||
|
<kbd className="ml-2 px-1.5 py-0.5 bg-muted rounded border border-border font-mono text-xs">{key}</kbd>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
{/* Delete All Confirmation Dialog */}
|
{/* Delete All Confirmation Dialog */}
|
||||||
<Dialog open={isDeleteAllConfirmOpen} onOpenChange={setIsDeleteAllConfirmOpen}>
|
<Dialog open={isDeleteAllConfirmOpen} onOpenChange={setIsDeleteAllConfirmOpen}>
|
||||||
<DialogContent className="max-w-sm">
|
<DialogContent className="max-w-sm">
|
||||||
@@ -1635,6 +1739,12 @@ export default function AppPage() {
|
|||||||
</div>
|
</div>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Onboarding Tour */}
|
||||||
|
<OnboardingTour
|
||||||
|
forceShow={showTour}
|
||||||
|
onComplete={() => setShowTour(false)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</DndProvider>
|
</DndProvider>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -56,6 +56,9 @@
|
|||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.6;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
import type { Metadata, Viewport } from 'next'
|
import type { Metadata, Viewport } from 'next'
|
||||||
import { Inter } from 'next/font/google'
|
import { Barlow } from 'next/font/google'
|
||||||
import './globals.css'
|
import './globals.css'
|
||||||
import { Toaster } from '@/components/ui/toaster'
|
import { Toaster } from '@/components/ui/toaster'
|
||||||
import { AuthProvider } from '@/components/providers/auth-provider'
|
import { AuthProvider } from '@/components/providers/auth-provider'
|
||||||
import { ServiceWorkerRegister } from '@/components/providers/sw-register'
|
import { ServiceWorkerRegister } from '@/components/providers/sw-register'
|
||||||
import { CookieConsent } from '@/components/ui/cookie-consent'
|
import { CookieConsent } from '@/components/ui/cookie-consent'
|
||||||
|
|
||||||
const inter = Inter({
|
const barlow = Barlow({
|
||||||
subsets: ['latin'],
|
subsets: ['latin'],
|
||||||
weight: ['400', '500', '600', '700'],
|
weight: ['400', '500', '600', '700'],
|
||||||
display: 'swap',
|
display: 'swap',
|
||||||
@@ -105,7 +105,7 @@ export default function RootLayout({
|
|||||||
<meta name="mobile-web-app-capable" content="yes" />
|
<meta name="mobile-web-app-capable" content="yes" />
|
||||||
<meta name="theme-color" content="#dc2626" />
|
<meta name="theme-color" content="#dc2626" />
|
||||||
</head>
|
</head>
|
||||||
<body className={`${inter.className} antialiased`} style={{ fontFeatureSettings: '"tnum", "cv01"' }}>
|
<body className={`${barlow.className} antialiased`} style={{ fontFeatureSettings: '"tnum"' }}>
|
||||||
<AuthProvider>
|
<AuthProvider>
|
||||||
<ServiceWorkerRegister />
|
<ServiceWorkerRegister />
|
||||||
{children}
|
{children}
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ export default function LoginPage() {
|
|||||||
function LoginForm() {
|
function LoginForm() {
|
||||||
const [email, setEmail] = useState('')
|
const [email, setEmail] = useState('')
|
||||||
const [password, setPassword] = useState('')
|
const [password, setPassword] = useState('')
|
||||||
|
const [rememberMe, setRememberMe] = useState(true)
|
||||||
const [isLoading, setIsLoading] = useState(false)
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
const [resendLoading, setResendLoading] = useState(false)
|
const [resendLoading, setResendLoading] = useState(false)
|
||||||
const [resendSuccess, setResendSuccess] = useState(false)
|
const [resendSuccess, setResendSuccess] = useState(false)
|
||||||
@@ -55,7 +56,7 @@ function LoginForm() {
|
|||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
|
|
||||||
const result = await login(email, password)
|
const result = await login(email, password, rememberMe)
|
||||||
|
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
toast({
|
toast({
|
||||||
@@ -173,6 +174,16 @@ function LoginForm() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<label className="flex items-center gap-2 cursor-pointer select-none">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={rememberMe}
|
||||||
|
onChange={(e) => setRememberMe(e.target.checked)}
|
||||||
|
className="w-4 h-4 rounded border-gray-300 text-red-600 focus:ring-red-500"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-muted-foreground">Angemeldet bleiben</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="w-full bg-red-600 hover:bg-red-700"
|
className="w-full bg-red-600 hover:bg-red-700"
|
||||||
|
|||||||
@@ -48,18 +48,18 @@ const colors = [
|
|||||||
{ value: '#ffffff', name: 'Weiss' },
|
{ value: '#ffffff', name: 'Weiss' },
|
||||||
]
|
]
|
||||||
|
|
||||||
const drawTools: { mode: DrawMode; icon: typeof MousePointer2; label: string }[] = [
|
const drawTools: { mode: DrawMode; icon: typeof MousePointer2; label: string; shortcut: string }[] = [
|
||||||
{ mode: 'select', icon: MousePointer2, label: 'Auswählen' },
|
{ mode: 'select', icon: MousePointer2, label: 'Auswählen', shortcut: 'V' },
|
||||||
{ mode: 'point', icon: CircleDot, label: 'Punkt' },
|
{ mode: 'point', icon: CircleDot, label: 'Punkt', shortcut: 'P' },
|
||||||
{ mode: 'linestring', icon: Minus, label: 'Linie' },
|
{ mode: 'linestring', icon: Minus, label: 'Linie', shortcut: 'L' },
|
||||||
{ mode: 'polygon', icon: Pentagon, label: 'Polygon' },
|
{ mode: 'polygon', icon: Pentagon, label: 'Polygon', shortcut: 'G' },
|
||||||
{ mode: 'rectangle', icon: Square, label: 'Rechteck' },
|
{ mode: 'rectangle', icon: Square, label: 'Rechteck', shortcut: 'R' },
|
||||||
{ mode: 'circle', icon: Circle, label: 'Kreis' },
|
{ mode: 'circle', icon: Circle, label: 'Kreis', shortcut: 'C' },
|
||||||
{ mode: 'freehand', icon: Pencil, label: 'Freihand' },
|
{ mode: 'freehand', icon: Pencil, label: 'Freihand', shortcut: 'F' },
|
||||||
{ mode: 'arrow', icon: MoveRight, label: 'Pfeil / Route' },
|
{ mode: 'arrow', icon: MoveRight, label: 'Pfeil / Route', shortcut: 'A' },
|
||||||
{ mode: 'text', icon: Type, label: 'Text' },
|
{ mode: 'text', icon: Type, label: 'Text', shortcut: 'T' },
|
||||||
{ mode: 'eraser', icon: Eraser, label: 'Radiergummi' },
|
{ mode: 'eraser', icon: Eraser, label: 'Radiergummi', shortcut: 'E' },
|
||||||
{ mode: 'measure', icon: Ruler, label: 'Messen' },
|
{ mode: 'measure', icon: Ruler, label: 'Messen', shortcut: 'M' },
|
||||||
]
|
]
|
||||||
|
|
||||||
export function LeftToolbar({
|
export function LeftToolbar({
|
||||||
@@ -92,7 +92,7 @@ export function LeftToolbar({
|
|||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent side="right">
|
<TooltipContent side="right">
|
||||||
<p>{tool.label}</p>
|
<p>{tool.label} <kbd className="ml-1.5 text-[10px] px-1 py-0.5 bg-muted rounded border border-border font-mono">{tool.shortcut}</kbd></p>
|
||||||
</TooltipContent>
|
</TooltipContent>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -39,6 +39,7 @@ import {
|
|||||||
Shield,
|
Shield,
|
||||||
Building2,
|
Building2,
|
||||||
MapPin,
|
MapPin,
|
||||||
|
HelpCircle,
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import { HoseSettingsDialog } from '@/components/dialogs/hose-settings-dialog'
|
import { HoseSettingsDialog } from '@/components/dialogs/hose-settings-dialog'
|
||||||
import type { Project, DrawFeature } from '@/app/app/page'
|
import type { Project, DrawFeature } from '@/app/app/page'
|
||||||
@@ -65,6 +66,7 @@ interface TopbarProps {
|
|||||||
userName?: string
|
userName?: string
|
||||||
userRole?: string
|
userRole?: string
|
||||||
onLogout?: () => void
|
onLogout?: () => void
|
||||||
|
onStartTour?: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Topbar({
|
export function Topbar({
|
||||||
@@ -87,6 +89,7 @@ export function Topbar({
|
|||||||
userName,
|
userName,
|
||||||
userRole,
|
userRole,
|
||||||
onLogout,
|
onLogout,
|
||||||
|
onStartTour,
|
||||||
}: TopbarProps) {
|
}: TopbarProps) {
|
||||||
const [isLoadDialogOpen, setIsLoadDialogOpen] = useState(false)
|
const [isLoadDialogOpen, setIsLoadDialogOpen] = useState(false)
|
||||||
const [isHoseSettingsOpen, setIsHoseSettingsOpen] = useState(false)
|
const [isHoseSettingsOpen, setIsHoseSettingsOpen] = useState(false)
|
||||||
@@ -159,6 +162,7 @@ export function Topbar({
|
|||||||
|
|
||||||
<div className="flex items-center gap-1 md:gap-2">
|
<div className="flex items-center gap-1 md:gap-2">
|
||||||
<Button
|
<Button
|
||||||
|
data-tour="save"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="h-9 md:h-10 px-2 md:px-4 text-sm"
|
className="h-9 md:h-10 px-2 md:px-4 text-sm"
|
||||||
onClick={onSaveProject}
|
onClick={onSaveProject}
|
||||||
@@ -177,7 +181,7 @@ export function Topbar({
|
|||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent align="start" className="w-52">
|
<DropdownMenuContent align="start" className="w-52">
|
||||||
<DropdownMenuItem onClick={onNewProject} className="py-2.5 px-3">
|
<DropdownMenuItem data-tour="new-project" onClick={onNewProject} className="py-2.5 px-3">
|
||||||
<Plus className="w-4 h-4 mr-2" />
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
Neuer Einsatz
|
Neuer Einsatz
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
@@ -294,6 +298,12 @@ export function Topbar({
|
|||||||
Administration
|
Administration
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
)}
|
)}
|
||||||
|
{onStartTour && (
|
||||||
|
<DropdownMenuItem onClick={onStartTour}>
|
||||||
|
<HelpCircle className="w-4 h-4 mr-2" />
|
||||||
|
Tour starten
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
onClick={() => { setShowDeleteAccountDialog(true); setDeleteAccountPw(''); setDeleteAccountError('') }}
|
onClick={() => { setShowDeleteAccountDialog(true); setDeleteAccountPw(''); setDeleteAccountError('') }}
|
||||||
className="text-destructive focus:text-destructive"
|
className="text-destructive focus:text-destructive"
|
||||||
@@ -414,6 +424,9 @@ export function Topbar({
|
|||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
<p className="text-xs text-muted-foreground mt-1">
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
{(p as any).owner?.name && (
|
||||||
|
<><span className="font-medium text-foreground/70">{(p as any).owner.name}</span> · </>
|
||||||
|
)}
|
||||||
Erstellt: {formatDateTime(p.createdAt)} | Geändert: {formatDateTime(p.updatedAt)}
|
Erstellt: {formatDateTime(p.createdAt)} | Geändert: {formatDateTime(p.updatedAt)}
|
||||||
</p>
|
</p>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -106,7 +106,7 @@ export function MapView({
|
|||||||
const measureMarkersRef = useRef<maplibregl.Marker[]>([])
|
const measureMarkersRef = useRef<maplibregl.Marker[]>([])
|
||||||
const measureCoordsRef = useRef<number[][]>([])
|
const measureCoordsRef = useRef<number[][]>([])
|
||||||
const [isMapLoaded, setIsMapLoaded] = useState(false)
|
const [isMapLoaded, setIsMapLoaded] = useState(false)
|
||||||
const [activeBaseLayer, setActiveBaseLayer] = useState<'osm' | 'satellite' | 'swisstopo' | 'swissimage'>('osm')
|
const [activeBaseLayer, setActiveBaseLayer] = useState<'osm' | 'satellite' | 'swisstopo'>('osm')
|
||||||
const [layerDropdownOpen, setLayerDropdownOpen] = useState(false)
|
const [layerDropdownOpen, setLayerDropdownOpen] = useState(false)
|
||||||
const [measurePointCount, setMeasurePointCount] = useState(0)
|
const [measurePointCount, setMeasurePointCount] = useState(0)
|
||||||
const [measureFinished, setMeasureFinished] = useState(false)
|
const [measureFinished, setMeasureFinished] = useState(false)
|
||||||
@@ -699,15 +699,6 @@ export function MapView({
|
|||||||
attribution: '© swisstopo',
|
attribution: '© swisstopo',
|
||||||
maxzoom: 17,
|
maxzoom: 17,
|
||||||
},
|
},
|
||||||
'swissimage': {
|
|
||||||
type: 'raster',
|
|
||||||
tiles: [
|
|
||||||
'https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.swissimage/default/current/3857/{z}/{x}/{y}.jpeg',
|
|
||||||
],
|
|
||||||
tileSize: 256,
|
|
||||||
attribution: '© swisstopo SWISSIMAGE',
|
|
||||||
maxzoom: 18,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
layers: [
|
layers: [
|
||||||
{
|
{
|
||||||
@@ -727,12 +718,6 @@ export function MapView({
|
|||||||
source: 'swisstopo',
|
source: 'swisstopo',
|
||||||
layout: { visibility: 'none' },
|
layout: { visibility: 'none' },
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'swissimage',
|
|
||||||
type: 'raster',
|
|
||||||
source: 'swissimage',
|
|
||||||
layout: { visibility: 'none' },
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
center: [initialCenter.lng, initialCenter.lat],
|
center: [initialCenter.lng, initialCenter.lat],
|
||||||
@@ -2168,7 +2153,7 @@ export function MapView({
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<svg className="w-3.5 h-3.5 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
<svg className="w-3.5 h-3.5 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
||||||
{{ osm: 'OpenStreetMap', satellite: 'Satellit', swisstopo: 'Swisstopo', swissimage: 'Luftbild CH' }[activeBaseLayer]}
|
{{ osm: 'OpenStreetMap', satellite: 'Satellit', swisstopo: 'Swisstopo' }[activeBaseLayer]}
|
||||||
<svg className={`w-3 h-3 opacity-50 transition-transform ${layerDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
|
<svg className={`w-3 h-3 opacity-50 transition-transform ${layerDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
|
||||||
</button>
|
</button>
|
||||||
{layerDropdownOpen && (
|
{layerDropdownOpen && (
|
||||||
@@ -2180,13 +2165,12 @@ export function MapView({
|
|||||||
{ key: 'osm', label: 'OpenStreetMap' },
|
{ key: 'osm', label: 'OpenStreetMap' },
|
||||||
{ key: 'satellite', label: 'Satellit (Esri)' },
|
{ key: 'satellite', label: 'Satellit (Esri)' },
|
||||||
{ key: 'swisstopo', label: 'Swisstopo Karte' },
|
{ key: 'swisstopo', label: 'Swisstopo Karte' },
|
||||||
{ key: 'swissimage', label: 'Luftbild CH' },
|
|
||||||
] as const).map(({ key, label }) => (
|
] as const).map(({ key, label }) => (
|
||||||
<button
|
<button
|
||||||
key={key}
|
key={key}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (!map.current) return
|
if (!map.current) return
|
||||||
const allLayers: Array<'osm' | 'satellite' | 'swisstopo' | 'swissimage'> = ['osm', 'satellite', 'swisstopo', 'swissimage']
|
const allLayers: Array<'osm' | 'satellite' | 'swisstopo'> = ['osm', 'satellite', 'swisstopo']
|
||||||
for (const l of allLayers) {
|
for (const l of allLayers) {
|
||||||
map.current.setLayoutProperty(l, 'visibility', l === key ? 'visible' : 'none')
|
map.current.setLayoutProperty(l, 'visibility', l === key ? 'visible' : 'none')
|
||||||
}
|
}
|
||||||
@@ -2315,6 +2299,16 @@ export function MapView({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Credit link */}
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="absolute bottom-1 left-24 z-10 text-[10px] text-muted-foreground/50 hover:text-muted-foreground/80 transition-colors no-underline hidden md:block"
|
||||||
|
>
|
||||||
|
mit ♥ von Pepe
|
||||||
|
</a>
|
||||||
|
|
||||||
{/* Cursor-following tooltip — always mounted for stable ref */}
|
{/* Cursor-following tooltip — always mounted for stable ref */}
|
||||||
<div
|
<div
|
||||||
ref={tooltipRef}
|
ref={tooltipRef}
|
||||||
|
|||||||
246
src/components/onboarding/onboarding-tour.tsx
Normal file
246
src/components/onboarding/onboarding-tour.tsx
Normal file
@@ -0,0 +1,246 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback } from 'react'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { X, ChevronRight, ChevronLeft, SkipForward } from 'lucide-react'
|
||||||
|
|
||||||
|
const TOUR_STORAGE_KEY = 'lageplan-onboarding-completed'
|
||||||
|
|
||||||
|
interface TourStep {
|
||||||
|
title: string
|
||||||
|
description: string
|
||||||
|
targetSelector?: string
|
||||||
|
position?: 'top' | 'bottom' | 'left' | 'right'
|
||||||
|
}
|
||||||
|
|
||||||
|
const TOUR_STEPS: TourStep[] = [
|
||||||
|
{
|
||||||
|
title: 'Willkommen bei Lageplan!',
|
||||||
|
description: 'Diese kurze Tour zeigt dir die wichtigsten Funktionen. Du kannst sie jederzeit überspringen.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Neuer Einsatz',
|
||||||
|
description: 'Erstelle einen neuen Einsatz über das Menü oben links. Gib eine Adresse ein und die Karte fliegt automatisch dorthin.',
|
||||||
|
targetSelector: '[data-tour="new-project"]',
|
||||||
|
position: 'bottom',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Zeichenwerkzeuge',
|
||||||
|
description: 'Links findest du alle Werkzeuge: Punkte, Linien, Polygone, Freihand, Pfeile, Text und mehr. Jedes Werkzeug hat ein Tastenkürzel (drücke ? für die Übersicht).',
|
||||||
|
targetSelector: '[data-tour="toolbar"]',
|
||||||
|
position: 'right',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Symbole & Karte',
|
||||||
|
description: 'Rechts findest du die Symbol-Bibliothek. Ziehe Symbole per Drag & Drop auf die Karte. Wechsle zwischen Karte und Journal.',
|
||||||
|
targetSelector: '[data-tour="sidebar"]',
|
||||||
|
position: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Speichern & Exportieren',
|
||||||
|
description: 'Dein Einsatz wird automatisch gespeichert. Du kannst ihn auch als PNG oder PDF exportieren.',
|
||||||
|
targetSelector: '[data-tour="save"]',
|
||||||
|
position: 'bottom',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Tastenkürzel',
|
||||||
|
description: 'Drücke ? oder F1 für eine Übersicht aller Tastenkürzel. Ctrl+S speichert, Ctrl+Z macht rückgängig.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Bereit!',
|
||||||
|
description: 'Das war\'s! Du kannst diese Tour jederzeit über das Benutzermenü erneut starten. Viel Erfolg im Einsatz!',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
interface OnboardingTourProps {
|
||||||
|
forceShow?: boolean
|
||||||
|
onComplete?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function OnboardingTour({ forceShow = false, onComplete }: OnboardingTourProps) {
|
||||||
|
const [isVisible, setIsVisible] = useState(false)
|
||||||
|
const [currentStep, setCurrentStep] = useState(0)
|
||||||
|
const [highlightRect, setHighlightRect] = useState<DOMRect | null>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (forceShow) {
|
||||||
|
setIsVisible(true)
|
||||||
|
setCurrentStep(0)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const completed = localStorage.getItem(TOUR_STORAGE_KEY)
|
||||||
|
if (!completed) {
|
||||||
|
// Small delay so the app renders first
|
||||||
|
const timer = setTimeout(() => setIsVisible(true), 1500)
|
||||||
|
return () => clearTimeout(timer)
|
||||||
|
}
|
||||||
|
}, [forceShow])
|
||||||
|
|
||||||
|
const updateHighlight = useCallback(() => {
|
||||||
|
const step = TOUR_STEPS[currentStep]
|
||||||
|
if (step.targetSelector) {
|
||||||
|
const el = document.querySelector(step.targetSelector)
|
||||||
|
if (el) {
|
||||||
|
setHighlightRect(el.getBoundingClientRect())
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setHighlightRect(null)
|
||||||
|
}, [currentStep])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isVisible) return
|
||||||
|
updateHighlight()
|
||||||
|
window.addEventListener('resize', updateHighlight)
|
||||||
|
return () => window.removeEventListener('resize', updateHighlight)
|
||||||
|
}, [isVisible, currentStep, updateHighlight])
|
||||||
|
|
||||||
|
const completeTour = useCallback(() => {
|
||||||
|
localStorage.setItem(TOUR_STORAGE_KEY, 'true')
|
||||||
|
setIsVisible(false)
|
||||||
|
onComplete?.()
|
||||||
|
}, [onComplete])
|
||||||
|
|
||||||
|
const nextStep = () => {
|
||||||
|
if (currentStep < TOUR_STEPS.length - 1) {
|
||||||
|
setCurrentStep(currentStep + 1)
|
||||||
|
} else {
|
||||||
|
completeTour()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const prevStep = () => {
|
||||||
|
if (currentStep > 0) setCurrentStep(currentStep - 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isVisible) return null
|
||||||
|
|
||||||
|
const step = TOUR_STEPS[currentStep]
|
||||||
|
const isFirst = currentStep === 0
|
||||||
|
const isLast = currentStep === TOUR_STEPS.length - 1
|
||||||
|
|
||||||
|
// Calculate tooltip position based on highlight
|
||||||
|
const getTooltipStyle = (): React.CSSProperties => {
|
||||||
|
if (!highlightRect) {
|
||||||
|
// Center on screen
|
||||||
|
return {
|
||||||
|
position: 'fixed',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const pos = step.position || 'bottom'
|
||||||
|
const gap = 12
|
||||||
|
switch (pos) {
|
||||||
|
case 'bottom':
|
||||||
|
return {
|
||||||
|
position: 'fixed',
|
||||||
|
top: highlightRect.bottom + gap,
|
||||||
|
left: Math.max(16, Math.min(highlightRect.left, window.innerWidth - 360)),
|
||||||
|
}
|
||||||
|
case 'top':
|
||||||
|
return {
|
||||||
|
position: 'fixed',
|
||||||
|
bottom: window.innerHeight - highlightRect.top + gap,
|
||||||
|
left: Math.max(16, Math.min(highlightRect.left, window.innerWidth - 360)),
|
||||||
|
}
|
||||||
|
case 'right':
|
||||||
|
return {
|
||||||
|
position: 'fixed',
|
||||||
|
top: Math.max(16, highlightRect.top),
|
||||||
|
left: highlightRect.right + gap,
|
||||||
|
}
|
||||||
|
case 'left':
|
||||||
|
return {
|
||||||
|
position: 'fixed',
|
||||||
|
top: Math.max(16, highlightRect.top),
|
||||||
|
right: window.innerWidth - highlightRect.left + gap,
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return { position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Backdrop overlay */}
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 z-[99998]"
|
||||||
|
style={{ background: 'rgba(0,0,0,0.5)' }}
|
||||||
|
onClick={completeTour}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Highlight cutout */}
|
||||||
|
{highlightRect && (
|
||||||
|
<div
|
||||||
|
className="fixed z-[99999] pointer-events-none rounded-lg"
|
||||||
|
style={{
|
||||||
|
top: highlightRect.top - 4,
|
||||||
|
left: highlightRect.left - 4,
|
||||||
|
width: highlightRect.width + 8,
|
||||||
|
height: highlightRect.height + 8,
|
||||||
|
boxShadow: '0 0 0 9999px rgba(0,0,0,0.5)',
|
||||||
|
border: '2px solid rgba(59,130,246,0.7)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Tooltip card */}
|
||||||
|
<div
|
||||||
|
className="z-[100000] w-[340px] bg-card border border-border rounded-xl shadow-2xl p-5"
|
||||||
|
style={getTooltipStyle()}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between mb-2">
|
||||||
|
<h3 className="font-semibold text-base">{step.title}</h3>
|
||||||
|
<button
|
||||||
|
onClick={completeTour}
|
||||||
|
className="text-muted-foreground hover:text-foreground -mt-1 -mr-1 p-1"
|
||||||
|
>
|
||||||
|
<X className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground leading-relaxed mb-4">
|
||||||
|
{step.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Progress dots */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{TOUR_STEPS.map((_, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={`w-1.5 h-1.5 rounded-full transition-colors ${
|
||||||
|
i === currentStep ? 'bg-primary' : i < currentStep ? 'bg-primary/40' : 'bg-muted-foreground/20'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
{!isFirst && (
|
||||||
|
<Button variant="ghost" size="sm" className="h-8 px-2" onClick={prevStep}>
|
||||||
|
<ChevronLeft className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{isFirst && (
|
||||||
|
<Button variant="ghost" size="sm" className="h-8 text-xs text-muted-foreground" onClick={completeTour}>
|
||||||
|
<SkipForward className="w-3 h-3 mr-1" />
|
||||||
|
Überspringen
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button size="sm" className="h-8 px-3" onClick={nextStep}>
|
||||||
|
{isLast ? 'Fertig' : 'Weiter'}
|
||||||
|
{!isLast && <ChevronRight className="w-4 h-4 ml-0.5" />}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Reset the onboarding tour so it shows again next time */
|
||||||
|
export function resetOnboardingTour() {
|
||||||
|
localStorage.removeItem(TOUR_STORAGE_KEY)
|
||||||
|
}
|
||||||
@@ -29,7 +29,7 @@ interface AuthContextType {
|
|||||||
user: User | null
|
user: User | null
|
||||||
tenant: TenantInfo | null
|
tenant: TenantInfo | null
|
||||||
loading: boolean
|
loading: boolean
|
||||||
login: (email: string, password: string) => Promise<{ success: boolean; error?: string }>
|
login: (email: string, password: string, rememberMe?: boolean) => Promise<{ success: boolean; error?: string }>
|
||||||
logout: () => Promise<void>
|
logout: () => Promise<void>
|
||||||
canEdit: () => boolean
|
canEdit: () => boolean
|
||||||
isAdmin: () => boolean
|
isAdmin: () => boolean
|
||||||
@@ -62,12 +62,12 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const login = async (email: string, password: string) => {
|
const login = async (email: string, password: string, rememberMe = false) => {
|
||||||
try {
|
try {
|
||||||
const res = await fetch('/api/auth/login', {
|
const res = await fetch('/api/auth/login', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify({ email, password }),
|
body: JSON.stringify({ email, password, rememberMe }),
|
||||||
})
|
})
|
||||||
|
|
||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
|
|||||||
@@ -21,11 +21,11 @@ export interface UserPayload {
|
|||||||
emailVerified?: boolean
|
emailVerified?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function createToken(user: UserPayload): Promise<string> {
|
export async function createToken(user: UserPayload, rememberMe = false): Promise<string> {
|
||||||
return await new SignJWT({ user })
|
return await new SignJWT({ user })
|
||||||
.setProtectedHeader({ alg: 'HS256' })
|
.setProtectedHeader({ alg: 'HS256' })
|
||||||
.setIssuedAt()
|
.setIssuedAt()
|
||||||
.setExpirationTime('24h')
|
.setExpirationTime(rememberMe ? '30d' : '24h')
|
||||||
.sign(JWT_SECRET)
|
.sign(JWT_SECRET)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -72,7 +72,7 @@ export function rateLimit(config: RateLimitConfig) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Pre-configured limiters for different endpoints
|
// Pre-configured limiters for different endpoints
|
||||||
export const loginLimiter = rateLimit({ id: 'login', max: 5, windowSeconds: 60 * 15 }) // 5 attempts per 15 min
|
export const loginLimiter = rateLimit({ id: 'login', max: 10, windowSeconds: 60 * 5 }) // 10 attempts per 5 min
|
||||||
export const registerLimiter = rateLimit({ id: 'register', max: 3, windowSeconds: 60 * 60 }) // 3 per hour
|
export const registerLimiter = rateLimit({ id: 'register', max: 3, windowSeconds: 60 * 60 }) // 3 per hour
|
||||||
export const forgotPasswordLimiter = rateLimit({ id: 'forgot-pw', max: 3, windowSeconds: 60 * 15 }) // 3 per 15 min
|
export const forgotPasswordLimiter = rateLimit({ id: 'forgot-pw', max: 3, windowSeconds: 60 * 15 }) // 3 per 15 min
|
||||||
export const resendVerificationLimiter = rateLimit({ id: 'resend-verify', max: 3, windowSeconds: 60 * 15 })
|
export const resendVerificationLimiter = rateLimit({ id: 'resend-verify', max: 3, windowSeconds: 60 * 15 })
|
||||||
@@ -94,8 +94,12 @@ export function getClientIp(req: Request): string {
|
|||||||
/** Helper: create a 429 response with retry-after header */
|
/** Helper: create a 429 response with retry-after header */
|
||||||
export function rateLimitResponse(resetAt: number) {
|
export function rateLimitResponse(resetAt: number) {
|
||||||
const retryAfter = Math.ceil((resetAt - Date.now()) / 1000)
|
const retryAfter = Math.ceil((resetAt - Date.now()) / 1000)
|
||||||
|
const minutes = Math.ceil(retryAfter / 60)
|
||||||
return new Response(
|
return new Response(
|
||||||
JSON.stringify({ error: 'Zu viele Anfragen. Bitte versuchen Sie es später erneut.' }),
|
JSON.stringify({
|
||||||
|
error: `Zu viele Versuche. Bitte warten Sie ${minutes > 1 ? `${minutes} Minuten` : `${retryAfter} Sekunden`} und versuchen es erneut.`,
|
||||||
|
retryAfter,
|
||||||
|
}),
|
||||||
{
|
{
|
||||||
status: 429,
|
status: 429,
|
||||||
headers: {
|
headers: {
|
||||||
|
|||||||
Reference in New Issue
Block a user