Add 24 hour forecast

data/Application.css

@@ -29,20 +29,20 @@ image.weather-icon {
     -gtk-icon-size: 5.333em; /* 48px */
 }
 
-image:not(.weather-icon) {
+image.conditions {
     min-height: 2em;
 }
 
-image:not(.weather-icon):dir(ltr) {
+image.conditions:dir(ltr) {
     margin-right: 1em;
 }
 
-image:not(.weather-icon):dir(rtl) {
+image.conditions:dir(rtl) {
     margin-left: 1em;
 }
 
 .weather {
-    padding: 2em;
+    padding: 2em 2em 1em;
     font-weight: 500;
 }
 
@@ -55,6 +55,14 @@ image:not(.weather-icon):dir(rtl) {
     font-weight: 800;
 }
 
+hourly {
+    margin: 1em 1em 2em;
+}
+
+hourly label {
+    font-weight: bold;
+}
+
 .day {
     background-color: @BLUEBERRY_500;
     background-image:

meson.build

@@ -25,6 +25,7 @@ asresources = gnome.compile_resources(
 executable(
     meson.project_name(),
     'src/Application.vala',
+    'src/HourlyInfoChild.vala',
     'src/MainWindow.vala',
     config_file,
     asresources,

src/HourlyInfoChild.vala

@@ -0,0 +1,54 @@
+/*
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ * SPDX-FileCopyrightText: 2017-2023 Danielle Foré (https://danirabbit.github.io/)
+ */
+
+public class HourlyInfoChild : Gtk.FlowBoxChild {
+    public GWeather.Info weather_info { get; construct; }
+    public GWeather.Location location{ get; construct; }
+
+    public HourlyInfoChild (GWeather.Info weather_info, GWeather.Location location) {
+        Object (
+            weather_info: weather_info,
+            location: location
+        );
+    }
+
+    class construct {
+        set_css_name ("hourly");
+    }
+
+    construct {
+        long unix_date;
+        weather_info.get_value_update (out unix_date);
+
+        var datetime = new DateTime.from_unix_utc (unix_date).to_timezone (location.get_timezone ());
+
+        var time_label = new Gtk.Label (datetime.format (_("%l %p")).replace (" ", ""));
+        time_label.add_css_class (Granite.STYLE_CLASS_SMALL_LABEL);
+
+        var image = new Gtk.Image.from_icon_name (weather_info.get_symbolic_icon_name ()) {
+            tooltip_text = get_conditions ()
+        };
+        image.add_css_class (Granite.STYLE_CLASS_LARGE_ICONS);
+
+        var temp_label = new Gtk.Label (weather_info.get_temp ());
+
+        var box = new Gtk.Box (VERTICAL, 0);
+        box.append (time_label);
+        box.append (image);
+        box.append (temp_label);
+
+        focusable = false;
+        child = box;
+    }
+
+    private string get_conditions () {
+        var conditions = weather_info.get_conditions ();
+        if (conditions == "-") {
+            conditions = weather_info.get_sky ();
+        }
+
+        return conditions;
+    }
+}

src/MainWindow.vala

@@ -6,7 +6,7 @@
 public class MainWindow : Gtk.ApplicationWindow {
     private Gtk.Stack stack;
     private Gtk.Spinner spinner;
-    private Gtk.Grid grid;
+    private Gtk.Box box;
     private Granite.Placeholder placeholder;
     private GWeather.Location? location = null;
     private GWeather.Info weather_info;
@@ -42,6 +42,7 @@ public class MainWindow : Gtk.ApplicationWindow {
             halign = END,
             tooltip_text = _("Wind")
         };
+        wind_icon.add_css_class ("conditions");
 
         var wind_label = new Gtk.Label ("") {
             halign = START
@@ -51,6 +52,7 @@ public class MainWindow : Gtk.ApplicationWindow {
             halign = END,
             tooltip_text = _("Visibility")
         };
+        visibility_icon.add_css_class ("conditions");
 
         var visibility_label = new Gtk.Label ("") {
             halign = START
@@ -60,12 +62,23 @@ public class MainWindow : Gtk.ApplicationWindow {
             halign = END,
             tooltip_text = _("Pressure")
         };
+        pressure_icon.add_css_class ("conditions");
 
         var pressure_label = new Gtk.Label ("") {
             halign = START
         };
 
-        grid = new Gtk.Grid ();
+        var hourly_box = new Gtk.FlowBox () {
+            min_children_per_line = 24,
+            max_children_per_line = 24
+        };
+
+        var hourly_scrolled = new Gtk.ScrolledWindow () {
+            child = hourly_box,
+            vscrollbar_policy = NEVER
+        };
+
+        var grid = new Gtk.Grid ();
         grid.attach (weather_icon, 0, 0, 1, 2);
         grid.attach (temp_label, 1, 0, 1, 2);
         grid.attach (weather_label, 2, 0);
@@ -77,8 +90,13 @@ public class MainWindow : Gtk.ApplicationWindow {
         grid.attach (visibility_label, 1, 3, 2);
         grid.attach (pressure_icon, 0, 4);
         grid.attach (pressure_label, 1, 4, 2);
+
         grid.add_css_class ("weather");
 
+        box = new Gtk.Box (VERTICAL, 0);
+        box.append (grid);
+        box.append (hourly_scrolled);
+
         spinner = new Gtk.Spinner () {
             halign = Gtk.Align.CENTER,
             vexpand = true,
@@ -96,7 +114,7 @@ public class MainWindow : Gtk.ApplicationWindow {
             vhomogeneous = false
         };
         stack.add_child (spinner);
-        stack.add_child (grid);
+        stack.add_child (box);
         stack.add_child (placeholder);
 
         var window_handle = new Gtk.WindowHandle () {
@@ -162,6 +180,18 @@ public class MainWindow : Gtk.ApplicationWindow {
                     css_classes = {"day", "background", "csd"};
                     break;
             }
+
+            while (hourly_box.get_first_child () != null) {
+                hourly_box.remove (hourly_box.get_first_child ());
+            }
+
+            unowned var forecast_list = weather_info.get_forecast_list ();
+            foreach (unowned var info in forecast_list) {
+                hourly_box.append (new HourlyInfoChild (info, location));
+                if (hourly_box.get_child_at_index (23) != null) {
+                    break;
+                }
+            }
         });
     }
 
@@ -198,7 +228,7 @@ public class MainWindow : Gtk.ApplicationWindow {
         if (location != null) {
             weather_info.location = location;
             weather_info.update ();
-            stack.visible_child = grid;
+            stack.visible_child = box;
         }
     }
 }