Got the current and weekly working

Author: Ruslan

Cargo.lock

@@ -16,7 +16,7 @@ gloo-net = "0.6.0"
 gloo-storage = "0.3.0"
 reqwest = { version = "0.12.22", features = ["json"] }
 serde = { version = "1.0.217", features = ["derive"] }
-serde_json = "1.0.140"
+serde_json = "1.0.141"
 serde_urlencoded = "0.7.1"
 slint = { version = "1.12.1", features = ["gettext"] }
 wasm-bindgen = "0.2.100"

Cargo.toml

@@ -1,8 +1,8 @@
-use chrono::{DateTime, Datelike, Timelike};
+use chrono::{DateTime, Datelike, Local, Timelike};
 use serde::Deserialize;
 use slint::VecModel;
 
-use crate::{Api, Coordinates, Date, Time, WeatherDaily};
+use crate::{Api, Coordinates, Date, Time, WeatherCurrent, WeatherDaily, WeatherType};
 
 #[derive(Debug, Clone, PartialEq, Deserialize, Default)]
 pub struct WeatherApiDaily {
@@ -24,8 +24,16 @@ pub struct WeatherApiHourly {
     pub uv_index: Vec<f32>,
 }
 
+#[derive(Debug, Clone, PartialEq, Deserialize, Default)]
+pub struct WeatherApiCurrent {
+    pub temperature_2m: f32,
+    pub precipitation: f32,
+    pub weather_code: i32,
+}
+
 #[derive(Debug, Clone, PartialEq, Deserialize, Default)]
 struct WeatherApiData {
+    current: WeatherApiCurrent,
     daily: WeatherApiDaily,
     hourly: WeatherApiHourly,
     utc_offset_seconds: i32,
@@ -36,6 +44,10 @@ async fn fetch_weather(coordinates: Coordinates) -> WeatherApiData {
         ["latitude", &coordinates.latitude.to_string()],
         ["longitude", &coordinates.longitude.to_string()],
         ["timezone", &"auto".to_string()],
+        [
+            "current",
+            &["temperature_2m", "weather_code", "precipitation"].join(","),
+        ],
         [
             "hourly",
             &["temperature_2m", "precipitation", "uv_index"].join(","),
@@ -69,6 +81,24 @@ async fn fetch_weather(coordinates: Coordinates) -> WeatherApiData {
     return data;
 }
 
+fn code_to_type(code: i32) -> WeatherType {
+    return match code {
+        0 | 1 => WeatherType::Sunny,
+        2 | 3 => WeatherType::Cloudy,
+        45 | 48 => WeatherType::Fog,
+        51 | 53 | 55 => WeatherType::Sprinkle,
+        56 | 57 => WeatherType::Snow,
+        61 | 63 | 65 => WeatherType::RainDrop,
+        66 | 67 => WeatherType::RainMix,
+        71 | 73 | 75 => WeatherType::SnowflakeCold,
+        77 => WeatherType::SnowWind,
+        80 | 81 | 82 => WeatherType::Rain,
+        85 | 86 => WeatherType::SnowThunderstorm,
+        95 | 96 | 99 => WeatherType::Thunderstorm,
+        _ => WeatherType::Other,
+    };
+}
+
 pub async fn set_weather(api: Api<'_>) {
     let coordinates = api.get_coordinates();
     if coordinates.latitude == 0.0 || coordinates.longitude == 0.0 {
@@ -80,6 +110,12 @@ pub async fn set_weather(api: Api<'_>) {
     let offset_sec = api_data.utc_offset_seconds / 60 / 60;
     let offset_hours = format!("+{offset_sec}:00");
 
+    api.set_weather_current(WeatherCurrent {
+        temperature: api_data.current.temperature_2m,
+        precipitation: api_data.current.precipitation,
+        weather_type: code_to_type(api_data.current.weather_code),
+    });
+
     let daily = api_data.daily.clone();
 
     let mut weather_daily: Vec<WeatherDaily> = vec![];
@@ -93,10 +129,12 @@ pub async fn set_weather(api: Api<'_>) {
             let api_date = DateTime::parse_from_rfc3339(&format!("{time}T00:00:00{offset_hours}"));
 
             let mut date = Date::default();
+            let mut week_day: i32 = 0;
             if let Ok(d) = api_date {
                 date.year = d.year() as i32;
                 date.month = d.month() as i32;
                 date.day = d.day() as i32;
+                week_day = d.weekday().num_days_from_monday() as i32;
             }
 
             let mut sunrise = Time::default();
@@ -124,10 +162,11 @@ pub async fn set_weather(api: Api<'_>) {
             }
 
             weather_daily.push(WeatherDaily {
-                weather_code: daily.weather_code[i],
-                temperature_max: daily.temperature_2m_max[i],
-                temperature_min: daily.temperature_2m_min[i],
-                precipitation_sum: daily.precipitation_sum[i],
+                weather_type: code_to_type(daily.weather_code[i]),
+                week_day: week_day,
+                temperature_max: daily.temperature_2m_max[i] as i32,
+                temperature_min: daily.temperature_2m_min[i] as i32,
+                precipitation_sum: daily.precipitation_sum[i] as i32,
                 precipitation_probability_max: daily.precipitation_probability_max[i],
                 date: date,
                 sunrise: sunrise,
@@ -136,4 +175,11 @@ pub async fn set_weather(api: Api<'_>) {
         });
 
     api.set_weather_daily(VecModel::from_slice(&weather_daily));
+
+    let now = Local::now();
+    let mut time = Time::default();
+    time.hour = now.hour() as i32;
+    time.minute = now.minute() as i32;
+    time.second = now.second() as i32;
+    api.set_weather_updated_at(time);
 }

src/weather.rs

@@ -2,29 +2,83 @@ import { Date, Time } from "std-widgets.slint";
 
 export enum Pages { home, settings }
 
+export enum WeatherType {
+    sunny,
+    cloudy,
+    fog,
+    sprinkle,
+    snow,
+    rain-drop,
+    rain-mix,
+    snowflake-cold,
+    snow-wind,
+    rain,
+    snow-thunderstorm,
+    thunderstorm,
+    other,
+}
+
 export struct Coordinates  {
     longitude: float,
     latitude: float,
 }
 
 export struct WeatherDaily {
-    temperature_max: float,
-    temperature_min: float,
+    temperature_max: int,
+    temperature_min: int,
     date: Date,
-    precipitation_sum: float,
+    week_day: int,
+    precipitation_sum: int,
     precipitation_probability_max: int,
-    weather_code: int,
+    weather_type: WeatherType,
     sunrise: Time,
     sunset: Time,
 }
 
+export struct WeatherCurrent {
+    temperature: float,
+    precipitation: float,
+    weather_type: WeatherType,
+}
+
 export global Api {
     in-out property <Pages> current-page: Pages.home;
 
     in-out property <bool> is-yellow-bin: true;
     in-out property <int> days-to-bin: 0;
 
-    in-out property <[WeatherDaily]> weather-daily;
+    in-out property <WeatherCurrent> weather-current;
+
+    in-out property <[WeatherDaily]> weather-daily: [
+        {
+            week-day: 1,
+            temperature_max: 25,
+            temperature_min: 0,
+            date: { year: 2025, month: 3, day: 18 },
+            precipitation_sum: 0.8,
+            precipitation_probability_max: 23,
+            weather_type: WeatherType.rain,
+            sunrise: { hour: 6, minute: 55, second: 0 },
+            sunset: { hour: 17, minute: 10, second: 0 },
+        },
+        {
+            week-day: 2,
+            temperature_max: 25,
+            temperature_min: 10,
+            date: { year: 2025, month: 3, day: 18 },
+            precipitation_sum: 0,
+            precipitation_probability_max: 0,
+            weather_type: WeatherType.rain,
+            sunrise: { hour: 6, minute: 55, second: 0 },
+            sunset: { hour: 17, minute: 10, second: 0 },
+        }
+    ];
+
+    in-out property <Time> weather-updated-at: {
+        hour: 15,
+        minute: 12,
+        second: 33,
+    };
 
     in-out property <Coordinates> coordinates: {
         latitude: 0,

ui/Font Awesome 7 Free-Regular-400.otf

@@ -1,5 +1,13 @@
-// Copyright © SixtyFPS GmbH <info@slint.dev>
-// SPDX-License-Identifier: MIT
+
+export global Utils {
+    public pure function add-number-prefix(number: int) -> string {
+        if (number <= 9) {
+            return "0" + number;
+        } else {
+            return number;
+        }
+    }
+}
 
 export global Measurements {
     out property <length> zone-button-spacing: 30px;
@@ -22,19 +30,12 @@ export global Measurements {
 }
 
 export global Style {
-    out property <length> icon-title-font-size: 10px;
     out property <length> normal-font-size: 12px;
     out property <length> H1-font-size: 46px;
     out property <length> H2-font-size: 21px;
     out property <length> H3-font-size: 18px;
     out property <length> H4-font-size: 15px;
     out property <length> tile-title-font-size:  13pt;
-    out property <length> hvac-title-font-size:  13pt;
-}
-
-export global Animation {
-    out property <duration> full-screen-duration: 300ms;
-    out property <duration> transition-duration:  500ms;
 }
 
 export global Colors {

ui/Font Awesome 7 Free-Solid-900.otf

@@ -1,4 +1,4 @@
-import "../fa-regular-400.ttf";
+import "../Font Awesome 7 Free-Regular-400.otf";
 import { Palette, Style } from "../common.slint";
 
 
@@ -16,31 +16,27 @@ export component Bins {
     in property <bool> is-yellow-bin;
     in property <int> days-to-bin;
 
-    VerticalLayout {
+    HorizontalLayout {
         alignment: start;
+        spacing: 16px;
 
-        HorizontalLayout {
-            alignment: start;
-            spacing: 8px;
-
-            Bin {
-                color: red;
-            }
+        Bin {
+            color: red;
+        }
 
-            Bin {
-                color: green;
-            }
+        Bin {
+            color: green;
+        }
 
-            if(is-yellow-bin): Bin {
-                color: yellow;
-            }
+        if(is-yellow-bin): Bin {
+            color: yellow;
+        }
 
-            Text {
-                text: days-to-bin == 0 ? "BIN DAY TODAY" : "Days " + days-to-bin;
-                vertical-alignment: center;
-                color: Palette.info-foreground;
-                font-size: Style.H2-font-size;
-            }
+        Text {
+            text: days-to-bin == 0 ? "BIN DAY TODAY" : "Days " + days-to-bin;
+            vertical-alignment: center;
+            color: Palette.info-foreground;
+            font-size: Style.H2-font-size;
         }
     }
 }

ui/api.slint

@@ -1,19 +1,11 @@
-import { Palette, Style } from "../common.slint";
+import { Palette, Style, Utils } from "../common.slint";
 import { Date, Time } from "std-widgets.slint";
 
 export component Time {
 
     in property <Time> time;
     in property <Date> date;
 
-    function add-number-prefix(number: int) -> string {
-        if (number <= 9) {
-            return "0" + number;
-        } else {
-            return number;
-        }
-    }
-
     // I feel like this should be a UI layer, backend just gives us a date object
     function get-month(month: int) -> string {
         if (month == 1) {
@@ -48,7 +40,7 @@ export component Time {
     VerticalLayout {
         alignment: start;
         Text {
-            text: time.hour + ":" + add-number-prefix(time.minute);
+            text: time.hour + ":" + Utils.add-number-prefix(time.minute);
             horizontal-alignment: right;
             vertical-alignment: top;
             color: Palette.info-foreground;

ui/common.slint

@@ -0,0 +1,31 @@
+import { WeatherCurrent } from "../api.slint";
+import { Style } from "../common.slint";
+import { WeatherIcon } from "./weather_icon.slint";
+
+export component WeatherCurrent {
+    in property <WeatherCurrent> current;
+
+    VerticalLayout {
+        alignment: start;
+        HorizontalLayout {
+            alignment: center;
+
+            Text {
+                text: current.temperature;
+                font-size: Style.H1-font-size;
+            }
+
+            Text {
+                text: "°C";
+                font-size: Style.H2-font-size;
+                vertical-alignment: center;
+            }
+        }
+
+        WeatherIcon {
+            horizontal-alignment: center;
+            font-size: Style.H1-font-size;
+            type: current.weather-type;
+        }
+    }
+}