frontend/components/layout/Navbar.vue

@@ -17,7 +17,7 @@
                 <Icon size="1.8em" name="ion:settings-sharp" />
                 <span>Settings</span>
             </NuxtLink>
-            <NuxtLink v-if="userData.wedstrijdteam" to="/wedstrijd" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path.startsWith('/wedstrijd') ? 'text-primary' : ''">
+            <NuxtLink v-if="userPersons[0] && userPersons.filter(a => a.wedstrijdteam).length > 0" to="/wedstrijd" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path.startsWith('/wedstrijd') ? 'text-primary' : ''">
                 <Icon size="1.8em" name="ion:podium-outline" />
                 <span>Wedstrijd</span>
             </NuxtLink>
@@ -29,7 +29,7 @@
 import { Device } from '@capacitor/device';
 
 const route = useRoute()
-const { userData } = inject('firebase')
+const { userData, userPersons } = inject('firebase')
 
 const platform = ref(null)
 

frontend/pages/settings/admin/ledenlijst.vue

@@ -1,4 +1,27 @@
 <template>
+  <div @click.self="showModel = false" v-if="showModel" class="fixed flex justify-center items-center h-screen w-full bg-black top-0 left-0 z-50 bg-opacity-50" >
+    <form @submit.prevent="submitModelForm" class="dark:bg-neutral-800 bg-neutral-200 p-10 rounded-xl flex flex-col w-full max-w-sm">
+      <h1 class="font-bold text-center text-lg mb-5">Beheer Persoon</h1> 
+      
+      <div class="text-default mb-2">
+        Relatiecode: <b>{{ modelData.relatiecode }}</b>
+      </div>
+      <div class="text-default mb-2">
+        Naam: <b>{{ modelData.fullName }}</b>
+      </div>
+      <div class="text-default mb-5">
+        Groepen: <b>{{ modelData.groups.join(', ') }}</b>
+      </div>
+
+      <label class="relative inline-flex items-center cursor-pointer mb-5">
+        <input type="checkbox" value="" v-model="modelData.wedstrijdteam" class="sr-only peer">
+        <div class="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-none rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
+        <span class="ml-3 font-medium text-gray-900 dark:text-gray-300">Wedstrijd Team</span>
+      </label>
+
+      <input :disabled="disableButtons" type="submit" class="btn" :value="'Bewerken'" />
+    </form>
+  </div>
   <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
       <div class="mb-5">
         <form @submit.prevent="submitLedenlijst" class="flex flex-col">
@@ -10,7 +33,7 @@
       <div class="flex flex-col gap-3">
         <input v-model="searchTerm" class="input mb-2 font-bold" type="search" placeholder="Search">
         <div v-for="lid in filteredLedenlijst" :key="lid.relatiecode">
-                <div class="item container flex flex-wrap">
+          <div @click="handleModel(lid)" class="item container flex flex-wrap hover:cursor-pointer">
             <b class="w-24">{{ lid.relatiecode }}</b> {{ lid.fullName }}
           </div>
         </div>
@@ -19,7 +42,7 @@
 </template>
 
 <script setup>
-import { doc, getDocs, collection, writeBatch, runTransaction } from "firebase/firestore"; 
+import { doc, getDocs, collection, writeBatch, updateDoc } from "firebase/firestore"; 
 import { useToast } from 'vue-toastification'
 
 definePageMeta({
@@ -31,10 +54,13 @@ const { db, ledenlijst, users } = inject('firebase')
 
 const toast = useToast()
 
+const modelData = ref(null)
+
 const file = ref(null)
 const disableButtons = ref(false)
 const searchTerm = ref('')
 const newLedenlijst = ref([])
+const showModel = ref(false)
 
 onMounted(async () => {
   if (!ledenlijst.value.length) {
@@ -51,6 +77,29 @@ onMounted(async () => {
   }
 })
 
+const handleModel = (lid) => {
+  modelData.value = lid
+  if (!modelData.value.hasOwnProperty('wedstrijdteam')) modelData.value.wedstrijdteam = false
+
+  showModel.value = true
+}
+
+const submitModelForm = async () => {
+  disableButtons.value = true
+  ledenlijst.value.filter(a => a.relatiecode === modelData.value.relatiecode)[0].wedstrijdteam = modelData.value.wedstrijdteam 
+
+  const docRef = doc(db, "ledenlijst", modelData.value.relatiecode)
+
+  await updateDoc(docRef, {
+    wedstrijdteam: modelData.value.wedstrijdteam
+  })
+
+  toast.success('Persoon is bewerkt')
+
+  disableButtons.value = false
+  showModel.value = false
+}
+
 const filteredLedenlijst = computed(() => {
   return ledenlijst.value.filter(lid => lid.fullName.toLowerCase().includes(searchTerm.value.toLowerCase()))
 })

frontend/pages/wedstrijd/addcontest.vue

@@ -26,7 +26,7 @@
       <label class="font-bold">Info (Optioneel)</label>
       <input v-model="modelData.info" type="text" placeholder="Bijv. Een diskwalificatie" class="input dark:bg-neutral-700 bg-neutral-300 mb-10" />
 
-      <input type="submit" class="btn" :value="modelData.edit ? 'Bewerken' : 'Toevoegen'" />
+      <input :disabled="disableButtons" type="submit" class="btn" :value="modelData.edit ? 'Bewerken' : 'Toevoegen'" />
     </form>
   </div>
   <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">