improved wedstrijd system
This commit is contained in:
parent
c54b9aec61
commit
b8e45663e1
@ -31,8 +31,8 @@
|
||||
</div>
|
||||
<div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
|
||||
<form @submit.prevent="submitContestForm" 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">Locatie Wedstrijd</label>
|
||||
<input v-model="contest.location" required="true" class="input mb-5 " type="text">
|
||||
|
||||
<label class="font-bold">Type Zwembad</label>
|
||||
<select v-model="contest.type" required="true" class="input mb-5 " type="text">
|
||||
@ -108,9 +108,9 @@ const modelData = ref({
|
||||
})
|
||||
|
||||
const contest = ref({
|
||||
name: '',
|
||||
location: '',
|
||||
type: '',
|
||||
date: '',
|
||||
date: Date,
|
||||
events: {
|
||||
obstacleSwim: {
|
||||
open: false,
|
||||
@ -205,7 +205,7 @@ const submitContestForm = async () => {
|
||||
const docRef = doc(collection(db, 'timings'))
|
||||
batch.set(docRef, {
|
||||
relatiecode: competitor.relatiecode,
|
||||
contest: { name: contest.value.name, date: contest.value.date.toString(), type: contest.value.type },
|
||||
contest: { location: contest.value.location, date: contest.value.date.toString(), type: contest.value.type },
|
||||
event: event.id,
|
||||
time: { minutes: competitor.time.minutes.toString().padStart(2, '0'), seconds: competitor.time.seconds.toString().padStart(2, '0'), milliseconds: competitor.time.milliseconds.toString().padStart(2, '0'), combined: combinedTime },
|
||||
dsq: competitor.dsq,
|
||||
|
||||
@ -3,15 +3,18 @@
|
||||
<form @submit.prevent="submitModalForm" 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">Tijd {{ modelData.eventName }}</h1>
|
||||
|
||||
<label class="font-bold">Westrijd</label>
|
||||
<input :disabled="!userData.wedstrijdAdmin" v-model="modelData.contest.name" type="text" class="input dark:bg-neutral-700 bg-neutral-300 mb-5" />
|
||||
<label class="font-bold">Locatie</label>
|
||||
<input :disabled="!userData.wedstrijdAdmin" v-model="modelData.contest.location" type="text" class="input dark:bg-neutral-700 bg-neutral-300 mb-5" />
|
||||
|
||||
<label class="font-bold">Type zwembad</label>
|
||||
<select :disabled="!userData.wedstrijdAdmin" v-model="modelData.contest.type" required="true" class="input dark:bg-neutral-700 bg-neutral-300 mb-5" type="text">
|
||||
<select :disabled="!userData.wedstrijdAdmin" v-model="modelData.contest.type" required="true" class="input dark:bg-neutral-700 bg-neutral-300 mb-5">
|
||||
<option value="50m">50 Meter</option>
|
||||
<option value="25m">25 Meter</option>
|
||||
</select>
|
||||
|
||||
<label class="font-bold">Datum</label>
|
||||
<input :disabled="!userData.wedstrijdAdmin" :value="dateToYYYYMMDD(modelData.contest.date)" @input="modelData.contest.date = $event.target.valueAsDate" required="true" class="input dark:bg-neutral-700 bg-neutral-300 w-min hover:cursor-pointer pr-0 mb-5 " type="date">
|
||||
|
||||
<label class="font-bold">Tijd</label>
|
||||
<div class="mb-1">
|
||||
<input :disabled="!userData.wedstrijdAdmin" v-model="modelData.time.minutes" type="number" step="1" min="0" max="99" placeholder="mm" class="input dark:bg-neutral-700 bg-neutral-300 w-10 text-center p-1" />
|
||||
@ -57,11 +60,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="event in events" class="container w-full max-w-2xl py-2 px-4">
|
||||
<div v-for="event in events" class="container w-full max-w-3xl py-2 px-4">
|
||||
<div @click="event.open = !event.open" class="flex hover:cursor-pointer">
|
||||
<h2 class="font-bold">{{ event.name }}</h2>
|
||||
<span v-if="filteredTimings.filter(a => a.event === event.id).length > 0" class="ml-auto">{{ filteredTimings.filter(a => a.event === event.id)[0].time.minutes }}:{{ timings.filter(a => a.event === event.id)[0].time.seconds }}:{{ timings.filter(a => a.event === event.id)[0].time.milliseconds }}</span>
|
||||
<span v-else class="ml-auto">Geen tijd</span>
|
||||
<h2 class="font-bold mr-auto">{{ event.name }}</h2>
|
||||
<span v-if="filteredTimings.filter(a => a.event === event.id).length > 0" class="">
|
||||
<span class="hidden md:inline-block mr-1">
|
||||
{{ filteredTimings.filter(a => a.event === event.id)[0].contest.date.toLocaleDateString('nl-NL') }} |
|
||||
{{ filteredTimings.filter(a => a.event === event.id)[0].contest.location }} |
|
||||
{{ filteredTimings.filter(a => a.event === event.id)[0].contest.type }} |
|
||||
</span>
|
||||
<span>
|
||||
{{ filteredTimings.filter(a => a.event === event.id)[0].time.minutes }}:{{ filteredTimings.filter(a => a.event === event.id)[0].time.seconds }}:{{ filteredTimings.filter(a => a.event === event.id)[0].time.milliseconds }}</span>
|
||||
</span>
|
||||
<span v-else class="">Geen tijd</span>
|
||||
<Icon size="1.2em" name="ion:arrow-down-b" class="my-auto ml-2 transition-all" :class="{'rotate-180' : event.open }" />
|
||||
</div>
|
||||
<div v-if="event.open" class="mt-2">
|
||||
@ -74,10 +85,10 @@
|
||||
<tbody>
|
||||
<tr @click="handleModel(time, event, index)" v-for="(time, index) in filteredTimings.filter(a => a.event === event.id)" class="even:dark:bg-neutral-700 even:bg-neutral-300 hover:cursor-pointer">
|
||||
<td v-if="properties.time.enabled" class="pl-1" :class="time.dsq ? 'line-through' : ''">{{ time.time.minutes }}:{{ time.time.seconds }}:{{ time.time.milliseconds}}</td>
|
||||
<td v-if="properties.date.enabled">{{ time.contest.date }}</td>
|
||||
<td v-if="properties.date.enabled">{{ time.contest.date.toLocaleDateString('nl-NL') }}</td>
|
||||
<td v-if="properties.name.enabled" class="overflow-hidden whitespace-nowrap truncate">{{ competitors.filter(a => a.relatiecode === time.relatiecode)[0].name.split(', ')[1] + ' ' + competitors.filter(a => a.relatiecode === time.relatiecode)[0].name.split(', ')[0] }}</td>
|
||||
<td v-if="properties.type.enabled">{{ time.contest.type }}</td>
|
||||
<td v-if="properties.contest.enabled">{{ time.contest.name }}</td>
|
||||
<td v-if="properties.location.enabled">{{ time.contest.location }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -87,7 +98,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { collection, query, where, getDocs, doc, updateDoc} from "firebase/firestore";
|
||||
import { collection, query, getDocs, doc, updateDoc } from "firebase/firestore";
|
||||
import { useToast } from 'vue-toastification'
|
||||
import { vOnClickOutside} from '@vueuse/components'
|
||||
|
||||
@ -114,6 +125,12 @@ const handlePropertiesDropdown = () => {
|
||||
}
|
||||
|
||||
const filteredTimings = computed(() => {
|
||||
timings.value = timings.value.sort((a, b) => a.time.combined.localeCompare(b.time.combined))
|
||||
timings.value.forEach((time, index) => {
|
||||
if (time.dsq === true) {
|
||||
timings.value.push(timings.value.splice(index, 1)[0])
|
||||
}
|
||||
})
|
||||
return timings.value.filter(a => competitors.value.filter(b => b.checked === true).map(x => x.relatiecode).includes(a.relatiecode))
|
||||
})
|
||||
|
||||
@ -127,8 +144,8 @@ const modelData = ref({
|
||||
info: '',
|
||||
contest: {
|
||||
type: '',
|
||||
name: '',
|
||||
date: '',
|
||||
location: '',
|
||||
date: Date,
|
||||
}
|
||||
})
|
||||
|
||||
@ -153,10 +170,10 @@ const properties = ref({
|
||||
id: 'type',
|
||||
name: 'Type zwembad',
|
||||
},
|
||||
contest: {
|
||||
location: {
|
||||
enabled: false,
|
||||
id: 'contest',
|
||||
name: 'Wedstrijd',
|
||||
id: 'location',
|
||||
name: 'Locatie',
|
||||
},
|
||||
})
|
||||
|
||||
@ -221,6 +238,8 @@ onMounted(async () => {
|
||||
const data = doc.data()
|
||||
data.id = doc.id
|
||||
|
||||
data.contest.date = data.contest.date.toDate()
|
||||
|
||||
timings.value.push(data)
|
||||
});
|
||||
|
||||
@ -228,6 +247,9 @@ onMounted(async () => {
|
||||
getCompetitors()
|
||||
})
|
||||
|
||||
const dateToYYYYMMDD = (d) => {
|
||||
return d && new Date(d.getTime()-(d.getTimezoneOffset()*60*1000)).toISOString().split('T')[0]
|
||||
}
|
||||
|
||||
const handleModel = (competitor, e, index) => {
|
||||
modelData.value = competitor
|
||||
@ -252,7 +274,6 @@ const submitModalForm = async () => {
|
||||
|
||||
const docRef = doc(db, "timings", id);
|
||||
|
||||
console.log(modelData.value)
|
||||
await updateDoc(docRef, modelData.value);
|
||||
|
||||
toast.success('Tijd is bewerkt')
|
||||
|
||||
@ -3,11 +3,14 @@
|
||||
<form @submit.prevent="submitModalForm" 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">Tijd {{ modelData.eventName }}</h1>
|
||||
|
||||
<label class="font-bold">Westrijd</label>
|
||||
<input :disabled="!userData.wedstrijdAdmin" v-model="modelData.contest.name" type="text" class="input dark:bg-neutral-700 bg-neutral-300 mb-5" />
|
||||
<label class="font-bold">Locatie</label>
|
||||
<input :disabled="!userData.wedstrijdAdmin" v-model="modelData.contest.location" type="text" class="input dark:bg-neutral-700 bg-neutral-300 mb-5" />
|
||||
|
||||
<label class="font-bold">Datum</label>
|
||||
<input :disabled="!userData.wedstrijdAdmin" :value="dateToYYYYMMDD(modelData.contest.date)" @input="modelData.contest.date = $event.target.valueAsDate" required="true" class="input dark:bg-neutral-700 bg-neutral-300 w-min hover:cursor-pointer pr-0 mb-5 " type="date">
|
||||
|
||||
<label class="font-bold">Type zwembad</label>
|
||||
<select :disabled="!userData.wedstrijdAdmin" v-model="modelData.contest.type" required="true" class="input dark:bg-neutral-700 bg-neutral-300 mb-5" type="text">
|
||||
<select :disabled="!userData.wedstrijdAdmin" v-model="modelData.contest.type" required="true" class="input dark:bg-neutral-700 bg-neutral-300 mb-5">
|
||||
<option value="50m">50 Meter</option>
|
||||
<option value="25m">25 Meter</option>
|
||||
</select>
|
||||
@ -36,7 +39,7 @@
|
||||
<div v-for="event in events" class="container w-full max-w-md py-2 px-4">
|
||||
<div @click="event.open = !event.open" class="flex hover:cursor-pointer">
|
||||
<h2 class="font-bold">{{ event.name }}</h2>
|
||||
<span v-if="timings.filter(a => a.event === event.id).length > 0" class="ml-auto">{{ timings.filter(a => a.event === event.id)[0].time.minutes }}:{{ timings.filter(a => a.event === event.id)[0].time.seconds }}:{{ timings.filter(a => a.event === event.id)[0].time.milliseconds }}</span>
|
||||
<span v-if="timings.filter(a => a.event === event.id).length > 0" class="ml-auto">{{ filteredTimings.filter(a => a.event === event.id)[0].time.minutes }}:{{ filteredTimings.filter(a => a.event === event.id)[0].time.seconds }}:{{ filteredTimings.filter(a => a.event === event.id)[0].time.milliseconds }}</span>
|
||||
<span v-else class="ml-auto">Geen tijd</span>
|
||||
<Icon size="1.2em" name="ion:arrow-down-b" class="my-auto ml-2 transition-all" :class="{'rotate-180' : event.open }" />
|
||||
</div>
|
||||
@ -50,9 +53,9 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr @click="handleModel(time, event, index)" v-for="(time, index) in timings.filter(a => a.event === event.id)" class="even:dark:bg-neutral-700 even:bg-neutral-300 hover:cursor-pointer">
|
||||
<td class="pl-1" :class="{ 'strikethrough' : time.dsq }">{{ time.time.minutes }}:{{ time.time.seconds }}:{{ time.time.milliseconds}}</td>
|
||||
<td>{{ time.contest.date }}</td>
|
||||
<tr @click="handleModel(time, event, index)" v-for="(time, index) in filteredTimings.filter(a => a.event === event.id)" class="even:dark:bg-neutral-700 even:bg-neutral-300 hover:cursor-pointer">
|
||||
<td class="pl-1" :class="time.dsq ? 'line-through' : ''">{{ time.time.minutes }}:{{ time.time.seconds }}:{{ time.time.milliseconds}}</td>
|
||||
<td>{{ time.contest.date.toLocaleDateString('nl-NL') }}</td>
|
||||
<td>{{ time.contest.type }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -78,6 +81,16 @@ const timings = ref([])
|
||||
const showModel = ref(false)
|
||||
const disableButtons = ref(false)
|
||||
|
||||
const filteredTimings = computed(() => {
|
||||
timings.value = timings.value.sort((a, b) => a.time.combined.localeCompare(b.time.combined))
|
||||
timings.value.forEach((time, index) => {
|
||||
if (time.dsq === true) {
|
||||
timings.value.push(timings.value.splice(index, 1)[0])
|
||||
}
|
||||
})
|
||||
return timings.value
|
||||
})
|
||||
|
||||
const modelData = ref({
|
||||
time: {
|
||||
minutes: null,
|
||||
@ -88,7 +101,7 @@ const modelData = ref({
|
||||
info: '',
|
||||
contest: {
|
||||
type: '',
|
||||
name: '',
|
||||
location: '',
|
||||
date: '',
|
||||
}
|
||||
})
|
||||
@ -144,6 +157,8 @@ onMounted(async () => {
|
||||
const data = doc.data()
|
||||
data.id = doc.id
|
||||
|
||||
data.contest.date = data.contest.date.toDate()
|
||||
|
||||
timings.value.push(data)
|
||||
});
|
||||
|
||||
@ -158,6 +173,10 @@ const handleModel = (competitor, e, index) => {
|
||||
showModel.value = true
|
||||
}
|
||||
|
||||
const dateToYYYYMMDD = (d) => {
|
||||
return d && new Date(d.getTime()-(d.getTimezoneOffset()*60*1000)).toISOString().split('T')[0]
|
||||
}
|
||||
|
||||
const submitModalForm = async () => {
|
||||
if (!modelData.value.time.minutes) modelData.value.time.minutes = 0
|
||||
if (!modelData.value.time.seconds) modelData.value.time.seconds = 0
|
||||
@ -174,7 +193,6 @@ const submitModalForm = async () => {
|
||||
|
||||
const docRef = doc(db, "timings", id);
|
||||
|
||||
console.log(modelData.value)
|
||||
await updateDoc(docRef, modelData.value);
|
||||
|
||||
toast.success('Tijd is bewerkt')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user