From 25d6e63d32c1025d6e64ddc3d9b5909fa6655bb6 Mon Sep 17 00:00:00 2001
From: xeovalyte <me+gitlab@xeovalyte.dev>
Date: Fri, 10 Feb 2023 13:55:18 +0100
Subject: [PATCH] added all times

---
 frontend/package-lock.json              | 169 ++++++++++++++---
 frontend/package.json                   |   3 +-
 frontend/pages/wedstrijd/addcontest.vue |  17 +-
 frontend/pages/wedstrijd/alltimes.vue   | 229 ++++++++++++++++++++++++
 frontend/pages/wedstrijd/index.vue      |   2 +-
 frontend/pages/wedstrijd/owntimes.vue   | 123 ++++++++++++-
 6 files changed, 509 insertions(+), 34 deletions(-)
 create mode 100644 frontend/pages/wedstrijd/alltimes.vue

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index bb19465..a21cfcf 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -4,7 +4,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "frontend",
       "hasInstallScript": true,
       "dependencies": {
         "@capacitor/core": "^4.3.0",
@@ -13,6 +12,7 @@
         "@capacitor/push-notifications": "^4.1.0",
         "@formkit/nuxt": "^1.0.0-beta.11-c95e605",
         "@nuxtjs/robots": "^3.0.0",
+        "@vueuse/components": "^9.12.0",
         "@vueuse/firebase": "^9.2.0",
         "@vueuse/shared": "^9.4.0",
         "firebase": "^9.14.0",
@@ -24,7 +24,7 @@
         "@nuxtjs/plausible": "^0.2.0",
         "@nuxtjs/tailwindcss": "^6.1.3",
         "@tailwindcss/forms": "^0.5.3",
-        "@vueuse/core": "^9.6.0",
+        "@vueuse/core": "^9.12.0",
         "@vueuse/nuxt": "^9.6.0",
         "nuxt": "^3.0.0-rc.14",
         "nuxt-icon": "^0.1.7"
@@ -2899,8 +2899,7 @@
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.16",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
-      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==",
-      "dev": true
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
     },
     "node_modules/@unhead/dom": {
       "version": "1.0.4",
@@ -3234,15 +3233,79 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
       "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
     },
