62 lines
2.1 KiB
Plaintext
62 lines
2.1 KiB
Plaintext
@page "/fetchdata"
|
|
@inject HttpClient Http
|
|
@using TaikoWebUI.Shared
|
|
|
|
<PageTitle>Weather forecast</PageTitle>
|
|
|
|
<MudText Typo="Typo.h3" GutterBottom="true">Weather forecast</MudText>
|
|
<MudText Class="mb-8">This component demonstrates fetching data from the server.</MudText>
|
|
@if (forecasts == null)
|
|
{
|
|
<MudProgressCircular Color="Color.Default" Indeterminate="true"/>
|
|
}
|
|
else
|
|
{
|
|
<MudTable Items="forecasts" Hover="true" SortLabel="Sort By" Elevation="0">
|
|
<HeaderContent>
|
|
<MudTh>
|
|
<MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<WeatherForecast, object>(x=>x.Date)">Date</MudTableSortLabel>
|
|
</MudTh>
|
|
<MudTh>
|
|
<MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureC)">Temp. (C)</MudTableSortLabel>
|
|
</MudTh>
|
|
<MudTh>
|
|
<MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureF)">Temp. (F)</MudTableSortLabel>
|
|
</MudTh>
|
|
<MudTh>
|
|
<MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.Summary!)">Summary</MudTableSortLabel>
|
|
</MudTh>
|
|
</HeaderContent>
|
|
<RowTemplate>
|
|
<MudTd DataLabel="Date">@context.Date</MudTd>
|
|
<MudTd DataLabel="Temp. (C)">@context.TemperatureC</MudTd>
|
|
<MudTd DataLabel="Temp. (F)">@context.TemperatureF</MudTd>
|
|
<MudTd DataLabel="Summary">@context.Summary</MudTd>
|
|
</RowTemplate>
|
|
<PagerContent>
|
|
<MudTablePager PageSizeOptions="new int[]{50, 100}"/>
|
|
</PagerContent>
|
|
</MudTable>
|
|
}
|
|
|
|
|
|
@code {
|
|
private WeatherForecast[]? forecasts;
|
|
|
|
protected override async Task OnInitializedAsync()
|
|
{
|
|
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
|
|
}
|
|
|
|
public class WeatherForecast
|
|
{
|
|
public DateTime Date { get; set; }
|
|
|
|
public int TemperatureC { get; set; }
|
|
|
|
public string? Summary { get; set; }
|
|
|
|
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
|
|
}
|
|
|
|
} |