added ios margins

frontend/app.vue

@@ -41,6 +41,8 @@ const userPersons = ref([])
 const userAllPersons = ref([])
 const calEvents = ref([])
 const news = ref(null)
+const contestTimes = ref(null)
+const competitors = ref([])
 
 const messaging = ref(null)
 
@@ -222,5 +224,13 @@ const logDeviceInfo = async () => {
 
 const ledenlijst = ref([])
 
-provide('firebase', { db, ledenlijst, isAuthenticated, user, userData, userPersons, auth, userAllPersons, getPersons, calEvents, news, registrationToken })
+provide('firebase', { db, ledenlijst, isAuthenticated, user, userData, userPersons, auth, userAllPersons, getPersons, calEvents, news, registrationToken, contestTimes, competitors })
 </script>
+
+<style>
+.body {
+  margin-top: env(safe-area-inset-top);
+  margin-bottom: env(safe-area-inset-bottom);
+}
+
+</style>

frontend/components/layout/Navbar.vue

@@ -18,7 +18,7 @@
                 <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' : ''">
-                <Icon size="1.8em" name="ion:settings-sharp" />
+                <Icon size="1.8em" name="ion:podium-outline" />
                 <span>Wedstrijd</span>
             </NuxtLink>
         </div>

frontend/pages/index.vue

@@ -27,5 +27,5 @@ definePageMeta({
     title: 'Home',
 })
 
-const { userPersons, registrationToken } = inject('firebase')
+const { userPersons } = inject('firebase')
 </script>

frontend/pages/wedstrijd/addcontest.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
+        <form v-if="!newEvent" @submit.prevent="saveEmail" class="flex flex-col">
+            <label class="font-bold">Naam Wedstrijd</label>
+            <input v-model="contest.name" required="true" class="input mb-5 " type="text">
+
+            <label class="font-bold">Datum</label>
+            <input v-model="contest.date" required="true" class="input w-min hover:cursor-pointer pr-0 mb-5 " type="date">
+
+            <label class="font-bold">Onderdelen</label>
+            <button @click="newEvent = true" class="item-hover border-dashed border-2 container text-center font-bold border-neutral-500 mb-3">Onderdeel Toevoegen</button>
+            <div>
+              Onderdeel
+            </div>
+
+            <div class="w-full flex flex-wrap justify-between">
+                <input :disabled="disableButtons" type="submit" value="Wedstrijd Toevoegen" class="btn w-full sm:w-48 mb-1">
+                <button @click="router.back()" class="hover:underline font-bold w-full sm:w-max sm:ml-auto">Cancel</button>
+            </div>
+        </form>
+        <form v-else class="flex flex-col">
+          <label class="font-bold">Onderdeel</label>
+          <select class="input mb-5">
+            <option value="200m-Obstacle-Swim">200m Obstacle Swim (Hindernis)</option>
+            <option value="50m-Manikin-Carry">50m Manikin Carry (Popvervoeren)</option>
+            <option value="100m-Rescue-Medley">100m Rescue Medley (Reddingswissel)</option>
+            <option value="100m-Manikin-Carry-with-Fins">100m Manikin Carry with Fins (Popvervoeren met finnen)</option>
+            <option value="100m-Manikin-Tow-with-Fins">100m Manikin Tow with Fins (Lifesaver)</option>
+            <option value="200m-Super-Lifesaver">200m Super Lifesaver</option>
+            <option value="Line-Throw">Line Throw</option>
+            <option value="4x25m-Manikin-Relay">4x25m Manikin Relay (Popvervoeren)</option>
+            <option value="4x50m-Obstacle-Relay">4x50m Obstacle Relay (Hindernis)</option>
+            <option value="4x50m-Medley-Relay">4x50m Medley Relay (Torpedoboei)</option>
+          </select>
+
+            <label class="font-bold">Deelnemers</label>
+            <button @click="tempEvent.competitors.push({})" type="button" class="item-hover border-dashed border-2 container text-center font-bold border-neutral-500 mb-3">Deelnemer Toevoegen</button>
+            <div class="flex flex-col gap-y-3">
+              <div v-for="(competitor, index) in tempEvent.competitors" :key="index">
+                <div class="container flex flex-col p-4">
+                  <label class="font-bold">Deelnemer</label>
+                  <select v-model="competitor.relatiecode" class="input">
+                    <option v-for="(user, index) in competitors" :value="user.relatiecode">{{ user.name}} ({{ user.relatiecode }})</option>
+                  </select>
+
+                  <label class="font-bold">Tijd</label>
+                  <input type="time" step="10" min="00:00:00" max="11:60:99" class="input" /> 
+                  {{ competitor }}
+                </div>
+              </div>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script setup>
+import { getDocs, collection } from "firebase/firestore"
+
+definePageMeta({
+    title: 'Wedstrijd Toevoegen'
+})
+
+const { userData, db, competitors } = inject('firebase')
+
+const router = useRouter()
+const newEvent = ref(false)
+
+const contest = ref({
+  name: '',
+  date: null,
+  events: [],
+})
+
+const tempEvent = ref({
+  type: '',
+  competitors: []
+})
+
+const getCompetitors = async () => {
+  const querySnapshot = await getDocs(collection(db, "competitors"))
+  querySnapshot.forEach((doc) => {
+    competitors.value.push(doc.data())
+  })
+}
+
+onMounted(() => {
+  getCompetitors()
+})
+</script>

frontend/pages/wedstrijd/index.vue

@@ -1,5 +1,26 @@
 <template>
-  <div>
-    Westrijd
-  </div>
+    <div class="flex flex-col justify-center items-center px-2 overflow-hidden">
+        <div class="container w-full max-w-md">
+            <NuxtLink to="/news" class="rounded-t item-hover py-2 flex items-center">
+                <span>Eigen Tijden</span>
+                <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+            </NuxtLink>
+            <div class="divider" />
+            <NuxtLink to="/calendar" class="item-hover py-2 flex items-center">
+                <span>Brigade Tijden</span>
+                <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+            </NuxtLink>
+            <div class="divider" />
+            <NuxtLink to="/settings" class="rounded-b item-hover py-2 flex items-center">
+                <span>Wedstrijd Toevoegen</span>
+                <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+            </NuxtLink>
+        </div>
+    </div>
 </template>
+
+<script setup>
+definePageMeta({
+    title: 'Wedstrijd'
+})
+</script>