added sorting

frontend/pages/wedstrijd/owntimes.vue

@@ -0,0 +1,90 @@
+<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>