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:
Pepe Ziberi
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)
|
||||
}
|
||||
Reference in New Issue
Block a user