TaikoLocalServer/TaikoWebUI/Pages/Card.razor

@page "/Card/{baid}"
@using SharedProject.Models.Responses
@using SharedProject.Enums
@using SharedProject.Models
@inject HttpClient Client

<MudBreadcrumbs Items="breadcrumbs" Class="px-0"></MudBreadcrumbs>

<h1>Card: @Baid</h1>

@if (response is not null)
{
    <MudGrid>
        <MudItem xs="12" md="8">
            <MudPaper Class="py-8 px-8 my-8" Outlined="true">
                <MudStack Spacing="6">
                    <h2>Profile Options</h2>

                    <MudTextField @bind-Value="@response.MyDonName" Label="Name" Variant="Variant.Outlined"></MudTextField>

                    <MudTextField @bind-Value="@response.Title" Label="Title" Variant="Variant.Outlined"></MudTextField>

                    <MudSelect @bind-Value="@response.IsDisplayAchievement"
                               Label="Display Achievement Panel">
                        <MudSelectItem Value="@true">On</MudSelectItem>
                        <MudSelectItem Value="@false">Off</MudSelectItem>
                    </MudSelect>

                    <MudSelect @bind-Value="@response.IsDisplayDanOnNamePlate"
                               Label="Display Dan Rank on Name Plate">
                        <MudSelectItem Value="@true">On</MudSelectItem>
                        <MudSelectItem Value="@false">Off</MudSelectItem>
                    </MudSelect>
                    <MudSelect @bind-Value="@response.AchievementDisplayDifficulty"
                               Label="Achievement Panel Difficulty">
                        @foreach (var item in Enum.GetValues<Difficulty>())
                        {
                            <MudSelectItem Value="@item"/>
                        }
                    </MudSelect>
                </MudStack>
            </MudPaper>

            <MudPaper Class="py-8 px-8 my-8" Outlined="true">
                <MudStack Spacing="6">
                    <h2>Song Options</h2>
                    <MudGrid>
                        <MudItem xs="12" md="4">
                            <MudStack Spacing="6">
                                <MudSwitch @bind-Checked="@response.PlaySetting.IsVanishOn" Label="Vanish" Color="Color.Primary"/>

                                <MudSwitch @bind-Checked="@response.PlaySetting.IsInverseOn" Label="Inverse" Color="Color.Primary"/>

                                <MudSwitch @bind-Checked="@response.IsSkipOn" Label="Give Up" Color="Color.Primary"/>

                                <MudSwitch @bind-Checked="@response.IsVoiceOn" Label="Voice" Color="Color.Primary"/>
                            </MudStack>
                        </MudItem>
                        <MudItem xs="12" md="8">
                            <MudStack Spacing="6">
                                <MudSelect @bind-Value="@response.PlaySetting.Speed" Label="Speed">
                                    @for (uint i = 0; i < 15; i++)
                                    {
                                        var index = i;
                                        <MudSelectItem Value="@i">@speedStrings[index]</MudSelectItem>
                                    }
                                </MudSelect>

                                <MudSelect @bind-Value="@response.PlaySetting.RandomType"
                                           Label="Random">
                                    @foreach (var item in Enum.GetValues<RandomType>())
                                    {
                                        <MudSelectItem Value="@item"/>
                                    }
                                </MudSelect>

                                <MudSlider Class="mb-8" @bind-Value="@response.NotesPosition" Size="Size.Medium" Min="-5" Max="5" Step="1" TickMarks="true" TickMarkLabels="@notePositionStrings">
                                    <MudText Typo="Typo.caption">Notes Position</MudText>
                                </MudSlider>
                            </MudStack>
                        </MudItem>
                    </MudGrid>
                </MudStack>
            </MudPaper>
        </MudItem>
        <MudItem md="4" xs="12" Class="py-8 px-8 my-4 pt-8">
            <MudStack Spacing="6" Style="top:100px" Class="sticky">
                <MudButton Disabled="@isSavingOptions"
                           OnClick="SaveOptions"
                           Variant="Variant.Filled"
                           Color="Color.Primary">
                    @if (isSavingOptions)
                    {
                        <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
                        <MudText Class="ms-2">Saving...</MudText>
                    }
                    else
                    {
                        <MudIcon Icon="@Icons.Filled.Save" Class="mx-2"></MudIcon>
                        <MudText>Save</MudText>
                    }
                </MudButton>
            </MudStack>
        </MudItem>
    </MudGrid>

    <MudScrollToTop>
        <MudFab Color="Color.Secondary" Icon="@Icons.Filled.ArrowCircleUp"/>
    </MudScrollToTop>
}

@code {

    [Parameter]
    public string? Baid { get; set; }

    private UserSetting? response;

    private bool isSavingOptions;

    private readonly string[] speedStrings =
    {
        "1.0", "1.1", "1.2", "1.3", "1.4",
        "1.5", "1.6", "1.7", "1.8", "1.9",
        "2.0", "2.5", "3.0", "3.5", "4.0"
    };

    private readonly string[] notePositionStrings = { "-5", "-4", "-3", "-2", "-1", "0", "+1", "+2", "+3", "+4", "+5" };

    private List<BreadcrumbItem> breadcrumbs = new()
    {
        new BreadcrumbItem("Dashboard", href: "Dashboard"),
    };

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        isSavingOptions = false;
        response = await Client.GetFromJsonAsync<UserSetting>($"api/UserSettings/{Baid}");

        breadcrumbs.Add(new BreadcrumbItem($"Card: {Baid}", href: null, disabled: true));
    }

    private async Task SaveOptions()
    {
        isSavingOptions = true;
        await Client.PostAsJsonAsync($"api/UserSettings/{Baid}", response);
        isSavingOptions = false;
    }

}