91 lines
3.0 KiB
Vue
91 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div v-if="timings[0]" class="flex flex-col justify-center items-center gap-y-5 px-2 overflow-hidden">
|
||
|
|
<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-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>
|
||
|
|
<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 class="w-3/7">Tijd</th>
|
||
|
|
<th class="w-1/7">DSQ</th>
|
||
|
|
<th class="w-3/7">Datum</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr v-for="time 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">{{ time.time.minutes }}:{{ time.time.seconds }}:{{ time.time.milliseconds}}</td>
|
||
|
|
<td>{{ time.dsq}}</td>
|
||
|
|
<td>{{ time.contest.date }}</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { collection, query, where, getDocs } from "firebase/firestore";
|
||
|
|
|
||
|
|
definePageMeta({
|
||
|
|
title: 'Eigen Tijden',
|
||
|
|
key: 'back'
|
||
|
|
})
|
||
|
|
|
||
|
|
const { db, userData } = inject('firebase')
|
||
|
|
|
||
|
|
const timings = ref([])
|
||
|
|
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: [],
|
||
|
|
},
|
||
|
|
superLifesaver: {
|
||
|
|
open: false,
|
||
|
|
name: '200m Super Lifesaver',
|
||
|
|
id: 'superLifesaver',
|
||
|
|
competitors: [],
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
const citiesRef = collection(db, "timings");
|
||
|
|
|
||
|
|
const q = query(citiesRef, where("relatiecode", "in", userData.value.relatiecodes ));
|
||
|
|
|
||
|
|
const querySnapshot = await getDocs(q);
|
||
|
|
|
||
|
|
querySnapshot.forEach((doc) => {
|
||
|
|
// doc.data() is never undefined for query doc snapshots
|
||
|
|
timings.value.push(doc.data())
|
||
|
|
});
|
||
|
|
|
||
|
|
timings.value = timings.value.sort((a, b) => a.time.combined.localeCompare(b.time.combined))
|
||
|
|
})
|
||
|
|
</script>
|