Merge pull request #627 from benphelps/fix-openmeteo-icons

Fix weather icons for openmeteo, add optional tz parameter

README.md

@@ -52,7 +52,7 @@
   - Coin Market Cap, Mastodon
 - Information & Utility Widgets
   - System Stats (Disk, CPU, Memory)
-  - Weather via [WeatherAPI.com](https://www.weatherapi.com/), [OpenWeatherMap](https://openweathermap.org/), or [Open-Meteo](https://open-meteo.com/)
+  - Weather via [OpenWeatherMap](https://openweathermap.org/) or [Open-Meteo](https://open-meteo.com/)
   - Search Bar
 - Customizable
   - 21 theme colors with light and dark mode support

src/components/widgets/openmeteo/icon.jsx

@@ -1,4 +1,4 @@
-import mapIcon from "utils/weather/owm-condition-map";
+import mapIcon from "utils/weather/openmeteo-condition-map";
 
 export default function Icon({ condition, timeOfDay }) {
   const IconComponent = mapIcon(condition, timeOfDay);

src/pages/api/widgets/openmeteo.js

@@ -1,8 +1,9 @@
 import cachedFetch from "utils/proxy/cached-fetch";
 
 export default async function handler(req, res) {
-  const { latitude, longitude, units, cache } = req.query;
+  const { latitude, longitude, units, cache, timezone } = req.query;
   const degrees = units === "imperial" ? "fahrenheit" : "celsius";
-  const apiUrl = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=sunrise,sunset&current_weather=true&temperature_unit=${degrees}&timezone=auto`;
+  const timezeone = timezone ?? 'auto'
+  const apiUrl = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=sunrise,sunset&current_weather=true&temperature_unit=${degrees}&timezone=${timezeone}`;
   return res.send(await cachedFetch(apiUrl, cache));
 }

src/utils/weather/openmeteo-condition-map.js

@@ -0,0 +1,212 @@
+import * as Icons from "react-icons/wi";
+
+// see https://open-meteo.com/en/docs
+
+const conditions = [
+  {
+    code: 1,
+    icon: {
+      day: Icons.WiDayCloudy,
+      night: Icons.WiNightAltCloudy,
+    },
+  },
+  {
+    code: 2,
+    icon: {
+      day: Icons.WiDayCloudy,
+      night: Icons.WiNightAltCloudy,
+    },
+  },
+  {
+    code: 3,
+    icon: {
+      day: Icons.WiDayCloudy,
+      night: Icons.WiNightAltCloudy,
+    },
+  },
+  {
+    code: 45,
+    icon: {
+      day: Icons.WiDayFog,
+      night: Icons.WiNightFog,
+    },
+  },
+  {
+    code: 48,
+    icon: {
+      day: Icons.WiDayFog,
+      night: Icons.WiNightFog,
+    },
+  },
+  {
+    code: 51,
+    icon: {
+      day: Icons.WiDaySprinkle,
+      night: Icons.WiNightAltSprinkle,
+    },
+  },
+  {
+    code: 53,
+    icon: {
+      day: Icons.WiDaySprinkle,
+      night: Icons.WiNightAltSprinkle,
+    },
+  },
+  {
+    code: 55,
+    icon: {
+      day: Icons.WiDaySprinkle,
+      night: Icons.WiNightAltSprinkle,
+    },
+  },
+  {
+    code: 56,
+    icon: {
+      day: Icons.WiDaySleet,
+      night: Icons.WiNightAltSleet,
+    },
+  },
+  {
+    code: 57,
+    icon: {
+      day: Icons.WiDaySleet,
+      night: Icons.WiNightAltSleet,
+    },
+  },
+  {
+    code: 61,
+    icon: {
+      day: Icons.WiDayShowers,
+      night: Icons.WiNightAltShowers,
+    },
+  },
+  {
+    code: 63,
+    icon: {
+      day: Icons.WiDayShowers,
+      night: Icons.WiNightAltShowers,
+    },
+  },
+  {
+    code: 65,
+    icon: {
+      day: Icons.WiDayShowers,
+      night: Icons.WiNightAltShowers,
+    },
+  },
+  {
+    code: 66,
+    icon: {
+      day: Icons.WiDaySleet,
+      night: Icons.WiNightAltSleet,
+    },
+  },
+  {
+    code: 67,
+    icon: {
+      day: Icons.WiDaySleet,
+      night: Icons.WiNightAltSleet,
+    },
+  },
+  {
+    code: 71,
+    icon: {
+      day: Icons.WiDaySnow,
+      night: Icons.WiNightAltSnow,
+    },
+  },
+  {
+    code: 73,
+    icon: {
+      day: Icons.WiDaySnow,
+      night: Icons.WiNightAltSnow,
+    },
+  },
+  {
+    code: 75,
+    icon: {
+      day: Icons.WiDaySnow,
+      night: Icons.WiNightAltSnow,
+    },
+  },
+  {
+    code: 77,
+    icon: {
+      day: Icons.WiDaySnow,
+      night: Icons.WiNightAltSnow,
+    },
+  },
+  {
+    code: 80,
+    icon: {
+      day: Icons.WiDaySnow,
+      night: Icons.WiNightAltSnow,
+    },
+  },
+  {
+    code: 81,
+    icon: {
+      day: Icons.WiDaySnow,
+      night: Icons.WiNightAltSnow,
+    },
+  },
+  {
+    code: 82,
+    icon: {
+      day: Icons.WiDaySnow,
+      night: Icons.WiNightAltSnow,
+    },
+  },
+  {
+    code: 85,
+    icon: {
+      day: Icons.WiDaySnow,
+      night: Icons.WiNightAltSnow,
+    },
+  },
+  {
+    code: 86,
+    icon: {
+      day: Icons.WiDaySnow,
+      night: Icons.WiNightAltSnow,
+    },
+  },
+  {
+    code: 95,
+    icon: {
+      day: Icons.WiDayThunderstorm,
+      night: Icons.WiNightAltThunderstorm,
+    },
+  },
+  {
+    code: 96,
+    icon: {
+      day: Icons.WiDayThunderstorm,
+      night: Icons.WiNightAltThunderstorm,
+    },
+  },
+  {
+    code: 99,
+    icon: {
+      day: Icons.WiDayThunderstorm,
+      night: Icons.WiNightAltThunderstorm,
+    },
+  },
+];
+
+export default function mapIcon(weatherStatusCode, timeOfDay) {
+  const mapping = conditions.find((condition) => condition.code === weatherStatusCode);
+  console.log(weatherStatusCode, timeOfDay, mapping);
+
+  if (mapping) {
+    if (timeOfDay === "day") {
+      return mapping.icon.day;
+    }
+
+    if (timeOfDay === "night") {
+      return mapping.icon.night;
+    }
+  }
+
+  return Icons.WiDaySunny;
+}