wrbapp/frontend/pages/wedstrijd/addcontest.vue

<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 class="flex flex-col gap-y-5 mb-5">
              <div v-for="(event, index) in contest.events" :key="index" class="container p-2 flex flex-col gap-y-3">
                <h2 class="text-center text-primary font-bold text-lg">{{ event.type }}</h2>
                <table class="table-fixed text-left odd:bg-blue-500">
                  <thead class="font-bold">
                    <tr>
                      <th class="w-3/6">Naam</th>
                      <th class="w-2/6">Tijd</th>
                      <th class="w-1/6">DSQ</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="competitor in event.competitors" class="even:dark:bg-neutral-700 even:bg-neutral-300">
                      <td>{{ competitors.find(x => x.relatiecode === competitor.relatiecode ).name }}</td>
                      <td>{{ competitor.time.minute}}:{{ competitor.time.seconds }}:{{ competitor.time.milliseconds }}</td>
                      <td>{{ competitor.dsq }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </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="resetContest" class="hover:underline font-bold w-full sm:w-max sm:ml-auto">Reset</button>
            </div>
        </form>
        <form v-else @submit.prevent="addEvent" class="flex flex-col">
          <label class="font-bold">Onderdeel</label>
          <select v-model="tempEvent.type" 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.unshift({ relatiecode: '', dsq: false, info: '', 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 mb-5">
              <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 dark:bg-neutral-700 bg-neutral-300 mb-5">
                    <option v-for="user in competitors" :value="user.relatiecode">{{ user.name}} ({{ user.relatiecode }})</option>
                  </select>

                  <label class="font-bold">Tijd</label>
                  <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 < 11 ? `0${n-1}` : `${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 < 11 ? `0${n-1}` : `${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 < 11 ? `0${n-1}` : `${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>
            <div class="w-full flex flex-wrap justify-between">
                <input :disabled="disableButtons" type="submit" value="Onderdeel Toevoegen" class="btn w-full sm:w-48 mb-1">
                <button @click="backEvent" class="hover:underline font-bold w-full sm:w-max sm:ml-auto">Cancel</button>
            </div>
        </form>
    </div>
</template>

<script setup>
import { getDocs, collection } from "firebase/firestore"

definePageMeta({
    title: 'Wedstrijd Toevoegen'
})

const { userData, db, competitors } = inject('firebase')

const disableButtons = ref(false)
const router = useRouter()
const newEvent = ref(false)

const contest = ref({
  name: '',
  date: null,
  events: [],
})

const tempEvent = ref({
  type: '',
  competitors: []
})

const getCompetitors = async () => {
  if (competitors.value[0]) return
  const querySnapshot = await getDocs(collection(db, "competitors"))
  querySnapshot.forEach((doc) => {
    competitors.value.push(doc.data())
  })
}

const addEvent = () => {
  newEvent.value = false
  contest.value.events.unshift(tempEvent.value)
  tempEvent.value = { type: '', competitors: []} 
}

const backEvent = () => {
  newEvent.value = false
  tempEvent.value = { type: '', competitors: []} 
}

onMounted(() => {
  getCompetitors()
})
</script>