mirror of https://github.com/lissy93/dashy
129 lines
3.6 KiB
Vue
129 lines
3.6 KiB
Vue
<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 { timestampToDate, 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 && usersChoice > 0 && usersChoice <= 24) {
|
|
return usersChoice;
|
|
}
|
|
return 12;
|
|
},
|
|
startDate() {
|
|
const now = new Date();
|
|
return `${now.getDate()}-${now.getMonth() + 1}-${now.getFullYear()}`;
|
|
},
|
|
endDate() {
|
|
const now = new Date();
|
|
const then = new Date((now.setMonth(now.getMonth() + this.monthsToShow)));
|
|
return `${then.getDate()}-${then.getMonth() + 1}-${then.getFullYear()}`;
|
|
},
|
|
region() {
|
|
if (this.options?.state) {
|
|
return `®ion=${this.options.state}`;
|
|
}
|
|
return '';
|
|
},
|
|
endpoint() {
|
|
return `${widgetApiEndpoints.holidays}`
|
|
+ `&fromDate=${this.startDate}&toDate=${this.endDate}`
|
|
+ `&country=${this.country}&holidayType=${this.holidayType}`
|
|
+ `${this.region}`;
|
|
},
|
|
},
|
|
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) => timestampToDate(
|
|
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>
|