chk
/
KoogleApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mod: collapsable day header

This commit is contained in:
beo3000 2026-01-11 16:59:31 +01:00
parent f373f24c77
commit 22f735f034
1 changed files with 90 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
src/Koogle.Web/Components/Pages/Days/DayDetails.razor
View File

@ -52,68 +52,76 @@ else
<!-- Game Event Dialog Host (for elimination/winner dialogs) -->
<GameEventDialogHost />
<!-- Header -->
<MudPaper Class="pa-4 mb-4">
<MudGrid>
<MudItem xs="12" md="6">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
<MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="NavigateBack" />
<MudText Typo="Typo.h5">@Day.PostDate.ToString("dddd, dd. MMMM yyyy")</MudText>
<MudChip T="string" Size="Size.Medium" Color="GetStatusColor(Day.Status)">
@GetStatusLabel(Day.Status)
</MudChip>
</MudStack>
</MudItem>
<MudItem xs="12" md="6" Class="d-flex justify-end align-center">
@if (Day.Status == DayStatus.Started && !GameState.Value.IsGameActive)
{
<MudButton Variant="Variant.Filled"
Color="Color.Success"
StartIcon="@Icons.Material.Filled.SportsScore"
OnClick="OpenGameSetupDialog"
Disabled="DayState.Value.IsLoading || Day.Participants.Count == 0"
Class="mr-2">
Neues Spiel
</MudButton>
}
@if (GameState.Value.IsGameActive)
{
<MudButton Variant="Variant.Outlined"
Color="Color.Warning"
StartIcon="@Icons.Material.Filled.Stop"
OnClick="EndGame"
Disabled="DayState.Value.IsLoading"
Class="mr-2">
Spiel beenden
</MudButton>
}
@if (Day.Status != DayStatus.Closed)
{
<MudButton Variant="Variant.Filled"
Color="GetNextStatusColor(Day.Status)"
StartIcon="@GetNextStatusIcon(Day.Status)"
OnClick="AdvanceStatus"
Disabled="DayState.Value.IsLoading"
Class="mr-2">
@GetNextStatusLabel(Day.Status)
</MudButton>
}
@if (Day.Status == DayStatus.New)
{
<MudButton Variant="Variant.Outlined"
Color="Color.Error"
StartIcon="@Icons.Material.Filled.Delete"
OnClick="ConfirmDelete"
Disabled="DayState.Value.IsLoading">
Löschen
</MudButton>
}
</MudItem>
</MudGrid>
</MudPaper>
<!-- Header - Collapsible -->
@if (!_isHeaderCollapsed)
{
<MudPaper Class="pa-4 mb-4">
<MudGrid>
<MudItem xs="12" md="6">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
<MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="NavigateBack" />
<MudText Typo="Typo.h5" Class="d-none d-md-block">@Day.PostDate.ToString("dddd, dd. MMMM yyyy")</MudText>
<MudText Typo="Typo.subtitle1" Class="d-md-none">@Day.PostDate.ToString("dd.MM.yyyy")</MudText>
<MudChip T="string" Size="Size.Medium" Color="GetStatusColor(Day.Status)">
@GetStatusLabel(Day.Status)
</MudChip>
</MudStack>
</MudItem>
<MudItem xs="12" md="6" Class="d-flex justify-end align-center flex-wrap gap-2">
@if (Day.Status == DayStatus.Started && !GameState.Value.IsGameActive)
{
<MudButton Variant="Variant.Filled"
Color="Color.Success"
StartIcon="@Icons.Material.Filled.SportsScore"
OnClick="OpenGameSetupDialog"
Disabled="DayState.Value.IsLoading || Day.Participants.Count == 0">
Neues Spiel
</MudButton>
}
@if (GameState.Value.IsGameActive)
{
<MudButton Variant="Variant.Outlined"
Color="Color.Warning"
StartIcon="@Icons.Material.Filled.Stop"
OnClick="EndGame"
Disabled="DayState.Value.IsLoading">
Spiel beenden
</MudButton>
}
@if (Day.Status != DayStatus.Closed)
{
<MudButton Variant="Variant.Filled"
Color="GetNextStatusColor(Day.Status)"
StartIcon="@GetNextStatusIcon(Day.Status)"
OnClick="AdvanceStatus"
Disabled="DayState.Value.IsLoading">
@GetNextStatusLabel(Day.Status)
</MudButton>
}
@if (Day.Status == DayStatus.New)
{
<MudButton Variant="Variant.Outlined"
Color="Color.Error"
StartIcon="@Icons.Material.Filled.Delete"
OnClick="ConfirmDelete"
Disabled="DayState.Value.IsLoading">
Löschen
</MudButton>
}
</MudItem>
</MudGrid>
</MudPaper>
}
<!-- Main Content with Tabs -->
<MudTabs @bind-ActivePanelIndex="_activeTabIndex" Elevation="0" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-4">
<!-- Main Content with Tabs + Header Toggle -->
<div style="position: relative">
<MudIconButton Icon="@(_isHeaderCollapsed ? Icons.Material.Filled.ExpandMore : Icons.Material.Filled.ExpandLess)"
OnClick="ToggleHeader"
Color="Color.Warning"
Size="Size.Small"
Title="@(_isHeaderCollapsed ? "Header anzeigen" : "Header ausblenden")"
Style="position: absolute; right: 8px; top: 8px; z-index: 1" />
<MudTabs @bind-ActivePanelIndex="_activeTabIndex" Elevation="0" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-4">
<!-- Tab 1: Details (existing content) -->
<MudTabPanel Text="Details" Icon="@Icons.Material.Filled.Info">
@ -464,6 +472,7 @@ else
<GameBoardPanel />
</MudTabPanel>
</MudTabs>
</div>
}
@code {
@ -474,7 +483,21 @@ else
private IReadOnlyList<PersonExpenseDto> Expenses => DayState.Value.SelectedDayExpenses;
private Guid? _selectedParticipantId;
private int _activeTabIndex = 0;
private int _activeTabIndexBacking = 0;
private int _activeTabIndex
{
get => _activeTabIndexBacking;
set
{
_activeTabIndexBacking = value;
// Auto-collapse header on game tabs (Eingabe=1, Tafel=2)
if (value is 1 or 2)
{
_isHeaderCollapsed = true;
}
}
}
private bool _isHeaderCollapsed = true;
private DayParticipantDto? SelectedParticipant => Day?.Participants.FirstOrDefault(p => p.PersonId == _selectedParticipantId);
private IReadOnlyList<ExpenseDto> OneClickExpenses => DayState.Value.AvailableExpenses.Where(e => e.IsOneClick && !e.IsVariable).ToList();
@ -522,6 +545,11 @@ else
_selectedParticipantId = null;
}
private void ToggleHeader()
{
_isHeaderCollapsed = !_isHeaderCollapsed;
}
private void NavigateBack()
{
NavigationManager.NavigateTo("/days");