added news system

frontend/app.vue

@@ -31,6 +31,7 @@ const userData = ref(null)
 const userPersons = ref([])
 const userAllPersons = ref([])
 const calEvents = ref([])
+const news = ref(null)
 
 onMounted(() => {
     auth.value = getAuth()
@@ -48,6 +49,9 @@ onMounted(() => {
                 getPersons(userData.value.relatiecodes)
             }
 
+            if (!userData.value.sendNews && route.path === '/news/newmessage') navigateTo('/')
+            if (!userData.value.admin && route.path.startsWith('/settings/admin')) navigateTo('/')
+
             isAuthenticated.value = true
 
         } else {
@@ -76,5 +80,5 @@ const getPersons = async (persons) => {
 
 const ledenlijst = ref([])
 
-provide('firebase', { db, ledenlijst, isAuthenticated, user, userData, userPersons, auth, userAllPersons, getPersons, calEvents })
+provide('firebase', { db, ledenlijst, isAuthenticated, user, userData, userPersons, auth, userAllPersons, getPersons, calEvents, news })
 </script>

frontend/components/layout/Navbar.vue

@@ -5,7 +5,7 @@
                 <Icon size="1.5em" name="ion:home-outline" />
                 <span>Home</span>
             </NuxtLink>
-            <NuxtLink to="/news" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path === '/news' ? 'text-primary' : ''">
+            <NuxtLink to="/news" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path.startsWith('/news') ? 'text-primary' : ''">
                 <Icon size="1.5em" name="ion:newspaper-outline" />
                 <span>News</span>
             </NuxtLink>

frontend/pages/news.vue

@@ -1,11 +0,0 @@
-<template>
-    <div>
-        News
-    </div>
-</template>
-
-<script setup>
-definePageMeta({
-    title: 'Nieuws'
-})
-</script>

frontend/pages/news/index.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
+        <div 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-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 @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>
+        </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()
+
+onMounted(() => {
+    if (!news.value) getNews()
+})
+
+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)
+
+    } catch (e) {
+        console.log(e)
+    }
+}
+
+const deleteItem = async (item, index) => {
+    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>

frontend/pages/news/newmessage.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
+        <form @submit.prevent="sendNews" class="flex flex-col">
+            <label class="font-bold">Title</label>
+            <input v-model="form.title" required="true" class="input mb-5" type="text">
+
+            <label class="font-bold">Description</label>
+            <textarea v-model="form.description" required="true" class="input mb-5" />
+
+            <div class="w-full flex flex-wrap justify-between">
+                <input :disabled="disableButtons" type="submit" value="Stuur Bericht" class="btn w-full sm:w-40 mb-1">
+                <button @click="router.back()" class="hover:underline font-bold w-full sm:w-max sm:ml-auto">Cancel</button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script setup>
+import { addDoc, collection, serverTimestamp } from 'firebase/firestore'
+import { useToast } from 'vue-toastification'
+
+definePageMeta({
+    title: 'Nieuw Bericht',
+    key: 'back'
+})
+
+const { news, userData, db } = inject('firebase')
+const router = useRouter()
+const toast = useToast()
+
+const disableButtons = ref(false)
+
+const form = ref({
+    title: '',
+    description: '',
+})
+
+const sendNews = async () => {
+    disableButtons.value = true
+
+
+    try {
+        await addDoc(collection(db, "news"), {
+            title: form.value.title,
+            description: form.value.description,
+            date: serverTimestamp()
+        });
+
+        if (news.value) {
+            news.value.push({
+                title: form.value.title,
+                description: form.value.description,
+                date: Date.now()
+            })
+        }
+
+        toast.success('Bericht is verstuurd')
+
+        navigateTo('/news')
+    } catch (e) {
+        console.log(e)
+
+        toast.error('Error tijdens het berict sturen')
+        
+    }
+    
+
+    disableButtons.value = false
+}
+</script>