141 lines
3.9 KiB
Vue
141 lines
3.9 KiB
Vue
<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>
|
|
<i class="icon icon--arrow-right"></i>
|
|
</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>
|