From 0a39dd185e1399bf90c8546fb1af4d500f97b49b Mon Sep 17 00:00:00 2001
From: Tim Arendsen <t.j.m.arendsen@gmail.com>
Date: Fri, 11 Oct 2024 16:54:35 +0200
Subject: [PATCH] v1.5.5: Added weather data to park overview page

---
 assets/wmo-weather-codes.json | 282 ++++++++++++++++++++++++++++++++++
 locales/de-DE.js              |   1 +
 locales/en-US.js              |   1 +
 locales/es-ES.js              |   1 +
 locales/nl-NL.js              |   1 +
 nuxt.config.js                |   2 +
 package-lock.json             |   4 +-
 package.json                  |   2 +-
 pages/parks/:id/index.vue     |  10 ++
 plugins/open-meteo.js         |  22 +++
 views/WeatherList.vue         |  95 ++++++++++++
 11 files changed, 418 insertions(+), 3 deletions(-)
 create mode 100644 assets/wmo-weather-codes.json
 create mode 100644 plugins/open-meteo.js
 create mode 100644 views/WeatherList.vue

diff --git a/assets/wmo-weather-codes.json b/assets/wmo-weather-codes.json
new file mode 100644
index 0000000..545589b
--- /dev/null
+++ b/assets/wmo-weather-codes.json
@@ -0,0 +1,282 @@
+{
+  "0": {
+    "day": {
+      "description": "Sunny",
+      "image": "http://openweathermap.org/img/wn/01d@2x.png"
+    },
+    "night": {
+      "description": "Clear",
+      "image": "http://openweathermap.org/img/wn/01n@2x.png"
+    }
+  },
+  "1": {
+    "day": {
+      "description": "Mainly Sunny",
+      "image": "http://openweathermap.org/img/wn/01d@2x.png"
+    },
+    "night": {
+      "description": "Mainly Clear",
+      "image": "http://openweathermap.org/img/wn/01n@2x.png"
+    }
+  },
+  "2": {
+    "day": {
+      "description": "Partly Cloudy",
+      "image": "http://openweathermap.org/img/wn/02d@2x.png"
+    },
+    "night": {
+      "description": "Partly Cloudy",
+      "image": "http://openweathermap.org/img/wn/02n@2x.png"
+    }
+  },
+  "3": {
+    "day": {
+      "description": "Cloudy",
+      "image": "http://openweathermap.org/img/wn/03d@2x.png"
+    },
+    "night": {
+      "description": "Cloudy",
+      "image": "http://openweathermap.org/img/wn/03n@2x.png"
+    }
+  },
+  "45": {
+    "day": {
+      "description": "Foggy",
+      "image": "http://openweathermap.org/img/wn/50d@2x.png"
+    },
+    "night": {
+      "description": "Foggy",
+      "image": "http://openweathermap.org/img/wn/50n@2x.png"
+    }
+  },
+  "48": {
+    "day": {
+      "description": "Rime Fog",
+      "image": "http://openweathermap.org/img/wn/50d@2x.png"
+    },
+    "night": {
+      "description": "Rime Fog",
+      "image": "http://openweathermap.org/img/wn/50n@2x.png"
+    }
+  },
+  "51": {
+    "day": {
+      "description": "Light Drizzle",
+      "image": "http://openweathermap.org/img/wn/09d@2x.png"
+    },
+    "night": {
+      "description": "Light Drizzle",
+      "image": "http://openweathermap.org/img/wn/09n@2x.png"
+    }
+  },
+  "53": {
+    "day": {
+      "description": "Drizzle",
+      "image": "http://openweathermap.org/img/wn/09d@2x.png"
+    },
+    "night": {
+      "description": "Drizzle",
+      "image": "http://openweathermap.org/img/wn/09n@2x.png"
+    }
+  },
+  "55": {
+    "day": {
+      "description": "Heavy Drizzle",
+      "image": "http://openweathermap.org/img/wn/09d@2x.png"
+    },
+    "night": {
+      "description": "Heavy Drizzle",
+      "image": "http://openweathermap.org/img/wn/09n@2x.png"
+    }
+  },
+  "56": {
+    "day": {
+      "description": "Light Freezing Drizzle",
+      "image": "http://openweathermap.org/img/wn/09d@2x.png"
+    },
+    "night": {
+      "description": "Light Freezing Drizzle",
+      "image": "http://openweathermap.org/img/wn/09n@2x.png"
+    }
+  },
+  "57": {
+    "day": {
+      "description": "Freezing Drizzle",
+      "image": "http://openweathermap.org/img/wn/09d@2x.png"
+    },
+    "night": {
+      "description": "Freezing Drizzle",
+      "image": "http://openweathermap.org/img/wn/09n@2x.png"
+    }
+  },
+  "61": {
+    "day": {
+      "description": "Light Rain",
+      "image": "http://openweathermap.org/img/wn/10d@2x.png"
+    },
+    "night": {
+      "description": "Light Rain",
+      "image": "http://openweathermap.org/img/wn/10n@2x.png"
+    }
+  },
+  "63": {
+    "day": {
+      "description": "Rain",
+      "image": "http://openweathermap.org/img/wn/10d@2x.png"
+    },
+    "night": {
+      "description": "Rain",
+      "image": "http://openweathermap.org/img/wn/10n@2x.png"
+    }
+  },
+  "65": {
+    "day": {
+      "description": "Heavy Rain",
+      "image": "http://openweathermap.org/img/wn/10d@2x.png"
+    },
+    "night": {
+      "description": "Heavy Rain",
+      "image": "http://openweathermap.org/img/wn/10n@2x.png"
+    }
+  },
+  "66": {
+    "day": {
+      "description": "Light Freezing Rain",
+      "image": "http://openweathermap.org/img/wn/10d@2x.png"
+    },
+    "night": {
+      "description": "Light Freezing Rain",
+      "image": "http://openweathermap.org/img/wn/10n@2x.png"
+    }
+  },
+  "67": {
+    "day": {
+      "description": "Freezing Rain",
+      "image": "http://openweathermap.org/img/wn/10d@2x.png"
+    },
+    "night": {
+      "description": "Freezing Rain",
+      "image": "http://openweathermap.org/img/wn/10n@2x.png"
+    }
+  },
+  "71": {
+    "day": {
+      "description": "Light Snow",
+      "image": "http://openweathermap.org/img/wn/13d@2x.png"
+    },
+    "night": {
+      "description": "Light Snow",
+      "image": "http://openweathermap.org/img/wn/13n@2x.png"
+    }
+  },
+  "73": {
+    "day": {
+      "description": "Snow",
+      "image": "http://openweathermap.org/img/wn/13d@2x.png"
+    },
+    "night": {
+      "description": "Snow",
+      "image": "http://openweathermap.org/img/wn/13n@2x.png"
+    }
+  },
+  "75": {
+    "day": {
+      "description": "Heavy Snow",
+      "image": "http://openweathermap.org/img/wn/13d@2x.png"
+    },
+    "night": {
+      "description": "Heavy Snow",
+      "image": "http://openweathermap.org/img/wn/13n@2x.png"
+    }
+  },
+  "77": {
+    "day": {
+      "description": "Snow Grains",
+      "image": "http://openweathermap.org/img/wn/13d@2x.png"
+    },
+    "night": {
+      "description": "Snow Grains",
+      "image": "http://openweathermap.org/img/wn/13n@2x.png"
+    }
+  },
+  "80": {
+    "day": {
+      "description": "Light Showers",
+      "image": "http://openweathermap.org/img/wn/09d@2x.png"
+    },
+    "night": {
+      "description": "Light Showers",
+      "image": "http://openweathermap.org/img/wn/09n@2x.png"
+    }
+  },
+  "81": {
+    "day": {
+      "description": "Showers",
+      "image": "http://openweathermap.org/img/wn/09d@2x.png"
+    },
+    "night": {
+      "description": "Showers",
+      "image": "http://openweathermap.org/img/wn/09n@2x.png"
+    }
+  },
+  "82": {
+    "day": {
+      "description": "Heavy Showers",
+      "image": "http://openweathermap.org/img/wn/09d@2x.png"
+    },
+    "night": {
+      "description": "Heavy Showers",
+      "image": "http://openweathermap.org/img/wn/09n@2x.png"
+    }
+  },
+  "85": {
+    "day": {
+      "description": "Light Snow Showers",
+      "image": "http://openweathermap.org/img/wn/13d@2x.png"
+    },
+    "night": {
+      "description": "Light Snow Showers",
+      "image": "http://openweathermap.org/img/wn/13n@2x.png"
+    }
+  },
+  "86": {
+    "day": {
+      "description": "Snow Showers",
+      "image": "http://openweathermap.org/img/wn/13d@2x.png"
+    },
+    "night": {
+      "description": "Snow Showers",
+      "image": "http://openweathermap.org/img/wn/13n@2x.png"
+    }
+  },
+  "95": {
+    "day": {
+      "description": "Thunderstorm",
+      "image": "http://openweathermap.org/img/wn/11d@2x.png"
+    },
+    "night": {
+      "description": "Thunderstorm",
+      "image": "http://openweathermap.org/img/wn/11n@2x.png"
+    }
+  },
+  "96": {
+    "day": {
+      "description": "Light Thunderstorms With Hail",
+      "image": "http://openweathermap.org/img/wn/11d@2x.png"
+    },
+    "night": {
+      "description": "Light Thunderstorms With Hail",
+      "image": "http://openweathermap.org/img/wn/11n@2x.png"
+    }
+  },
+  "99": {
+    "day": {
+      "description": "Thunderstorm With Hail",
+      "image": "http://openweathermap.org/img/wn/11d@2x.png"
+    },
+    "night": {
+      "description": "Thunderstorm With Hail",
+      "image": "http://openweathermap.org/img/wn/11n@2x.png"
+    }
+  }
+}
diff --git a/locales/de-DE.js b/locales/de-DE.js
index b666b65..ecc0bd6 100644
--- a/locales/de-DE.js
+++ b/locales/de-DE.js
@@ -16,6 +16,7 @@ export default {
     shop: 'Einkaufen',
     animals: 'Tiere',
     animal: 'Tier',
+    weather: 'Wetter',
     halloweenEvents: 'Halloween-Aktivitäten',
     halloweenEvent: 'Halloween-Aktivität',
     blog: 'Blog',
diff --git a/locales/en-US.js b/locales/en-US.js
index 6d675db..d2e3ba1 100644
--- a/locales/en-US.js
+++ b/locales/en-US.js
@@ -16,6 +16,7 @@ export default {
     shop: 'Shop',
     animals: 'Animals',
     animal: 'Animal',
+    weather: 'Weather',
     halloweenEvents: 'Halloween Activities',
     halloweenEvent: 'Halloween Activity',
     blog: 'Blog',
diff --git a/locales/es-ES.js b/locales/es-ES.js
index fc96d0b..c9a4f4a 100644
--- a/locales/es-ES.js
+++ b/locales/es-ES.js
@@ -16,6 +16,7 @@ export default {
     shop: 'Tienda',
     animals: 'Animales',
     animal: 'Animal',
+    weather: 'Clima',
     halloweenEvents: 'Actividades de halloween',
     halloweenEvent: 'Actividad de halloween',
     blog: 'Blog',
diff --git a/locales/nl-NL.js b/locales/nl-NL.js
index f31557a..8b4bae3 100644
--- a/locales/nl-NL.js
+++ b/locales/nl-NL.js
@@ -16,6 +16,7 @@ export default {
     shop: 'Winkel',
     animals: 'Dieren',
     animal: 'Dier',
+    weather: 'Weer',
     halloweenEvents: 'Halloweenactiviteiten',
     halloweenEvent: 'Halloweenactiviteit',
     blog: 'Blog',
diff --git a/nuxt.config.js b/nuxt.config.js
index 478ecff..de53254 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -51,6 +51,8 @@ export default {
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
     '~/plugins/axios',
+    // Weather data from open-meteo.com
+    '~/plugins/open-meteo',
     // https://kuroco.app/docs/faq/how-do-i-set-up-google-analytics-4-in-nuxtjs/
     '~/plugins/gtag',
     { src: '~plugins/markdown', ssr: false },
diff --git a/package-lock.json b/package-lock.json
index 3b68361..3e0380e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "themeparks-nuxtjs",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "themeparks-nuxtjs",
-      "version": "1.5.4",
+      "version": "1.5.5",
       "license": "MIT",
       "dependencies": {
         "@kangc/v-md-editor": "^1.7.12",
diff --git a/package.json b/package.json
index f5012e5..6dfd43c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "themeparks-nuxtjs",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "private": false,
   "repository": {
     "url": "https://github.com/timyboy12345/Themeparks-NuxtJS"
diff --git a/pages/parks/:id/index.vue b/pages/parks/:id/index.vue
index 20d0996..6841706 100644
--- a/pages/parks/:id/index.vue
+++ b/pages/parks/:id/index.vue
@@ -107,6 +107,14 @@
         </template>
       </card>
 
+      <ClientOnly>
+        <card v-if="park && park.location" :title="$t('general.weather')">
+          <template #content>
+            <weather-list class="-mx-4" :lat="park.location.lat" :lng="park.location.lng" />
+          </template>
+        </card>
+      </ClientOnly>
+
       <AdCard v-if="park" />
 
       <card v-if="park && blogPosts && blogPosts.length > 0" :title="$t('general.blog')" :sub-title="$t('park.allBlogPostsSubtitle')">
@@ -154,9 +162,11 @@ import OpeningHoursList from '~/views/OpeningHoursList'
 import BlogPostList from '~/views/BlogPostList.vue'
 import HalloweenEventList from '~/views/HalloweenEventList.vue'
 import GeneralError from '~/components/GeneralError.vue'
+import WeatherList from '~/views/WeatherList.vue'
 
 export default {
   components: {
+    WeatherList,
     GeneralError,
     HalloweenEventList,
     BlogPostList,
diff --git a/plugins/open-meteo.js b/plugins/open-meteo.js
new file mode 100644
index 0000000..9c4d10c
--- /dev/null
+++ b/plugins/open-meteo.js
@@ -0,0 +1,22 @@
+export default function ({ $axios }, inject) {
+  // Example: https://open-meteo.com/en/docs#current=temperature_2m,is_day,weather_code&hourly=temperature_2m,rain,weather_code,is_day&forecast_days=1
+
+  // Create a custom axios instance
+  const openMeteo = $axios.create({
+    baseURL: 'https://api.open-meteo.com/',
+    params: {
+      // latitude: 52.52,
+      // longitude: 13.41,
+      hourly: 'temperature_2m,rain,weather_code,is_day',
+      current: 'temperature_2m,weather_code,is_day',
+      forecast_days: 1,
+    },
+    headers: {
+      common: {
+        Accept: 'application/json, */*',
+      },
+    },
+  })
+
+  inject('openMeteo', openMeteo)
+}
diff --git a/views/WeatherList.vue b/views/WeatherList.vue
new file mode 100644
index 0000000..21394b8
--- /dev/null
+++ b/views/WeatherList.vue
@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <loading-spinner v-if="$fetchState.pending" class="py-4"></loading-spinner>
+
+    <general-error v-if="$fetchState.error" class="m-4" sub-title="We couldn't fetch the openingHours for this park" />
+
+    <general-message v-if="!$fetchState.pending && !weatherData && !$fetchState.error" class="m-4" />
+
+    <div
+      v-if="!$fetchState.pending && weatherData.current"
+      class="mt-2 flex flex-col bg-white divide-y divide-gray-200 dark:divide-gray-600"
+    >
+      <div
+        v-for="hour of remainingHours"
+        :key="hour"
+        class="py-2 px-4 flex hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800 transition duration-100 flex-row justify-between items-center"
+      >
+        <div class="flex flex-row items-center">
+          <div class="flex flex-col">
+            <div class="text-indigo-700 dark:text-indigo-400">{{ hour }}:00</div>
+            <div class="text-sm text-gray-600">
+              {{ weatherData.hourly.temperature_2m[hour] }}&deg; / {{ weatherData.hourly.rain[hour] }}mm
+            </div>
+          </div>
+        </div>
+
+        <div class="text-gray-700 dark:text-gray-300">
+          <img
+            class="w-8 h-8 bg-gray-200 rounded-full p-0.5 object-center"
+            alt="Image depicting weather type"
+            :src="weatherIcon(weatherData.hourly.weather_code[hour], weatherData.hourly.is_day[hour])"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import LoadingSpinner from '@/components/LoadingSpinner'
+import GeneralError from '@/components/GeneralError'
+import GeneralMessage from '@/components/GeneralMessage'
+import WmoWeatherCodes from '~/assets/wmo-weather-codes.json'
+
+export default {
+  name: 'WeatherList',
+  components: { GeneralMessage, GeneralError, LoadingSpinner },
+  props: {
+    lat: {
+      type: Number,
+      required: true,
+    },
+    lng: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      weatherData: null,
+      error: null,
+      wmoCodes: WmoWeatherCodes,
+    }
+  },
+  async fetch() {
+    this.weatherData = await this.$openMeteo
+      .get('/v1/forecast', { params: { latitude: this.lat, longitude: this.lng } })
+      .then((response) => {
+        return response.data
+      })
+      .catch((e) => {
+        this.$sentry.captureException(e)
+        throw e
+      })
+  },
+  computed: {
+    remainingHours() {
+      const hours = []
+
+      for (let i = new Date().getHours(); i < 24; i++) {
+        hours.push(i)
+      }
+
+      return hours.slice(0, 6)
+    },
+  },
+  methods: {
+    weatherIcon(code, isDay) {
+      return this.wmoCodes[code][isDay ? 'day' : 'night'].image
+    },
+  },
+}
+</script>
+
+<style scoped></style>