frontend/pages/wedstrijd/alltimes.vue

@@ -33,9 +33,10 @@
     </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="showDropdown = !showDropdown" class="btn">Deelnemers <Icon size="1.2em" name="ion:arrow-down-b" /></button>
+          <button @click.stop="showDeelnemersDropdown = !showDeelnemersDropdown" class="btn">Deelnemers <Icon size="1.2em" name="ion:arrow-down-b" /></button>
-        <div v-if="showDropdown" v-on-click-outside.bubble="handleDropdown" class="w-48 mt-2 container absolute rounded-lg shadow p-3">
+          <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">
@@ -44,7 +45,19 @@
             </ul>
           </div>
         </div>
-      <div v-for="event in events" class="container w-full max-w-md py-2 px-4">
+        <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-2xl 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>
@@ -55,16 +68,16 @@
           <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 v-for="property in Object.values(properties).filter(a => a.enabled === true)">{{ property.name }}</th>
-                <th class="w-1/7">Datum</th>
-                <th class="w-3/7">Wie</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 class="pl-1" :class="time.dsq ? 'line-through' : ''">{{ time.time.minutes }}:{{ time.time.seconds }}:{{ time.time.milliseconds}}</td>
+                <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>{{ time.contest.date }}</td>
+                <td v-if="properties.date.enabled">{{ time.contest.date }}</td>
-                <td 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.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>
               </tr>
             </tbody>
           </table>
@@ -79,7 +92,7 @@ import { useToast } from 'vue-toastification'
 import { vOnClickOutside} from '@vueuse/components'
 
 definePageMeta({
-  title: 'Eigen Tijden',
+  title: 'Brigade Tijden',
   key: 'back'
 })
 
@@ -89,10 +102,15 @@ const toast = useToast()
 const timings = ref([])
 const showModel = ref(false)
 const disableButtons = ref(false)
-const showDropdown = ref(false)
+const showDeelnemersDropdown = ref(false)
+const showPropertiesDropdown = ref(false)
 
-const handleDropdown = (x) => {
+const handleDeelnemersDropdown = () => {
-  showDropdown.value = false 
+  showDeelnemersDropdown.value = false 
+}
+
+const handlePropertiesDropdown = () => {
+  showPropertiesDropdown.value = false 
 }
 
 const filteredTimings = computed(() => {
@@ -114,6 +132,34 @@ const modelData = ref({
   }
 })
 
+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',
+  },
+  contest: {
+    enabled: false,
+    id: 'contest',
+    name: 'Wedstrijd',
+  },
+})
+
 const events = ref({
   obstacleSwim: {
     open: false,