Fix for countdown

src/ui/Banner.vue

@@ -4,8 +4,8 @@
       <img src="/public/assets/images/knowit.svg" />
       <div class="clock">
         <h2 cv-if="distance > 0">
-          <span v-if="days > 0">{{ pad(days) }}</span>
-          <span>{{ pad(hours) }}</span
+          <span v-if="days > 0">{{ pad(days) }}</span
+          >: <span>{{ pad(hours) }}</span
           >: <span>{{ pad(minutes) }}</span
           >:
           <span>{{ pad(seconds) }}</span>
@@ -58,9 +58,11 @@ export default {
     initialize: function() {
       let d = new Date();
       let dayOfLottery = 5;
-      let nextDayOfLottery = new Date(
-        d.setDate(d.getDate() + ((5 + 7 - d.getDay()) % 7))
-      );
+      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(15));
       nextDayOfLottery = new Date(nextDayOfLottery.setMinutes(0));
       nextDayOfLottery = new Date(nextDayOfLottery.setSeconds(0));
@@ -130,5 +132,8 @@ export default {
   color: #333333;
   display: flex;
   font-family: Arial;
+  h2 {
+    display: flex;
+  }
 }
 </style>

src/ui/Countdown.vue

@@ -2,8 +2,8 @@
   <div>
     <div class="clock" v-if="enabled">
       <h2 cv-if="distance > 0">
-        <span v-if="days > 0">{{ days }} dager,&nbsp;</span>
-        <span>{{ pad(hours) }}</span
+        <span v-if="days > 0">{{ pad(days) }}</span
+        >: <span>{{ pad(hours) }}</span
         >: <span>{{ pad(minutes) }}</span
         >:
         <span>{{ pad(seconds) }}</span>
@@ -71,9 +71,11 @@ export default {
     initialize: function() {
       let d = new Date();
       let dayOfLottery = 5;
-      let nextDayOfLottery = new Date(
-        d.setDate(d.getDate() + ((5 + 7 - d.getDay()) % 7))
-      );
+      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(15));
       nextDayOfLottery = new Date(nextDayOfLottery.setMinutes(0));
       nextDayOfLottery = new Date(nextDayOfLottery.setSeconds(0));

src/ui/Vipps.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="vipps-container" @click="openVipps">
-      <img src="/public/assets/images/vipps-logo.svg" class="vipps-logo" />
-      <span>
-        kr.
-        <span class="big-money">{{ amount * 10 }},- (10,- pr. lodd)</span>
-      </span>
-      <img src="/public/assets/images/vipps-qr.png" class="qr-logo" />
-      <span class="phone-number">977 40 427</span>
-      <span class="name">Kasper Rynning-Tønnesen</span>
-      <span class="mark-with">Merk med: Vinlodd/🍾</span>
+    <img src="/public/assets/images/vipps-logo.svg" class="vipps-logo" />
+    <span>
+      kr.
+      <span class="big-money">{{ amount * 10 }},- (10,- pr. lodd)</span>
+    </span>
+    <img :src="qrLink" class="qr-logo" />
+    <span class="phone-number">977 40 427</span>
+    <span class="name">Kasper Rynning-Tønnesen</span>
+    <span class="mark-with">Merk med: Vinlodd/🍾</span>
   </div>
 </template>
 
@@ -17,12 +17,22 @@ export default {
   props: {
     amount: Number
   },
+  data() {
+    return {
+      qrLink:
+        "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl=https://qr.vipps.no/28/2/01/031/4797740427?v=1&m=Vinlotteri🍾&a=" +
+        100 * this.amount
+    };
+  },
   methods: {
     openVipps: () => {
-      window.location.assign('https://qr.vipps.no/28/2/01/031/4797740427?v=1&m=Vinlotteri🍾&a=' + 100 * this.amount)
+      window.location.assign(
+        "https://chart.googleapis.com/chart?chs=221x221&cht=qr&choe=UTF-8&chld=L|1&chl=https://qr.vipps.no/28/2/01/031/4797740427?v=1&m=Vinlotteri🍾&a=" +
+          100 * this.amount
+      );
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>