90 lines
3.7 KiB
Vue
90 lines
3.7 KiB
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>
|
||
|
|
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>
|