TaikoLocalServer/TaikoWebUI/Pages/Cards.razor

@inject HttpClient Client
@inject IDialogService DialogService

@page "/Cards"

<h1>Cards</h1>

<MudGrid Class="my-8">
    @if (response is null)
    {
        @for (uint i = 0; i < 3; i++)
        {
                        <MudItem xs="12" md="6" lg="4">
                            <MudCard Outlined="true">
                                <MudCardContent>
                                    <MudSkeleton Width="30%" Height="42px;" Class="mb-5"/>
                                    <MudSkeleton Width="80%"/>
                                    <MudSkeleton Width="100%"/>
                                </MudCardContent>
                                <MudCardActions>
                                    <MudStack Row="true" Style="width:100%" Spacing="4" Justify="Justify.FlexEnd">
                                        <MudSkeleton Width="64px" Height="40px"/>
                                        <MudSkeleton Width="64px" Height="40px"/>
                                    </MudStack>
                                </MudCardActions>
                            </MudCard>
                        </MudItem>
        }
    }
    else if (response.Users.Count != 0)
    {
        @foreach (var user in response.Users)
        {
                    <MudItem xs="12" md="6" lg="4">
                        <MudCard Outlined="true">
                            <MudCardHeader>
                                <CardHeaderContent>
                                    <MudText Typo="Typo.h6" Style="font-weight:bold">@user.Baid</MudText>
                                </CardHeaderContent>
                                <CardHeaderActions>
                            <MudMenu Icon="@Icons.Material.Filled.MoreVert" Dense="true" AnchorOrigin="Origin.BottomLeft"
                             TransformOrigin="Origin.TopLeft" Size="Size.Small">
                                        <MudMenuItem Icon="@Icons.Material.Filled.QrCode"
                                                             OnClick="@(_ => ShowQrCode(user))"
                                                             IconColor="@Color.Primary">
                                            Show QR Code
                                        </MudMenuItem>
                                        <MudMenuItem Icon="@Icons.Material.Filled.Delete"
                                                     OnClick="@(_ => DeleteCard(user))"
                                                     IconColor="@Color.Error">
                                            Delete Card
                                        </MudMenuItem>
                                    </MudMenu>
                                </CardHeaderActions>
                            </MudCardHeader>
                            <MudCardContent>
                                <MudText Style="font-weight:bold">Access Code</MudText>
                                <MudText Style="font-family:monospace;overflow:hidden;overflow-x:scroll">@user.AccessCode</MudText>
                            </MudCardContent>
                            <MudCardActions>
                                <MudStack Row="true" Style="width:100%" Spacing="4" Justify="Justify.FlexEnd">
                                    <MudButton Href="@($"Cards/{user.Baid}/Profile")"
                                       Size="Size.Small" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.Edit"
                                       Color="Color.Primary">
                                        Edit Profile
                                    </MudButton>
                                    <MudMenu Size="Size.Small"
                                             Dense="true"
                                             Color="Color.Primary"
                                             Label="View Play Data"
                                             StartIcon="@Icons.Material.Filled.FeaturedPlayList"
                                             EndIcon="@Icons.Material.Filled.KeyboardArrowDown"
                                             FullWidth="true"
                                             AnchorOrigin="Origin.BottomCenter"
                                             TransformOrigin="Origin.TopCenter">
                                        <MudMenuItem Href="@($"Cards/{user.Baid}/HighScores")">High Scores</MudMenuItem>
                                        <MudMenuItem Href="@($"Cards/{user.Baid}/DaniDojo")">Dani Dojo</MudMenuItem>
                                    </MudMenu>
                                </MudStack>
                            </MudCardActions>
                        </MudCard>
                    </MudItem>
        }
    }
    else
    {
            <MudItem xs="12">
                <MudText Align="Align.Center" Class="my-8">
                    No data.
                </MudText>
            </MudItem>
    }
</MudGrid>