Config-file

config/env/lottery.config.example.js

@@ -0,0 +1,8 @@
+module.exports = {
+  name: "NAME",
+  phone: "PHONE NUMBER",
+  price: 10,
+  message: "VINLOTTERI",
+  date: 5,
+  hours: 15
+};

config/env/lottery.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  name: "Kasper Rynning-Tønnesen",
+  phone: "977 40 427",
+  price: 10,
+  message: "Vinlotteri 🍾",
+  date: 5,
+  hours: 15
+};

config/webpack.config.common.js

@@ -1,5 +1,7 @@
 "use strict";
 
+const env = require("./env/lottery.config.js");
+const webpack = require("webpack");
 const VueLoaderPlugin = require("vue-loader/lib/plugin");
 const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
 const HtmlPlugin = require("html-webpack-plugin");
@@ -68,7 +70,17 @@ const webpackConfig = function(isDev) {
         }
       ]
     },
-    plugins: [new VueLoaderPlugin()]
+    plugins: [
+      new VueLoaderPlugin(),
+      new webpack.DefinePlugin({
+        __NAME__: JSON.stringify(env.name),
+        __PHONE__: JSON.stringify(env.phone),
+        __PRICE__: env.price,
+        __MESSAGE__: JSON.stringify(env.message),
+        __DATE__: env.date,
+        __HOURS__: env.hours
+      })
+    ]
   };
 };
 

src/ui/Banner.vue

@@ -1,7 +1,7 @@
 <template>
   <router-link to="/" class="link">
     <div class="top-banner">
-      <img src="/public/assets/images/knowit.svg" alt="knowit logo"/>
+      <img src="/public/assets/images/knowit.svg" alt="knowit logo" />
       <div class="clock">
         <h2 cv-if="distance > 0">
           <span v-if="days > 0">{{ pad(days) }}</span
@@ -57,13 +57,13 @@ export default {
     },
     initialize: function() {
       let d = new Date();
-      let dayOfLottery = 5;
+      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(15));
+      nextDayOfLottery = new Date(nextDayOfLottery.setHours(__HOURS__));
       nextDayOfLottery = new Date(nextDayOfLottery.setMinutes(0));
       nextDayOfLottery = new Date(nextDayOfLottery.setSeconds(0));
       this.nextLottery = nextDayOfLottery;

src/ui/Countdown.vue

@@ -70,13 +70,13 @@ export default {
     },
     initialize: function() {
       let d = new Date();
-      let dayOfLottery = 5;
+      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(15));
+      nextDayOfLottery = new Date(nextDayOfLottery.setHours(__HOURS__));
       nextDayOfLottery = new Date(nextDayOfLottery.setMinutes(0));
       nextDayOfLottery = new Date(nextDayOfLottery.setSeconds(0));
       this.nextLottery = nextDayOfLottery;

src/ui/Vipps.vue

@@ -1,7 +1,15 @@
 <template>
   <div>
-    <div class="vipps-container" :class="isMobile ? 'clickable': null" @click="openVipps">
+    <div
-      <img src="/public/assets/images/vipps-logo.svg" class="vipps-logo" alt="vipps logo" />
+      class="vipps-container"
+      :class="isMobile ? 'clickable' : null"
+      @click="openVipps"
+    >
+      <img
+        src="/public/assets/images/vipps-logo.svg"
+        class="vipps-logo"
+        alt="vipps logo"
+      />
       <span v-if="amount * 10 > 10">
         kr.
         <span class="big-money">{{ amount * 10 }},-</span>
@@ -12,11 +20,15 @@
         <span class="big-money">{{ amount * 10 }},-</span>
         pr. lodd
       </span>
-      <ing src="/public/assets/images/vipps-qr.png" class="qr-logo" v-if="qrFailed" />
+      <ing
+        src="/public/assets/images/vipps-qr.png"
+        class="qr-logo"
+        v-if="qrFailed"
+      />
       <canvas v-if="!qrFailed" ref="canvas" class="qr-logo"></canvas>
-      <span class="phone-number">977 40 427</span>
+      <span class="phone-number">{{ phone }}</span>
-      <span class="name">Kasper Rynning-Tønnesen</span>
+      <span class="name">{{ name }}</span>
-      <span class="mark-with">Merk med: Vinlodd/🍾</span>
+      <span class="mark-with">Merk med: {{ message }}</span>
     </div>
     <p class="click-to-open-text" v-if="isMobile">
       <i>Du kan også klikke på QR-koden for å åpne i Vipps</i>
@@ -37,7 +49,10 @@ export default {
   data() {
     return {
       qrImage: null,
-      qrFailed: false
+      qrFailed: false,
+      phone: __PHONE__,
+      name: __NAME__,
+      message: __MESSAGE__
     };
   },
   watch: {
@@ -53,17 +68,27 @@ export default {
       return this.isMobileFunction();
     },
     price: function() {
-      return this.amount * 1000;
+      return this.amount * (__PRICE * 100);
     },
     vippsUrlBasedOnUserAgent: function() {
+      console.log(this.phone, __PHONE__);
       if (navigator.userAgent.includes("iPhone")) {
         return (
-          "https://qr.vipps.no/28/2/01/031/4797740427?v=1&m=Vinlotteri%20🍾&a=" +
+          "https://qr.vipps.no/28/2/01/031/47" +
+          this.phone +
+          "?v=1&m=" +
+          this.message +
+          "&a=" +
           this.price
         );
       }
 
-      return "https://qr.vipps.no/28/2/01/031/4797740427?v=1&m=Vinlotteri%20🍾";
+      return (
+        "https://qr.vipps.no/28/2/01/031/47" +
+        this.phone +
+        "?v=1&m=" +
+        this.message
+      );
     }
   },
   methods: {