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