LearnChineseSimplified/LearningChineseFixed/Pages/Index.razor

59 lines
2.0 KiB
Plaintext

@page "/"
@inject NavigationManager navigator
@inject HttpClient httpClient
@inject Blazored.LocalStorage.ILocalStorageService localStorage
<PageTitle>Index</PageTitle>
<MudContainer Class="align-center justify-center d-flex">
<MudContainer Style="width: 400px">
<MudSelect Class="pt-12" @bind-Value=selectedChunk TextChanged="SelectedChunk" select T=int Label="Chunk" Variant="Variant.Filled" AnchorOrigin="Origin.BottomCenter">
@for (int i = 0; i < numOfChunks; i++)
{
<MudSelectItem T="int" Value="@i" />
}
</MudSelect>
<MudContainer Class="justify-center d-flex pb-16 pt-4">
<MudButton Variant="Variant.Filled" OnClick=StartLearning Color="Color.Primary">Start learning!</MudButton>
</MudContainer>
<MudContainer Class="justify-center d-flex">
@if (Charecters != null)
{
<MudPaper Class="overflow-scroll rounded-0" Style="height: 60vh;" Elevation="1">
<MudDataGrid FixedHeader=true Items="@Charecters">
<Columns>
<PropertyColumn Property="x => x.charcter" Title="CChar" />
<PropertyColumn Property="x => x.pinyin" Title="Pinyin" />
</Columns>
</MudDataGrid>
</MudPaper>
}
</MudContainer>
</MudContainer>
</MudContainer>
@code{
int numOfChunks = 197; //Exclusive index 0
int selectedChunk = 0;
protected override void OnInitialized()
{
SelectedChunk();
StateHasChanged();
}
async void StartLearning()
{
await localStorage.SetItemAsync("SelectedChunk", selectedChunk);
navigator.NavigateTo("/Learn");
}
CChar[]? Charecters;
async void SelectedChunk()
{
Charecters = await httpClient.GetFromJsonAsync<CChar[]>($"Data/Normalized_chunk_{selectedChunk.ToString("000")}.json");
StateHasChanged();
}
}