blazor-pw-test/Pages/Home.razor
2025-04-07 11:45:14 -05:00

86 lines
3.1 KiB
Plaintext

@page "/"
@inject WeatherService WeatherService
<PageTitle>Memphis Weather</PageTitle>
@if (weather == null)
{
<MudProgressCircular Color="Color.Primary" Indeterminate="true" />
}
else
{
<MudCard Class="mt-6" Style="max-width: 500px; margin: auto;">
<MudCardHeader>
<CardHeaderContent>
<MudText Typo="Typo.h5">@weather.City Weather</MudText>
<MudText Typo="Typo.body2">Current Conditions</MudText>
</CardHeaderContent>
<CardHeaderActions>
<MudIconButton Icon="@Icons.Material.Filled.Refresh" Color="Color.Default" OnClick="RefreshWeather" />
</CardHeaderActions>
</MudCardHeader>
<MudCardContent>
<div class="d-flex align-center">
<img src="@weather.Icon" alt="Weather icon" />
<div class="ml-3">
<MudText Typo="Typo.h3">@weather.Temperature.ToString("F1")°F</MudText>
<MudText Typo="Typo.body1" Style="text-transform: capitalize;">@weather.Description</MudText>
</div>
</div>
<MudDivider Class="my-4" />
<div>
<div class="d-flex align-center mb-2">
<MudIcon Icon="@Icons.Material.Filled.Opacity" Color="Color.Info" Class="mr-2" />
<MudText>Humidity: @weather.Humidity%</MudText>
</div>
<div class="d-flex align-center">
<MudIcon Icon="@Icons.Material.Filled.Air" Color="Color.Info" Class="mr-2" />
<MudText>Wind: @weather.WindSpeed mph</MudText>
</div>
</div>
</MudCardContent>
<MudCardActions>
<MudButton Variant="Variant.Text" Color="Color.Primary"
Href="https://openweathermap.org/city/4641239" Target="_blank">
More Details
</MudButton>
<MudSpacer />
<MudButton Variant="Variant.Filled" Color="Color.Secondary"
Href="/weather">
View Weather History
</MudButton>
</MudCardActions>
</MudCard>
<MudCard Class="mt-4" Style="max-width: 500px; margin: auto;">
<MudCardHeader>
<CardHeaderContent>
<MudText Typo="Typo.h5">Developer Resources</MudText>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent>
<MudText>View PlayWright test report for this website.</MudText>
</MudCardContent>
<MudCardActions>
<MudButton Variant="Variant.Filled" Color="Color.Info"
Href="playwright-report/index.html" Target="_blank">
View Report
</MudButton>
</MudCardActions>
</MudCard>
}
@code {
private WeatherInfo? weather;
protected override async Task OnInitializedAsync()
{
await RefreshWeather();
}
private async Task RefreshWeather()
{
weather = await WeatherService.GetWeatherAsync();
}
}