From 3026ce3416817998e49eacd84097c720c3ef3047 Mon Sep 17 00:00:00 2001
From: Jean-Pierre Symoens <jpsymoens0@gmail.com>
Date: Mon, 21 Mar 2022 14:20:00 +0100
Subject: [PATCH 1/5] Translation to vue ok but security is an issue

---
 src/components/days/individual_days/Day21.vue | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/days/individual_days/Day21.vue b/src/components/days/individual_days/Day21.vue
index 5e750d95..0f40c854 100644
--- a/src/components/days/individual_days/Day21.vue
+++ b/src/components/days/individual_days/Day21.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <svg
+      ref="arrow"
       class="arrow"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -42,23 +43,31 @@
     </svg>
 
     <h1 class="speed">
-      <span class="speed-value">0</span>
+      <span class="speed-value" ref="speed-value">0</span>
       <span class="units">KM/H</span>
     </h1>
   </div>
 </template>
 
 <script>
-const arrow = document.querySelector(".arrow");
-const speed = document.querySelector(".speed-value");
-
-navigator.geolocation.watchPosition((data) => {
-  speed.textContent = data.coords.speed;
-  arrow.style.transform = `rotate(${data.coords.heading}deg)`;
-}),
-  (err) => {
-    console.error(err);
-  };
+export default {
+  mounted() {
+    this.watchPosition();
+  },
+  methods: {
+    watchPosition() {
+      navigator.geolocation.watchPosition((data) => {
+        this.$refs.speedValue.textContent = data.coords.speed;
+        this.$refs.arrow.style.transform = `rotate(${data.coords.heading}deg)`;
+      }),
+        (err) => {
+          console.error(err);
+        };
+    },
+  },
+};
+// const arrow = document.querySelector(".arrow");
+// const speed = document.querySelector(".speed-value");
 </script>
 
 <style scoped>

From 44e39aee6180e9f07683a91aac54d8760e4899ae Mon Sep 17 00:00:00 2001
From: Jean-Pierre Symoens <jpsymoens0@gmail.com>
Date: Tue, 22 Mar 2022 09:27:17 +0100
Subject: [PATCH 2/5] Making the speed appear and binding it thanks to a data

---
 src/components/days/individual_days/Day21.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/days/individual_days/Day21.vue b/src/components/days/individual_days/Day21.vue
index 0f40c854..b35e4c14 100644
--- a/src/components/days/individual_days/Day21.vue
+++ b/src/components/days/individual_days/Day21.vue
@@ -43,7 +43,7 @@
     </svg>
 
     <h1 class="speed">
-      <span class="speed-value" ref="speed-value">0</span>
+      <span class="speed-value" ref="speed-value">{{ speedValue }}</span>
       <span class="units">KM/H</span>
     </h1>
   </div>
@@ -51,13 +51,18 @@
 
 <script>
 export default {
-  mounted() {
+  data() {
+    return {
+      speedValue: 0,
+    };
+  },
+  created() {
     this.watchPosition();
   },
   methods: {
     watchPosition() {
       navigator.geolocation.watchPosition((data) => {
-        this.$refs.speedValue.textContent = data.coords.speed;
+        this.speedValue = data.coords.speed;
         this.$refs.arrow.style.transform = `rotate(${data.coords.heading}deg)`;
       }),
         (err) => {
@@ -101,11 +106,13 @@ body {
 }
 
 h1 {
-  color: white;
-  font-weight: 100;
+  color: #3caa78;
+  margin-top: 0;
+  font-weight: 400;
   font-size: 60px;
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
 .units {

From 37c43a17e70886a42352a6208be6de6ad4858bf3 Mon Sep 17 00:00:00 2001
From: Jean-Pierre Symoens <jpsymoens0@gmail.com>
Date: Tue, 22 Mar 2022 09:27:40 +0100
Subject: [PATCH 3/5] removing unused ref

---
 src/components/days/individual_days/Day21.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/days/individual_days/Day21.vue b/src/components/days/individual_days/Day21.vue
index b35e4c14..08599abb 100644
--- a/src/components/days/individual_days/Day21.vue
+++ b/src/components/days/individual_days/Day21.vue
@@ -43,7 +43,7 @@
     </svg>
 
     <h1 class="speed">
-      <span class="speed-value" ref="speed-value">{{ speedValue }}</span>
+      <span class="speed-value">{{ speedValue }}</span>
       <span class="units">KM/H</span>
     </h1>
   </div>

From cfa8b41b5dd5d6dfb484ad01fc9e0914e4cc83f3 Mon Sep 17 00:00:00 2001
From: Jean-Pierre Symoens <jpsymoens0@gmail.com>
Date: Tue, 22 Mar 2022 09:32:10 +0100
Subject: [PATCH 4/5] Cleaning

---
 src/components/days/individual_days/Day21.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/days/individual_days/Day21.vue b/src/components/days/individual_days/Day21.vue
index 08599abb..f6388c02 100644
--- a/src/components/days/individual_days/Day21.vue
+++ b/src/components/days/individual_days/Day21.vue
@@ -71,8 +71,6 @@ export default {
     },
   },
 };
-// const arrow = document.querySelector(".arrow");
-// const speed = document.querySelector(".speed-value");
 </script>
 
 <style scoped>

From fbcef1db0d7246ac6a543d4d4e461f4d5b8b670c Mon Sep 17 00:00:00 2001
From: Jean-Pierre Symoens <jpsymoens0@gmail.com>
Date: Tue, 22 Mar 2022 10:53:56 +0100
Subject: [PATCH 5/5] Trying to debug but need firebase to deploy code to be
 able to do it properly

---
 src/components/days/individual_days/Day21.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/days/individual_days/Day21.vue b/src/components/days/individual_days/Day21.vue
index f6388c02..85d58f55 100644
--- a/src/components/days/individual_days/Day21.vue
+++ b/src/components/days/individual_days/Day21.vue
@@ -61,6 +61,7 @@ export default {
   },
   methods: {
     watchPosition() {
+      console.log("running");
       navigator.geolocation.watchPosition((data) => {
         this.speedValue = data.coords.speed;
         this.$refs.arrow.style.transform = `rotate(${data.coords.heading}deg)`;