Xeovalyte
6fb439a754
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
|
|
<div v-if="calendarStore.events[0]" class="flex flex-col gap-3">
|
|
<div v-for="(event, index) in calendarStore.events" :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 userStore = useUserStore()
|
|
const calendarStore = useCalendarStore()
|
|
|
|
onMounted(() => {
|
|
getEvents()
|
|
})
|
|
|
|
const getEvents = () => {
|
|
|
|
if (userStore.userPersons[0]) {
|
|
const groups = [...new Set(userStore.userPersons.map(a => a.groups.join()).join().split(','))]
|
|
|
|
calendarStore.getEvents(groups)
|
|
} else {
|
|
setTimeout(() => { getEvents() }, 50)
|
|
}
|
|
}
|
|
|
|
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'
|
|
}
|
|
)}
|
|
|
|
|
|
</script>
|