tanguy/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Get live geolocation for weather

Browse source
This commit is contained in:
Tanguy Gérôme 2025-06-21 15:56:29 +03:00
parent 7d73080e30
commit 4ed7513e77
Signed by: tanguy
GPG key ID: 10B2947233740B88
3 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Cargo.toml
View file

@ -8,9 +8,9 @@ authors = ["Tanguy Gérôme <tanguy@juustodiilerit.fi>"]
[dependencies]
# leptos = { version = "0.7", features = ["nightly"] }
leptos = { version = "0.8", features = ["csr"] }
leptos = { version = "0.8", features = ["csr", "nightly"] }
# leptos_router = { version = "0.7", features = ["nightly"] }
leptos_router = { version = "0.8" }
leptos_router = { version = "0.8", features = ["nightly"] }
leptos_meta = { version = "0.8" }
console_log = "1"
log = "0.4"

5
public/styles.scss
View file

@ -107,6 +107,11 @@ body {
}
.weather {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.forecast-per-hours {
// background: white;
// color: black;

22
src/lib.rs
View file

@ -1,6 +1,6 @@
use leptos::prelude::*;
use leptos::{leptos_dom::logging, prelude::*};
use leptos_meta::*;
use leptos_use::{use_timestamp};
use leptos_use::{use_geolocation, use_timestamp};
use chrono::{prelude::{DateTime, Local, Timelike}, NaiveDateTime};
use calendrier::{DateTime as FRDateTime, Timestamp as FRTimestamp};
use serde_json::Value;
@ -9,8 +9,15 @@ pub mod wmo;
#[component]
pub fn Weather() -> impl IntoView {
let weather_json = LocalResource::new(async move || {
let json_response = reqwest::get("https://api.open-meteo.com/v1/forecast?latitude=60.236610&longitude=25.083630&timezone=auto&forecast_hours=17&wind_speed_unit=kn&hourly=temperature_2m,wind_speed_10m,precipitation,precipitation_probability,weather_code,is_day").await
let geolocation = use_geolocation();
let coords = move || match geolocation.coords.get() {
Some(coords) => (coords.latitude(), coords.longitude()),
_ => (60.23661, 25.08363)
};
let weather_json = LocalResource::new(move || async move {
logging::console_log(&format!("{:?}", &coords()));
let json_response = reqwest::get(format!("https://api.open-meteo.com/v1/forecast?latitude={}&longitude={}&timezone=auto&forecast_hours=17&wind_speed_unit=kn&hourly=temperature_2m,wind_speed_10m,precipitation,precipitation_probability,weather_code,is_day", coords().0, coords().1)).await
.and_then(|response| Ok(response.json::<Value>()));
match json_response {
Ok(result) => Some(result.await.ok()),
@ -64,7 +71,8 @@ pub fn Weather() -> impl IntoView {
view! {
<div class="weather">
<Suspense fallback=move || view! { <p>"Loading..."</p> }>
<Transition fallback=move || view! { <p>"Loading..."</p> }>
<span>sää @ {move || coords().0};{move || coords().1}</span>
<div class="forecast-per-hours">
<table class="forecast-per-hours">
<tr class="time">
@ -89,7 +97,7 @@ pub fn Weather() -> impl IntoView {
</tr>
</table>
</div>
</Suspense>
</Transition>
</div>
}
}
@ -112,7 +120,7 @@ pub fn Times() -> impl IntoView {
let fr_time = format!("{:02}:{:02}:{:02}", fr_hours, fr_minutes, fr_seconds);
fr_time
});
let fr_date_time = move || format!("{}, {}", fr_date.get().to_string_default(), fr_time.get());
let fr_date_time = move || format!("{}, {}", fr_date.get().to_string_default().to_lowercase(), fr_time.get());
let fi_date_time = move || local_now.get().format_localized("%A %e %B %Y, %H.%M.%S", chrono::Locale::fi_FI).to_string();