From 8e21e0645c4d874790b9f55644525dc7dab72638 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?=
 <kasper.rynning-tonnesen@knowit.no>
Date: Fri, 24 Jan 2020 13:30:15 +0100
Subject: [PATCH 1/3] Timer

---
 src/ui/Banner.vue | 117 +++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 111 insertions(+), 6 deletions(-)

diff --git a/src/ui/Banner.vue b/src/ui/Banner.vue
index 8c02be4..5cc9f58 100644
--- a/src/ui/Banner.vue
+++ b/src/ui/Banner.vue
@@ -1,30 +1,135 @@
 <template>
-  <router-link to="/">
+  <router-link to="/" class="link">
     <div class="top-banner">
       <img src="/public/assets/images/knowit.svg" />
+      <div class="clock">
+        <h2 cv-if="distance > 0">
+          <span v-if="days > 0">{{ days }} dager,&nbsp;</span>
+          <span>{{ pad(hours) }}</span
+          >: <span>{{ pad(minutes) }}</span
+          >:
+          <span>{{ pad(seconds) }}</span>
+        </h2>
+        <h2 v-if="(distance = 0)">Lotteriet har begynt!</h2>
+      </div>
     </div>
   </router-link>
 </template>
 
+<script>
+export default {
+  data() {
+    return {
+      nextLottery: null,
+      days: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+      distance: 0,
+      enabled: false,
+      code: "38384040373937396665",
+      codeDone: "",
+      interval: null
+    };
+  },
+  mounted() {
+    this.initialize(), this.countdown();
+  },
+  methods: {
+    pad: function(num) {
+      if (num < 10) {
+        return `0${num}`;
+      }
+      return num;
+    },
+    listenerFunction: function(event) {
+      this.codeDone += event.keyCode;
+      if (this.code.substring(0, this.codeDone.length) == this.codeDone) {
+        if (this.code == this.codeDone && !this.enabled) {
+          this.enabled = true;
+          this.initialize();
+          this.countdown();
+          this.codeDone = "";
+        }
+      } else {
+        this.codeDone = "";
+      }
+    },
+    initialize: function() {
+      let d = new Date();
+      let dayOfLottery = 5;
+      let nextDayOfLottery = new Date(
+        d.setDate(d.getDate() + ((5 + 7 - d.getDay()) % 7))
+      );
+      nextDayOfLottery = new Date(nextDayOfLottery.setHours(15));
+      nextDayOfLottery = new Date(nextDayOfLottery.setMinutes(0));
+      nextDayOfLottery = new Date(nextDayOfLottery.setSeconds(0));
+      this.nextLottery = nextDayOfLottery;
+      let now = new Date().getTime();
+      this.distance = new Date(this.nextLottery).getTime() - now;
+    },
+    countdown: function() {
+      // Get today's date and time
+      let now = new Date().getTime();
+
+      // Find the distance between now and the count down date
+      this.distance = new Date(this.nextLottery).getTime() - now;
+
+      // Time calculations for days, hours, minutes and seconds
+      this.days = Math.floor(this.distance / (1000 * 60 * 60 * 24));
+      this.hours = Math.floor(
+        (this.distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+      );
+      this.minutes = Math.floor(
+        (this.distance % (1000 * 60 * 60)) / (1000 * 60)
+      );
+      this.seconds = Math.floor((this.distance % (1000 * 60)) / 1000);
+
+      if (this.distance < 0) {
+        clearTimeout(this.interval);
+        return;
+      }
+      this.interval = setTimeout(this.countdown, 500);
+    }
+  }
+};
+</script>
+
 <style lang="scss" scoped>
 @import "../styles/media-queries.scss";
 
+.link {
+  text-decoration: none;
+}
+
 .top-banner {
   text-align: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
   width: 100vw;
   margin-top: 0px;
-  padding: 33px 0;
+  padding: 33px 40px;
   background-color: #dbeede;
-  -webkit-box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.65);
-  -moz-box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.65);
-  box-shadow: 0px 0px 22px -8px rgba(0,0,0,0.65);
+  -webkit-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
+  -moz-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
+  box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
 
   @include mobile {
-    padding: 20px 0;
+    padding: 0px 40px;
+
+    width: calc(100% - 80px);
 
     > img {
       height: 23px;
     }
   }
 }
+
+.clock {
+  text-decoration: none;
+  color: #333333;
+  font-family: Arial;
+}
 </style>

From d027e41b8c5e4e9013839b770c8dd20af7dacdd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?=
 <kasper.rynning-tonnesen@knowit.no>
Date: Fri, 24 Jan 2020 14:10:06 +0100
Subject: [PATCH 2/3] Margins are a thing

---
 src/ui/Banner.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/ui/Banner.vue b/src/ui/Banner.vue
index 5cc9f58..eff66d3 100644
--- a/src/ui/Banner.vue
+++ b/src/ui/Banner.vue
@@ -108,7 +108,7 @@ export default {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  width: 100vw;
+  width: calc(100% - 80px);
   margin-top: 0px;
   padding: 33px 40px;
   background-color: #dbeede;
@@ -119,8 +119,6 @@ export default {
   @include mobile {
     padding: 0px 40px;
 
-    width: calc(100% - 80px);
-
     > img {
       height: 23px;
     }

From 8a171a50ed8f26775c1b72a9b6334d938567d275 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?=
 <kasper.rynning-tonnesen@knowit.no>
Date: Fri, 24 Jan 2020 14:11:02 +0100
Subject: [PATCH 3/3] prettier days and foramtting

---
 src/ui/Banner.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/ui/Banner.vue b/src/ui/Banner.vue
index eff66d3..020f845 100644
--- a/src/ui/Banner.vue
+++ b/src/ui/Banner.vue
@@ -4,7 +4,7 @@
       <img src="/public/assets/images/knowit.svg" />
       <div class="clock">
         <h2 cv-if="distance > 0">
-          <span v-if="days > 0">{{ days }} dager,&nbsp;</span>
+          <span v-if="days > 0">{{ pad(days) }}</span>
           <span>{{ pad(hours) }}</span
           >: <span>{{ pad(minutes) }}</span
           >:
@@ -128,6 +128,7 @@ export default {
 .clock {
   text-decoration: none;
   color: #333333;
+  display: flex;
   font-family: Arial;
 }
 </style>