297 lines
11 KiB
Vue
297 lines
11 KiB
Vue
<template>
|
|
<div @click.self="showModel = false" v-if="showModel" class="fixed flex justify-center items-center h-screen w-full bg-black top-0 left-0 z-50 bg-opacity-50" >
|
|
<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">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">
|
|
<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" />
|
|
<span class="text-default text-xl font-bold mx-1">:</span>
|
|
<input :disabled="!userData.wedstrijdAdmin" v-model="modelData.time.seconds" type="number" step="1" min="0" max="99" placeholder="ss" class="input dark:bg-neutral-700 bg-neutral-300 w-10 text-center p-1" />
|
|
<span class="text-default text-xl font-bold mx-1">:</span>
|
|
<input :disabled="!userData.wedstrijdAdmin" v-model="modelData.time.milliseconds" type="number" step="1" min="0" max="99" placeholder="ms" class="input dark:bg-neutral-700 bg-neutral-300 w-10 text-center p-1" />
|
|
</div>
|
|
|
|
<div class="flex items-center mb-5">
|
|
<input :disabled="!userData.wedstrijdAdmin" type="checkbox" v-model="modelData.dsq" class="mr-1 checkbox">
|
|
<span class="text-default">Diskwalificatie</span>
|
|
</div>
|
|
|
|
<label class="font-bold">Info </label>
|
|
<input :disabled="!userData.wedstrijdAdmin" v-model="modelData.info" type="text" placeholder="Bijv. Een diskwalificatie" class="input dark:bg-neutral-700 bg-neutral-300 mb-10" />
|
|
|
|
<input v-if="userData.wedstrijdAdmin" :disabled="disableButtons" type="submit" class="btn" value="Bewerken" />
|
|
</form>
|
|
</div>
|
|
<div v-if="timings[0]" class="flex flex-col justify-center items-center gap-y-3 px-2 overflow-hidden">
|
|
<div class="flex gap-x-5">
|
|
<div class="relative">
|
|
<button @click.stop="showDeelnemersDropdown = !showDeelnemersDropdown" class="btn">Deelnemers <Icon size="1.2em" name="ion:arrow-down-b" /></button>
|
|
<div v-if="showDeelnemersDropdown" v-on-click-outside.bubble="handleDeelnemersDropdown" class="w-48 mt-2 container absolute rounded-lg shadow p-3">
|
|
<ul class="space-y-2 text-default">
|
|
<li v-for="competitor in competitors" @click="competitor.checked = !competitor.checked" class="flex gap-x-1 items-center hover:cursor-pointer">
|
|
<input v-model="competitor.checked" type="checkbox" class="checkbox">
|
|
<label class="hover:cursor-pointer">{{ competitor.name }}</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="relative">
|
|
<button @click.stop="showPropertiesDropdown = !showPropertiesDropdown" class="btn">Eigenschappen <Icon size="1.2em" name="ion:arrow-down-b" /></button>
|
|
<div v-if="showPropertiesDropdown" v-on-click-outside.bubble="handlePropertiesDropdown" class="w-48 mt-2 container absolute rounded-lg shadow p-3">
|
|
<ul class="space-y-2 text-default">
|
|
<li v-for="property in Object.values(properties)" @click="property.enabled = !property.enabled" class="flex gap-x-1 items-center hover:cursor-pointer">
|
|
<input v-model="property.enabled" type="checkbox" class="checkbox">
|
|
<label class="hover:cursor-pointer">{{ property.name }}</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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 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">
|
|
<table class="table-fixed text-left w-full even:bg-gray-500">
|
|
<thead class="font-bold">
|
|
<tr>
|
|
<th v-for="property in Object.values(properties).filter(a => a.enabled === true)">{{ property.name }}</th>
|
|
</tr>
|
|
</thead>
|
|
<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.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.location.enabled">{{ time.contest.location }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { collection, query, getDocs, doc, updateDoc } from "firebase/firestore";
|
|
import { useToast } from 'vue-toastification'
|
|
import { vOnClickOutside} from '@vueuse/components'
|
|
|
|
definePageMeta({
|
|
title: 'Brigade Tijden',
|
|
key: 'back'
|
|
})
|
|
|
|
const { db, userData, competitors } = inject('firebase')
|
|
const toast = useToast()
|
|
|
|
const timings = ref([])
|
|
const showModel = ref(false)
|
|
const disableButtons = ref(false)
|
|
const showDeelnemersDropdown = ref(false)
|
|
const showPropertiesDropdown = ref(false)
|
|
|
|
const handleDeelnemersDropdown = () => {
|
|
showDeelnemersDropdown.value = false
|
|
}
|
|
|
|
const handlePropertiesDropdown = () => {
|
|
showPropertiesDropdown.value = 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.filter(a => competitors.value.filter(b => b.checked === true).map(x => x.relatiecode).includes(a.relatiecode))
|
|
})
|
|
|
|
const modelData = ref({
|
|
time: {
|
|
minutes: null,
|
|
seconds: null,
|
|
milliseconds: null,
|
|
},
|
|
dsq: false,
|
|
info: '',
|
|
contest: {
|
|
type: '',
|
|
location: '',
|
|
date: Date,
|
|
}
|
|
})
|
|
|
|
const properties = ref({
|
|
time: {
|
|
enabled: true,
|
|
id: 'time',
|
|
name: 'Tijd',
|
|
},
|
|
date: {
|
|
enabled: true,
|
|
id: 'date',
|
|
name: 'Datum',
|
|
},
|
|
name: {
|
|
enabled: true,
|
|
id: 'name',
|
|
name: 'Naam',
|
|
},
|
|
type: {
|
|
enabled: false,
|
|
id: 'type',
|
|
name: 'Type zwembad',
|
|
},
|
|
location: {
|
|
enabled: false,
|
|
id: 'location',
|
|
name: 'Locatie',
|
|
},
|
|
})
|
|
|
|
const events = ref({
|
|
obstacleSwim: {
|
|
open: false,
|
|
name: '200m Obstacle Swim',
|
|
id: 'obstacleSwim',
|
|
competitors: [],
|
|
},
|
|
manikinCarry: {
|
|
open: false,
|
|
name: '50m Manikin Carry',
|
|
id: 'manikinCarry',
|
|
competitors: [],
|
|
},
|
|
rescueMedley: {
|
|
open: false,
|
|
name: '100m Rescue Medley',
|
|
id: 'rescueMedley',
|
|
competitors: [],
|
|
},
|
|
manikinCarryWithFins: {
|
|
open: false,
|
|
name: '100m Manikin Carry with Fins',
|
|
id: 'manikinCarryWithFins',
|
|
competitors: [],
|
|
},
|
|
manikinTowWithFins: {
|
|
open: false,
|
|
name: '100m Manikin Tow with Fins',
|
|
id: 'manikinTowWithFins',
|
|
competitors: [],
|
|
},
|
|
superLifesaver: {
|
|
open: false,
|
|
name: '200m Super Lifesaver',
|
|
id: 'superLifesaver',
|
|
competitors: [],
|
|
},
|
|
})
|
|
|
|
const getCompetitors = async () => {
|
|
if (competitors.value[0]) return
|
|
const querySnapshot = await getDocs(collection(db, "competitors"))
|
|
querySnapshot.forEach((doc) => {
|
|
const data = doc.data()
|
|
data.checked = true
|
|
competitors.value.push(data)
|
|
})
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const citiesRef = collection(db, "timings");
|
|
|
|
const q = query(citiesRef);
|
|
|
|
const querySnapshot = await getDocs(q);
|
|
|
|
querySnapshot.forEach((doc) => {
|
|
// doc.data() is never undefined for query doc snapshots
|
|
const data = doc.data()
|
|
data.id = doc.id
|
|
|
|
data.contest.date = data.contest.date.toDate()
|
|
|
|
timings.value.push(data)
|
|
});
|
|
|
|
timings.value = timings.value.sort((a, b) => a.time.combined.localeCompare(b.time.combined))
|
|
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
|
|
modelData.value.index = index
|
|
modelData.value.eventId = e.id
|
|
showModel.value = true
|
|
}
|
|
|
|
const submitModalForm = async () => {
|
|
if (!modelData.value.time.minutes) modelData.value.time.minutes = 0
|
|
if (!modelData.value.time.seconds) modelData.value.time.seconds = 0
|
|
if (!modelData.value.time.milliseconds) modelData.value.time.milliseconds = 0
|
|
const id = modelData.value.id
|
|
|
|
delete modelData.value.index
|
|
delete modelData.value.eventId
|
|
delete modelData.value.id
|
|
|
|
disableButtons.value = true
|
|
const combinedTime = modelData.value.time.minutes.toString().padStart(2, '0') + modelData.value.time.seconds.toString().padStart(2, '0') + modelData.value.time.milliseconds.toString().padStart(2, '0')
|
|
modelData.value.time.combinedTime = combinedTime
|
|
|
|
const docRef = doc(db, "timings", id);
|
|
|
|
await updateDoc(docRef, modelData.value);
|
|
|
|
toast.success('Tijd is bewerkt')
|
|
showModel.value = false
|
|
disableButtons.value = false
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
appearance: textfield;
|
|
}
|
|
</style>
|