Vippspppspsps

src/Vinlottis.vue

@@ -15,7 +15,7 @@ export default {
     return {};
   },
   mounted() {
-    console.log("moutned");
+    console.log("SNEAKY PETE!");
   },
   computed: {},
 

src/components/GeneratePage.vue

@@ -56,16 +56,19 @@
       ></div>
     </div>
 
-    <img src="/public/assets/images/vipps.png" class="vipps-image" />
+    <!-- <img src="/public/assets/images/vipps.png" class="vipps-image" /> -->
+    <Vipps />
   </div>
 </template>
 
 <script>
+import Vipps from "@/ui/Vipps";
 import Banner from "@/ui/Banner";
 
 export default {
   components: {
-    Banner
+    Banner,
+    Vipps
   },
   data() {
     return {
@@ -109,7 +112,7 @@ export default {
         randomArray.push(4);
       }
       if (randomArray.length == 0) {
-        alert("Du må velge MINST 1 farge..");
+        alert("Du må velge MINST 1 farge");
         return;
       }
       if (this.numberOfBallots > 0) {

src/components/VinlottisPage.vue

@@ -11,11 +11,13 @@
         <WinGraph class="win" />
       </div>
       <TotalBought />
-      <img src="/public/assets/images/vipps.png" class="vipps-image" />
+      <!-- <img src="/public/assets/images/vipps.png" class="vipps-image" /> -->
-      <!--<div class="wine-and-highscore-container">
+
+      <div class="wine-and-highscore-container">
+        <Vipps class="vipps-container" />
         <Highscore />
         <Wines />
-      </div>-->
+      </div>
     </div>
   </div>
 </template>
@@ -27,6 +29,7 @@ import Highscore from "@/ui/Highscore";
 import WinGraph from "@/ui/WinGraph";
 import Banner from "@/ui/Banner";
 import Wines from "@/ui/Wines";
+import Vipps from "@/ui/Vipps";
 
 export default {
   components: {
@@ -35,7 +38,8 @@ export default {
     Highscore,
     WinGraph,
     Banner,
-    Wines
+    Wines,
+    Vipps
   }
 };
 </script>
@@ -99,6 +103,10 @@ h1 {
   display: inline-block;
 }
 
+.vipps-container {
+  margin-top: 25px;
+}
+
 .chart-container {
   display: flex;
   flex-direction: row;
@@ -115,6 +123,9 @@ h1 {
   flex-direction: row;
   justify-content: space-evenly;
   align-items: baseline;
+  padding-bottom: 25px;
+  max-width: 1400px;
+  margin: auto;
 }
 
 @media only screen and (max-width: 768px) {

src/ui/Highscore.vue

@@ -28,6 +28,7 @@ export default {
 
 <style lang="scss" scoped>
 div {
+  margin: auto 0;
   font-family: "knowit";
   display: inline-flex;
   flex-direction: column;

src/ui/PurchaseGraph.vue

@@ -79,6 +79,10 @@ export default {
           text: "Antall kjøp"
         },
         legend: {
+          display: true,
+          boxWidth: 3,
+          usePointStyle: true,
+          borderRadius: 10,
           labels: {
             // This more specific font property overrides the global property
             defaultFontFamily: (Chart.defaults.global.defaultFontFamily =
@@ -88,6 +92,7 @@ export default {
         scales: {
           yAxes: [
             {
+              stacked: true,
               ticks: {
                 beginAtZero: true,
                 suggestedMax: highestNumber + 5

src/ui/Vipps.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="vipps-container">
+    <img src="/public/assets/images/vipps-logo.svg" class="vipps-logo" />
+    <span>
+      kr.
+      <span class="big-money">10,-</span> pr. lodd
+    </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>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.vipps-container {
+  font-family: sans-serif;
+}
+
+.vipps-container {
+  border-radius: 10px;
+  background-color: #ff5b23;
+  display: flex;
+  flex-direction: column;
+  color: white;
+  text-align: center;
+  padding: 25px 30px 25px 25px;
+  width: 250px;
+  margin: auto 0;
+}
+
+.big-money {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.vipps-logo {
+  padding-bottom: 10px;
+}
+
+.phone-number {
+  font-size: 1.75rem;
+  font-weight: bold;
+  padding-top: 20px;
+  padding-bottom: 10px;
+}
+
+.qr-logo {
+  margin-top: 15px;
+  border-radius: 10px;
+  width: 220px;
+  margin: 15px auto auto auto;
+}
+
+.name,
+.mark-with {
+  font-weight: 600;
+  font-size: 1rem;
+}
+</style>

src/ui/Wines.vue

@@ -3,8 +3,14 @@
     <h3>Viner</h3>
     <ol>
       <li v-for="wine in wines">
-          <span v-if="wine.vivinoLink == '' || wine.vivinoLink == null">{{ wine.name }} - sett {{ wine.occurences }} ganger, {{ wine.rating }} i rating</span>
+        <span
-          <a :href="wine.vivinoLink" v-if="wine.vivinoLink != '' && wine.vivinoLink != null">{{ wine.name }} - sett {{ wine.occurences }} ganger, {{ wine.rating }} i rating</a></li>
+          v-if="wine.vivinoLink == '' || wine.vivinoLink == null"
+        >{{ wine.name }} - sett {{ wine.occurences }} ganger, {{ wine.rating }} i rating</span>
+        <a
+          :href="wine.vivinoLink"
+          v-if="wine.vivinoLink != '' && wine.vivinoLink != null"
+        >{{ wine.name }} - sett {{ wine.occurences }} ganger, {{ wine.rating }} i rating</a>
+      </li>
     </ol>
   </div>
 </template>
@@ -19,11 +25,9 @@ export default {
     let response = await _response.json();
 
     response.sort();
-    response = response.filter(
+    response = response
-      wine => wine.name != null && wine.name != ""
+      .filter(wine => wine.name != null && wine.name != "")
-    ).sort((a, b) => 
+      .sort((a, b) => (a.occurences > b.occurences ? -1 : 1));
-      a.occurences > b.occurences ? -1 : 1
-    );
     this.wines = response;
   }
 };
@@ -31,9 +35,10 @@ export default {
 
 <style lang="scss" scoped>
 h3 {
-    text-align:center;
+  text-align: center;
 }
 div {
+  margin: auto 0;
   font-family: "knowit";
   display: inline-flex;
   flex-direction: column;