97 lines
3.2 KiB
Vue
97 lines
3.2 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
|
|
<div v-if="calEvents[0]" class="flex flex-col gap-3">
|
|
<div v-for="(event, index) in calEvents" :key="index">
|
|
<div class="item container flex flex-col">
|
|
<h2 class="">{{ longEventDate(event.date) }}</h2>
|
|
<p class="whitespace-pre overflow-x-auto font-bold text-xl">{{ event.description}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex flex-col justify-center items-center" v-else>
|
|
<Icon size="2em" name="ion:load-c" class="animate-spin" />
|
|
<h2 class="mt-2 font-bold">Loading...</h2>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
definePageMeta({
|
|
title: 'Agenda'
|
|
})
|
|
|
|
const { userPersons, calEvents } = inject('firebase')
|
|
|
|
onMounted(() => {
|
|
if (!calEvents[0]) getCalendarEvents([...new Set(userPersons.value.map(a => a.groups.join()).join().split(','))])
|
|
})
|
|
|
|
const longEventDate = (eventDate) => {
|
|
const date = new Date(eventDate)
|
|
|
|
return date.toLocaleString('nl-NL', {
|
|
weekday: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
hour: 'numeric',
|
|
minute: 'numeric'
|
|
}
|
|
)}
|
|
|
|
const getCalendarEvents = async (group) => {
|
|
|
|
if (!group[0]) return setTimeout(() => { getCalendarEvents([...new Set(userPersons.value.map(a => a.groups.join()).join().split(','))])}, 50)
|
|
|
|
const events = []
|
|
let fridayEvents = []
|
|
let saturdayEvents = []
|
|
let matchEvents = []
|
|
|
|
if (group.includes('Zaterdag')){
|
|
let data = await fetch('https://www.googleapis.com/calendar/v3/calendars/c_astg0d0auheip5o4269v1qvv3g@group.calendar.google.com/events?key=AIzaSyBLmxWNEnbkiW_0c2UrsHMbxXv73dX-KYw')
|
|
if (!data.ok){
|
|
throw Error('No data available')
|
|
}
|
|
|
|
const jsonEvents = await data.json()
|
|
saturdayEvents = jsonEvents.items
|
|
} if (group.includes('Vrijdag')){
|
|
let data = await fetch('https://www.googleapis.com/calendar/v3/calendars/c_u3895n01jt8qnusm7f6pmqjb0k%40group.calendar.google.com/events?key=AIzaSyBLmxWNEnbkiW_0c2UrsHMbxXv73dX-KYw')
|
|
if (!data.ok){
|
|
throw Error('No data available')
|
|
}
|
|
|
|
const jsonEvents = await data.json()
|
|
fridayEvents = jsonEvents.items
|
|
} if (group.includes('Wedstrijd')){
|
|
|
|
let data = await fetch('https://www.googleapis.com/calendar/v3/calendars/c_c2296iboq07n24galuobeesovs@group.calendar.google.com/events?key=AIzaSyBLmxWNEnbkiW_0c2UrsHMbxXv73dX-KYw')
|
|
if (!data.ok){
|
|
throw Error('No data available')
|
|
}
|
|
|
|
const jsonEvents = await data.json()
|
|
matchEvents = jsonEvents.items
|
|
}
|
|
|
|
const allEvents = [...fridayEvents, ...saturdayEvents, ...matchEvents]
|
|
|
|
const now = new Date()
|
|
now.setHours(0, 0, 0, 0)
|
|
|
|
const sortedEvents = allEvents.sort((a, b) => new Date(a.start.dateTime) - new Date(b.start.dateTime))
|
|
const filteredEvents = sortedEvents.filter((event) => new Date(event.start.dateTime) > now )
|
|
|
|
filteredEvents.forEach(element => {
|
|
events.push({
|
|
description: element.description,
|
|
date: new Date(element.start.dateTime)
|
|
})
|
|
});
|
|
|
|
calEvents.value = events
|
|
}
|
|
|
|
</script>
|