Merge pull request #1 from asesidaa/options-page

SharedProject/Models/UserSetting.cs

@@ -19,4 +19,8 @@ public class UserSetting
     public PlaySetting PlaySetting { get; set; } = new();
     
     public int NotesPosition { get; set; }
+
+    public string MyDonName { get; set; } = String.Empty;
+
+    public string Title { get; set; } = String.Empty;
 }

TaikoLocalServer/Controllers/Api/UserSettingsController.cs

@@ -35,7 +35,9 @@ public class UserSettingsController : BaseController<UserSettingsController>
             IsSkipOn = user.IsSkipOn,
             NotesPosition = user.NotesPosition,
             PlaySetting = PlaySettingConverter.ShortToPlaySetting(user.OptionSetting),
-            ToneId = user.SelectedToneId
+            ToneId = user.SelectedToneId,
+            MyDonName = user.MyDonName,
+            Title = user.Title
         };
         return Ok(response);
     }
@@ -58,6 +60,8 @@ public class UserSettingsController : BaseController<UserSettingsController>
         user.SelectedToneId = userSetting.ToneId;
         user.AchievementDisplayDifficulty = userSetting.AchievementDisplayDifficulty;
         user.OptionSetting = PlaySettingConverter.PlaySettingToShort(userSetting.PlaySetting);
+        user.MyDonName = userSetting.MyDonName;
+        user.Title = userSetting.Title;
 
         context.Update(user);
         await context.SaveChangesAsync();

TaikoWebUI/Pages/Card.razor

@@ -4,45 +4,68 @@
 @using SharedProject.Models
 @inject HttpClient Client
 
+<MudBreadcrumbs Items="_breadcrumbs" Class="px-0"></MudBreadcrumbs>
+
 <h1>Card: @Baid</h1>
 
 @if (response is not null)
 {
-    <MudStack>
+    <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="Is Display Achievement Panel">
+                           Label="Display Achievement Panel">
-            <MudSelectItem Value="@true">On</MudSelectItem>
-            <MudSelectItem Value="@false">Off</MudSelectItem>
-        </MudSelect>
-        <MudSelect @bind-Value="@response.IsSkipOn"
-                   Label="Is Skip On">
-            <MudSelectItem Value="@true">On</MudSelectItem>
-            <MudSelectItem Value="@false">Off</MudSelectItem>
-        </MudSelect>
-        <MudSelect @bind-Value="@response.IsVoiceOn"
-                   Label="Is Voice On">
                         <MudSelectItem Value="@true">On</MudSelectItem>
                         <MudSelectItem Value="@false">Off</MudSelectItem>
                     </MudSelect>
+
                     <MudSelect @bind-Value="@response.IsDisplayDanOnNamePlate"
-                   Label="Should Dan be Displayed On Name Plate">
+                           Label="Display Dan Rank on Name Plate">
                         <MudSelectItem Value="@true">On</MudSelectItem>
                         <MudSelectItem Value="@false">Off</MudSelectItem>
                     </MudSelect>
                     <MudSelect @bind-Value="@response.AchievementDisplayDifficulty"
-                   Label="Difficulty Used on Achievement Panel">
+                           Label="Achievement Panel Difficulty">
                         @foreach (var item in Enum.GetValues<Difficulty>())
                         {
                             <MudSelectItem Value="@item" />
                         }
                     </MudSelect>
-        <MudSelect @bind-Value="@response.NotesPosition"
+                </MudStack>
-                   Label="Notes Position">
+            </MudPaper>
-            @for (var i = -5; i <= 5; i++)
+
+            <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++)
                                     {
-                <MudSelectItem Value="@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>())
@@ -50,28 +73,22 @@
                                         <MudSelectItem Value="@item" />
                                     }
                                 </MudSelect>
-        <MudSelect @bind-Value="@response.PlaySetting.Speed"
+
-                   Label="Speed">
+                                <MudSlider Class="mb-8" @bind-Value="@response.NotesPosition" Size="Size.Medium" Min="-5" Max="5" Step="1" TickMarks="true" TickMarkLabels="@notePositionStrings">
-            @for (uint i = 0; i < 15; i++)
+                                    <MudText Typo="Typo.caption">Notes Position</MudText>
-            {
+                                </MudSlider>
-                var index= i;
+                            </MudStack>
-                <MudSelectItem Value="@i">@speedStrings[index]</MudSelectItem>
+                        </MudItem>
-            }
+                    </MudGrid>
-        </MudSelect>
+                </MudStack>
-        <MudSelect @bind-Value="@response.PlaySetting.IsInverseOn"
+            </MudPaper>
-                   Label="Inverse">
+        </MudItem>
-            <MudSelectItem Value="@true">On</MudSelectItem>
+        <MudItem md="4" xs="12" Class="py-8 px-8 my-4 pt-8">
-            <MudSelectItem Value="@false">Off</MudSelectItem>
+            <MudStack Spacing="6" Style="top:100px" Class="sticky">
-        </MudSelect>
-        <MudSelect @bind-Value="@response.PlaySetting.IsVanishOn"
-                   Label="Vanish">
-            <MudSelectItem Value="@true">On</MudSelectItem>
-            <MudSelectItem Value="@false">Off</MudSelectItem>
-        </MudSelect>
                 <MudButton Disabled="@isSavingOptions"
                         OnClick="SaveOptions"
                         Variant="Variant.Filled"
