countdown more places

src/components/GeneratePage.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="container">
-    <h1 class="title">Loddgenerator</h1>
-    <p class="subtext">Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'</p>
+    <h1 class="title" @click="startCountdown">Loddgenerator</h1>
+    <p class="subtext">
+      Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'
+    </p>
     <div class="input-line">
       <label for="redCheckbox">
         <input type="checkbox" id="redCheckbox" v-model="redCheckbox" />
@@ -52,6 +54,7 @@
     </div>
 
     <Vipps class="vipps" />
+    <Countdown :hardEnable="hardStart" @countdown="changeEnabled" />
   </div>
 </template>
 
@@ -59,11 +62,13 @@
 import { page, event } from "vue-analytics";
 import Vipps from "@/ui/Vipps";
 import Banner from "@/ui/Banner";
+import Countdown from "@/ui/Countdown";
 
 export default {
   components: {
     Banner,
-    Vipps
+    Vipps,
+    Countdown
   },
   data() {
     return {
@@ -77,7 +82,8 @@ export default {
       redCheckbox: true,
       greenCheckbox: true,
       yellowCheckbox: true,
-      blueCheckbox: true
+      blueCheckbox: true,
+      hardStart: false
     };
   },
   watch: {
@@ -92,10 +98,16 @@ export default {
     this.track();
   },
   methods: {
+    changeEnabled: function(way) {
+      this.hardStart = way;
+    },
+    startCountdown: function() {
+      this.hardStart = true;
+    },
     generateColors: function(event, time) {
       if (time == 5) {
         if (this.numberOfBallots > 1 && new Set(this.colors).size == 1) {
-          alert('BINGO')
+          alert("BINGO");
         }
 
         if (window.location.hostname == "localhost") {
@@ -187,7 +199,9 @@ export default {
 @import "../styles/variables.scss";
 @import "../styles/global.scss";
 @import "../styles/media-queries.scss";
-
+h1 {
+  cursor: pointer;
+}
 .vipps {
   margin: 20px auto auto auto;
 }

src/components/VinlottisPage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="outer">
     <div class="container">
-      <h1 class="title">Vinlotteri</h1>
+      <h1 class="title" @click="startCountdown">Vinlotteri</h1>
       <router-link to="generate" class="generate-link">
         Klarer du ikke velge lodd-farger?
         <span class="subtext generator-link">Prøv loddgeneratoren</span>
@@ -24,6 +24,7 @@
         </div>
       </div>
     </div>
+    <Countdown :hardEnable="hardStart" @countdown="changeEnabled" />
   </div>
 </template>
 
@@ -36,6 +37,7 @@ import WinGraph from "@/ui/WinGraph";
 import Banner from "@/ui/Banner";
 import Wines from "@/ui/Wines";
 import Vipps from "@/ui/Vipps";
+import Countdown from "@/ui/Countdown";
 
 export default {
   components: {
@@ -45,7 +47,13 @@ export default {
     WinGraph,
     Banner,
     Wines,
-    Vipps
+    Vipps,
+    Countdown
+  },
+  data() {
+    return {
+      hardStart: false
+    };
   },
   mounted() {
     if (window.location.hostname == "localhost") {
@@ -54,8 +62,14 @@ export default {
     this.track();
   },
   methods: {
+    changeEnabled(way) {
+      this.hardStart = way;
+    },
     track() {
       this.$ga.page("/");
+    },
+    startCountdown() {
+      this.hardStart = true;
     }
   }
 };
@@ -75,6 +89,10 @@ export default {
   padding: 0 25px;
 }
 
+.title {
+  cursor: pointer;
+}
+
 .left-bottom {
   width: 75%;