271 lines
9.3 KiB
TypeScript
271 lines
9.3 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
X, ChevronRight, ChevronLeft, SkipForward,
|
|
MapPin, Pencil, LayoutGrid, Save, Ruler, Users, Keyboard, Rocket,
|
|
} from 'lucide-react'
|
|
|
|
const TOUR_STORAGE_KEY = 'lageplan-onboarding-completed'
|
|
|
|
interface TourStep {
|
|
title: string
|
|
description: string
|
|
icon?: React.ReactNode
|
|
targetSelector?: string
|
|
position?: 'top' | 'bottom' | 'left' | 'right'
|
|
}
|
|
|
|
const TOUR_STEPS: TourStep[] = [
|
|
{
|
|
title: 'Willkommen bei Lageplan!',
|
|
icon: <Rocket className="w-5 h-5 text-red-500" />,
|
|
description: 'Lageplan ist deine taktische Lageskizzen-App für den Feuerwehr-Einsatz. Diese kurze Tour zeigt dir die wichtigsten Funktionen. Du kannst sie jederzeit überspringen oder später im Benutzermenü erneut starten.',
|
|
},
|
|
{
|
|
title: 'Einsatz erstellen',
|
|
icon: <MapPin className="w-5 h-5 text-red-500" />,
|
|
description: 'Erstelle über «Neuer Einsatz» ein neues Projekt. Gib eine Adresse ein — die Karte fliegt automatisch dorthin. Jeder Einsatz wird separat gespeichert und kann als PDF oder PNG exportiert werden.',
|
|
targetSelector: '[data-tour="new-project"]',
|
|
position: 'bottom',
|
|
},
|
|
{
|
|
title: 'Zeichenwerkzeuge',
|
|
icon: <Pencil className="w-5 h-5 text-blue-500" />,
|
|
description: 'Die Werkzeugleiste links enthält alle Zeichentools: Punkte, Linien, Polygone, Freihand, Pfeile, Text, Radiergummi und mehr. Jedes Tool hat ein Tastenkürzel — drücke «?» für eine Übersicht.',
|
|
targetSelector: '[data-tour="toolbar"]',
|
|
position: 'right',
|
|
},
|
|
{
|
|
title: 'Symbole & Sidebar',
|
|
icon: <LayoutGrid className="w-5 h-5 text-orange-500" />,
|
|
description: 'Rechts findest du über 100 taktische Feuerwehr-Symbole, sortiert nach Kategorien (Wasser, Feuer, Fahrzeuge usw.). Ziehe sie per Drag & Drop auf die Karte. Wechsle zwischen Symbolen und dem Einsatz-Journal.',
|
|
targetSelector: '[data-tour="sidebar"]',
|
|
position: 'left',
|
|
},
|
|
{
|
|
title: 'Speichern & Export',
|
|
icon: <Save className="w-5 h-5 text-green-500" />,
|
|
description: 'Speichere deinen Einsatz mit Ctrl+S oder dem Speichern-Button. Exportiere als PNG (Bild) oder als druckfertiges PDF. Die letzte Kartenansicht wird automatisch gespeichert.',
|
|
targetSelector: '[data-tour="save"]',
|
|
position: 'bottom',
|
|
},
|
|
{
|
|
title: 'Messen & Schlauch-Rechner',
|
|
icon: <Ruler className="w-5 h-5 text-purple-500" />,
|
|
description: 'Mit dem Messwerkzeug (Taste «M») misst du Distanzen direkt auf der Karte. Der Schlauch-Rechner im Admin-Bereich berechnet die benötigten Schlauchlängen und -typen für deinen Einsatz.',
|
|
},
|
|
{
|
|
title: 'Live-Zusammenarbeit',
|
|
icon: <Users className="w-5 h-5 text-cyan-500" />,
|
|
description: 'Mehrere Benutzer können gleichzeitig am selben Einsatz arbeiten. Änderungen werden in Echtzeit synchronisiert — ideal für die Einsatzleitung mit mehreren Operateuren.',
|
|
},
|
|
{
|
|
title: 'Tastenkürzel (CH)',
|
|
icon: <Keyboard className="w-5 h-5 text-slate-500" />,
|
|
description: 'Optimiert für Schweizer Tastaturen: Ctrl+Y = Rückgängig, Ctrl+Z = Wiederholen, Del = Löschen, Ctrl+S = Speichern. Drücke «?» oder F1 für die komplette Übersicht aller Kürzel.',
|
|
},
|
|
{
|
|
title: 'Bereit für den Einsatz!',
|
|
icon: <Rocket className="w-5 h-5 text-red-500" />,
|
|
description: 'Du bist startklar! Diese Tour kannst du jederzeit über dein Benutzermenü (oben rechts → «Tour starten») erneut aufrufen. Viel Erfolg im Einsatz — Feuer frei!',
|
|
},
|
|
]
|
|
|
|
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">
|
|
<div className="flex items-center gap-2">
|
|
{step.icon}
|
|
<h3 className="font-semibold text-base">{step.title}</h3>
|
|
</div>
|
|
<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)
|
|
}
|