-                                   Color="Color.Info">
+                        Color="Color.Primary">
                     @if (isSavingOptions)
                     {
                         <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
@@ -79,11 +96,18 @@
                     }
                     else
                     {
-                                <MudIcon Icon="@Icons.Filled.Save"></MudIcon>
+                        <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 {
@@ -98,11 +122,20 @@
     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 = new string[] { "-5", "-4", "-3", "-2", "-1", "0", "+1", "+2", "+3", "+4", "+5"};
+
+    private List<BreadcrumbItem> _breadcrumbs = new List<BreadcrumbItem>
+    {
+        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()
@@ -111,5 +144,4 @@
         await Client.PostAsJsonAsync($"api/UserSettings/{Baid}", response);
         isSavingOptions = false;
     }  
-
 }

TaikoWebUI/Pages/Dashboard.razor

@@ -3,45 +3,75 @@
 @inject NavigationManager UriHelper
 
 @page "/Dashboard"
-<MudContainer>
+
+<h1>Dashboard</h1>
+
+<MudGrid Class="my-8">
 @if (response is null)
 {
-        <MudText>No Data</MudText>
+    @if (isLoading is true) {
-    }
+            @for (uint i = 0; i < 3; i++) {
-    else
+                <MudItem xs="12" md="6" lg="4">
-    {
+                    <MudCard Outlined="true">
-        <MudGrid>
-            @foreach (var user in response.Users)
-            {
-                <MudItem>
-                    <MudCard>
-                        <MudCardHeader>
-                            <CardHeaderContent>
-                                <MudText Typo="Typo.h5">Baid @user.Baid</MudText>
-                            </CardHeaderContent>
-                            <CardHeaderActions>
-                                <MudIconButton OnClick="() => NavigateToProfile(user.Baid)" Icon="@Icons.Material.Filled.Settings" Color="Color.Default" />
-                            </CardHeaderActions>
-                        </MudCardHeader>
                         <MudCardContent>
-                            <MudText Typo="Typo.h6">Access Code</MudText>
+                            <MudSkeleton Width="30%" Height="42px;" Class="mb-5" />
-                            <MudText>@user.AccessCode</MudText>
+                            <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>
             }
-        </MudGrid>
+    } else {
+        <MudItem xs="12">
+            <MudText Align="Align.Center" Class="my-8">
+                No data.
+            </MudText>
+        </MudItem>
     }
-    
+}
-</MudContainer>
+else
+{
+    @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>
+                </MudCardHeader>
+                <MudCardContent>
+                    <MudText Style="font-weight:bold">Access Code</MudText>
+                    <MudText Style="font-family:monospace">@user.AccessCode</MudText>
+                </MudCardContent>
+                <MudCardActions>
+                    <MudStack Row="true" Style="width:100%" Spacing="4" Justify="Justify.FlexEnd">
+                        <MudButton Size="Size.Small" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.Delete" Color="Color.Error">Delete</MudButton>
+                        <MudButton OnClick="() => NavigateToProfile(user.Baid)" Size="Size.Small" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.Edit" Color="Color.Primary">Edit</MudButton>
+                    </MudStack>
+                </MudCardActions>
+            </MudCard>
+        </MudItem>
+    }
+}
+</MudGrid>
 
 @code {
     private DashboardResponse? response;
+    private bool isLoading = true;
 
     protected override async Task OnInitializedAsync()
     {
         await base.OnInitializedAsync();
         response = await Client.GetFromJsonAsync<DashboardResponse>("api/Dashboard");
+
+        isLoading = false;
     }
 
 

TaikoWebUI/Shared/MainLayout.razor

@@ -7,9 +7,6 @@
 <MudLayout>
     <MudAppBar Elevation="0">
         <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())"/>
-        <MudSpacer/>
-        <MudIconButton Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Inherit" Link="https://mudblazor.com/" Target="_blank"/>
-        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/MudBlazor/MudBlazor/" Target="_blank"/>
     </MudAppBar>
     <MudDrawer @bind-Open="_drawerOpen" Elevation="1">
         <MudDrawerHeader>
@@ -18,7 +15,7 @@
         <NavMenu/>
     </MudDrawer>
     <MudMainContent>
-        <MudContainer MaxWidth="MaxWidth.Large" Class="my-8 pt-8">
+        <MudContainer MaxWidth="MaxWidth.Large" Class="my-8">
             @Body
         </MudContainer>
     </MudMainContent>

TaikoWebUI/Shared/NavMenu.razor

@@ -1,6 +1,6 @@
 <MudNavMenu>
-    <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
+@*    <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
     <MudNavLink Href="counter" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Add">Counter</MudNavLink>
-    <MudNavLink Href="fetchdata" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Fetch data</MudNavLink>
+    <MudNavLink Href="fetchdata" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Fetch data</MudNavLink>*@
     <MudNavLink Href="Dashboard" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink>
 </MudNavMenu>