From 94c10aebdd461dd6a1320ce84d11e626c8daddd1 Mon Sep 17 00:00:00 2001 From: MarcWieland Date: Tue, 9 Jun 2026 00:22:30 +0200 Subject: [PATCH] Onboarding --- .../Components/Layout/NavMenu.razor | 2 +- .../Components/Layout/NavMenu.razor.css | 36 +++- .../Components/Pages/Changelog.razor | 3 +- .../Components/Pages/Home.razor | 32 +++- .../Components/Pages/Login.razor | 2 + .../Components/Pages/OnboardingTour.razor | 179 ++++++++++++++++++ .../Components/Pages/Settings.razor | 44 +++++ timetracker.Server/Components/App.razor | 28 +++ 8 files changed, 316 insertions(+), 10 deletions(-) create mode 100644 timetracker.Client/Components/Pages/OnboardingTour.razor diff --git a/timetracker.Client/Components/Layout/NavMenu.razor b/timetracker.Client/Components/Layout/NavMenu.razor index f5118f8..eb9121c 100644 --- a/timetracker.Client/Components/Layout/NavMenu.razor +++ b/timetracker.Client/Components/Layout/NavMenu.razor @@ -1,4 +1,4 @@ -
+
@* --- Brand / Logo Section --- *@
diff --git a/timetracker.Client/Components/Layout/NavMenu.razor.css b/timetracker.Client/Components/Layout/NavMenu.razor.css index 0e18fa0..b031195 100644 --- a/timetracker.Client/Components/Layout/NavMenu.razor.css +++ b/timetracker.Client/Components/Layout/NavMenu.razor.css @@ -119,26 +119,54 @@ } /* NavLink active state (Fixes active color contrast issue) */ -::deep .custom-nav-link.active { +::deep .custom-nav-link.active, +::deep .custom-nav-link .active { background: linear-gradient(90deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.04) 100%) !important; font-weight: 600 !important; box-shadow: inset 3px 0 0 #0EA5E9 !important; } ::deep .custom-nav-link.active, +::deep .custom-nav-link .active, ::deep .custom-nav-link.active .mud-nav-link-text, -::deep .custom-nav-link.active .mud-nav-link-icon-default { +::deep .custom-nav-link .active .mud-nav-link-text, +::deep .custom-nav-link.active .mud-nav-link-icon-default, +::deep .custom-nav-link .active .mud-nav-link-icon-default { color: #0EA5E9 !important; /* Sky 500 */ } -/* Admin link color overrides */ +/* Admin link color overrides & active state */ ::deep .admin-link .mud-nav-link-icon-default { color: rgba(239, 68, 68, 0.7) !important; /* Red 500 */ } -::deep .admin-link.active .mud-nav-link-icon-default { + +::deep .admin-link.active, +::deep .admin-link .active { + background: linear-gradient(90deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.04) 100%) !important; + box-shadow: inset 3px 0 0 #EF4444 !important; +} + +::deep .admin-link.active, +::deep .admin-link .active, +::deep .admin-link.active .mud-nav-link-text, +::deep .admin-link .active .mud-nav-link-text, +::deep .admin-link.active .mud-nav-link-icon-default, +::deep .admin-link .active .mud-nav-link-icon-default { color: #EF4444 !important; } +/* Version link active state */ +::deep .version-link.active, +::deep .version-link .active { + opacity: 1 !important; +} + +::deep .version-link.active .version-text, +::deep .version-link .active .version-text { + color: #0EA5E9 !important; +} + + /* Footer Section */ .nav-footer { border-top: 1px solid rgba(255, 255, 255, 0.06); diff --git a/timetracker.Client/Components/Pages/Changelog.razor b/timetracker.Client/Components/Pages/Changelog.razor index 95a81e9..b483fc2 100644 --- a/timetracker.Client/Components/Pages/Changelog.razor +++ b/timetracker.Client/Components/Pages/Changelog.razor @@ -71,8 +71,9 @@ new("1.4", "08.06.2026", true, [ new("Neu", "Timebot implementiert"), + new("Neu", "Onboarding Tour"), new("Upgrade", "Security hardening"), - new("Upgrade", "Changed coloring") + new("Upgrade", "Changed coloring"), ]), new("1.3", "08.06.2026", false, [ diff --git a/timetracker.Client/Components/Pages/Home.razor b/timetracker.Client/Components/Pages/Home.razor index 8dee457..c17a615 100644 --- a/timetracker.Client/Components/Pages/Home.razor +++ b/timetracker.Client/Components/Pages/Home.razor @@ -5,6 +5,7 @@ @inject IHolidayService HolidayService @inject ISnackbar Snackbar @inject AuthenticationStateProvider AuthStateProvider +@inject IJSRuntime JSRuntime KW @_kw – Wochenübersicht – Timetracker @@ -20,7 +21,7 @@ else @* ── Wochen-Header ── *@ - @@ -269,7 +270,7 @@ else } @* ── Wochensumme ── *@ - @@ -306,7 +307,7 @@ else @* ── Gleitzeitkonto ── *@ - = TimeSpan.Zero ? "#4CAF50" : "#FF9800")};")"> @@ -328,6 +329,11 @@ else + + @if (_showOnboarding) + { + + } } @code { @@ -347,6 +353,7 @@ else private TimeSpan _totalOvertime; private Dictionary _holidays = []; private int _holidayYear = -1; + private bool _showOnboarding; private bool IsCurrentWeek => _monday == GetMonday(DateOnly.FromDateTime(DateTime.Today)); @@ -364,9 +371,26 @@ else await Task.WhenAll(loadWeekTask, overtimeTask); _totalOvertime = await overtimeTask; + + try + { + var showOnb = await JSRuntime.InvokeAsync("localStorage.getItem", "showOnboarding"); + _showOnboarding = showOnb == "true"; + } + catch + { + // Ignored during prerendering/SSR + } + _loading = false; } + private async Task HandleOnboardingFinished() + { + _showOnboarding = false; + await JSRuntime.InvokeVoidAsync("localStorage.setItem", "showOnboarding", "false"); + } + private async Task LoadWeek() { Task> holidaysTask; diff --git a/timetracker.Client/Components/Pages/Login.razor b/timetracker.Client/Components/Pages/Login.razor index 1c004e1..9ee1838 100644 --- a/timetracker.Client/Components/Pages/Login.razor +++ b/timetracker.Client/Components/Pages/Login.razor @@ -3,6 +3,7 @@ @attribute [AllowAnonymous] @inject IAuthService AuthService @inject NavigationManager Nav +@inject IJSRuntime JSRuntime Anmelden – Timetracker @@ -207,6 +208,7 @@ var (user, error) = await AuthService.RegisterAsync(_registerModel.Username, _registerModel.Password, _honeypot); if (user != null) { + await JSRuntime.InvokeVoidAsync("localStorage.setItem", "showOnboarding", "true"); Nav.NavigateTo("/", forceLoad: true); } else diff --git a/timetracker.Client/Components/Pages/OnboardingTour.razor b/timetracker.Client/Components/Pages/OnboardingTour.razor new file mode 100644 index 0000000..1082dcd --- /dev/null +++ b/timetracker.Client/Components/Pages/OnboardingTour.razor @@ -0,0 +1,179 @@ +@inject IJSRuntime JS + +@if (_active) +{ + @* Dark Backdrop Overlay *@ +
+ + @* Onboarding Instruction Card *@ +
+ + + + @* Header / Title *@ + + + + @_steps[_currentStep].Title + + + + @* Explanation Text *@ + + @_steps[_currentStep].Content + + + @* Footer / Progress & Buttons *@ + + @* Step Count *@ + + Schritt @(_currentStep + 1) von @_steps.Count + + + @* Navigation Button Stack *@ + + @if (_currentStep > 0) + { + + Zurück + + } + else + { + + Überspringen + + } + + + @(_currentStep == _steps.Count - 1 ? "Fertig" : "Weiter") + + + + + + +
+} + + + +@code { + [Parameter] public EventCallback OnFinished { get; set; } + + private bool _active = true; + private int _currentStep = 0; + + private readonly List _steps = + [ + new(".onboarding-nav-menu", "Die Navigation", "Hier auf der linken Seite findest du das Hauptmenü. Du kannst ganz einfach zwischen der Wochen- und Monatsübersicht wechseln oder deine Statistiken einsehen."), + new(".onboarding-week-header", "Kalenderwoche blättern", "Hier siehst du die aktuell ausgewählte Woche. Verwende die Pfeiltasten links und rechts, um in vergangenen oder zukünftigen Wochen deine Zeiten zu erfassen."), + new(".onboarding-day-card", "Zeiterfassung pro Tag", "Das Herzstück des Timetrackers. Trage hier deine täglichen Start- und Endzeiten sowie deine Pausen ein. Das System errechnet die Zeiten und Überstunden in Echtzeit."), + new(".onboarding-week-summary", "Wochenzusammenfassung", "Hier siehst du auf einen Blick, wie viele Stunden du in dieser Woche gearbeitet hast, wie viel Pause du gemacht hast und wie sich dein Stundensaldo verändert hat."), + new(".onboarding-overtime-balance", "Gleitzeitkonto", "Hier wird dein gesamtes Gleitzeitkonto über das Jahr hinweg zusammengerechnet. So weißt du immer genau, wie viele Überstunden du angesammelt hast.") + ]; + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await HighlightStep(); + } + } + + private async Task HighlightStep() + { + if (_active && _steps.Count > 0) + { + var step = _steps[_currentStep]; + await JS.InvokeVoidAsync("window.onboarding.highlight", step.TargetSelector); + } + } + + private async Task NextStep() + { + if (_currentStep < _steps.Count - 1) + { + _currentStep++; + await HighlightStep(); + } + else + { + await CompleteTour(); + } + } + + private async Task PrevStep() + { + if (_currentStep > 0) + { + _currentStep--; + await HighlightStep(); + } + } + + private async Task CompleteTour() + { + _active = false; + await JS.InvokeVoidAsync("window.onboarding.clear"); + await OnFinished.InvokeAsync(); + } + + private class OnboardingStep + { + public string TargetSelector { get; } + public string Title { get; } + public string Content { get; } + + public OnboardingStep(string targetSelector, string title, string content) + { + TargetSelector = targetSelector; + Title = title; + Content = content; + } + } +} diff --git a/timetracker.Client/Components/Pages/Settings.razor b/timetracker.Client/Components/Pages/Settings.razor index 2da5397..be9ee39 100644 --- a/timetracker.Client/Components/Pages/Settings.razor +++ b/timetracker.Client/Components/Pages/Settings.razor @@ -5,6 +5,9 @@ @inject IHolidayService HolidayService @inject ISnackbar Snackbar @inject AuthenticationStateProvider AuthStateProvider +@inject IJSRuntime JSRuntime +@inject NavigationManager Nav + Einstellungen – Timetracker @@ -187,6 +190,33 @@ else + @* ── Hilfe & Einführung ── *@ + + + + + + + Hilfe & Einführung + + + + + + + Wenn du die interaktive Einführung (Onboarding Tour) noch einmal sehen möchtest, kannst du sie hier zurücksetzen und neu starten. + + + Onboarding wiederholen + + + + + + @* ── Speichern-Button ── *@ @@ -578,6 +608,20 @@ else Snackbar.Add("Feiertag entfernt", Severity.Info); } + private async Task RepeatOnboarding() + { + try + { + await JSRuntime.InvokeVoidAsync("localStorage.setItem", "showOnboarding", "true"); + Snackbar.Add("Onboarding zurückgesetzt. Leite weiter zur Startseite...", Severity.Info); + Nav.NavigateTo("/"); + } + catch (Exception ex) + { + Snackbar.Add($"Fehler beim Zurücksetzen des Onboardings: {ex.Message}", Severity.Error); + } + } + private static string FormatHours(double hours) { var ts = TimeSpan.FromHours(hours); diff --git a/timetracker.Server/Components/App.razor b/timetracker.Server/Components/App.razor index a95d06d..17fcf08 100644 --- a/timetracker.Server/Components/App.razor +++ b/timetracker.Server/Components/App.razor @@ -13,6 +13,15 @@ + @@ -20,6 +29,25 @@ +