improved wedstrijd system

frontend/pages/wedstrijd/addcontest.vue

@@ -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>
+      <label class="font-bold">Locatie Wedstrijd</label>
-      <input v-model="contest.name" required="true" class="input mb-5 " type="text">
+      <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,

frontend/pages/wedstrijd/alltimes.vue

@@ -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>
+      <label class="font-bold">Locatie</label>
-      <input :disabled="!userData.wedstrijdAdmin" v-model="modelData.contest.name" type="text" class="input dark:bg-neutral-700 bg-neutral-300 mb-5" />
+      <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>  
+          <h2 class="font-bold mr-auto">{{ 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-if="filteredTimings.filter(a => a.event === event.id).length > 0" class="">
-          <span v-else class="ml-auto">Geen tijd</span>
+            <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: '',
+    location: '',
-    date: '',
+    date: Date,
   }
 })
 
@@ -153,10 +170,10 @@ const properties = ref({
     id: 'type',
     name: 'Type zwembad',
   },
-  contest: {
+  location: {
     enabled: false,
-    id: 'contest',
+    id: 'location',
-    name: 'Wedstrijd',
+    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')

frontend/pages/wedstrijd/owntimes.vue

@@ -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>
+      <label class="font-bold">Locatie</label>
-      <input :disabled="!userData.wedstrijdAdmin" v-model="modelData.contest.name" type="text" class="input dark:bg-neutral-700 bg-neutral-300 mb-5" />
+      <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">
+                <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="{ 'strikethrough' : time.dsq }">{{ time.time.minutes }}:{{ time.time.seconds }}:{{ time.time.milliseconds}}</td>
+                  <td class="pl-1" :class="time.dsq ? 'line-through' : ''">{{ time.time.minutes }}:{{ time.time.seconds }}:{{ time.time.milliseconds}}</td>
-                  <td>{{ time.contest.date }}</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')