Change Blazor app to show rankings from server

This commit is contained in:
Manuel Thalmann 2024-06-06 17:48:21 +02:00
parent 72fc685ba1
commit 75daebf3ef
5 changed files with 132 additions and 66 deletions

View file

@ -6,4 +6,22 @@
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<OpenApiReference Include="OpenAPIs\swagger.json" CodeGenerator="NSwagCSharp" Namespace="RankingService" ClassName="RankingClient">
<SourceUri>http://localhost:5072/swagger/v1/swagger.json</SourceUri>
</OpenApiReference>
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.Extensions.ApiDescription.Client" Version="7.0.2">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
<PackageReference Include="Newtonsoft.Json" Version="13.0.1" />
<PackageReference Include="NSwag.ApiDescription.Client" Version="13.18.2">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
</ItemGroup>
</Project>

View file

@ -21,8 +21,8 @@
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="weather">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
<NavLink class="nav-link" href="ranking">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Ranking
</NavLink>
</div>
</nav>

View file

@ -0,0 +1,46 @@
@page "/ranking"
@using RankingService
@attribute [StreamRendering]
<PageTitle>Ranking</PageTitle>
<h1>Ranking</h1>
<p>This component demonstrates showing data.</p>
@if (rankings == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Time</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < rankings.Length; i++)
{
<tr>
<td>@(i + 1)</td>
<td>@rankings[i].Name</td>
<td>@rankings[i].Time</td>
</tr>
}
</tbody>
</table>
}
@code {
private RankingClient client = new RankingClient("http://localhost:5072", new HttpClient());
private Competitor[]? rankings;
protected override async Task OnInitializedAsync()
{
rankings = (await client.RankingsAsync()).ToArray();
}
}

View file

@ -1,64 +0,0 @@
@page "/weather"
@attribute [StreamRendering]
<PageTitle>Weather</PageTitle>
<h1>Weather</h1>
<p>This component demonstrates showing data.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@code {
private WeatherForecast[]? forecasts;
protected override async Task OnInitializedAsync()
{
// Simulate asynchronous loading to demonstrate streaming rendering
await Task.Delay(500);
var startDate = DateOnly.FromDateTime(DateTime.Now);
var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = summaries[Random.Shared.Next(summaries.Length)]
}).ToArray();
}
private class WeatherForecast
{
public DateOnly Date { get; set; }
public int TemperatureC { get; set; }
public string? Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
}

View file

@ -0,0 +1,66 @@
{
"openapi": "3.0.1",
"info": {
"title": "Ranking API",
"description": "List rankings",
"version": "v1"
},
"paths": {
"/Rankings": {
"get": {
"tags": [
"Rankings"
],
"responses": {
"200": {
"description": "OK",
"content": {
"text/plain": {
"schema": {
"type": "array",
"items": {
"$ref": "#/components/schemas/Competitor"
}
}
},
"application/json": {
"schema": {
"type": "array",
"items": {
"$ref": "#/components/schemas/Competitor"
}
}
},
"text/json": {
"schema": {
"type": "array",
"items": {
"$ref": "#/components/schemas/Competitor"
}
}
}
}
}
}
}
}
},
"components": {
"schemas": {
"Competitor": {
"type": "object",
"properties": {
"name": {
"type": "string",
"nullable": true
},
"time": {
"type": "string",
"nullable": true
}
},
"additionalProperties": false
}
}
}
}