Merge branch 'master' of github.com:KevinMidboe/vinlottis

src/ui/Highscore.vue

@@ -23,7 +23,7 @@ export default {
     response = response.filter(
       person => person.name != null && person.name != ""
     );
-    this.highscore = response;
+    this.highscore = response.slice(0, 5);
   }
 };
 </script>
@@ -41,5 +41,10 @@ div {
 ol {
   padding-left: 1rem;
   margin-left: 0;
+
+  li {
+    padding: 2.5px 0;
+    width: max-content;
+  }
 }
 </style>

src/ui/Vipps.vue

@@ -5,7 +5,7 @@
       kr.
       <span class="big-money">{{ amount * 10 }},- (10,- pr. lodd)</span>
     </span>
-    <img :src="qrLink" class="qr-logo" />
+    <img :src="qrImage" 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>
@@ -13,22 +13,49 @@
 </template>
 
 <script>
+import QRCode from "qrcode";
+
 export default {
   props: {
-    amount: Number
+    amount: {
+      type: Number,
+      default: 1
+    }
   },
   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
+      qrImage: null
     };
   },
+  watch: {
+    amount: function(price) {
+      console.log("price is updated", price);
+      this.calculateQr();
+    }
+  },
+  mounted() {
+    this.calculateQr();
+  },
+  computed: {
+    price: function() {
+      return this.amount * 1000;
+    }
+  },
   methods: {
-    openVipps: () => {
+    calculateQr: function() {
+      QRCode.toDataURL(
+        "https://qr.vipps.no/28/2/01/031/4797740427?v=1&m=Vinlotteri%20🍾&a=" +
+          this.price,
+        { errorCorrectionLevel: "H" },
+        (err, url) => {
+          this.qrImage = url;
+        }
+      );
+    },
+    openVipps: function() {
       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
+        "https://qr.vipps.no/28/2/01/031/4797740427?v=1&m=Vinlotteri%20🍾&a=" +
+          this.price
       );
     }
   }

src/ui/Wines.vue

@@ -8,12 +8,13 @@
           {{ wine.rating }} i rating
         </span>
         <a
+          class="wine-link"
           :href="wine.vivinoLink"
           v-if="wine.vivinoLink != '' && wine.vivinoLink != null"
           @click="wineClick(wine)"
         >
-          {{ wine.name }} - sett {{ wine.occurences }} ganger,
-          {{ wine.rating }} i rating
+          <span class="truncate">{{ wine.name }}</span> - {{ wine.rating }} i
+          rating - {{ wine.occurences }} gang(er)
         </a>
       </li>
     </ol>
@@ -34,7 +35,7 @@ export default {
     response = response
       .filter(wine => wine.name != null && wine.name != "")
       .sort((a, b) => (a.occurences > b.occurences ? -1 : 1));
-    this.wines = response;
+    this.wines = response.slice(0, 5);
   },
   methods: {
     wineClick: function(wine) {
@@ -64,11 +65,26 @@ div {
 
 a {
   text-decoration: none;
-  color: orange;
+  color: #ff5b23;
+  padding: 2.5px 0;
 }
 
 ol {
   padding-left: 1rem;
   margin-left: 0;
 }
+
+.wine-link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.truncate {
+  display: inline-block;
+  max-width: 250px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
 </style>