Finish all options sets

modules/menus/calendar/weather/hourly/icon/index.js

@@ -0,0 +1,28 @@
+import icons from "../../../../../icons/index.js";
+
+export const HourlyIcon = (theWeather, getNextEpoch) => {
+  return Widget.Icon({
+    class_name: "hourly-weather-icon",
+    icon: theWeather.bind("value").as((w) => {
+      if (!Object.keys(w).length) {
+        return "-";
+      }
+
+      const nextEpoch = getNextEpoch(w);
+      const weatherAtEpoch = w.forecast.forecastday[0].hour.find(
+        (h) => h.time_epoch === nextEpoch,
+      );
+
+      let iconQuery = weatherAtEpoch?.condition.text
+        .trim()
+        .toLowerCase()
+        .replaceAll(" ", "_");
+
+      if (!weatherAtEpoch?.isDay && iconQuery === "partly_cloudy") {
+        iconQuery = "partly_cloudy_night";
+      }
+
+      return icons.weather[iconQuery];
+    }),
+  });
+};

modules/menus/calendar/weather/hourly/index.js

@@ -0,0 +1,44 @@
+import { HourlyIcon } from "./icon/index.js";
+import { HourlyTemp } from "./temperature/index.js";
+import { HourlyTime } from "./time/index.js";
+
+export const Hourly = (theWeather) => {
+  return Widget.Box({
+    vertical: false,
+    hexpand: true,
+    hpack: "fill",
+    class_name: "hourly-weather-container",
+    children: [1, 2, 3, 4].map((hoursFromNow) => {
+      const getNextEpoch = (wthr) => {
+        const currentEpoch = wthr.location.localtime_epoch;
+        const epochAtHourStart = currentEpoch - (currentEpoch % 3600);
+        let nextEpoch = 3600 * hoursFromNow + epochAtHourStart;
+
+        const curHour = new Date(currentEpoch * 1000).getHours();
+
+        /*
+         * NOTE: Since the API is only capable of showing the current day; if
+         * the hours left in the day are less than 4 (aka spilling into the next day),
+         * then rewind to contain the prediction within the current day.
+         */
+        if (curHour > 19) {
+          const hoursToRewind = curHour - 19;
+          nextEpoch =
+            3600 * hoursFromNow + epochAtHourStart - hoursToRewind * 3600;
+        }
+        return nextEpoch;
+      };
+
+      return Widget.Box({
+        class_name: "hourly-weather-item",
+        hexpand: true,
+        vertical: true,
+        children: [
+          HourlyTime(theWeather, getNextEpoch),
+          HourlyIcon(theWeather, getNextEpoch),
+          HourlyTemp(theWeather, getNextEpoch),
+        ],
+      });
+    }),
+  });
+};

modules/menus/calendar/weather/hourly/temperature/index.js

@@ -0,0 +1,27 @@
+import options from "options";
+
+const { unit } = options.menus.clock.weather;
+
+export const HourlyTemp = (theWeather, getNextEpoch) => {
+  return Widget.Label({
+    class_name: "hourly-weather-temp",
+    label: Utils.merge(
+      [theWeather.bind("value"), unit.bind("value")],
+      (wthr, unt) => {
+        if (!Object.keys(wthr).length) {
+          return "-";
+        }
+
+        const nextEpoch = getNextEpoch(wthr);
+        const weatherAtEpoch = wthr.forecast.forecastday[0].hour.find(
+          (h) => h.time_epoch === nextEpoch,
+        );
+
+        if (unt === "imperial") {
+          return `${weatherAtEpoch ? Math.ceil(weatherAtEpoch.temp_f) : "-"}° F`;
+        }
+        return `${weatherAtEpoch ? Math.ceil(weatherAtEpoch.temp_c) : "-"}° C`;
+      },
+    ),
+  });
+};

modules/menus/calendar/weather/hourly/time/index.js

@@ -0,0 +1,18 @@
+export const HourlyTime = (theWeather, getNextEpoch) => {
+  return Widget.Label({
+    class_name: "hourly-weather-time",
+    label: theWeather.bind("value").as((w) => {
+      if (!Object.keys(w).length) {
+        return "-";
+      }
+
+      const nextEpoch = getNextEpoch(w);
+      const dateAtEpoch = new Date(nextEpoch * 1000);
+      let hours = dateAtEpoch.getHours();
+      const ampm = hours >= 12 ? "PM" : "AM";
+      hours = hours % 12 || 12;
+
+      return `${hours}${ampm}`;
+    }),
+  });
+};