Taiko_Stuff/TaikoLocalServer
1
0
Fork 0
mirror of synced 2024-11-30 17:24:33 +01:00
Code Releases Activity

Refactor url structure, clean up play results

Browse Source
This commit is contained in:
shiibe 2022-09-10 00:56:53 -04:00
parent 7d3cb81c19
commit 510fb6ce00
6 changed files with 174 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
TaikoWebUI/Pages/Cards.razor Normal file
View File

@ -0,0 +1,112 @@
@using SharedProject.Models.Responses
@using TaikoWebUI.Pages.Dialogs
@using SharedProject.Models
@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">
<MudMenuItem Icon="@Icons.Material.Filled.Delete"
OnClick="_ => DeleteCard(user)">
Delete Card
</MudMenuItem>
</MudMenu>
</CardHeaderActions>
</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 Href="@($"Cards/{user.Baid}/PlayResults")"
Size="Size.Small" Variant="Variant.Text" StartIcon="@Icons.Filled.FeaturedPlayList"
Color="Color.Primary">
View Play Data
</MudButton>
<MudButton Href="@($"Cards/{user.Baid}/Profile")"
Size="Size.Small" Variant="Variant.Text" StartIcon="@Icons.Material.Filled.Edit"
Color="Color.Primary">
Edit Profile
</MudButton>
</MudStack>
</MudCardActions>
</MudCard>
</MudItem>
}
}
else
{
<MudItem xs="12">
<MudText Align="Align.Center" Class="my-8">
No data.
</MudText>
</MudItem>
}
</MudGrid>
@code {
private DashboardResponse? response;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
response = await Client.GetFromJsonAsync<DashboardResponse>("api/Dashboard");
}
private async Task DeleteCard(User user)
{
var parameters = new DialogParameters
{
["user"] = user
};
var dialog = DialogService.Show<CardDeleteConfirmDialog>("Delete Card", parameters);
var result = await dialog.Result;
if (result.Cancelled)
{
return;
}
response = await Client.GetFromJsonAsync<DashboardResponse>("api/Dashboard");
}
}

67
TaikoWebUI/Pages/Dashboard.razor
View File

