✨ Adds upcoming public holidays widget

src/components/Widgets/PublicHolidays.vue

@@ -0,0 +1,121 @@
+<template>
+<div class="public-holidays-wrapper">
+  <div
+    v-for="(holiday, indx) in holidays"
+    :key="indx"
+    v-tooltip="tooltip(holiday)"
+    class="holiday-row"
+  >
+    <p class="holiday-date">{{ holiday.date }}</p>
+    <p class="holiday-name">{{ holiday.name }}</p>
+  </div>
+</div>
+</template>
+
+<script>
+import axios from 'axios';
+import WidgetMixin from '@/mixins/WidgetMixin';
+import { widgetApiEndpoints } from '@/utils/defaults';
+import { convertTimestampToDate, capitalize } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin],
+  components: {},
+  data() {
+    return {
+      holidays: [],
+    };
+  },
+  computed: {
+    country() {
+      if (this.options.country) return this.options.country;
+      return navigator.language.split('-')[1] || 'GB';
+    },
+    holidayType() {
+      const options = ['all', 'public_holiday', 'observance',
+        'school_holiday', 'other_day', 'extra_working_day'];
+      const usersChoice = this.options.holidayType;
+      if (usersChoice && options.includes(usersChoice)) return usersChoice;
+      return 'public_holiday';
+    },
+    monthsToShow() {
+      const usersChoice = this.options.monthsToShow;
+      if (usersChoice && !Number.isNaN(usersChoice) && usersChoice > 0 && usersChoice <= 24) {
+        return usersChoice;
+      }
+      return 12;
+    },
+    startDate() {
+      const now = new Date();
+      return `${now.getDate()}-${now.getMonth()}-${now.getFullYear()}`;
+    },
+    endDate() {
+      const now = new Date();
+      const then = new Date((now.setMonth(now.getMonth() + this.monthsToShow)));
+      return `${then.getDate()}-${then.getMonth()}-${then.getFullYear()}`;
+    },
+    endpoint() {
+      return `${widgetApiEndpoints.holidays}`
+      + `&fromDate=${this.startDate}&toDate=${this.endDate}`
+      + `&country=${this.country}&holidayType=${this.holidayType}`;
+    },
+  },
+  methods: {
+    /* Make GET request to CoinGecko API endpoint */
+    fetchData() {
+      axios.get(this.endpoint)
+        .then((response) => {
+          this.processData(response.data);
+        })
+        .catch((dataFetchError) => {
+          this.error('Unable to fetch holiday data', dataFetchError);
+        })
+        .finally(() => {
+          this.finishLoading();
+        });
+    },
+    /* Assign data variables to the returned data */
+    processData(holidays) {
+      const results = [];
+      const makeDate = (date) => convertTimestampToDate(
+        new Date(`${date.year}-${date.month}-${date.day}`).getTime(),
+      );
+      const formatType = (ht) => capitalize(ht.replaceAll('_', ' '));
+      holidays.forEach((holiday) => {
+        results.push({
+          name: holiday.name[0].text,
+          date: makeDate(holiday.date),
+          type: formatType(holiday.holidayType),
+          observed: holiday.observedOn ? makeDate(holiday.observedOn) : '',
+        });
+      });
+      this.holidays = results;
+    },
+    tooltip(holiday) {
+      const observed = holiday.observed ? `<br><b>Observed On</b>: ${holiday.observed}` : '';
+      const content = `<b>Type</b>: ${holiday.type}${observed}`;
+      return {
+        content, trigger: 'hover focus', html: true, delay: 250, classes: 'in-modal-tt',
+      };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.public-holidays-wrapper {
+  padding: 0.5rem 0;
+  .holiday-row {
+    display: flex;
+    justify-content: space-between;
+    p {
+      margin: 0.25rem 0;
+      color: var(--widget-text-color);
+    }
+    &:not(:last-child) {
+      border-bottom: 1px dashed var(--widget-text-color);
+    }
+  }
+}
+
+</style>

src/components/Widgets/WidgetBase.vue

@@ -102,6 +102,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <PublicHolidays
+        v-else-if="widgetType === 'public-holidays'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <RssFeed
         v-else-if="widgetType === 'rss-feed'"
         :options="widgetOptions"
@@ -178,6 +185,7 @@ import Jokes from '@/components/Widgets/Jokes.vue';
 import NdCpuHistory from '@/components/Widgets/NdCpuHistory.vue';
 import NdLoadHistory from '@/components/Widgets/NdLoadHistory.vue';
 import NdRamHistory from '@/components/Widgets/NdRamHistory.vue';
+import PublicHolidays from '@/components/Widgets/PublicHolidays.vue';
 import RssFeed from '@/components/Widgets/RssFeed.vue';
 import StockPriceChart from '@/components/Widgets/StockPriceChart.vue';
 import SystemInfo from '@/components/Widgets/SystemInfo.vue';
@@ -207,6 +215,7 @@ export default {
     NdCpuHistory,
     NdLoadHistory,
     NdRamHistory,
+    PublicHolidays,
     RssFeed,
     StockPriceChart,
     SystemInfo,

src/utils/MiscHelpers.js

@@ -1,3 +1,4 @@
+/* eslint-disable arrow-body-style */
 import { hideFurnitureOn } from '@/utils/defaults';
 
 /* Returns false if page furniture should be hidden on said route */
@@ -50,7 +51,7 @@ export const applyItemId = (inputSections) => {
 export const convertTimestampToDate = (timestamp) => {
   const localFormat = navigator.language;
   const dateFormat = {
-    weekday: 'short', day: 'numeric', month: 'short', year: 'numeric',
+    weekday: 'short', day: 'numeric', month: 'short', year: '2-digit',
   };
   const date = new Date(timestamp).toLocaleDateString(localFormat, dateFormat);
   return `${date}`;
@@ -91,3 +92,7 @@ export const showNumAsThousand = (bigNum) => {
   if (bigNum < 1000) return bigNum;
   return `${Math.round(bigNum / 1000)}k`;
 };
+
+export const capitalize = (str) => {
+  return str.replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
+};

src/utils/defaults.js

@@ -218,6 +218,7 @@ module.exports = {
     flights: 'https://aerodatabox.p.rapidapi.com/flights/airports/icao/',
     rssToJson: 'https://api.rss2json.com/v1/api.json',
     codeStats: 'https://codestats.net/',
+    holidays: 'https://kayaposoft.com/enrico/json/v2.0/?action=getHolidaysForDateRange',
   },
   /* URLs for web search engines */
   searchEngineUrls: {