adminpepe/Lageplan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Pepe Ziberi
2026-02-24 19:49:42 +01:00
parent cb575f9a82
commit d893373bd9
16 changed files with 618 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/layout/left-toolbar.tsx
View File

@@ -48,18 +48,18 @@ const colors = [
{ value: '#ffffff', name: 'Weiss' },
]
const drawTools: { mode: DrawMode; icon: typeof MousePointer2; label: string }[] = [
{ mode: 'select', icon: MousePointer2, label: 'Auswählen' },
{ mode: 'point', icon: CircleDot, label: 'Punkt' },
{ mode: 'linestring', icon: Minus, label: 'Linie' },
{ mode: 'polygon', icon: Pentagon, label: 'Polygon' },
{ mode: 'rectangle', icon: Square, label: 'Rechteck' },
{ mode: 'circle', icon: Circle, label: 'Kreis' },
{ mode: 'freehand', icon: Pencil, label: 'Freihand' },
{ mode: 'arrow', icon: MoveRight, label: 'Pfeil / Route' },
{ mode: 'text', icon: Type, label: 'Text' },
{ mode: 'eraser', icon: Eraser, label: 'Radiergummi' },
{ mode: 'measure', icon: Ruler, label: 'Messen' },
const drawTools: { mode: DrawMode; icon: typeof MousePointer2; label: string; shortcut: string }[] = [
{ mode: 'select', icon: MousePointer2, label: 'Auswählen', shortcut: 'V' },
{ mode: 'point', icon: CircleDot, label: 'Punkt', shortcut: 'P' },
{ mode: 'linestring', icon: Minus, label: 'Linie', shortcut: 'L' },
{ mode: 'polygon', icon: Pentagon, label: 'Polygon', shortcut: 'G' },
{ mode: 'rectangle', icon: Square, label: 'Rechteck', shortcut: 'R' },
{ mode: 'circle', icon: Circle, label: 'Kreis', shortcut: 'C' },
{ mode: 'freehand', icon: Pencil, label: 'Freihand', shortcut: 'F' },
{ mode: 'arrow', icon: MoveRight, label: 'Pfeil / Route', shortcut: 'A' },
{ mode: 'text', icon: Type, label: 'Text', shortcut: 'T' },
{ mode: 'eraser', icon: Eraser, label: 'Radiergummi', shortcut: 'E' },
{ mode: 'measure', icon: Ruler, label: 'Messen', shortcut: 'M' },
]
export function LeftToolbar({
@@ -92,7 +92,7 @@ export function LeftToolbar({
</Button>
</TooltipTrigger>
<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>
</Tooltip>
))}

15
src/components/layout/topbar.tsx
View File

@@ -39,6 +39,7 @@ import {
Shield,
Building2,
MapPin,
HelpCircle,
} from 'lucide-react'
import { HoseSettingsDialog } from '@/components/dialogs/hose-settings-dialog'
import type { Project, DrawFeature } from '@/app/app/page'
@@ -65,6 +66,7 @@ interface TopbarProps {
userName?: string
userRole?: string
onLogout?: () => void
onStartTour?: () => void
}
export function Topbar({
@@ -87,6 +89,7 @@ export function Topbar({
userName,
userRole,
onLogout,
onStartTour,
}: TopbarProps) {
const [isLoadDialogOpen, setIsLoadDialogOpen] = useState(false)
const [isHoseSettingsOpen, setIsHoseSettingsOpen] = useState(false)
@@ -159,6 +162,7 @@ export function Topbar({
<div className="flex items-center gap-1 md:gap-2">
<Button
data-tour="save"
variant="outline"
className="h-9 md:h-10 px-2 md:px-4 text-sm"
onClick={onSaveProject}
@@ -177,7 +181,7 @@ export function Topbar({
</Button>
</DropdownMenuTrigger>
<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" />
Neuer Einsatz
</DropdownMenuItem>
@@ -294,6 +298,12 @@ export function Topbar({
Administration
</DropdownMenuItem>
)}
{onStartTour && (
<DropdownMenuItem onClick={onStartTour}>
<HelpCircle className="w-4 h-4 mr-2" />
Tour starten
</DropdownMenuItem>
)}
<DropdownMenuItem
onClick={() => { setShowDeleteAccountDialog(true); setDeleteAccountPw(''); setDeleteAccountError('') }}
className="text-destructive focus:text-destructive"
@@ -414,6 +424,9 @@ export function Topbar({
</p>
)}
<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)}
</p>
</button>

32
src/components/map/map-view.tsx
View File

@@ -106,7 +106,7 @@ export function MapView({
const measureMarkersRef = useRef<maplibregl.Marker[]>([])
const measureCoordsRef = useRef<number[][]>([])
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 [measurePointCount, setMeasurePointCount] = useState(0)
const [measureFinished, setMeasureFinished] = useState(false)
@@ -699,15 +699,6 @@ export function MapView({
attribution: '© swisstopo',
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: [
{
@@ -727,12 +718,6 @@ export function MapView({
source: 'swisstopo',
layout: { visibility: 'none' },
},
{
id: 'swissimage',
type: 'raster',
source: 'swissimage',
layout: { visibility: 'none' },
},
],
},
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>
{{ 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>
</button>
{layerDropdownOpen && (
@@ -2180,13 +2165,12 @@ export function MapView({
{ key: 'osm', label: 'OpenStreetMap' },
{ key: 'satellite', label: 'Satellit (Esri)' },
{ key: 'swisstopo', label: 'Swisstopo Karte' },
{ key: 'swissimage', label: 'Luftbild CH' },
] as const).map(({ key, label }) => (
<button
key={key}
onClick={() => {
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) {
map.current.setLayoutProperty(l, 'visibility', l === key ? 'visible' : 'none')
}
@@ -2315,6 +2299,16 @@ export function MapView({
</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 */}
<div
ref={tooltipRef}

246
src/components/onboarding/onboarding-tour.tsx Normal file
View 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)
}

6
src/components/providers/auth-provider.tsx
View File

@@ -29,7 +29,7 @@ interface AuthContextType {
user: User | null
tenant: TenantInfo | null
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>
canEdit: () => 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 {
const res = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password }),
body: JSON.stringify({ email, password, rememberMe }),
})
const data = await res.json()