From 009cd2ddc50561ff05957717cdc10cc725a4ea24 Mon Sep 17 00:00:00 2001
From: xeovalyte <me+gitea@xeovalyte.dev>
Date: Mon, 5 Dec 2022 15:19:05 +0100
Subject: [PATCH] added contest features

---
 frontend/pages/wedstrijd/addcontest.vue | 30 +++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/wedstrijd/addcontest.vue b/frontend/pages/wedstrijd/addcontest.vue
index f6cc821..4f9f158 100644
--- a/frontend/pages/wedstrijd/addcontest.vue
+++ b/frontend/pages/wedstrijd/addcontest.vue
@@ -34,18 +34,39 @@
           </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>
+            <button @click="tempEvent.competitors.push({ relatiecode: '', dsq: false, info: null, time: { minute: null, seconds: null, milliseconds: null }})" 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">
+                  <select v-model="competitor.relatiecode" class="input dark:bg-neutral-700 bg-neutral-300 mb-5">
                     <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 class="flex dark:bg-neutral-700 bg-neutral-300 gap-x-2 w-min rounded mb-2">
+                    <select v-model="competitor.time.minute" class="input pl-3 pr-8 bg-opacity-0 shadow-none ">
+                      <option value="null" disabled selected>mm</option>
+                      <option v-for="n in 60" :value="n - 1">{{ n < 11 ? `0${n-1}` : `${n-1}` }}</option> 
+                    </select>
+                      <span class="my-auto text-xl">:</span> 
+                    <select v-model="competitor.time.seconds" class="input pl-2 pr-8 bg-opacity-0 shadow-none ">
+                      <option value="null" disabled selected>ss</option>
+                      <option v-for="n in 60" :value="n - 1">{{ n < 11 ? `0${n-1}` : `${n-1}`}}</option> 
+                    </select>
+                      <span class="my-auto text-xl">:</span> 
+                    <select v-model="competitor.time.milliseconds" class="input pl-2 pr-8 bg-opacity-0 shadow-none ">
+                      <option value="null" disabled selected>ms</option>
+                      <option v-for="n in 100" :value="n - 1">{{ n < 11 ? `0${n-1}` : `${n-1}` }}</option> 
+                    </select>
+                  </div>
+                  <div class="flex items-center mb-5">
+                    <input type="checkbox" v-model="competitor.dsq" class="mr-1 checkbox">
+                    <span>Diskwalificatie</span>
+                  </div>
+
+                  <label class="font-bold">Info (Optioneel)</label>
+                  <input v-model="competitor.info" type="text" placeholder="Bijv. Een diskwalificatie" class="input dark:bg-neutral-700 bg-neutral-300" />
                 </div>
               </div>
             </div>
@@ -77,6 +98,7 @@ const tempEvent = ref({
 })
 
 const getCompetitors = async () => {
+  if (competitors.value[0]) return
   const querySnapshot = await getDocs(collection(db, "competitors"))
   querySnapshot.forEach((doc) => {
     competitors.value.push(doc.data())