@ -9,70 +9,9 @@
<h1>Dashboard</h1> <h1>Dashboard</h1>
<MudGrid Class="my-8"> <MudText Class="mt-8">
@if (response is null) Welcome to TaikoWebUI!
{ </MudText>
@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>
</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"
OnClick="_ => DeleteCard(user)">
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>
}
}
else
{
<MudItem xs="12">
<MudText Align="Align.Center" Class="my-8">
No data.
</MudText>
</MudItem>
}
</MudGrid>
@code { @code {

88
TaikoWebUI/Pages/PlayResults.razor
View File

@ -5,50 +5,56 @@
@inject IGameDataService GameDataService @inject IGameDataService GameDataService
@inject HttpClient Client @inject HttpClient Client
@page "/PlayResults/{baid:int}" @page "/Cards/{baid:int}/PlayResults"
<h3>PlayResults for baid : @Baid</h3>
<MudBreadcrumbs Items="breadcrumbs" Class="px-0"></MudBreadcrumbs>
<h1>Play Data</h1>
<MudText Typo="Typo.caption">Card: @Baid</MudText>
<MudGrid Class="my-8">
@if (response is null) @if (response is null)
{ {
<MudText>No data</MudText> <MudItem xs="12">
<MudText Align="Align.Center">
No data.
</MudText>
</MudItem>
} }
else else
{ {
<MudDataGrid Items="@response.SongBestData"> <MudItem xs="12">
<Columns> <MudDataGrid Items="@response.SongBestData">
@* Notice here we have to use cell template for custom conversion *@ <Columns>
@* Field is retrieved using reflection, so it is a string with name equals field name*@ <Column T="SongBestData" Field="@nameof(SongBestData.SongId)" Title="Song">
<Column T="SongBestData" Field="@nameof(SongBestData.SongId)" Title="Song Name"> <CellTemplate>
<CellTemplate> <MudText Typo="Typo.body2" Style="font-weight:bold">@GameDataService.GetMusicNameBySongId(context.Item.SongId)</MudText>
<MudText>@GameDataService.GetMusicNameBySongId(context.Item.SongId)</MudText> <MudText Typo="Typo.caption">@GameDataService.GetMusicArtistBySongId(context.Item.SongId)</MudText>
</CellTemplate> </CellTemplate>
</Column> </Column>
<Column T="SongBestData" Field="@nameof(SongBestData.SongId)" Title="Artist"> <Column T="SongBestData" Field="@nameof(SongBestData.Difficulty)" Title="Difficulty"/>
<CellTemplate> <Column T="SongBestData" Field="@nameof(SongBestData.BestScore)" Title="Best Score"/>
<MudText>@GameDataService.GetMusicArtistBySongId(context.Item.SongId)</MudText> <Column T="SongBestData" Field="@nameof(SongBestData.BestCrown)" Title="Best Crown"/>
</CellTemplate> <Column T="SongBestData" Field="@nameof(SongBestData.BestScoreRank)" Title="Best Rank" />
</Column> <Column T="SongBestData" Field="@nameof(SongBestData.BestRate)" Title="Best Rate"/>
<Column T="SongBestData" Field="@nameof(SongBestData.Difficulty)" Title="Difficulty"/> <Column T="SongBestData" Field="@nameof(SongBestData.IsFavorite)" Title="Favorite">
<Column T="SongBestData" Field="@nameof(SongBestData.BestScore)" Title="Best score"/> <CellTemplate>
<Column T="SongBestData" Field="@nameof(SongBestData.BestCrown)" Title="Best crown"/> <MudToggleIconButton Toggled="@context.Item.IsFavorite"
<Column T="SongBestData" Field="@nameof(SongBestData.BestRate)" Title="Best rate"/> ToggledChanged="@(async () => await OnFavoriteToggled(context.Item))"
<Column T="SongBestData" Field="@nameof(SongBestData.BestScoreRank)" Title="Best score rank"/> Icon="@Icons.Material.Filled.FavoriteBorder" Color="@Color.Secondary"
<Column T="SongBestData" Field="@nameof(SongBestData.IsFavorite)" Title="Is favorite"> Title="Add to favorites"
<CellTemplate> ToggledIcon="@Icons.Material.Filled.Favorite" ToggledColor="@Color.Secondary"
<MudToggleIconButton Toggled="@context.Item.IsFavorite" ToggledTitle="Remove from favorites"/>
ToggledChanged="@(async () => await OnFavoriteToggled(context.Item))" </CellTemplate>
Icon="@Icons.Material.Filled.FavoriteBorder" Color="@Color.Secondary" </Column>
Title="Add to favorite" </Columns>
ToggledIcon="@Icons.Material.Filled.Favorite" ToggledColor="@Color.Secondary" <PagerContent>
ToggledTitle="Remove from favorite"/> <MudDataGridPager T="SongBestData"/>
</CellTemplate> </PagerContent>
</Column> </MudDataGrid>
</Columns> </MudItem>
<PagerContent>
<MudDataGridPager T="SongBestData"/>
</PagerContent>
</MudDataGrid>
} }
</MudGrid>
@code { @code {
@ -58,10 +64,18 @@ else
private SongBestResponse? response; private SongBestResponse? response;
private List<BreadcrumbItem> breadcrumbs = new()
{
new BreadcrumbItem("Cards", href: "/Cards"),
};
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
await base.OnInitializedAsync(); await base.OnInitializedAsync();
response = await Client.GetFromJsonAsync<SongBestResponse>($"api/PlayData/{Baid}"); response = await Client.GetFromJsonAsync<SongBestResponse>($"api/PlayData/{Baid}");
breadcrumbs.Add(new BreadcrumbItem($"Card: {Baid}", href: null, disabled: true));
breadcrumbs.Add(new BreadcrumbItem("Play Data", href: $"/Cards/{Baid}/PlayResults", disabled: false));
} }
private async Task OnFavoriteToggled(SongBestData data) private async Task OnFavoriteToggled(SongBestData data)

8
TaikoWebUI/Pages/Card.razor → TaikoWebUI/Pages/Profile.razor
View File

@ -1,11 +1,12 @@
@page "/Card/{baid:int}" @page "/Cards/{baid:int}/Profile"
@using SharedProject.Enums @using SharedProject.Enums
@using SharedProject.Models @using SharedProject.Models
@inject HttpClient Client @inject HttpClient Client
<MudBreadcrumbs Items="breadcrumbs" Class="px-0"></MudBreadcrumbs> <MudBreadcrumbs Items="breadcrumbs" Class="px-0"></MudBreadcrumbs>
<h1>Card: @Baid</h1> <h1>Profile</h1>
<MudText Typo="Typo.caption">Card: @Baid</MudText>
@if (response is not null) @if (response is not null)
{ {
@ -153,7 +154,7 @@
private List<BreadcrumbItem> breadcrumbs = new() private List<BreadcrumbItem> breadcrumbs = new()
{ {
new BreadcrumbItem("Dashboard", href: ""), new BreadcrumbItem("Cards", href: "/Cards"),
}; };
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
@ -163,6 +164,7 @@
response = await Client.GetFromJsonAsync<UserSetting>($"api/UserSettings/{Baid}"); response = await Client.GetFromJsonAsync<UserSetting>($"api/UserSettings/{Baid}");
breadcrumbs.Add(new BreadcrumbItem($"Card: {Baid}", href: null, disabled: true)); breadcrumbs.Add(new BreadcrumbItem($"Card: {Baid}", href: null, disabled: true));
breadcrumbs.Add(new BreadcrumbItem("Profile", href: $"/Cards/{Baid}/Profile", disabled: false));
} }
private async Task SaveOptions() private async Task SaveOptions()

2
TaikoWebUI/Shared/MainLayout.razor
View File

@ -15,7 +15,7 @@
<NavMenu/> <NavMenu/>
</MudDrawer> </MudDrawer>
<MudMainContent> <MudMainContent>
<MudContainer MaxWidth="MaxWidth.Large" Class="my-8"> <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="my-8">
@Body @Body
</MudContainer> </MudContainer>
</MudMainContent> </MudMainContent>

3
TaikoWebUI/Shared/NavMenu.razor
View File

@ -1,3 +1,4 @@
<MudNavMenu> <MudNavMenu>
<MudNavLink Href="" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink> <MudNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink>
<MudNavLink Href="/Cards" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.CreditCard">Cards</MudNavLink>
</MudNavMenu> </MudNavMenu>