Renamed /src to /frontend.

frontend/ui/Banner.vue

@@ -0,0 +1,133 @@
+<template>
+  <header class="top-banner">
+    <!-- Mobile -->
+    <router-link to="/" class="company-logo">
+      <img src="/public/assets/images/knowit.svg" alt="knowit logo" />
+    </router-link>
+
+    <a class="menu-toggle-container" aria-label="show-menu" @click="toggleMenu" :class="isOpen ? 'open' : 'collapsed'" >
+      <span class="menu-toggle"></span>
+      <span class="menu-toggle"></span>
+      <span class="menu-toggle"></span>
+    </a>
+
+    <nav class="menu" :class="isOpen ? 'open' : 'collapsed'" >
+      <router-link v-for="(route, index) in routes" :key="index" :to="route.route" class="menu-item-link" >
+        <a @click="toggleMenu" class="single-route" :class="isOpen ? 'open' : 'collapsed'">{{route.name}}</a>
+      </router-link>
+    </nav>
+    
+    <div class="clock">
+      <h2 v-if="!fiveMinutesLeft || !tenMinutesOver">
+        <span v-if="days > 0">{{ pad(days) }}:</span>
+        <span>{{ pad(hours) }}</span>:
+        <span>{{ pad(minutes) }}</span>:
+        <span>{{ pad(seconds) }}</span>
+      </h2>
+      <h2 v-if="twoMinutesLeft || tenMinutesOver">Lotteriet er i gang!</h2>
+    </div>
+  </header>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isOpen: false,
+      nextLottery: null,
+      days: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+      distance: 0,
+      interval: null,
+    };
+  },
+  props: {
+    routes: {
+      required: true,
+      type: Array
+    }
+  },
+  mounted() {
+    this.initialize(), this.countdown();
+  },
+  computed: {
+    fiveMinutesLeft: function() {
+      if (this.days == 0 && this.hours == 0 && this.minutes <= 2) {
+        return true;
+      }
+      return false;
+    },
+    tenMinutesOver: function() {
+      if (this.days == 6 && this.hours >= 23 && this.minutes >= 50) {
+        return true;
+      }
+      return false;
+    }
+  },
+  methods: {
+    toggleMenu(){
+      this.isOpen = this.isOpen ? false : true;
+    },
+    pad: function(num) {
+      if (num < 10) {
+        return `0${num}`;
+      }
+      return num;
+    },
+    initialize: function() {
+      let d = new Date();
+      let dayOfLottery = __DATE__;
+      let dayDifference = (dayOfLottery + 7 - d.getDay()) % 7;
+      if (dayDifference == 0) {
+        dayDifference = 7;
+      }
+      let nextDayOfLottery = new Date(d.setDate(d.getDate() + dayDifference));
+      nextDayOfLottery = new Date(nextDayOfLottery.setHours(__HOURS__));
+      nextDayOfLottery = new Date(nextDayOfLottery.setMinutes(0));
+      nextDayOfLottery = new Date(nextDayOfLottery.setSeconds(0));
+      let nowDate = new Date();
+      let now = nowDate.getTime();
+      if (nextDayOfLottery.getTimezoneOffset() != nowDate.getTimezoneOffset()) {
+        let _diff =
+          (nextDayOfLottery.getTimezoneOffset() - nowDate.getTimezoneOffset()) *
+          60 *
+          -1;
+        nextDayOfLottery.setSeconds(nextDayOfLottery.getSeconds() + _diff);
+      }
+      this.nextLottery = nextDayOfLottery;
+
+      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.days == 7) {
+        this.days = 0;
+      }
+      if (this.distance < 0) {
+        this.initialize();
+      }
+      this.interval = setTimeout(this.countdown, 500);
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/banner.scss";
+</style>