136 lines
3.3 KiB
Vue
136 lines
3.3 KiB
Vue
<template>
|
|
<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, </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 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);
|
|
|
|
@include mobile {
|
|
padding: 0px 40px;
|
|
|
|
width: calc(100% - 80px);
|
|
|
|
> img {
|
|
height: 23px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.clock {
|
|
text-decoration: none;
|
|
color: #333333;
|
|
font-family: Arial;
|
|
}
|
|
</style>
|