TaikoLocalServer/TaikoWebUI/Pages/PlayHistory.razor

@using Blazored.LocalStorage

@inject IGameDataService GameDataService
@inject HttpClient Client
@inject AuthService AuthService
@inject IJSRuntime JsRuntime
@inject NavigationManager NavigationManager
@inject ILocalStorageService LocalStorage
@inject BreadcrumbsStateContainer BreadcrumbsStateContainer

@page "/Users/{baid:int}/PlayHistory"

<MudGrid Class="my-8">
    @if (response is null)
    {
        <MudContainer Style="display:flex;margin:50px 0;align-items:center;justify-content:center;">
            <MudProgressCircular Indeterminate="true" Size="Size.Large" Color="Color.Primary" />
        </MudContainer>
    }
    else
    {
        @if (AuthService.LoginRequired && (!AuthService.IsLoggedIn || (AuthService.GetLoggedInBaid() != Baid && !AuthService.IsAdmin)))
        {
            if (!AuthService.IsLoggedIn)
            {
                NavigationManager.NavigateTo("/Login");
            }
            else
            {
                NavigationManager.NavigateTo("/");
            }
        }
        else
        {
            <MudItem xs="12">
                <MudTable Class="mud-table-outlined" Items="@songHistoryDataMap.Values.ToList()" Elevation="0" Filter=@FilterSongs RowsPerPage="25" Striped="false" Hover="false" Bordered="false" Dense="true"  Breakpoint=Breakpoint.None>
                    <ToolBarContent>
                        <MudGrid Spacing="2" Justify="Justify.SpaceBetween">
                            <MudItem xs="12" md="4" Style="align-content: center;">
                                <MudText Typo="Typo.body2">@Localizer["Total Credits Played"]: @songHistoryDataMap.Values.Count</MudText>
                            </MudItem>
                            <MudItem xs="12" md="8">
                                <MudTextField @bind-Value="Search"
                                              Placeholder=@Localizer["Search by Title, Artist or Date"]
                                              Variant="Variant.Outlined"
                                              Clearable="true"
                                              Immediate="true"
                                              Margin="Margin.Dense"
                                              Adornment="Adornment.Start"
                                              AdornmentIcon="@Icons.Material.Filled.Search"
                                              IconSize="Size.Medium" />
                            </MudItem>
                        </MudGrid>
                    </ToolBarContent>
                    <HeaderContent>
                        <MudTh Style="text-align: initial !important;">
                            <MudTableSortLabel InitialDirection="SortDirection.Descending" T="List<SongHistoryData>" SortBy="x => x[0].PlayTime">
                                @Localizer["Play Time"]
                            </MudTableSortLabel>
                        </MudTh>
                    </HeaderContent>
                    <RowTemplate>
                        <MudTable Items="@context" T="SongHistoryData" Context="songHistoryData" Elevation="0" Class="tagged-toolbar" Striped="false" Hover="false" ReadOnly="true" Outlined="true" Breakpoint=Breakpoint.None>
                            <ToolBarContent>
                                <MudText Typo="Typo.body1">@CultureInfo.CurrentCulture.TextInfo.ToTitleCase(context[0].PlayTime.ToString(Localizer["DateFormat"]))</MudText>
                            </ToolBarContent>
                            <HeaderContent>
                                <MudTh Style="width:300px; background-color: var(--mud-palette-table-striped);">@Localizer["Song Title / Artist"]</MudTh>
                                <MudTh Style="background-color: var(--mud-palette-table-striped);">@Localizer["Genre"]</MudTh>
                                <MudTh Style="background-color: var(--mud-palette-table-striped);">@Localizer["Level"]</MudTh>
                                <MudTh Style="background-color: var(--mud-palette-table-striped);">@Localizer["Score"]</MudTh>
                                <MudTh Style="background-color: var(--mud-palette-table-striped);">@Localizer["Crown"]</MudTh>
                                <MudTh Style="background-color: var(--mud-palette-table-striped);">@Localizer["Rank"]</MudTh>
                                <MudTh Style="background-color: var(--mud-palette-table-striped);">@Localizer["Good"]</MudTh>
                                <MudTh Style="background-color: var(--mud-palette-table-striped);">@Localizer["OK"]</MudTh>
                                <MudTh Style="background-color: var(--mud-palette-table-striped);">@Localizer["Bad"]</MudTh>
                                <MudTh Style="background-color: var(--mud-palette-table-striped);">@Localizer["Drumroll"]</MudTh>
                                <MudTh Style="background-color: var(--mud-palette-table-striped);">@Localizer["MAX Combo"]</MudTh>
                            </HeaderContent>
                            <RowTemplate>
                                @* Song title *@
                                <MudTd DataLabel="Song" Style="text-align: initial !important;">
                                    <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
                                        <div style="margin: 4px; display: flex;">
                                            <MudIcon Style=@IconStyle Icon="@GetDifficultyIcon(songHistoryData.Difficulty)" />
                                        </div>
                                        <div style="width:300px; padding-left: 4px;">
                                            <a href="@($"/Users/{Baid}/Songs/{songHistoryData.SongId}")">
                                                <MudText Typo="Typo.body2" Style="font-weight:bold">@songHistoryData.MusicName</MudText>
                                                <MudText Typo="Typo.caption">@songHistoryData.MusicArtist</MudText>
                                            </a>
                                        </div>
                                    </MudStack>
                                </MudTd>

                                @* Genre display *@
                                <MudTd DataLabel="Genre" Style="width: 150px;">
                                    <MudChip Style=@GetGenreStyle(songHistoryData.Genre) Size="Size.Small">@GetGenreTitle(songHistoryData.Genre)</MudChip>
                                </MudTd>

                                @* Star rating *@
                                <MudTd DataLabel="Stars" Style="text-align:center">
                                    <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
                                        <MudIcon Icon="@Icons.Material.Filled.Star" Size="Size.Small" />
                                        <MudText Typo="Typo.caption" Style="line-height:1;margin-top:2px;margin-right:2px;">@songHistoryData.Stars</MudText>
                                    </MudStack>
                                </MudTd>

                                <MudTd>@(songHistoryData.Score)</MudTd>
                                <MudTd Style="text-align:center"><img src="@($"/images/crown_{songHistoryData.Crown}.webp")" alt="@(GetCrownText(songHistoryData.Crown))" title="@(GetCrownText(songHistoryData.Crown))" style=@IconStyle /></MudTd>
                                <MudTd Style="text-align:center">
                                    @if (songHistoryData.ScoreRank is not ScoreRank.None)
                                    {
                                        <img src="@($"/images/rank_{songHistoryData.ScoreRank}.webp")" alt="@(GetRankText(songHistoryData.ScoreRank))" title="@(GetRankText(songHistoryData.ScoreRank))" style=@IconStyle />
                                    }
                                </MudTd>
                                <MudTd>@(songHistoryData.GoodCount)</MudTd>
                                <MudTd>@(songHistoryData.OkCount)</MudTd>
                                <MudTd>@(songHistoryData.MissCount)</MudTd>
                                <MudTd>@(songHistoryData.DrumrollCount)</MudTd>
                                <MudTd>@(songHistoryData.ComboCount)</MudTd>
                            </RowTemplate>
                        </MudTable>
                    </RowTemplate>
                    <PagerContent>
                        <MudTablePager RowsPerPageString=@Localizer["Rows Per Page:"] />
                    </PagerContent>
                </MudTable>
            </MudItem>
        }
    }
</MudGrid>