frontend/pages/news/newmessage.vue

@@ -1,18 +1,24 @@
 <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">Titel</label>
-            <input v-model="form.title" required="true" class="input mb-5" type="text">
+  <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">Titel</label>
+      <input v-model="form.title" required="true" class="input mb-5" type="text">
 
-            <label class="font-bold">Beschrijving</label>
-            <textarea v-model="form.description" required="true" class="input mb-5" />
+      <label class="font-bold">Beschrijving</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">Annuleer</button>
-            </div>
-        </form>
-    </div>
+      <label class="font-bold">Groep</label>
+      <select v-model="form.topic" required="true" class="input mb-5">
+        <option value="all">Iedereen</option>
+        <option value="test">Test</option>
+      </select>
+
+      <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">Annuleer</button>
+      </div>
+    </form>
+  </div>
 </template>
 
 <script setup>
@@ -20,8 +26,8 @@ import { addDoc, collection, serverTimestamp, Timestamp } from 'firebase/firesto
 import { useToast } from 'vue-toastification'
 
 definePageMeta({
-    title: 'Nieuw Bericht',
-    key: 'back'
+  title: 'Nieuw Bericht',
+  key: 'back'
 })
 
 const { news, db, auth } = inject('firebase')
@@ -31,8 +37,9 @@ const toast = useToast()
 const disableButtons = ref(false)
 
 const form = ref({
-    title: '',
-    description: '',
+  title: '',
+  description: '',
+  topic: ''
 })
 
 const sendNews = async () => {
@@ -44,7 +51,7 @@ const sendNews = async () => {
       
     const { error } = await useFetch('/api/sendmessage', {
       method: 'post',
-      body: { title: form.value.title, body: form.value.description, token: idToken } 
+      body: { title: form.value.title, body: form.value.description, token: idToken, topic: form.value.topic  } 
     })
 
     if (error.value) {

frontend/pages/settings/moreinfo.vue

@@ -15,11 +15,11 @@
       <h1 class="text-xl ml-2 font-bold"></h1>
       <div class="container">
         <div class="item break-words ">
-            Registration Token: <b>{{ registrationToken }}</b>
+          Registration Token: <b>{{ registrationToken }}</b>
         </div>
         <div class="divider" />
         <div class="item break-words ">
-            User ID: <b>{{ userData.id }}</b>
+          User ID: <b>{{ userData.id }}</b>
         </div>
       </div>
     </div>

frontend/server/api/sendmessage.post.js

@@ -3,11 +3,13 @@ import { getAuth } from 'firebase-admin/auth'
 import { getMessaging } from 'firebase-admin/messaging'
 
 export default defineEventHandler(async event => {
-  const { token, body, title } = await readBody(event); 
+  const { token, body, title, topic } = await readBody(event); 
 
   if (!token) throw createError({ statusCode: 400, statusMessage: 'no-token'})
   if (!body) throw createError({ statusCode: 400, statusMessage: 'no-body'})
   if (!title) throw createError({ statusCode: 400, statusMessage: 'no-title'})
+  if (!topic) throw createError({ statusCode: 400, statusMessage: 'no-topic'})
+
  
   let decodedToken = null;
 
@@ -42,7 +44,7 @@ export default defineEventHandler(async event => {
           icon: '/ios/256.png'
         }
       },
-      topic: 'test',
+      topic: topic,
       apns: {
         payload: {
           aps: {