+    "node_modules/@vueuse/components": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-9.12.0.tgz",
+      "integrity": "sha512-U468xbr2PISuWepeOU4J8zkVj0aDhiFe230oDhnIm8mHtcS9gM2vSKTB32InxTs6kVma60yAGdqBySkyFNX/+w==",
+      "dependencies": {
+        "@vueuse/core": "9.12.0",
+        "@vueuse/shared": "9.12.0",
+        "vue-demi": "*"
+      }
+    },
+    "node_modules/@vueuse/components/node_modules/@vueuse/shared": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.12.0.tgz",
+      "integrity": "sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/components/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vueuse/core": {
-      "version": "9.6.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.6.0.tgz",
-      "integrity": "sha512-qGUcjKQXHgN+jqXEgpeZGoxdCbIDCdVPz3QiF1uyecVGbMuM63o96I1GjYx5zskKgRI0FKSNsVWM7rwrRMTf6A==",
-      "dev": true,
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.12.0.tgz",
+      "integrity": "sha512-h/Di8Bvf6xRcvS/PvUVheiMYYz3U0tH3X25YxONSaAUBa841ayMwxkuzx/DGUMCW/wHWzD8tRy2zYmOC36r4sg==",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.16",
-        "@vueuse/metadata": "9.6.0",
-        "@vueuse/shared": "9.6.0",
+        "@vueuse/metadata": "9.12.0",
+        "@vueuse/shared": "9.12.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/@vueuse/metadata": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.12.0.tgz",
+      "integrity": "sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.12.0.tgz",
+      "integrity": "sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ==",
+      "dependencies": {
         "vue-demi": "*"
       },
       "funding": {
@@ -3253,7 +3316,6 @@
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
       "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
-      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -3410,6 +3472,21 @@
         "node": "^14.16.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@vueuse/nuxt/node_modules/@vueuse/core": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.6.0.tgz",
+      "integrity": "sha512-qGUcjKQXHgN+jqXEgpeZGoxdCbIDCdVPz3QiF1uyecVGbMuM63o96I1GjYx5zskKgRI0FKSNsVWM7rwrRMTf6A==",
+      "dev": true,
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.6.0",
+        "@vueuse/shared": "9.6.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@vueuse/nuxt/node_modules/vue-demi": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
@@ -15200,8 +15277,7 @@
     "@types/web-bluetooth": {
       "version": "0.0.16",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
-      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==",
-      "dev": true
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
     },
     "@unhead/dom": {
       "version": "1.0.4",
@@ -15494,23 +15570,60 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
       "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
     },
-    "@vueuse/core": {
-      "version": "9.6.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.6.0.tgz",
-      "integrity": "sha512-qGUcjKQXHgN+jqXEgpeZGoxdCbIDCdVPz3QiF1uyecVGbMuM63o96I1GjYx5zskKgRI0FKSNsVWM7rwrRMTf6A==",
-      "dev": true,
+    "@vueuse/components": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-9.12.0.tgz",
+      "integrity": "sha512-U468xbr2PISuWepeOU4J8zkVj0aDhiFe230oDhnIm8mHtcS9gM2vSKTB32InxTs6kVma60yAGdqBySkyFNX/+w==",
       "requires": {
-        "@types/web-bluetooth": "^0.0.16",
-        "@vueuse/metadata": "9.6.0",
-        "@vueuse/shared": "9.6.0",
+        "@vueuse/core": "9.12.0",
+        "@vueuse/shared": "9.12.0",
         "vue-demi": "*"
       },
       "dependencies": {
+        "@vueuse/shared": {
+          "version": "9.12.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.12.0.tgz",
+          "integrity": "sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ==",
+          "requires": {
+            "vue-demi": "*"
+          }
+        },
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
+    "@vueuse/core": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.12.0.tgz",
+      "integrity": "sha512-h/Di8Bvf6xRcvS/PvUVheiMYYz3U0tH3X25YxONSaAUBa841ayMwxkuzx/DGUMCW/wHWzD8tRy2zYmOC36r4sg==",
+      "requires": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.12.0",
+        "@vueuse/shared": "9.12.0",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "@vueuse/metadata": {
+          "version": "9.12.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.12.0.tgz",
+          "integrity": "sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ=="
+        },
+        "@vueuse/shared": {
+          "version": "9.12.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.12.0.tgz",
+          "integrity": "sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ==",
+          "requires": {
+            "vue-demi": "*"
+          }
+        },
         "vue-demi": {
           "version": "0.13.11",
           "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
           "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
-          "dev": true,
           "requires": {}
         }
       }
@@ -15609,6 +15722,18 @@
             "untyped": "^1.0.0"
           }
         },
+        "@vueuse/core": {
+          "version": "9.6.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.6.0.tgz",
+          "integrity": "sha512-qGUcjKQXHgN+jqXEgpeZGoxdCbIDCdVPz3QiF1uyecVGbMuM63o96I1GjYx5zskKgRI0FKSNsVWM7rwrRMTf6A==",
+          "dev": true,
+          "requires": {
+            "@types/web-bluetooth": "^0.0.16",
+            "@vueuse/metadata": "9.6.0",
+            "@vueuse/shared": "9.6.0",
+            "vue-demi": "*"
+          }
+        },
         "vue-demi": {
           "version": "0.13.11",
           "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 5bd858e..5b0cadd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,7 +12,7 @@
     "@nuxtjs/plausible": "^0.2.0",
     "@nuxtjs/tailwindcss": "^6.1.3",
     "@tailwindcss/forms": "^0.5.3",
-    "@vueuse/core": "^9.6.0",
+    "@vueuse/core": "^9.12.0",
     "@vueuse/nuxt": "^9.6.0",
     "nuxt": "^3.0.0-rc.14",
     "nuxt-icon": "^0.1.7"
@@ -24,6 +24,7 @@
     "@capacitor/push-notifications": "^4.1.0",
     "@formkit/nuxt": "^1.0.0-beta.11-c95e605",
     "@nuxtjs/robots": "^3.0.0",
+    "@vueuse/components": "^9.12.0",
     "@vueuse/firebase": "^9.2.0",
     "@vueuse/shared": "^9.4.0",
     "firebase": "^9.14.0",
diff --git a/frontend/pages/wedstrijd/addcontest.vue b/frontend/pages/wedstrijd/addcontest.vue
index e9cc16a..7c7e9dc 100644
--- a/frontend/pages/wedstrijd/addcontest.vue
+++ b/frontend/pages/wedstrijd/addcontest.vue
@@ -34,11 +34,17 @@
       <label class="font-bold">Naam Wedstrijd</label>
       <input v-model="contest.name" 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">
+        <option value="50m">50 Meter</option>
+        <option value="25m">25 Meter</option>
+      </select>
+
       <label class="font-bold">Datum</label>
       <input v-model="contest.date" required="true" class="input w-min hover:cursor-pointer pr-0 mb-5 " type="date">
 
       <label class="font-bold">Onderdelen</label>
-      <div class="flex flex-col gap-y-5">
+      <div class="flex flex-col gap-y-3">
         <div v-if="competitors" v-for="event in contest.events" class="container p-2">
           <div @click="event.open = !event.open" class="flex hover:cursor-pointer">
             <h2 class="font-bold">{{ event.name }}</h2>
@@ -103,6 +109,7 @@ const modelData = ref({
 
 const contest = ref({
   name: '',
+  type: '',
   date: '',
   events: {
     obstacleSwim: {
@@ -129,6 +136,12 @@ const contest = ref({
       id: 'manikinCarryWithFins',
       competitors: [],
     }, 
+    manikinTowWithFins: {
+      open: false,
+      name: '100m Manikin Tow with Fins',
+      id: 'manikinTowWithFins',
+      competitors: [],
+    }, 
     superLifesaver: {
       open: false,
       name: '200m Super Lifesaver',
@@ -192,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() },
+        contest: { name: contest.value.name, 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,
diff --git a/frontend/pages/wedstrijd/alltimes.vue b/frontend/pages/wedstrijd/alltimes.vue
new file mode 100644
index 0000000..82a557f
--- /dev/null
+++ b/frontend/pages/wedstrijd/alltimes.vue
@@ -0,0 +1,229 @@
+<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">Westrijd</label>
+      <input :disabled="!userData.wedstrijdAdmin" v-model="modelData.contest.name" 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">
+        <option value="50m">50 Meter</option>
+        <option value="25m">25 Meter</option>
+      </select>
+
+      <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="relative">
+        <button @click.stop="showDropdown = !showDropdown" 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 bg-neutral-800 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 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="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-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">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>{{ 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>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script setup>
+import { collection, query, where, getDocs, doc, updateDoc} from "firebase/firestore";
+import { useToast } from 'vue-toastification'
+import { vOnClickOutside} from '@vueuse/components'
+
+definePageMeta({
+  title: 'Eigen Tijden',
+  key: 'back'
+})
+
+const { db, userData, competitors } = inject('firebase')
+const toast = useToast()
+
+const timings = ref([])
+const showModel = ref(false)
+const disableButtons = ref(false)
+const showDropdown = ref(false)
+
+const handleDropdown = (x) => {
+  showDropdown.value = false 
+}
+
+const filteredTimings = computed(() => {
+  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: '',
+    name: '',
+    date: '',
+  }
+})
+
+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
+
+    timings.value.push(data)
+  });
+
+  timings.value = timings.value.sort((a, b) => a.time.combined.localeCompare(b.time.combined))
+  getCompetitors()
+})
+
+
+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);
+
+  console.log(modelData.value)
+  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>
diff --git a/frontend/pages/wedstrijd/index.vue b/frontend/pages/wedstrijd/index.vue
index 7e48c80..a5100ae 100644
--- a/frontend/pages/wedstrijd/index.vue
+++ b/frontend/pages/wedstrijd/index.vue
@@ -6,7 +6,7 @@
                 <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
             </NuxtLink>
             <div class="divider" />
-            <NuxtLink to="/calendar" class="item-hover py-2 flex items-center">
+            <NuxtLink to="/wedstrijd/alltimes" class="item-hover py-2 flex items-center">
                 <span>Brigade Tijden</span>
                 <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
             </NuxtLink>
diff --git a/frontend/pages/wedstrijd/owntimes.vue b/frontend/pages/wedstrijd/owntimes.vue
index f9570b2..3cbe891 100644
--- a/frontend/pages/wedstrijd/owntimes.vue
+++ b/frontend/pages/wedstrijd/owntimes.vue
@@ -1,5 +1,38 @@
 <template>
-    <div v-if="timings[0]" class="flex flex-col justify-center items-center gap-y-5 px-2 overflow-hidden">
+  <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">Westrijd</label>
+      <input :disabled="!userData.wedstrijdAdmin" v-model="modelData.contest.name" 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">
+        <option value="50m">50 Meter</option>
+        <option value="25m">25 Meter</option>
+      </select>
+
+      <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 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>  
@@ -12,15 +45,15 @@
               <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>
+                  <th class="w-1/7">Datum</th>
+                  <th class="w-3/7">Type</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>
+                <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">
+                  <td class="pl-1" :class="{ 'strikethrough' : time.dsq }">{{ time.time.minutes }}:{{ time.time.seconds }}:{{ time.time.milliseconds}}</td>
                   <td>{{ time.contest.date }}</td>
+                  <td>{{ time.contest.type }}</td>
                 </tr>
               </tbody>
             </table>
@@ -30,7 +63,8 @@
 </template>
 
 <script setup>
-import { collection, query, where, getDocs } from "firebase/firestore";
+import { collection, query, where, getDocs, doc, updateDoc} from "firebase/firestore";
+import { useToast } from 'vue-toastification'
 
 definePageMeta({
   title: 'Eigen Tijden',
@@ -38,8 +72,27 @@ definePageMeta({
 })
 
 const { db, userData } = inject('firebase')
+const toast = useToast()
 
 const timings = ref([])
+const showModel = ref(false)
+const disableButtons = ref(false)
+
+const modelData = ref({
+  time: {
+    minutes: null,
+    seconds: null,
+    milliseconds: null,
+  },
+  dsq: false,
+  info: '',
+  contest: {
+    type: '',
+    name: '',
+    date: '',
+  }
+})
+
 const events = ref({
   obstacleSwim: {
     open: false,
@@ -65,6 +118,12 @@ const events = ref({
     id: 'manikinCarryWithFins',
     competitors: [],
   }, 
+  manikinTowWithFins: {
+    open: false,
+    name: '100m Manikin Tow with Fins',
+    id: 'manikinTowWithFins',
+    competitors: [],
+  }, 
   superLifesaver: {
     open: false,
     name: '200m Super Lifesaver',
@@ -82,9 +141,57 @@ onMounted(async () => {
 
   querySnapshot.forEach((doc) => {
     // doc.data() is never undefined for query doc snapshots
-    timings.value.push(doc.data())
+    const data = doc.data()
+    data.id = doc.id
+
+    timings.value.push(data)
   });
 
   timings.value = timings.value.sort((a, b) => a.time.combined.localeCompare(b.time.combined))
 })
+
+
+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);
+
+  console.log(modelData.value)
+  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>