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

src/components/RegisterPage.vue

@@ -76,7 +76,7 @@
     <h3>Legg til lodd kjøpt</h3>
     <div class="colors">
       <div
-        v-for="color in lotteryColorBoxes"
+        v-for="color in lotteryColors"
         :class="color.css + ' colors-box'"
         :key="color"
       >
@@ -171,10 +171,6 @@ export default {
   components: { TextToast, Wine, ScanToVinmonopolet },
   data() {
     return {
-      red: null,
-      blue: null,
-      green: null,
-      yellow: null,
       payed: undefined,
       winners: [],
       wines: [],
@@ -184,6 +180,12 @@ export default {
       showToast: false,
       showCamera: false,
       editWine: false,
+      lotteryColors: [
+        { value: null, name: "Blå", css: "blue" },
+        { value: null, name: "Rød", css: "red" },
+        { value: null, name: "Grønn", css: "green" },
+        { value: null, name: "Gul", css: "yellow" }
+      ],
       price: __PRICE__
     };
   },
@@ -195,16 +197,6 @@ export default {
   beforeDestroy() {
     this.setWinnerdataToStorage();
   },
-  computed: {
-    lotteryColorBoxes() {
-      return [
-        { value: this.blue, name: "Blå", css: "blue" },
-        { value: this.red, name: "Rød", css: "red" },
-        { value: this.green, name: "Grønn", css: "green" },
-        { value: this.yellow, name: "Gul", css: "yellow" }
-      ];
-    }
-  },
   methods: {
     amIBeingEdited(wine) {
       return this.editWine.id == wine.id && this.editWine.name == wine.name;
@@ -285,13 +277,17 @@ export default {
       });
     },
     sendInfo: async function(event) {
+      const colors = {
+        red: this.lotteryColors.filter(c => c.css == "red")[0].value,
+        green: this.lotteryColors.filter(c => c.css == "green")[0].value,
+        blue: this.lotteryColors.filter(c => c.css == "blue")[0].value,
+        yellow: this.lotteryColors.filter(c => c.css == "yellow")[0].value
+      }
+
       let sendObject = {
         purchase: {
           date: new Date(),
-          blue: this.blue,
-          red: this.red,
-          yellow: this.yellow,
-          green: this.green
+          ...colors
         },
         winners: this.winners
       };
@@ -314,10 +310,10 @@ export default {
       }
 
       sendObject.purchase.bought =
-        parseInt(this.blue) +
-        parseInt(this.red) +
-        parseInt(this.green) +
-        parseInt(this.yellow);
+        parseInt(colors.blue) +
+        parseInt(colors.red) +
+        parseInt(colors.green) +
+        parseInt(colors.yellow);
       const stolen = sendObject.purchase.bought - parseInt(this.payed) / 10;
       if (isNaN(stolen) || stolen == undefined) {
         alert("Betalt må registreres");
@@ -374,7 +370,7 @@ export default {
       let localColors = localStorage.getItem("colorValues");
       if (localColors) {
         localColors = localColors.split(",");
-        this.lotteryColorBoxes.forEach((color, i) => {
+        this.lotteryColors.forEach((color, i) => {
           const localColorValue = Number(localColors[i]);
           color.value = localColorValue == 0 ? null : localColorValue;
         });
@@ -385,14 +381,14 @@ export default {
       localStorage.setItem("winners", JSON.stringify(this.winners));
       localStorage.setItem(
         "colorValues",
-        this.lotteryColorBoxes.map(color => Number(color.value))
+        this.lotteryColors.map(color => Number(color.value))
       );
       window.removeEventListener("unload", this.setWinnerdataToStorage);
     },
     resetWinnerDataInStorage() {
       this.winners = [];
       this.fetchAndAddPrelotteryWines().then(resp => (this.winners = resp));
-      this.lotteryColorBoxes.map(color => (color.value = null));
+      this.lotteryColors.map(color => (color.value = null));
       window.location.reload();
     }
   }

src/components/VinlottisPage.vue

@@ -52,6 +52,7 @@ import Banner from "@/ui/Banner";
 import Wines from "@/ui/Wines";
 import Vipps from "@/ui/Vipps";
 import Countdown from "@/ui/Countdown";
+import { prelottery } from "@/api";
 
 export default {
   components: {
@@ -67,7 +68,6 @@ export default {
   data() {
     return {
       hardStart: false,
-      todayExists: false,
       pushAllowed: false
     };
   },
@@ -81,21 +81,17 @@ export default {
         !this.pushAllowed ||
         localStorage.getItem("push") == null
       );
+    },
+    todayExists: () => {
+      return prelottery()
+        .then(wines => wines.length > 0)
+        .catch(() => false)
     }
   },
   mounted() {
     this.$on("push-allowed", () => {
       this.pushAllowed = true;
     });
-    fetch("/api/wines/prelottery")
-      .then(wines => wines.json())
-      .then(wines => {
-        if (wines.length > 0) {
-          this.todayExists = true;
-        } else {
-          this.todayExists = false;
-        }
-      });
     if (window.location.hostname == "localhost") {
       return;
     }

src/components/VirtualLotteryPage.vue

@@ -15,6 +15,27 @@
       <h2>Send vipps med melding "Vinlotteri" for å bli registrert til virtuelt lotteri</h2>
       <p>Send gjerne melding om fargeønsker også</p>
     </div>
+
+    <router-link to="/dagens" class="generate-link" v-if="todayExists">
+      Lurer du på dagens fangst?
+      <span class="subtext generator-link">Se her</span>
+    </router-link>
+
+    <hr>
+
+    <h2>Live oversikt av lodd kjøp i dag</h2>
+    <div class="colors">
+      <div
+        v-for="color in Object.keys(ticketsBought)"
+        :class="color + ' colors-box'"
+        :key="color"
+      >
+        <div class="colors-overlay">
+          <p>{{ ticketsBought[color] }} kjøpt</p>
+        </div>
+      </div>
+    </div>
+
     <WinnerDraw
       :currentWinnerDrawn="currentWinnerDrawn"
       :currentWinner="currentWinner"
@@ -39,7 +60,7 @@
 
 <script>
 import { page, event } from "vue-analytics";
-import { attendees, winners, getChatHistory } from "@/api";
+import { attendees, winners, getChatHistory, prelottery } from "@/api";
 import Chat from "@/ui/Chat";
 import Vipps from "@/ui/Vipps";
 import Attendees from "@/ui/Attendees";
@@ -62,7 +83,8 @@ export default {
       usernameAccepted: false,
       username: null,
       wasDisconnected: false,
-      emitUsernameOnConnect: false
+      emitUsernameOnConnect: false,
+      ticketsBought: {}
     };
   },
   created() {
@@ -124,6 +146,13 @@ export default {
     this.socket.disconnect();
     this.socket = null;
   },
+  computed: {
+    todayExists: () => {
+      return prelottery()
+        .then(wines => wines.length > 0)
+        .catch(() => false)
+    }
+  },
   methods: {
     setUsername: function(username) {
       this.username = username;
@@ -147,6 +176,14 @@ export default {
       let response = await attendees();
       if (response) {
         this.attendees = response;
+        const addValueOfListObjectByKey = (list, key) => list.map(object => object[key]).reduce((a, b) => a + b);
+
+        this.ticketsBought = {
+          red: addValueOfListObjectByKey(response, "red"),
+          blue: addValueOfListObjectByKey(response, "blue"),
+          green: addValueOfListObjectByKey(response, "green"),
+          yellow: addValueOfListObjectByKey(response, "yellow"),
+        }
       }
       this.attendeesFetched = true;
     },
@@ -157,6 +194,183 @@ export default {
 };
 </script>
 
+<!-- TODO move link styling to global with more generic name -->
+<style lang="scss" scoped>
+@import "../styles/global.scss";
+@import "../styles/variables.scss";
+@import "../styles/media-queries.scss";
+.generate-link {
+  color: #333333;
+  text-decoration: none;
+  display: block;
+  width: 100vw;
+  text-align: center;
+  margin-bottom: 0px;
+
+  @include mobile {
+    width: 60vw;
+    margin: auto;
+  }
+}
+
+.vipps-image {
+  width: 250px;
+  margin: auto;
+  display: block;
+  margin-top: 30px;
+}
+
+.generator-link {
+  font-weight: bold;
+  border-bottom: 1px solid #ff5fff;
+}
+</style>
+
+<style lang="scss" scoped>
+@import "../styles/global.scss";
+@import "../styles/variables.scss";
+@import "../styles/media-queries.scss";
+.color-selector {
+  margin-bottom: 0.65rem;
+  margin-right: 1rem;
+
+  @include desktop {
+    min-width: 175px;
+  }
+
+  @include mobile {
+    max-width: 25vw;
+  }
+
+  .active {
+    border: 2px solid unset;
+
+    &.green {
+      border-color: $green;
+    }
+    &.blue {
+      border-color: $dark-blue;
+    }
+    &.red {
+      border-color: $red;
+    }
+    &.yellow {
+      border-color: $dark-yellow;
+    }
+  }
+
+  button {
+    border: 2px solid transparent;
+    display: inline-flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    height: 2.5rem;
+    width: 2.5rem;
+
+    // disable-dbl-tap-zoom
+    touch-action: manipulation;
+
+    @include mobile {
+      margin: 2px;
+    }
+
+    &.green {
+      background: #c8f9df;
+    }
+    &.blue {
+      background: #d4f2fe;
+    }
+    &.red {
+      background: #fbd7de;
+    }
+    &.yellow {
+      background: #fff6d6;
+    }
+  }
+}
+
+.colors {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 1400px;
+  margin: 0 auto;
+
+  @include mobile {
+    margin: 1.8rem auto 0;
+  }
+
+  .label-div {
+    margin-top: 0.5rem;
+    width: 100%;
+  }
+}
+
+.colors-box {
+  width: 150px;
+  height: 150px;
+  margin: 20px;
+  -webkit-mask-image: url(/../../public/assets/images/lodd.svg);
+  background-repeat: no-repeat;
+  mask-image: url(/../../public/assets/images/lodd.svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @include mobile {
+    width: 120px;
+    height: 120px;
+    margin: 10px;
+  }
+}
+
+.colors-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding: 0 0.25rem;
+  position: relative;
+
+  p {
+    width: 70%;
+    border: 0;
+    padding: 0;
+    font-size: 1.5rem;
+    height: unset;
+    max-height: unset;
+
+    @include mobile {
+      font-size: 1.3rem;
+    }
+  }
+}
+
+.green,
+.green .colors-overlay > input {
+  background-color: $light-green;
+  color: $green;
+}
+
+.blue,
+.blue .colors-overlay > input {
+  background-color: $light-blue;
+  color: $blue;
+}
+
+.yellow,
+.yellow .colors-overlay > input {
+  background-color: $light-yellow;
+  color: $yellow;
+}
+
+.red,
+.red .colors-overlay > input {
+  background-color: $light-red;
+  color: $red;
+}
+</style>
+
 <style lang="scss" scoped>
 @import "../styles/global.scss";
 @import "../styles/variables.scss";

src/styles/global.scss

@@ -74,13 +74,15 @@ body {
     margin-right: 2rem;
   }
 
-  @include mobile &:not(.row) {
-    flex-direction: column;
-    align-items: center;
+  @include mobile {
+    &:not(.row) {
+      flex-direction: column;
+      align-items: center;
 
-    > *:not(:last-child) {
-      margin-right: unset;
-      margin-bottom: .75rem;
+      > *:not(:last-child) {
+        margin-right: unset;
+        margin-bottom: .75rem;
+      }
     }
   }
 }

src/ui/Attendees.vue

@@ -2,7 +2,7 @@
   <div class="attendees" v-if="attendees.length > 0">
     <h2>Deltakere ({{ attendees.length }})</h2>
     <div class="attendees-container" ref="attendees">
-      <div class="attendee" v-for="(attendee, index) in attendees" :key="index">
+      <div class="attendee" v-for="(attendee, index) in flipList(attendees)" :key="index">
         <span class="attendee-name">{{ attendee.name }}</span>
         <div class="red-ballot ballot-element small">{{ attendee.red }}</div>
         <div class="blue-ballot ballot-element small">{{ attendee.blue }}</div>
@@ -20,13 +20,18 @@ export default {
       type: Array
     }
   },
+  methods: {
+    flipList: (list) => list.slice().reverse()
+  },
   watch: {
     attendees: {
       deep: true,
       handler() {
-        setTimeout(() => {
-          this.$refs.attendees.scrollTop = this.$refs.attendees.scrollHeight;
-        }, 50);
+        if (this.$refs && this.$refs.history) {
+          setTimeout(() => {
+            this.$refs.attendees.scrollTop = this.$refs.attendees.scrollHeight;
+          }, 50);
+        }
       }
     }
   }

src/ui/Chat.vue

@@ -53,9 +53,11 @@ export default {
   watch: {
     chatHistory: {
       handler() {
-        setTimeout(() => {
-          this.$refs.history.scrollTop = this.$refs.history.scrollHeight;
-        }, 10);
+        if (this.$refs && this.$refs.history) {
+          setTimeout(() => {
+            this.$refs.history.scrollTop = this.$refs.history.scrollHeight;
+          }, 10);
+        }
       },
       deep: true
     }