92 lines
2.7 KiB
Vue
92 lines
2.7 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
|
|
<div v-if="loadedNews && news" class="flex flex-col gap-3">
|
|
<NuxtLink to="/news/newmessage" v-if="userData.sendNews" class="item-hover border-dashed border-2 container text-center font-bold text-xl border-neutral-500 mb-3">
|
|
Nieuw Bericht
|
|
</NuxtLink>
|
|
<div v-if="news[0]" v-for="(item, index) in news" :key="index">
|
|
<div class="item container flex flex-col relative">
|
|
<h3 class="text-sm">{{ longEventDate(item.date.toDate()) }}</h3>
|
|
<h2 class="text-2xl font-bold">{{ item.title }}</h2>
|
|
<p>{{ item.description }}</p>
|
|
<Icon v-if="userData.sendNews" @click="deleteItem(item, index)" size="1.5em" name="ion:trash-sharp" class="absolute top-3 right-3 hover:cursor-pointer text-red-500" />
|
|
</div>
|
|
</div>
|
|
<h2 v-else class="font-bold text-center text-xl mt-3">
|
|
Er is geen nieuws
|
|
</h2>
|
|
</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>
|
|
import { getDocs, collection, deleteDoc, doc } from 'firebase/firestore'
|
|
import { useToast } from 'vue-toastification'
|
|
|
|
definePageMeta({
|
|
title: 'Nieuws'
|
|
})
|
|
|
|
const { news, userData, db } = inject('firebase')
|
|
|
|
const toast = useToast()
|
|
|
|
const loadedNews = ref(false)
|
|
|
|
onMounted(() => {
|
|
if (!news.value) getNews()
|
|
else loadedNews.value = true
|
|
})
|
|
|
|
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 getNews = async () => {
|
|
news.value = []
|
|
try {
|
|
const querySnapshot = await getDocs(collection(db, "news"));
|
|
querySnapshot.forEach((doc) => {
|
|
let data = doc.data()
|
|
data.id = doc.id
|
|
news.value.push(data)
|
|
});
|
|
|
|
news.value.sort((a, b) => b.date.seconds - a.date.seconds)
|
|
|
|
loadedNews.value = true
|
|
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
}
|
|
|
|
const deleteItem = async (item, index) => {
|
|
if (!item.id) return toast.error('Refresh eerst voordat je dit bericht kan verwijderen')
|
|
|
|
try {
|
|
news.value.splice(index, 1)
|
|
|
|
await deleteDoc(doc(db, "news", item.id));
|
|
toast.success('Bericht verwijderd')
|
|
} catch (e) {
|
|
console.log(e)
|
|
|
|
toast.error('Error tijdens bericht verwijderen')
|
|
}
|
|
|
|
}
|
|
</script> |