Unit conversions, favorites, countries
This commit is contained in:
Daniel Roth
Родитель
97a743ed31
Коммит
6018f1c21a
|
|
@ -0,0 +1,17 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Text;
|
||||
using System.Threading.Tasks;
|
||||
using WeatherClient;
|
||||
|
||||
namespace BlazorWeather
|
||||
{
|
||||
public class AppState
|
||||
{
|
||||
public Location CurrentLocation { get; set; }
|
||||
public WeatherResponse Weather { get; set; }
|
||||
public string UnitOption { get; set; } = "imperial";
|
||||
public IList<Location> FavoriteLocations { get; set; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Text;
|
||||
using System.Threading.Tasks;
|
||||
using WeatherClient;
|
||||
|
||||
namespace BlazorWeather
|
||||
{
|
||||
public class DisplayHelper
|
||||
{
|
||||
private readonly AppState appState;
|
||||
|
||||
public DisplayHelper(AppState appState)
|
||||
{
|
||||
this.appState = appState;
|
||||
}
|
||||
|
||||
public Temperature Convert(Temperature temp)
|
||||
{
|
||||
if (appState.UnitOption == "imperial" && temp.Unit == "C")
|
||||
{
|
||||
return new Temperature { Value = Math.Round(temp.Value * 9 / 5 + 32), Unit = "F" };
|
||||
}
|
||||
else if (appState.UnitOption != "imperial" && temp.Unit == "F")
|
||||
{
|
||||
return new Temperature { Value = Math.Round((temp.Value - 32) * 5 / 9), Unit = "C" };
|
||||
}
|
||||
else
|
||||
{
|
||||
return temp;
|
||||
}
|
||||
}
|
||||
|
||||
public string DisplayTemp(Temperature temp)
|
||||
{
|
||||
var convertedTemp = Convert(temp);
|
||||
return $"{convertedTemp.Value}˚{convertedTemp.Unit}";
|
||||
}
|
||||
|
||||
public string DisplayCurrentTemp() => DisplayTemp(appState.Weather.CurrentWeather.Temperature);
|
||||
|
||||
public string TempUnit() => appState.UnitOption == "imperial" ? "F" : "C";
|
||||
public string SpeedUnit() => appState.UnitOption == "metric" ? "km/h" : "mph";
|
||||
|
||||
public double ConvertSpeed(double mph) => appState.UnitOption == "metric" ? Math.Round(mph * 1.609344) : mph;
|
||||
|
||||
public string DisplayWindSpeed(WeatherSnapshot weather) => $"{ConvertSpeed(weather.WindSpeed)} {SpeedUnit()}";
|
||||
|
||||
public string DisplayCurrentWindSpeed() => DisplayWindSpeed(appState.Weather.CurrentWeather);
|
||||
|
||||
public string DisplayPrecipationProbability(WeatherResponse weather) => $"{weather.DailyForecasts.First().Day.PrecipitationProbability}%";
|
||||
|
||||
public string DisplayCurrentPrecipationProbability() => DisplayPrecipationProbability(appState.Weather);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,8 @@
|
|||
@page "/favorites"
|
||||
@inject IWeatherService WeatherService
|
||||
@inject AppState AppState
|
||||
@inject DisplayHelper DH
|
||||
@inject NavigationManager NavigationManager
|
||||
|
||||
<div class="m-7 md:m-10 mt-12">
|
||||
<!-- Search -->
|
||||
|
|
@ -9,23 +13,23 @@
|
|||
|
||||
<!-- Items -->
|
||||
<div class="grid gap-6 md:gap-8">
|
||||
@for (var i = 0; i < 5; i++)
|
||||
@foreach (var favorite in favoriteWeather)
|
||||
{
|
||||
<div class="stat-box justify-between">
|
||||
<img class="w-9 absolute top-4 right-4" src="_content/BlazorWeather/weather-icons/cloud-sun.svg" />
|
||||
<div class="mb-1 text-3xl">18˚</div>
|
||||
<div class="stat-box justify-between" @onclick="() => SelectLocation(favorite.Location)">
|
||||
<img class="w-9 absolute top-4 right-4" src="@favorite.Weather.CurrentWeather.GetIconUrl()" />
|
||||
<div class="mb-1 text-3xl">@DH.DisplayTemp(favorite.Weather.CurrentWeather.Temperature)</div>
|
||||
<div class="text-sm">
|
||||
St. Louis
|
||||
<div class="stat-source">USA</div>
|
||||
@favorite.Location.Name
|
||||
<div class="stat-source">@favorite.Location.Country</div>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs mt-2">
|
||||
<div class="flex items-center">
|
||||
<svg class="inline-block w-4 mr-1" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.99 8.89071C17.6287 6.88427 16.6142 5.05354 15.1045 3.68345C13.5948 2.31337 11.6745 1.48079 9.64252 1.31529V0H8.3568V1.31529C6.32481 1.48079 4.40452 2.31337 2.8948 3.68345C1.38508 5.05354 0.370622 6.88427 0.00930376 8.89071C-0.0115025 9.01168 0.00275608 9.13607 0.0503944 9.24919C0.0980328 9.36231 0.17706 9.45943 0.278135 9.52907C0.37921 9.5987 0.498108 9.63795 0.620777 9.64216C0.743446 9.64638 0.864758 9.61539 0.970375 9.55286C1.4428 9.22457 1.99676 9.03324 2.57109 9C3.11696 9.01322 3.64986 9.16913 4.11677 9.45221C4.58369 9.7353 4.96836 10.1357 5.23252 10.6136C5.29383 10.7037 5.37625 10.7775 5.47261 10.8285C5.56898 10.8795 5.67635 10.9062 5.78538 10.9062C5.8944 10.9062 6.00178 10.8795 6.09814 10.8285C6.1945 10.7775 6.27692 10.7037 6.33823 10.6136C6.55385 10.2351 6.84386 9.90422 7.19077 9.64083C7.53769 9.37744 7.93433 9.18701 8.3568 9.081V15.1071C8.3568 15.5334 8.18748 15.9422 7.88608 16.2436C7.58468 16.545 7.1759 16.7143 6.74966 16.7143C6.32342 16.7143 5.91464 16.545 5.61324 16.2436C5.31184 15.9422 5.14252 15.5334 5.14252 15.1071V14.7857H3.8568V15.1071C3.8568 15.8744 4.16159 16.6102 4.7041 17.1527C5.24662 17.6952 5.98243 18 6.74966 18C7.51689 18 8.2527 17.6952 8.79522 17.1527C9.33774 16.6102 9.64252 15.8744 9.64252 15.1071V9.08036C10.0651 9.18651 10.4618 9.37715 10.8087 9.64076C11.1557 9.90438 11.4456 10.2355 11.6611 10.6142C11.718 10.7101 11.7989 10.7896 11.8958 10.8448C11.9928 10.9 12.1024 10.929 12.2139 10.929C12.3255 10.929 12.4351 10.9 12.532 10.8448C12.629 10.7896 12.7099 10.7101 12.7668 10.6142C13.0309 10.1362 13.4155 9.73569 13.8824 9.45249C14.3494 9.16929 14.8823 9.01329 15.4282 9C16.0026 9.03324 16.5565 9.22457 17.0289 9.55286C17.1346 9.61558 17.256 9.64673 17.3787 9.64261C17.5015 9.63849 17.6206 9.59927 17.7217 9.5296C17.8229 9.45994 17.902 9.36274 17.9497 9.24951C17.9973 9.13628 18.0116 9.01177 17.9907 8.89071H17.99ZM2.57109 7.71429C2.24418 7.71427 1.91891 7.76037 1.60488 7.85121C2.04127 6.63566 2.76555 5.54387 3.7158 4.66919C4.66604 3.79452 5.81397 3.16298 7.06145 2.82857C5.78715 4.47141 5.09799 6.49275 5.1033 8.57186C4.37494 8.01826 3.48595 7.7172 2.57109 7.71429ZM8.99966 7.71429C8.05185 7.71866 7.13321 8.04254 6.39223 8.63357C6.41602 7.20643 6.78309 4.46143 8.99966 2.73471C11.2047 4.45564 11.5769 7.20257 11.6045 8.63164C10.864 8.04185 9.94636 7.71869 8.99966 7.71429ZM15.4282 7.71429C14.5134 7.71701 13.6245 8.01785 12.896 8.57121C12.9013 6.4921 12.2122 4.47076 10.9379 2.82793C12.1854 3.1624 13.3334 3.79403 14.2836 4.66883C15.2339 5.54362 15.9581 6.63554 16.3944 7.85121C16.0804 7.76037 15.7551 7.71427 15.4282 7.71429Z" fill="#3E8EED"/></svg>
|
||||
13%
|
||||
@DH.DisplayPrecipationProbability(favorite.Weather)
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<svg class="inline-block w-4 mr-1" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.2967 8.99949H0.64293C0.289319 8.99949 0 9.28881 0 9.64242V10.9283C0 11.2819 0.289319 11.5712 0.64293 11.5712H6.35697C6.99588 11.5712 7.59461 12.0092 7.69909 12.6401C7.83169 13.4437 7.21287 14.1429 6.4293 14.1429C5.86272 14.1429 5.38052 13.7732 5.20774 13.2629C5.12335 13.0098 4.86216 12.8571 4.59695 12.8571H3.27894C2.88515 12.8571 2.5677 13.2107 2.64003 13.5964C2.98561 15.3685 4.55275 16.7147 6.42528 16.7147C8.71974 16.7147 10.5521 14.7015 10.2507 12.3508C10.0056 10.4059 8.25362 8.99949 6.2967 8.99949ZM0.64293 7.71363H14.1445C16.5434 7.71363 18.436 5.5116 17.9136 3.02426C17.6083 1.56963 16.4309 0.392264 14.9763 0.0868724C12.7501 -0.379252 10.753 1.08743 10.3592 3.1207C10.2829 3.50646 10.6043 3.85605 10.9941 3.85605H12.3121C12.5813 3.85605 12.8385 3.70336 12.9229 3.4502C13.0957 2.93988 13.5779 2.57019 14.1445 2.57019C14.924 2.57019 15.5469 3.26938 15.4143 4.07304C15.3098 4.70391 14.7151 5.14191 14.0721 5.14191H0.64293C0.289319 5.14191 0 5.43123 0 5.78484V7.0707C0 7.42431 0.289319 7.71363 0.64293 7.71363ZM16.0733 8.99949H9.79263C10.5682 9.66653 11.1267 10.5586 11.3919 11.5712H16.0733C17.1381 11.5712 18.002 12.4352 18.002 13.5C18.002 14.5649 17.1381 15.4288 16.0733 15.4288C15.354 15.4288 14.7352 15.031 14.4016 14.4483C14.2851 14.2474 14.052 14.1429 13.819 14.1429H12.4608C12.0228 14.1429 11.6973 14.5769 11.846 14.9908C12.5612 17.0241 14.6789 18.3983 17.0457 17.896C18.7012 17.5464 20.0634 16.2244 20.4492 14.5729C21.1363 11.6315 18.9062 8.99949 16.0733 8.99949Z" fill="#3E8EED"/></svg>
|
||||
9 mph
|
||||
@DH.DisplayWindSpeed(favorite.Weather.CurrentWeather);
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -37,3 +41,34 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
IList<WeatherAtLocation> favoriteWeather = new List<WeatherAtLocation>();
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
if (AppState.FavoriteLocations == null)
|
||||
{
|
||||
var locations = await WeatherService.GetLocations("o");
|
||||
AppState.FavoriteLocations = locations.Take(5).ToList();
|
||||
}
|
||||
foreach (var location in AppState.FavoriteLocations)
|
||||
{
|
||||
var weather = await WeatherService.GetWeather(location.Coordinate);
|
||||
favoriteWeather.Add(new WeatherAtLocation { Location = location, Weather = weather });
|
||||
}
|
||||
}
|
||||
|
||||
void SelectLocation(Location location)
|
||||
{
|
||||
Console.WriteLine($"Change location to {location.Name}");
|
||||
AppState.CurrentLocation = location;
|
||||
NavigationManager.NavigateTo("/");
|
||||
}
|
||||
|
||||
class WeatherAtLocation
|
||||
{
|
||||
public Location Location { get; set; }
|
||||
public WeatherResponse Weather { get; set; }
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +1,29 @@
|
|||
@page "/"
|
||||
@inject IWeatherService WeatherService
|
||||
@inject AppState AppState
|
||||
@inject DisplayHelper DH
|
||||
|
||||
@if (weather == null) {
|
||||
@if (AppState.Weather == null) {
|
||||
<div>Loading...</div>
|
||||
}
|
||||
else {
|
||||
var temp = weather.CurrentWeather.Temperature;
|
||||
|
||||
<!-- Mobile -->
|
||||
<div class="md:hidden overflow-x-hidden">
|
||||
<!-- Heading -->
|
||||
<div class="mt-14 px-6 pb-2 relative">
|
||||
<h3 class="text-2xl mb-5 relative z-10">@location.Name</h3>
|
||||
<p class="text-7xl tracking-tighter mb-5">@temp</p>
|
||||
<span class="rounded-full px-4 py-1" style="background: var(--primary-dotnet)">@weather.CurrentWeather.Phrase</span>
|
||||
<img class="absolute top-0 -right-8 w-52 z-0" src="@weather.CurrentWeather.GetIconUrl()" />
|
||||
<h3 class="text-2xl mb-5 relative z-10">@AppState.CurrentLocation.Name</h3>
|
||||
<p class="text-7xl tracking-tighter mb-5">@DH.DisplayCurrentTemp()</p>
|
||||
<span class="rounded-full px-4 py-1" style="background: var(--primary-dotnet)">@AppState.Weather.CurrentWeather.Phrase</span>
|
||||
<img class="absolute top-0 -right-8 w-52 z-0" src="@AppState.Weather.CurrentWeather.GetIconUrl()" />
|
||||
</div>
|
||||
<!-- Rainfall, wind, etc. -->
|
||||
<div class="px-6 mt-9 flex items-center">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.99 8.89071C17.6287 6.88427 16.6142 5.05354 15.1045 3.68345C13.5948 2.31337 11.6745 1.48079 9.64252 1.31529V0H8.3568V1.31529C6.32481 1.48079 4.40452 2.31337 2.8948 3.68345C1.38508 5.05354 0.370622 6.88427 0.00930376 8.89071C-0.0115025 9.01168 0.00275608 9.13607 0.0503944 9.24919C0.0980328 9.36231 0.17706 9.45943 0.278135 9.52907C0.37921 9.5987 0.498108 9.63795 0.620777 9.64216C0.743446 9.64638 0.864758 9.61539 0.970375 9.55286C1.4428 9.22457 1.99676 9.03324 2.57109 9C3.11696 9.01322 3.64986 9.16913 4.11677 9.45221C4.58369 9.7353 4.96836 10.1357 5.23252 10.6136C5.29383 10.7037 5.37625 10.7775 5.47261 10.8285C5.56898 10.8795 5.67635 10.9062 5.78538 10.9062C5.8944 10.9062 6.00178 10.8795 6.09814 10.8285C6.1945 10.7775 6.27692 10.7037 6.33823 10.6136C6.55385 10.2351 6.84386 9.90422 7.19077 9.64083C7.53769 9.37744 7.93433 9.18701 8.3568 9.081V15.1071C8.3568 15.5334 8.18748 15.9422 7.88608 16.2436C7.58468 16.545 7.1759 16.7143 6.74966 16.7143C6.32342 16.7143 5.91464 16.545 5.61324 16.2436C5.31184 15.9422 5.14252 15.5334 5.14252 15.1071V14.7857H3.8568V15.1071C3.8568 15.8744 4.16159 16.6102 4.7041 17.1527C5.24662 17.6952 5.98243 18 6.74966 18C7.51689 18 8.2527 17.6952 8.79522 17.1527C9.33774 16.6102 9.64252 15.8744 9.64252 15.1071V9.08036C10.0651 9.18651 10.4618 9.37715 10.8087 9.64076C11.1557 9.90438 11.4456 10.2355 11.6611 10.6142C11.718 10.7101 11.7989 10.7896 11.8958 10.8448C11.9928 10.9 12.1024 10.929 12.2139 10.929C12.3255 10.929 12.4351 10.9 12.532 10.8448C12.629 10.7896 12.7099 10.7101 12.7668 10.6142C13.0309 10.1362 13.4155 9.73569 13.8824 9.45249C14.3494 9.16929 14.8823 9.01329 15.4282 9C16.0026 9.03324 16.5565 9.22457 17.0289 9.55286C17.1346 9.61558 17.256 9.64673 17.3787 9.64261C17.5015 9.63849 17.6206 9.59927 17.7217 9.5296C17.8229 9.45994 17.902 9.36274 17.9497 9.24951C17.9973 9.13628 18.0116 9.01177 17.9907 8.89071H17.99ZM2.57109 7.71429C2.24418 7.71427 1.91891 7.76037 1.60488 7.85121C2.04127 6.63566 2.76555 5.54387 3.7158 4.66919C4.66604 3.79452 5.81397 3.16298 7.06145 2.82857C5.78715 4.47141 5.09799 6.49275 5.1033 8.57186C4.37494 8.01826 3.48595 7.7172 2.57109 7.71429ZM8.99966 7.71429C8.05185 7.71866 7.13321 8.04254 6.39223 8.63357C6.41602 7.20643 6.78309 4.46143 8.99966 2.73471C11.2047 4.45564 11.5769 7.20257 11.6045 8.63164C10.864 8.04185 9.94636 7.71869 8.99966 7.71429ZM15.4282 7.71429C14.5134 7.71701 13.6245 8.01785 12.896 8.57121C12.9013 6.4921 12.2122 4.47076 10.9379 2.82793C12.1854 3.1624 13.3334 3.79403 14.2836 4.66883C15.2339 5.54362 15.9581 6.63554 16.3944 7.85121C16.0804 7.76037 15.7551 7.71427 15.4282 7.71429Z" fill="#3E8EED"/></svg>
|
||||
<div class="flex-grow pl-2">@weather.CurrentWeather.PrecipitationProbability%</div>
|
||||
<div class="flex-grow pl-2">@DH.DisplayCurrentPrecipationProbability()</div>
|
||||
<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.2967 8.99949H0.64293C0.289319 8.99949 0 9.28881 0 9.64242V10.9283C0 11.2819 0.289319 11.5712 0.64293 11.5712H6.35697C6.99588 11.5712 7.59461 12.0092 7.69909 12.6401C7.83169 13.4437 7.21287 14.1429 6.4293 14.1429C5.86272 14.1429 5.38052 13.7732 5.20774 13.2629C5.12335 13.0098 4.86216 12.8571 4.59695 12.8571H3.27894C2.88515 12.8571 2.5677 13.2107 2.64003 13.5964C2.98561 15.3685 4.55275 16.7147 6.42528 16.7147C8.71974 16.7147 10.5521 14.7015 10.2507 12.3508C10.0056 10.4059 8.25362 8.99949 6.2967 8.99949ZM0.64293 7.71363H14.1445C16.5434 7.71363 18.436 5.5116 17.9136 3.02426C17.6083 1.56963 16.4309 0.392264 14.9763 0.0868724C12.7501 -0.379252 10.753 1.08743 10.3592 3.1207C10.2829 3.50646 10.6043 3.85605 10.9941 3.85605H12.3121C12.5813 3.85605 12.8385 3.70336 12.9229 3.4502C13.0957 2.93988 13.5779 2.57019 14.1445 2.57019C14.924 2.57019 15.5469 3.26938 15.4143 4.07304C15.3098 4.70391 14.7151 5.14191 14.0721 5.14191H0.64293C0.289319 5.14191 0 5.43123 0 5.78484V7.0707C0 7.42431 0.289319 7.71363 0.64293 7.71363ZM16.0733 8.99949H9.79263C10.5682 9.66653 11.1267 10.5586 11.3919 11.5712H16.0733C17.1381 11.5712 18.002 12.4352 18.002 13.5C18.002 14.5649 17.1381 15.4288 16.0733 15.4288C15.354 15.4288 14.7352 15.031 14.4016 14.4483C14.2851 14.2474 14.052 14.1429 13.819 14.1429H12.4608C12.0228 14.1429 11.6973 14.5769 11.846 14.9908C12.5612 17.0241 14.6789 18.3983 17.0457 17.896C18.7012 17.5464 20.0634 16.2244 20.4492 14.5729C21.1363 11.6315 18.9062 8.99949 16.0733 8.99949Z" fill="#3E8EED"/></svg>
|
||||
<div class="flex-grow pl-2">9mph</div>
|
||||
<div class="flex-grow pl-2">@DH.DisplayCurrentWindSpeed()</div>
|
||||
<svg width="13" height="18" viewBox="0 0 13 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.8629 7.91477L7.08998 0.314299C7.02073 0.217104 6.92925 0.137868 6.82316 0.0831964C6.71708 0.0285246 6.59947 0 6.48012 0C6.36078 0 6.24317 0.0285246 6.13709 0.0831964C6.031 0.137868 5.93952 0.217104 5.87027 0.314299L1.0757 7.95077C0.409605 9.02522 0.0385681 10.2563 0 11.5199C0 13.2385 0.682725 14.8868 1.89798 16.102C3.11324 17.3173 4.76149 18 6.48012 18C8.19876 18 9.847 17.3173 11.0623 16.102C12.2775 14.8868 12.9602 13.2385 12.9602 11.5199C12.9189 10.2424 12.5403 8.99865 11.8629 7.91477ZM6.48012 16.56C5.14393 16.5583 3.86296 16.0267 2.91813 15.0819C1.9733 14.137 1.44174 12.8561 1.44003 11.5199C1.4783 10.513 1.78074 9.53391 2.317 8.68086L2.99022 7.60804L10.2436 14.8615C9.77254 15.3952 9.19338 15.8227 8.54455 16.1157C7.89571 16.4086 7.19203 16.5603 6.48012 16.5607V16.56Z" fill="#3E8EED"/></svg>
|
||||
<div class="pl-2">9mph</div>
|
||||
<div class="pl-2">@AppState.Weather.CurrentWeather.RelativeHumidity%</div>
|
||||
</div>
|
||||
<!-- Sunrise, sunset -->
|
||||
<div class="mt-6 relative pt-7">
|
||||
|
|
@ -38,22 +38,22 @@ else {
|
|||
<svg viewBox="0 0 414 77" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M-0.5 1.49994C108.333 0.499944 351.9 17.6 415.5 76" stroke="#637989"/></svg>
|
||||
</div>
|
||||
|
||||
<Next24Hours HourlyForecasts="weather.HourlyForecasts" />
|
||||
<Next7Days DailyForecasts="weather.DailyForecasts" />
|
||||
<Next24Hours HourlyForecasts="AppState.Weather.HourlyForecasts" />
|
||||
<Next7Days DailyForecasts="AppState.Weather.DailyForecasts" />
|
||||
</div>
|
||||
|
||||
<!-- Desktop -->
|
||||
<div class="desktop hidden md:flex flex-col flex-grow min-h-screen">
|
||||
<h3 class="text-center text-xl p-5 border-b sticky top-0">@location.Name</h3>
|
||||
<h3 class="text-center text-xl p-5 border-b sticky top-0">@AppState.CurrentLocation.Name</h3>
|
||||
<div class="grid flex-grow" style="grid-template-columns: 6fr 4fr; grid-auto-rows: 100%">
|
||||
<!-- Left col -->
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex justify-evenly text-center my-10">
|
||||
<!-- Temperature and summary -->
|
||||
<div>
|
||||
<img class="inline-block w-20 mb-4" src="@weather.CurrentWeather.GetIconUrl()" />
|
||||
<p class="text-5xl tracking-tighter mb-6 pl-2">@temp</p>
|
||||
<span class="rounded-full px-4 py-1" style="background: var(--primary-dotnet)">@weather.CurrentWeather.Phrase</span>
|
||||
<img class="inline-block w-20 mb-4" src="@AppState.Weather.CurrentWeather.GetIconUrl()" />
|
||||
<p class="text-5xl tracking-tighter mb-6 pl-2">@DH.DisplayCurrentTemp()</p>
|
||||
<span class="rounded-full px-4 py-1" style="background: var(--primary-dotnet)">@AppState.Weather.CurrentWeather.Phrase</span>
|
||||
</div>
|
||||
|
||||
<!-- Wind speed and direction -->
|
||||
|
|
@ -62,36 +62,36 @@ else {
|
|||
<svg viewBox="0 0 212 212" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M106 91L106 121" stroke="#91A7B7" stroke-width="2"/><line x1="121" y1="107" x2="91" y2="107" stroke="#91A7B7" stroke-width="2"/><line x1="212" y1="107" x2="182" y2="107" stroke="#91A7B7" stroke-width="4"/><line x1="197.799" y1="53" x2="171.818" y2="68" stroke="#91A7B7" stroke-width="2"/><line x1="158.982" y1="14.317" x2="143.982" y2="40.2978" stroke="#91A7B7" stroke-width="2"/><line x1="133.046" y1="3.45174" x2="125.281" y2="32.4295" stroke="#91A7B7"/><line x1="78.2709" y1="3.54649" x2="86.0355" y2="32.5243" stroke="#91A7B7"/><line x1="30.9729" y1="31.5765" x2="52.1861" y2="52.7897" stroke="#91A7B7"/><line x1="106" y1="-2.62268e-07" x2="106" y2="30" stroke="#91A7B7" stroke-width="4"/><line x1="53.0001" y1="14.2013" x2="68.0001" y2="40.1821" stroke="#91A7B7" stroke-width="2"/><line x1="30.7749" y1="31.253" x2="51.9881" y2="52.4662" stroke="#91A7B7"/><line x1="3.60231" y1="78.7585" x2="32.5801" y2="86.5231" stroke="#91A7B7"/><line x1="3.91405" y1="134.046" x2="32.8918" y2="126.282" stroke="#91A7B7"/><line x1="14.183" y1="53.1157" x2="40.1637" y2="68.1157" stroke="#91A7B7" stroke-width="2"/><line x1="3.57643" y1="79.0174" x2="32.5542" y2="86.782" stroke="#91A7B7"/><line x1="3.92992" y1="133.723" x2="32.9077" y2="125.958" stroke="#91A7B7"/><line x1="31.68" y1="181.483" x2="52.8932" y2="160.27" stroke="#91A7B7"/><line x1="30" y1="107" x2="1.74846e-07" y2="107" stroke="#91A7B7" stroke-width="4"/><line x1="40.1821" y1="144" x2="14.2014" y2="159" stroke="#91A7B7" stroke-width="2"/><line x1="67.9817" y1="171.934" x2="52.9818" y2="197.914" stroke="#91A7B7" stroke-width="2"/><line x1="85.941" y1="179.25" x2="78.1764" y2="208.228" stroke="#91A7B7"/><line x1="125.376" y1="179.345" x2="133.141" y2="208.323" stroke="#91A7B7"/><line x1="159.666" y1="160.27" x2="180.88" y2="181.483" stroke="#91A7B7"/><line x1="106" y1="182" x2="106" y2="212" stroke="#91A7B7" stroke-width="4"/><line x1="144" y1="171.818" x2="159" y2="197.799" stroke="#91A7B7" stroke-width="2"/><line x1="171.8" y1="144.116" x2="197.78" y2="159.116" stroke="#91A7B7" stroke-width="2"/><line x1="179.375" y1="126.122" x2="208.353" y2="133.887" stroke="#91A7B7"/><line x1="179.729" y1="86.6179" x2="208.706" y2="78.8533" stroke="#91A7B7"/><line x1="160.373" y1="52.7896" x2="181.587" y2="31.5764" stroke="#91A7B7"/></svg>
|
||||
|
||||
<!-- To set the angle of the pointer, set the style transform -->
|
||||
<div class="compass-pointer" style="transform: rotate(@(weather.CurrentWeather.WindDirection)deg)">
|
||||
<div class="compass-pointer" style="transform: rotate(@(AppState.Weather.CurrentWeather.WindDirection)deg)">
|
||||
<svg viewBox="-50 -183 250 250" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M42.5317 56.311C42.136 56.4512 41.7008 56.4284 41.3219 56.2477C40.943 56.067 40.6514 55.7432 40.5112 55.3475L32.584 32.9683L10.2048 40.8956C9.86532 41.0154 9.49515 41.0158 9.15537 40.8969C8.81559 40.778 8.5265 40.5468 8.33579 40.2415C8.14508 39.9362 8.06415 39.575 8.10635 39.2175C8.14854 38.8599 8.31135 38.5275 8.5679 38.275L45.9275 1.53321C46.1591 1.30458 46.4555 1.15289 46.7764 1.09879C47.0973 1.0447 47.427 1.09082 47.7208 1.23089C48.0145 1.37096 48.2579 1.59816 48.4179 1.88156C48.5778 2.16495 48.6465 2.49076 48.6147 2.81461L43.582 54.9718C43.5533 55.2717 43.4396 55.5573 43.2543 55.7948C43.069 56.0324 42.8197 56.2121 42.5357 56.3129L42.5317 56.311ZM15.8735 35.5293L33.019 29.456C33.4146 29.3158 33.8498 29.3386 34.2287 29.5193C34.6076 29.6999 34.8992 30.0237 35.0394 30.4194L41.1127 47.5649L45.0405 6.8412L15.8695 35.5274L15.8735 35.5293Z" fill="white"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="winds text-sm mt-2">Winds</p>
|
||||
<p class="text-xl">@weather.CurrentWeather.WindSpeed | @(weather.CurrentWeather.WindSpeed + 10)</p>
|
||||
<p class="text-xl">@DH.DisplayCurrentWindSpeed()</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Next24Hours HourlyForecasts="weather.HourlyForecasts" />
|
||||
<Next14Days DailyForecasts="weather.DailyForecasts" />
|
||||
<Next24Hours HourlyForecasts="AppState.Weather.HourlyForecasts" />
|
||||
<Next14Days DailyForecasts="AppState.Weather.DailyForecasts" />
|
||||
</div>
|
||||
|
||||
<!-- Right col -->
|
||||
<div class="right-col border-l p-10">
|
||||
<StatBoxes CurrentWeather="weather.CurrentWeather" />
|
||||
<StatBoxes CurrentWeather="AppState.Weather.CurrentWeather" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@code {
|
||||
WeatherResponse weather;
|
||||
Location location;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
var locations = await WeatherService.GetLocations("Nairobi");
|
||||
location = locations.First();
|
||||
weather = await WeatherService.GetWeather(location.Coordinate);
|
||||
if (AppState.CurrentLocation == null)
|
||||
{
|
||||
var locations = await WeatherService.GetLocations("Boston");
|
||||
AppState.CurrentLocation = locations.First();
|
||||
}
|
||||
AppState.Weather = await WeatherService.GetWeather(AppState.CurrentLocation.Coordinate);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
<h3 class="subheading">Daily</h3>
|
||||
@inject DisplayHelper DH
|
||||
|
||||
<h3 class="subheading">Daily Forecasts</h3>
|
||||
<div class="flex overflow-x-scroll pb-4 px-4 scrollbar-subtle mb-10">
|
||||
@foreach (var forecast in DailyForecasts)
|
||||
{
|
||||
|
|
@ -8,11 +10,11 @@
|
|||
<div class="text-sm">@forecast.DateTime.DayOfWeek.ToString().First()</div>
|
||||
<div class="text-sm">@forecast.DateTime.Day</div>
|
||||
<img class="w-4 m-2" src="@forecast.GetIconUrl()" />
|
||||
<div class="pl-1 text-sm mt-3">@max</div>
|
||||
<div class="pl-1 text-sm mt-3">@DH.DisplayTemp(max)</div>
|
||||
<div class="h-28 py-2 flex">
|
||||
<div style="height: @(BarHeight(forecast.Temperature))" class="w-2 temperature-gradient mt-auto"></div>
|
||||
</div>
|
||||
<div class="pl-1 text-sm text-accent-blue-200">@min</div>
|
||||
<div class="pl-1 text-sm text-accent-blue-200">@DH.DisplayTemp(min)</div>
|
||||
<div class="rain border-t mt-6 pt-2 text-xs flex items-center">
|
||||
<svg class="inline-block w-3 mr-1" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99445 4.93929C9.79372 3.82459 9.23013 2.80752 8.3914 2.04636C7.55267 1.28521 6.48584 0.82266 5.35695 0.730714V0H4.64267V0.730714C3.51378 0.82266 2.44696 1.28521 1.60822 2.04636C0.769491 2.80752 0.205901 3.82459 0.00516876 4.93929C-0.00639027 5.00649 0.00153115 5.0756 0.0279969 5.13844C0.0544627 5.20128 0.0983664 5.25524 0.154519 5.29393C0.210672 5.33261 0.276726 5.35442 0.344876 5.35676C0.413025 5.3591 0.480421 5.34188 0.539097 5.30714C0.801554 5.12476 1.10931 5.01847 1.42838 5C1.73164 5.00735 2.0277 5.09396 2.2871 5.25123C2.5465 5.4085 2.7602 5.63094 2.90695 5.89643C2.94101 5.94652 2.98681 5.98751 3.04034 6.01585C3.09388 6.04418 3.15353 6.059 3.2141 6.059C3.27467 6.059 3.33432 6.04418 3.38785 6.01585C3.44139 5.98751 3.48718 5.94652 3.52124 5.89643C3.64103 5.68617 3.80214 5.50235 3.99487 5.35602C4.1876 5.20969 4.40796 5.10389 4.64267 5.045V8.39286C4.64267 8.62966 4.5486 8.85676 4.38116 9.0242C4.21371 9.19165 3.98661 9.28571 3.74981 9.28571C3.51301 9.28571 3.28591 9.19165 3.11847 9.0242C2.95102 8.85676 2.85695 8.62966 2.85695 8.39286V8.21429H2.14267V8.39286C2.14267 8.8191 2.31199 9.22788 2.61339 9.52928C2.91479 9.83068 3.32357 10 3.74981 10C4.17605 10 4.58484 9.83068 4.88623 9.52928C5.18763 9.22788 5.35695 8.8191 5.35695 8.39286V5.04464C5.59172 5.10362 5.81212 5.20953 6.00485 5.35598C6.19759 5.50243 6.35867 5.6864 6.47838 5.89679C6.51001 5.95008 6.55495 5.99423 6.6088 6.02489C6.66265 6.05556 6.72356 6.07168 6.78553 6.07168C6.8475 6.07168 6.9084 6.05556 6.96225 6.02489C7.0161 5.99423 7.06105 5.95008 7.09267 5.89679C7.23938 5.63123 7.45306 5.40872 7.71246 5.25138C7.97187 5.09405 8.26794 5.00738 8.57124 5C8.89031 5.01847 9.19807 5.12476 9.46053 5.30714C9.51921 5.34199 9.58665 5.35929 9.65486 5.357C9.72307 5.35471 9.7892 5.33293 9.84541 5.29423C9.90162 5.25552 9.94557 5.20152 9.97205 5.13862C9.99853 5.07571 10.0064 5.00654 9.99481 4.93929H9.99445ZM1.42838 4.28571C1.24677 4.28571 1.06606 4.31132 0.891597 4.36179C1.13404 3.68648 1.53642 3.07993 2.06433 2.594C2.59224 2.10806 3.22998 1.75721 3.92303 1.57143C3.21508 2.48411 2.83222 3.60708 2.83517 4.76214C2.43052 4.45459 1.93664 4.28733 1.42838 4.28571ZM4.99981 4.28571C4.47325 4.28814 3.96289 4.46808 3.55124 4.79643C3.56445 4.00357 3.76838 2.47857 4.99981 1.51929C6.22481 2.47536 6.4316 4.00143 6.44695 4.79536C6.03554 4.46769 5.52576 4.28816 4.99981 4.28571ZM8.57124 4.28571C8.06302 4.28723 7.56915 4.45436 7.16445 4.76179C7.16741 3.60672 6.78454 2.48376 6.0766 1.57107C6.76968 1.75689 7.40744 2.1078 7.93536 2.59379C8.46327 3.07979 8.86563 3.68641 9.10803 4.36179C8.93356 4.31132 8.75286 4.28571 8.57124 4.28571Z" fill="#91A7B7"/></svg>
|
||||
@forecast.Day.PrecipitationProbability%
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@inject DisplayHelper DH
|
||||
|
||||
<h3 class="subheading">Next 24 Hours</h3>
|
||||
<div class="flex overflow-x-scroll pb-2 px-4 scrollbar-subtle mb-10">
|
||||
@foreach (var forecast in HourlyForecasts)
|
||||
|
|
@ -5,7 +7,7 @@
|
|||
<div class="flex flex-col w-14 flex-shrink-0 items-center">
|
||||
<div class="text-xs">@forecast.DateTime.ToString("h tt")</div>
|
||||
<img class="w-5 h-5 m-2" src="@forecast.GetIconUrl()" />
|
||||
<div>@forecast.Temperature</div>
|
||||
<div>@DH.DisplayTemp(forecast.Temperature)</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,24 @@
|
|||
<div class="stat-box" @onclick="SwitchStat">
|
||||
@inject DisplayHelper DH
|
||||
|
||||
<div class="stat-box" @onclick="SwitchStat">
|
||||
@switch (stat)
|
||||
{
|
||||
case WeatherStat.WindSpeed:
|
||||
<svg class="w-10 absolute top-4 right-4" viewBox="0 0 43 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.1598 18.499H1.34369C0.604661 18.499 0 19.0937 0 19.8205V22.4637C0 23.1906 0.604661 23.7853 1.34369 23.7853H13.2858C14.621 23.7853 15.8724 24.6856 16.0907 25.9824C16.3678 27.6344 15.0745 29.0716 13.4369 29.0716C12.2528 29.0716 11.245 28.3117 10.8839 27.2627C10.7075 26.7423 10.1617 26.4284 9.6074 26.4284H6.85283C6.02982 26.4284 5.36637 27.1553 5.51753 27.9482C6.23977 31.5908 9.51502 34.3579 13.4285 34.3579C18.2238 34.3579 22.0533 30.2197 21.4235 25.3877C20.9112 21.3899 17.2496 18.499 13.1598 18.499ZM1.34369 15.8558H29.5612C34.5749 15.8558 38.5304 11.3294 37.4386 6.21653C36.8004 3.22646 34.3397 0.806321 31.2996 0.178571C26.6471 -0.779574 22.4732 2.23528 21.6502 6.41477C21.4907 7.20772 22.1625 7.92633 22.9771 7.92633H25.7317C26.2944 7.92633 26.8318 7.61245 27.0082 7.09208C27.3693 6.04308 28.3771 5.28317 29.5612 5.28317C31.1904 5.28317 32.4921 6.72039 32.215 8.37236C31.9967 9.66916 30.7537 10.5695 29.4101 10.5695H1.34369C0.604661 10.5695 0 11.1642 0 11.8911V14.5342C0 15.2611 0.604661 15.8558 1.34369 15.8558ZM33.5923 18.499H20.4661C22.0869 19.8701 23.2543 21.7038 23.8085 23.7853H33.5923C35.8178 23.7853 37.6234 25.5611 37.6234 27.75C37.6234 29.9389 35.8178 31.7147 33.5923 31.7147C32.089 31.7147 30.7957 30.897 30.0987 29.6993C29.8552 29.2863 29.3681 29.0716 28.881 29.0716H26.0424C25.127 29.0716 24.4468 29.9637 24.7575 30.8144C26.2524 34.9939 30.6782 37.8188 35.6246 36.7863C39.0846 36.0677 41.9316 33.3502 42.7378 29.9554C44.1739 23.9092 39.5129 18.499 33.5923 18.499Z" fill="url(#paint0_linear)"/><defs><linearGradient id="paint0_linear" x1="7.34285" y1="6.68938" x2="28.6756" y2="29.93" gradientUnits="userSpaceOnUse"><stop offset="0.10243" stop-color="#28C2D1"/><stop offset="0.925347" stop-color="#4931DE"/></linearGradient></defs></svg>
|
||||
<div class="mt-auto mb-1 text-xl">
|
||||
<span class="text-4xl">@WeatherStation.CurrentWeather.WindSpeed</span> mph
|
||||
<span class="text-4xl">@DH.ConvertSpeed(WeatherStation.CurrentWeather.WindSpeed)</span> @DH.SpeedUnit()
|
||||
</div>
|
||||
break;
|
||||
case WeatherStat.Temperature:
|
||||
<svg class="w-10 absolute top-4 right-4" viewBox="-5 0 20 40" fill="none"><path d="M5 13.8672C5.18229 13.9323 5.35156 14.0234 5.50781 14.1406C5.66406 14.2578 5.79427 14.3945 5.89844 14.5508C6.00911 14.7005 6.09375 14.8698 6.15234 15.0586C6.21745 15.2409 6.25 15.4297 6.25 15.625C6.25 15.8854 6.20117 16.1296 6.10352 16.3574C6.00586 16.5853 5.8724 16.7839 5.70312 16.9531C5.53385 17.1224 5.33529 17.2559 5.10742 17.3535C4.87956 17.4512 4.63542 17.5 4.375 17.5C4.11458 17.5 3.87044 17.4512 3.64258 17.3535C3.41471 17.2559 3.21615 17.1224 3.04688 16.9531C2.8776 16.7839 2.74414 16.5853 2.64648 16.3574C2.54883 16.1296 2.5 15.8854 2.5 15.625C2.5 15.4297 2.5293 15.2409 2.58789 15.0586C2.65299 14.8698 2.73763 14.7005 2.8418 14.5508C2.95247 14.3945 3.08268 14.2578 3.23242 14.1406C3.38867 14.0234 3.5612 13.9323 3.75 13.8672V7.5H5V13.8672ZM7.5 12.8809C7.87109 13.291 8.16081 13.7467 8.36914 14.248C8.57747 14.7493 8.68164 15.2767 8.68164 15.8301C8.68164 16.416 8.56445 16.9629 8.33008 17.4707C8.10221 17.9785 7.78971 18.4212 7.39258 18.7988C6.99544 19.1699 6.53646 19.4629 6.01562 19.6777C5.49479 19.8926 4.94792 20 4.375 20C3.79557 20 3.24544 19.8926 2.72461 19.6777C2.21029 19.4629 1.75456 19.1699 1.35742 18.7988C0.960286 18.4212 0.644531 17.9785 0.410156 17.4707C0.182292 16.9629 0.0683594 16.416 0.0683594 15.8301C0.0683594 15.2767 0.172526 14.7493 0.380859 14.248C0.589193 13.7467 0.878906 13.291 1.25 12.8809V3.125C1.25 2.69531 1.33138 2.29167 1.49414 1.91406C1.6569 1.53646 1.87826 1.20768 2.1582 0.927734C2.44466 0.641276 2.77669 0.416667 3.1543 0.253906C3.53841 0.0846354 3.94531 0 4.375 0C4.80469 0 5.20833 0.0846354 5.58594 0.253906C5.96354 0.416667 6.29232 0.641276 6.57227 0.927734C6.85872 1.20768 7.08333 1.53646 7.24609 1.91406C7.41536 2.29167 7.5 2.69531 7.5 3.125V12.8809ZM4.375 18.75C4.77865 18.75 5.16276 18.6751 5.52734 18.5254C5.89844 18.3757 6.22396 18.1706 6.50391 17.9102C6.78385 17.6497 7.00521 17.3405 7.16797 16.9824C7.33724 16.6243 7.42188 16.2402 7.42188 15.8301C7.42188 15.3418 7.31445 14.8958 7.09961 14.4922C6.88477 14.082 6.60156 13.7142 6.25 13.3887V3.125C6.25 2.86458 6.20117 2.62044 6.10352 2.39258C6.00586 2.16471 5.8724 1.96615 5.70312 1.79688C5.53385 1.6276 5.33529 1.49414 5.10742 1.39648C4.87956 1.29883 4.63542 1.25 4.375 1.25C4.11458 1.25 3.87044 1.29883 3.64258 1.39648C3.41471 1.49414 3.21615 1.6276 3.04688 1.79688C2.8776 1.96615 2.74414 2.16471 2.64648 2.39258C2.54883 2.62044 2.5 2.86458 2.5 3.125V13.3887C2.14844 13.7142 1.86523 14.082 1.65039 14.4922C1.43555 14.8958 1.32812 15.3418 1.32812 15.8301C1.32812 16.2402 1.40951 16.6243 1.57227 16.9824C1.74154 17.3405 1.96615 17.6497 2.24609 17.9102C2.52604 18.1706 2.84831 18.3757 3.21289 18.5254C3.58398 18.6751 3.97135 18.75 4.375 18.75Z"fill="url(#paint0_linear)"/><defs><linearGradient id="paint0_linear" x1="6.14752" y1="6.50858" x2="26.9365" y2="25.9966" gradientUnits="userSpaceOnUse"><stop offset="0.10243" stop-color="#28C2D1"/><stop offset="0.925347" stop-color="#4931DE"/></linearGradient></defs></svg>
|
||||
<div class="mt-auto mb-1 text-xl">
|
||||
<span class="text-4xl">@WeatherStation.CurrentWeather.Temperature</span>
|
||||
<span class="text-4xl">@DH.Convert(WeatherStation.CurrentWeather.Temperature).Value</span> ˚@DH.TempUnit()
|
||||
</div>
|
||||
break;
|
||||
case WeatherStat.RelativeHumidity:
|
||||
<svg class="w-10 absolute top-4 right-4" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M35.98 17.7814C35.2574 13.7685 33.2285 10.1071 30.209 7.36691C27.1896 4.62674 23.349 2.96158 19.285 2.63057V0H16.7136V2.63057C12.6496 2.96158 8.80905 4.62674 5.78961 7.36691C2.77017 10.1071 0.741244 13.7685 0.0186075 17.7814C-0.023005 18.0234 0.00551215 18.2721 0.100789 18.4984C0.196066 18.7246 0.354119 18.9189 0.556269 19.0581C0.758419 19.1974 0.996215 19.2759 1.24155 19.2843C1.48689 19.2928 1.72952 19.2308 1.94075 19.1057C2.88559 18.4491 3.99353 18.0665 5.14218 18C6.23392 18.0264 7.29971 18.3383 8.23355 18.9044C9.16739 19.4706 9.93672 20.2714 10.465 21.2271C10.5877 21.4075 10.7525 21.555 10.9452 21.6571C11.138 21.7591 11.3527 21.8124 11.5708 21.8124C11.7888 21.8124 12.0036 21.7591 12.1963 21.6571C12.389 21.555 12.5538 21.4075 12.6765 21.2271C13.1077 20.4702 13.6877 19.8084 14.3815 19.2817C15.0754 18.7549 15.8687 18.374 16.7136 18.162V30.2143C16.7136 31.0668 16.375 31.8843 15.7722 32.4871C15.1694 33.0899 14.3518 33.4286 13.4993 33.4286C12.6468 33.4286 11.8293 33.0899 11.2265 32.4871C10.6237 31.8843 10.285 31.0668 10.285 30.2143V29.5714H7.71361V30.2143C7.71361 31.7488 8.32317 33.2204 9.4082 34.3054C10.4932 35.3904 11.9649 36 13.4993 36C15.0338 36 16.5054 35.3904 17.5904 34.3054C18.6755 33.2204 19.285 31.7488 19.285 30.2143V18.1607C20.1302 18.373 20.9236 18.7543 21.6175 19.2815C22.3113 19.8088 22.8912 20.471 23.3222 21.2284C23.436 21.4203 23.5978 21.5792 23.7917 21.6896C23.9856 21.8 24.2048 21.858 24.4279 21.858C24.651 21.858 24.8702 21.8 25.0641 21.6896C25.258 21.5792 25.4198 21.4203 25.5336 21.2284C26.0618 20.2724 26.831 19.4714 27.7649 18.905C28.6987 18.3386 29.7646 18.0266 30.8565 18C32.0051 18.0665 33.113 18.4491 34.0579 19.1057C34.2691 19.2312 34.5119 19.2935 34.7575 19.2852C35.003 19.277 35.2411 19.1985 35.4435 19.0592C35.6458 18.9199 35.8041 18.7255 35.8994 18.499C35.9947 18.2726 36.0231 18.0235 35.9813 17.7814H35.98ZM5.14218 15.4286C4.48836 15.4285 3.83781 15.5207 3.20975 15.7024C4.08254 13.2713 5.53111 11.0877 7.43159 9.33838C9.33208 7.58903 11.6279 6.32595 14.1229 5.65714C11.5743 8.94281 10.196 12.9855 10.2066 17.1437C8.74987 16.0365 6.97191 15.4344 5.14218 15.4286ZM17.9993 15.4286C16.1037 15.4373 14.2664 16.0851 12.7845 17.2671C12.832 14.4129 13.5662 8.92286 17.9993 5.46943C22.4093 8.91129 23.1537 14.4051 23.209 17.2633C21.728 16.0837 19.8927 15.4374 17.9993 15.4286ZM30.8565 15.4286C29.0269 15.434 27.2489 16.0357 25.792 17.1424C25.8027 12.9842 24.4243 8.94153 21.8757 5.65586C24.3708 6.32479 26.6668 7.58807 28.5673 9.33765C30.4678 11.0872 31.9163 13.2711 32.7889 15.7024C32.1608 15.5207 31.5103 15.4285 30.8565 15.4286Z" fill="url(#paint0_linear)"/><defs><linearGradient id="paint0_linear" x1="6.14752" y1="6.50858" x2="26.9365" y2="25.9966" gradientUnits="userSpaceOnUse"><stop offset="0.10243" stop-color="#28C2D1"/><stop offset="0.925347" stop-color="#4931DE"/></linearGradient></defs></svg>
|
||||
<div class="mt-auto mb-1 text-xl">
|
||||
<span class="text-4xl">@WeatherStation.CurrentWeather.RelativeHumidity</span>%
|
||||
<span class="text-4xl">@WeatherStation.CurrentWeather.RelativeHumidity</span> %
|
||||
</div>
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,22 @@
|
|||
@page "/settings"
|
||||
@inject AppState AppState
|
||||
@inject DisplayHelper DH
|
||||
@inject NavigationManager NavigationManager
|
||||
|
||||
<div class="mt-10 m-auto md:float-right md:mr-12 w-56 text-center">
|
||||
<div class="mt-10 m-auto md:mx-32 w-56 text-center">
|
||||
<p class="description">Your Location Now</p>
|
||||
<p class="mb-4 text-lg">St. Louis, Missouri, USA</p>
|
||||
<img class="inline-block w-20 mb-3" src="_content/BlazorWeather/weather-icons/cloud-sun.svg" />
|
||||
<p class="text-5xl tracking-tighter mb-4 pl-2">18˚</p>
|
||||
<span class="rounded-full px-4 py-1" style="background: var(--primary-dotnet)">Cloudy</span>
|
||||
<p class="mb-4 text-lg">@AppState.CurrentLocation.Name</p>
|
||||
<img class="inline-block w-20 mb-3" src="@AppState.Weather.CurrentWeather.GetIconUrl()" />
|
||||
<p class="text-5xl tracking-tighter mb-4 pl-2">@DH.DisplayCurrentTemp()</p>
|
||||
<span class="rounded-full px-4 py-1" style="background: var(--primary-dotnet)">@AppState.Weather.CurrentWeather.Phrase</span>
|
||||
|
||||
<div class="mt-6 flex items-center">
|
||||
<svg class="w-4" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.99 8.89071C17.6287 6.88427 16.6142 5.05354 15.1045 3.68345C13.5948 2.31337 11.6745 1.48079 9.64252 1.31529V0H8.3568V1.31529C6.32481 1.48079 4.40452 2.31337 2.8948 3.68345C1.38508 5.05354 0.370622 6.88427 0.00930376 8.89071C-0.0115025 9.01168 0.00275608 9.13607 0.0503944 9.24919C0.0980328 9.36231 0.17706 9.45943 0.278135 9.52907C0.37921 9.5987 0.498108 9.63795 0.620777 9.64216C0.743446 9.64638 0.864758 9.61539 0.970375 9.55286C1.4428 9.22457 1.99676 9.03324 2.57109 9C3.11696 9.01322 3.64986 9.16913 4.11677 9.45221C4.58369 9.7353 4.96836 10.1357 5.23252 10.6136C5.29383 10.7037 5.37625 10.7775 5.47261 10.8285C5.56898 10.8795 5.67635 10.9062 5.78538 10.9062C5.8944 10.9062 6.00178 10.8795 6.09814 10.8285C6.1945 10.7775 6.27692 10.7037 6.33823 10.6136C6.55385 10.2351 6.84386 9.90422 7.19077 9.64083C7.53769 9.37744 7.93433 9.18701 8.3568 9.081V15.1071C8.3568 15.5334 8.18748 15.9422 7.88608 16.2436C7.58468 16.545 7.1759 16.7143 6.74966 16.7143C6.32342 16.7143 5.91464 16.545 5.61324 16.2436C5.31184 15.9422 5.14252 15.5334 5.14252 15.1071V14.7857H3.8568V15.1071C3.8568 15.8744 4.16159 16.6102 4.7041 17.1527C5.24662 17.6952 5.98243 18 6.74966 18C7.51689 18 8.2527 17.6952 8.79522 17.1527C9.33774 16.6102 9.64252 15.8744 9.64252 15.1071V9.08036C10.0651 9.18651 10.4618 9.37715 10.8087 9.64076C11.1557 9.90438 11.4456 10.2355 11.6611 10.6142C11.718 10.7101 11.7989 10.7896 11.8958 10.8448C11.9928 10.9 12.1024 10.929 12.2139 10.929C12.3255 10.929 12.4351 10.9 12.532 10.8448C12.629 10.7896 12.7099 10.7101 12.7668 10.6142C13.0309 10.1362 13.4155 9.73569 13.8824 9.45249C14.3494 9.16929 14.8823 9.01329 15.4282 9C16.0026 9.03324 16.5565 9.22457 17.0289 9.55286C17.1346 9.61558 17.256 9.64673 17.3787 9.64261C17.5015 9.63849 17.6206 9.59927 17.7217 9.5296C17.8229 9.45994 17.902 9.36274 17.9497 9.24951C17.9973 9.13628 18.0116 9.01177 17.9907 8.89071H17.99ZM2.57109 7.71429C2.24418 7.71427 1.91891 7.76037 1.60488 7.85121C2.04127 6.63566 2.76555 5.54387 3.7158 4.66919C4.66604 3.79452 5.81397 3.16298 7.06145 2.82857C5.78715 4.47141 5.09799 6.49275 5.1033 8.57186C4.37494 8.01826 3.48595 7.7172 2.57109 7.71429ZM8.99966 7.71429C8.05185 7.71866 7.13321 8.04254 6.39223 8.63357C6.41602 7.20643 6.78309 4.46143 8.99966 2.73471C11.2047 4.45564 11.5769 7.20257 11.6045 8.63164C10.864 8.04185 9.94636 7.71869 8.99966 7.71429ZM15.4282 7.71429C14.5134 7.71701 13.6245 8.01785 12.896 8.57121C12.9013 6.4921 12.2122 4.47076 10.9379 2.82793C12.1854 3.1624 13.3334 3.79403 14.2836 4.66883C15.2339 5.54362 15.9581 6.63554 16.3944 7.85121C16.0804 7.76037 15.7551 7.71427 15.4282 7.71429Z" fill="#3E8EED"/></svg>
|
||||
<div class="flex-grow pr-2">13%</div>
|
||||
<div class="flex-grow pr-2">@AppState.Weather.DailyForecasts.First().Day.PrecipitationProbability%</div>
|
||||
<svg class="w-4" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.2967 8.99949H0.64293C0.289319 8.99949 0 9.28881 0 9.64242V10.9283C0 11.2819 0.289319 11.5712 0.64293 11.5712H6.35697C6.99588 11.5712 7.59461 12.0092 7.69909 12.6401C7.83169 13.4437 7.21287 14.1429 6.4293 14.1429C5.86272 14.1429 5.38052 13.7732 5.20774 13.2629C5.12335 13.0098 4.86216 12.8571 4.59695 12.8571H3.27894C2.88515 12.8571 2.5677 13.2107 2.64003 13.5964C2.98561 15.3685 4.55275 16.7147 6.42528 16.7147C8.71974 16.7147 10.5521 14.7015 10.2507 12.3508C10.0056 10.4059 8.25362 8.99949 6.2967 8.99949ZM0.64293 7.71363H14.1445C16.5434 7.71363 18.436 5.5116 17.9136 3.02426C17.6083 1.56963 16.4309 0.392264 14.9763 0.0868724C12.7501 -0.379252 10.753 1.08743 10.3592 3.1207C10.2829 3.50646 10.6043 3.85605 10.9941 3.85605H12.3121C12.5813 3.85605 12.8385 3.70336 12.9229 3.4502C13.0957 2.93988 13.5779 2.57019 14.1445 2.57019C14.924 2.57019 15.5469 3.26938 15.4143 4.07304C15.3098 4.70391 14.7151 5.14191 14.0721 5.14191H0.64293C0.289319 5.14191 0 5.43123 0 5.78484V7.0707C0 7.42431 0.289319 7.71363 0.64293 7.71363ZM16.0733 8.99949H9.79263C10.5682 9.66653 11.1267 10.5586 11.3919 11.5712H16.0733C17.1381 11.5712 18.002 12.4352 18.002 13.5C18.002 14.5649 17.1381 15.4288 16.0733 15.4288C15.354 15.4288 14.7352 15.031 14.4016 14.4483C14.2851 14.2474 14.052 14.1429 13.819 14.1429H12.4608C12.0228 14.1429 11.6973 14.5769 11.846 14.9908C12.5612 17.0241 14.6789 18.3983 17.0457 17.896C18.7012 17.5464 20.0634 16.2244 20.4492 14.5729C21.1363 11.6315 18.9062 8.99949 16.0733 8.99949Z" fill="#3E8EED"/></svg>
|
||||
<div class="flex-grow pr-2">9mph</div>
|
||||
<div class="flex-grow pr-2">@DH.DisplayCurrentWindSpeed()</div>
|
||||
<svg class="w-4" viewBox="0 -2 18 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.8629 7.91477L7.08998 0.314299C7.02073 0.217104 6.92925 0.137868 6.82316 0.0831964C6.71708 0.0285246 6.59947 0 6.48012 0C6.36078 0 6.24317 0.0285246 6.13709 0.0831964C6.031 0.137868 5.93952 0.217104 5.87027 0.314299L1.0757 7.95077C0.409605 9.02522 0.0385681 10.2563 0 11.5199C0 13.2385 0.682725 14.8868 1.89798 16.102C3.11324 17.3173 4.76149 18 6.48012 18C8.19876 18 9.847 17.3173 11.0623 16.102C12.2775 14.8868 12.9602 13.2385 12.9602 11.5199C12.9189 10.2424 12.5403 8.99865 11.8629 7.91477ZM6.48012 16.56C5.14393 16.5583 3.86296 16.0267 2.91813 15.0819C1.9733 14.137 1.44174 12.8561 1.44003 11.5199C1.4783 10.513 1.78074 9.53391 2.317 8.68086L2.99022 7.60804L10.2436 14.8615C9.77254 15.3952 9.19338 15.8227 8.54455 16.1157C7.89571 16.4086 7.19203 16.5603 6.48012 16.5607V16.56Z" fill="#3E8EED"/></svg>
|
||||
<div>7%</div>
|
||||
<div>@AppState.Weather.CurrentWeather.RelativeHumidity%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -23,7 +26,7 @@
|
|||
@foreach (var unitOption in unitOptions)
|
||||
{
|
||||
<label>
|
||||
<input type="radio" class="hidden" name="unit" value="@unitOption.Id" checked="@unitOption.Selected">
|
||||
<input type="radio" class="hidden" name="unit" value="@unitOption.Id" checked="@(AppState.UnitOption == @unitOption.Id)" @onchange="OnChange">
|
||||
<div>
|
||||
<p>@unitOption.DisplayName</p>
|
||||
<p class="description text-sm">@unitOption.Description</p>
|
||||
|
|
@ -34,12 +37,27 @@
|
|||
</div>
|
||||
|
||||
@code {
|
||||
string unitOption = "imperial";
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
if (AppState.CurrentLocation == null)
|
||||
{
|
||||
NavigationManager.NavigateTo("/");
|
||||
}
|
||||
}
|
||||
|
||||
void OnChange(ChangeEventArgs args)
|
||||
{
|
||||
AppState.UnitOption = args.Value.ToString();
|
||||
}
|
||||
|
||||
UnitOption[] unitOptions = new[]
|
||||
{
|
||||
new UnitOption("imperial", "Imperial", "˚F / mph / miles / inches"),
|
||||
new UnitOption("metric", "Metric", "˚C / kmh / km / millimeters / milibars", Selected: true),
|
||||
new UnitOption("metric", "Metric", "˚C / kmh / km / millimeters / milibars"),
|
||||
new UnitOption("hybrid", "Hybrid", "˚C / mph / miles / millimeters / millibars"),
|
||||
};
|
||||
|
||||
record UnitOption(string Id, string DisplayName, string Description, bool Selected = false);
|
||||
record UnitOption(string Id, string DisplayName, string Description);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,8 @@
|
|||
using Blazored.LocalStorage;
|
||||
using System;
|
||||
using Blazored.LocalStorage;
|
||||
using Darnton.Blazor.DeviceInterop.Geolocation;
|
||||
using Microsoft.Extensions.DependencyInjection;
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Text;
|
||||
using System.Threading.Tasks;
|
||||
using WeatherClient2021;
|
||||
using WeatherClient;
|
||||
|
||||
namespace BlazorWeather
|
||||
{
|
||||
|
|
@ -18,6 +14,8 @@ namespace BlazorWeather
|
|||
services.AddScoped<IGeolocationService, GeolocationService>();
|
||||
services.AddBlazoredLocalStorage();
|
||||
services.AddScoped<PinnedLocationsService>();
|
||||
services.AddSingleton<AppState>();
|
||||
services.AddSingleton<DisplayHelper>();
|
||||
return services;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ using System;
|
|||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
using WeatherClient2021;
|
||||
using WeatherClient;
|
||||
|
||||
namespace BlazorWeather
|
||||
{
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ using System.Collections.Generic;
|
|||
using System.Linq;
|
||||
using System.Text;
|
||||
using System.Threading.Tasks;
|
||||
using WeatherClient2021;
|
||||
using WeatherClient;
|
||||
|
||||
namespace BlazorWeather
|
||||
{
|
||||
|
|
@ -25,7 +25,10 @@ namespace BlazorWeather
|
|||
{ "Thunderstorms", "thunderstorms" },
|
||||
{ "Mostly cloudy w/ t-storms", "thunderstorms" },
|
||||
{ "Partly sunny w/ t-storms", "thunderstorms" },
|
||||
{ "Clouds and sun", "partly-cloudy" }
|
||||
{ "Clouds and sun", "partly-cloudy" },
|
||||
{ "Overcast", "partly-cloudy" },
|
||||
{ "Rain", "showers"},
|
||||
{ "Partly sunny w/ showers", "showers" }
|
||||
};
|
||||
|
||||
public static string GetIconUrl(this WeatherSnapshot weather)
|
||||
|
|
@ -56,6 +59,7 @@ namespace BlazorWeather
|
|||
fileName += ".svg";
|
||||
return fileName;
|
||||
}
|
||||
static bool IsNight(DateTimeOffset dateTime) => dateTime.TimeOfDay < TimeSpan.FromHours(6) || dateTime.TimeOfDay > TimeSpan.FromHours(20);
|
||||
static bool IsNight(DateTimeOffset dateTime)
|
||||
=> dateTime.TimeOfDay < TimeSpan.FromHours(6) || dateTime.TimeOfDay > TimeSpan.FromHours(20);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,4 +7,4 @@
|
|||
@using Microsoft.JSInterop
|
||||
@using BlazorWeather
|
||||
@using BlazorWeather.Shared
|
||||
@using WeatherClient2021
|
||||
@using WeatherClient
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
using System.Collections.Generic;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace WeatherClient2021
|
||||
namespace WeatherClient
|
||||
{
|
||||
public interface IWeatherService
|
||||
{
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ using System.Linq;
|
|||
using System.Collections.Generic;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace WeatherClient2021
|
||||
namespace WeatherClient
|
||||
{
|
||||
public class WeatherResponse
|
||||
{
|
||||
|
|
@ -19,7 +19,7 @@ namespace WeatherClient2021
|
|||
public Temperature Temperature { get; set; }
|
||||
public int RelativeHumidity { get; set; }
|
||||
public int? PrecipitationProbability { get; set; }
|
||||
public int WindSpeed { get; set; } = new Random().Next(0, 40);
|
||||
public int WindSpeed { get; set; } = new Random().Next(0, 20);
|
||||
public int WindDirection { get; set; } = new Random().Next(0, 360);
|
||||
|
||||
public DateTimeOffset Date
|
||||
|
|
@ -124,6 +124,7 @@ namespace WeatherClient2021
|
|||
{
|
||||
public string Name { get; set; }
|
||||
public Coordinate Coordinate { get; set; }
|
||||
public string Country { get; set; }
|
||||
}
|
||||
|
||||
public static class WeatherStations
|
||||
|
|
|
|||
|
|
@ -6,27 +6,27 @@ using System.Text;
|
|||
using System.Threading.Tasks;
|
||||
using System.Net.Http.Json;
|
||||
|
||||
namespace WeatherClient2021
|
||||
namespace WeatherClient
|
||||
{
|
||||
public class WeatherService : IWeatherService
|
||||
{
|
||||
static List<Location> locations = new()
|
||||
{
|
||||
new Location { Name = "Redmond", Coordinate = new Coordinate(47.6740, 122.1215) },
|
||||
new Location { Name = "St. Louis", Coordinate = new Coordinate(38.6270, 90.1994) },
|
||||
new Location { Name = "Boston", Coordinate = new Coordinate(42.3601, 71.0589) },
|
||||
new Location { Name = "NYC", Coordinate = new Coordinate(40.7128, 74.0060) },
|
||||
new Location { Name = "Amsterdam", Coordinate = new Coordinate(52.3676, 4.9041) },
|
||||
new Location { Name = "Seoul", Coordinate = new Coordinate(37.5665, 126.9780) },
|
||||
new Location { Name = "Johannesburg", Coordinate = new Coordinate(26.2041, 28.0473) },
|
||||
new Location { Name = "Rio", Coordinate = new Coordinate(22.9068, 43.1729) },
|
||||
new Location { Name = "Madrid", Coordinate = new Coordinate(40.4168, 3.7038) },
|
||||
new Location { Name = "Buenos Aires", Coordinate = new Coordinate(34.6037, 58.3816) },
|
||||
new Location { Name = "Punta Cana", Coordinate = new Coordinate(18.5601, 68.3725) },
|
||||
new Location { Name = "Hyderabad", Coordinate = new Coordinate(17.3850, 78.4867) },
|
||||
new Location { Name = "San Francisco", Coordinate = new Coordinate(37.7749, 122.4194) },
|
||||
new Location { Name = "Nairobi", Coordinate = new Coordinate(1.2921, 36.8219) },
|
||||
new Location { Name = "Lagos", Coordinate = new Coordinate(6.5244, 3.3792) }
|
||||
new Location { Name = "Redmond", Country = "USA", Coordinate = new Coordinate(47.6740, 122.1215) },
|
||||
new Location { Name = "St. Louis", Country = "USA", Coordinate = new Coordinate(38.6270, 90.1994) },
|
||||
new Location { Name = "Boston", Country = "USA", Coordinate = new Coordinate(42.3601, 71.0589) },
|
||||
new Location { Name = "NYC", Country = "USA", Coordinate = new Coordinate(40.7128, 74.0060) },
|
||||
new Location { Name = "Amsterdam", Country = "Netherlands", Coordinate = new Coordinate(52.3676, 4.9041) },
|
||||
new Location { Name = "Seoul", Country = "South Korea", Coordinate = new Coordinate(37.5665, 126.9780) },
|
||||
new Location { Name = "Johannesburg", Country = "South Africa", Coordinate = new Coordinate(26.2041, 28.0473) },
|
||||
new Location { Name = "Rio de Janeiro", Country = "Brazil", Coordinate = new Coordinate(22.9068, 43.1729) },
|
||||
new Location { Name = "Madrid", Country = "Spain", Coordinate = new Coordinate(40.4168, 3.7038) },
|
||||
new Location { Name = "Buenos Aires", Country = "Argentina", Coordinate = new Coordinate(34.6037, 58.3816) },
|
||||
new Location { Name = "Punta Cana", Country = "Dominican Republic", Coordinate = new Coordinate(18.5601, 68.3725) },
|
||||
new Location { Name = "Hyderabad", Country = "India", Coordinate = new Coordinate(17.3850, 78.4867) },
|
||||
new Location { Name = "San Francisco", Country = "USA", Coordinate = new Coordinate(37.7749, 122.4194) },
|
||||
new Location { Name = "Nairobi", Country = "Kenya", Coordinate = new Coordinate(1.2921, 36.8219) },
|
||||
new Location { Name = "Lagos", Country = "Nigeria", Coordinate = new Coordinate(6.5244, 3.3792) }
|
||||
};
|
||||
|
||||
private readonly HttpClient httpClient;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче