Merge pull request #21 from KevinMidboe/refactor/routeSeparation

Refactor/route separation

src/Vinlottis.vue

@@ -52,6 +52,7 @@ export default {
 
 <style lang="scss">
 @import "./styles/global.scss";
+@import "./styles/positioning.scss";
 @font-face {
   font-family: "knowit";
   font-weight: 600;

src/api.js

@@ -42,8 +42,22 @@ const prelottery = () => {
   return fetch(url.href).then(resp => resp.json());
 };
 
-const log = sendObject => {
-  const url = new URL("/api/log", BASE_URL);
+const sendLottery = sendObject => {
+  const url = new URL("/api/lottery", BASE_URL);
+
+  const options = {
+    headers: {
+      "Content-Type": "application/json"
+    },
+    method: "POST",
+    body: JSON.stringify(sendObject)
+  };
+
+  return fetch(url.href, options).then(resp => resp.json());
+};
+
+const sendLotteryWinners = sendObject => {
+  const url = new URL("/api/lottery/winners", BASE_URL);
 
   const options = {
     headers: {
@@ -57,7 +71,7 @@ const log = sendObject => {
 };
 
 const addAttendee = sendObject => {
-  const url = new URL("/api/virtual/attendee", BASE_URL);
+  const url = new URL("/api/virtual/attendee/add", BASE_URL);
 
   const options = {
     headers: {
@@ -71,31 +85,31 @@ const addAttendee = sendObject => {
 };
 
 const getVirtualWinner = () => {
-  const url = new URL("/api/virtual/winner", BASE_URL);
+  const url = new URL("/api/virtual/winner/draw", BASE_URL);
 
   return fetch(url.href).then(resp => resp.json());
 };
 
 const attendeesSecure = () => {
-  const url = new URL("/api/virtual/attendees/secure", BASE_URL);
+  const url = new URL("/api/virtual/attendee/all/secure", BASE_URL);
 
   return fetch(url.href).then(resp => resp.json());
 };
 
 const winnersSecure = () => {
-  const url = new URL("/api/virtual/winners/secure", BASE_URL);
+  const url = new URL("/api/virtual/winner/all/secure", BASE_URL);
 
   return fetch(url.href).then(resp => resp.json());
 };
 
 const winners = () => {
-  const url = new URL("/api/virtual/winners", BASE_URL);
+  const url = new URL("/api/virtual/winner/all", BASE_URL);
 
   return fetch(url.href).then(resp => resp.json());
 };
 
 const deleteWinners = () => {
-  const url = new URL("/api/virtual/winners", BASE_URL);
+  const url = new URL("/api/virtual/winner/all", BASE_URL);
 
   const options = {
     headers: {
@@ -108,7 +122,7 @@ const deleteWinners = () => {
 };
 
 const deleteAttendees = () => {
-  const url = new URL("/api/virtual/attendees", BASE_URL);
+  const url = new URL("/api/virtual/attendee/all", BASE_URL);
 
   const options = {
     headers: {
@@ -121,7 +135,7 @@ const deleteAttendees = () => {
 };
 
 const attendees = () => {
-  const url = new URL("/api/virtual/attendees", BASE_URL);
+  const url = new URL("/api/virtual/attendee/all", BASE_URL);
 
   return fetch(url.href).then(resp => resp.json());
 };
@@ -141,7 +155,7 @@ const logWines = wines => {
 };
 
 const wineSchema = () => {
-  const url = new URL("/api/log/schema", BASE_URL);
+  const url = new URL("/api/wineinfo/schema", BASE_URL);
 
   return fetch(url.href).then(resp => resp.json());
 };
@@ -217,17 +231,20 @@ const getChatHistory = (skip = null, take = null) => {
 
 const finishedDraw = () => {
   const url = new URL("/api/virtual/finish", BASE_URL);
+  const options = {
+    method: 'POST'
+  }
 
-  return fetch(url.href).then(resp => resp.json());
+  return fetch(url.href, options).then(resp => resp.json());
 };
 
 const getAmIWinner = id => {
-  const url = new URL(`/api/virtual-registration/${id}`, BASE_URL);
+  const url = new URL(`/api/winner/${id}`, BASE_URL);
   return fetch(url.href).then(resp => resp.json());
 };
 
 const postWineChosen = (id, wineName) => {
-  const url = new URL(`/api/virtual-registration/${id}`, BASE_URL);
+  const url = new URL(`/api/winner/${id}`, BASE_URL);
   const options = {
     headers: {
       "Content-Type": "application/json"
@@ -265,7 +282,8 @@ export {
   chartWinsByColor,
   chartPurchaseByColor,
   prelottery,
-  log,
+  sendLottery,
+  sendLotteryWinners,
   logWines,
   wineSchema,
   barcodeToVinmonopolet,

src/components/RegisterPage.vue

@@ -78,6 +78,10 @@
       </div>
     </div>
 
+    <div class="button-container">
+      <button class="vin-button" @click="submitLottery">Send inn lotteri</button>
+    </div>
+
     <h3>Vinnere</h3>
     <a class="wine-link" @click="fetchColorsAndWinners()">Refresh data fra virtuelt lotteri</a>
     <div class="winner-container" v-if="winners.length > 0">
@@ -130,8 +134,8 @@
         </div>
       </wine>
 
-      <div class="button-container">
-        <button class="vin-button" @click="sendInfo">Send inn vinnere</button>
+      <div class="button-container column">
+        <button class="vin-button" @click="submitLotteryWinners">Send inn vinnere</button>
         <button class="vin-button" @click="resetWinnerDataInStorage">Reset local wines</button>
       </div>
     </div>
@@ -142,9 +146,11 @@
 
 <script>
 import eventBus from "@/mixins/EventBus";
+import { dateString } from '@/utils'
 import {
   prelottery,
-  log,
+  sendLotteryWinners,
+  sendLottery,
   logWines,
   wineSchema,
   winnersSecure,
@@ -306,7 +312,7 @@ export default {
     },
     sendWines: async function() {
       let response = await logWines(this.wines);
-      if (response == true) {
+      if (response.success == true) {
         alert("Sendt!");
         window.location.reload();
       } else {
@@ -324,7 +330,7 @@ export default {
         }
       });
     },
-    sendInfo: async function(event) {
+    submitLottery: 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,
@@ -333,48 +339,63 @@ export default {
       };
 
       let sendObject = {
-        purchase: {
-          date: new Date(),
+        lottery: {
+          date: dateString(new Date()),
           ...colors
-        },
-        winners: this.winners
+        }
       };
 
-      if (sendObject.purchase.red == undefined) {
+      if (sendObject.lottery.red == undefined) {
         alert("Rød må defineres");
         return;
       }
-      if (sendObject.purchase.green == undefined) {
+      if (sendObject.lottery.green == undefined) {
         alert("Grønn må defineres");
         return;
       }
-      if (sendObject.purchase.yellow == undefined) {
+      if (sendObject.lottery.yellow == undefined) {
         alert("Gul må defineres");
         return;
       }
-      if (sendObject.purchase.blue == undefined) {
+      if (sendObject.lottery.blue == undefined) {
         alert("Blå må defineres");
         return;
       }
 
-      sendObject.purchase.bought =
+      sendObject.lottery.bought =
         parseInt(colors.blue) +
         parseInt(colors.red) +
         parseInt(colors.green) +
         parseInt(colors.yellow);
-      const stolen = sendObject.purchase.bought - parseInt(this.payed) / 10;
+      const stolen = sendObject.lottery.bought - parseInt(this.payed) / 10;
       if (isNaN(stolen) || stolen == undefined) {
         alert("Betalt må registreres");
         return;
       }
-      sendObject.purchase.stolen = stolen;
+      sendObject.lottery.stolen = stolen;
 
-      if (sendObject.winners.length == 0) {
+      let response = await sendLottery(sendObject);
+      if (response == true) {
+        alert("Sendt!");
+        window.location.reload();
+      } else {
+        alert(response.message || "Noe gikk galt under innsending");
+      }
+    },
+    submitLotteryWinners: async function(event) {
+      let sendObject = {
+        lottery: {
+          date: dateString(new Date()),
+          winners: this.winners
+        }
+      }
+
+      if (sendObject.lottery.winners.length == 0) {
         alert("Det må være med vinnere");
         return;
       }
-      for (let i = 0; i < sendObject.winners.length; i++) {
-        let currentWinner = sendObject.winners[i];
+      for (let i = 0; i < sendObject.lottery.winners.length; i++) {
+        let currentWinner = sendObject.lottery.winners[i];
 
         if (currentWinner.name == undefined || currentWinner.name == "") {
           alert("Navn må defineres");
@@ -386,7 +407,7 @@ export default {
         }
       }
 
-      let response = await log(sendObject);
+      let response = await sendLotteryWinners(sendObject);
       if (response == true) {
         alert("Sendt!");
         window.location.reload();
@@ -613,7 +634,7 @@ hr {
   flex-wrap: wrap;
   justify-content: center;
   max-width: 1400px;
-  margin: 3rem auto 0;
+  margin: 3rem auto 1rem;
 
   @include mobile {
     margin: 1.8rem auto 0;

src/components/VirtualLotteryRegistrationPage.vue

@@ -106,6 +106,8 @@
     </div>
     <br />
     <button class="vin-button" @click="sendAttendee">Send deltaker</button>
+
+    <TextToast v-if="showToast" :text="toastText" v-on:closeToast="showToast = false" />
   </div>
 </template>
 
@@ -119,13 +121,16 @@ import {
   winnersSecure,
   deleteWinners,
   deleteAttendees,
-  finishedDraw
+  finishedDraw,
+  prelottery
 } from "@/api";
+import TextToast from "@/ui/TextToast";
 import RaffleGenerator from "@/ui/RaffleGenerator";
 
 export default {
   components: {
-    RaffleGenerator
+    RaffleGenerator,
+    TextToast
   },
   data() {
     return {
@@ -144,7 +149,9 @@ export default {
       drawTime: 20,
       currentWinners: 1,
       numberOfWinners: 4,
-      socket: null
+      socket: null,
+      toastText: undefined,
+      showToast: false
     };
   },
   mounted() {
@@ -168,13 +175,21 @@ export default {
     });
 
     window.finishedDraw = finishedDraw;
-    console.log("here");
   },
   methods: {
     setWithRandomColors(colors) {
       Object.keys(colors).forEach(color => (this[color] = colors[color]));
     },
     sendAttendee: async function() {
+      if (this.red == 0 && this.blue == 0 && this.green == 0 && this.yellow == 0) {
+        alert('Ingen farger valgt!')
+        return;
+      }
+      if (this.name == 0 && this.phoneNumber) {
+        alert('Ingen navn eller tlf satt!')
+        return;
+      }
+
       let response = await addAttendee({
         name: this.name,
         phoneNumber: this.phoneNumber,
@@ -184,10 +199,15 @@ export default {
         yellow: this.yellow,
         ballots: this.ballots
       });
+
       if (response == true) {
-        alert("Sendt inn deltaker!");
+        this.toastText = `Sendt inn deltaker: ${this.name}`;
+        this.showToast = true;
+
         this.name = null;
         this.phoneNumber = null;
+        this.yellow = 0;
+        this.green = 0;
         this.red = 0;
         this.blue = 0;
 
@@ -208,6 +228,7 @@ export default {
       if (window.confirm("Er du sikker på at du vil trekke vinnere?")) {
         this.drawingWinner = true;
         let response = await getVirtualWinner();
+
         if (response) {
           if (this.currentWinners < this.numberOfWinners) {
             this.countdown();

src/components/WinnerPage.vue

@@ -62,11 +62,9 @@ export default {
     this.name = winnerObject.name;
     const _wines = await fetch("/api/wines/prelottery");
     this.wines = await _wines.json();
-    console.log(this.wines);
   },
   methods: {
     chosenWine: async function(name) {
-      console.log("chosen a wine");
       let posted = await postWineChosen(this.id, name);
       console.log("response", posted);
       if (posted.success) {
@@ -82,7 +80,8 @@ export default {
 .container {
   display: flex;
   justify-content: center;
-  margin-top: 4rem;
+  margin-top: 2rem;
+  padding: 2rem;
 }
 .sent-container {
   width: 100%;

src/styles/global.scss

@@ -74,6 +74,16 @@ body {
     margin-right: 2rem;
   }
 
+  &.column {
+    flex-direction: column;
+    align-items: center;
+
+    > * {
+      margin-right: unset;
+      margin-bottom: 1rem;
+    }
+  }
+
   @include mobile {
     &:not(.row) {
       flex-direction: column;
@@ -108,6 +118,7 @@ textarea {
   border: 0;
   width: fit-content;
   font-size: 1.3rem;
+  line-height: 1.3rem;
   height: 4rem;
   max-height: 4rem;
   cursor: pointer;

src/styles/positioning.scss

@@ -0,0 +1,7 @@
+.flex {
+  display: flex;
+
+  &-column {
+    flex-direction: column;
+  }
+}

src/ui/Wine.vue

@@ -22,6 +22,7 @@
           :href="wine.vivinoLink"
           class="wine-link"
         >Les mer på {{ hostname(wine.vivinoLink) }}</a>
+
         <button
           v-if="winner"
           @click="choseWine(wine.name)"
@@ -174,4 +175,8 @@ a:visited {
     color: $red;
   }
 }
+
+.vin-button {
+  margin-top: 1rem;
+}
 </style>

src/ui/Winners.vue

@@ -37,6 +37,7 @@ h2 {
   flex-flow: wrap;
   justify-content: space-around;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .ballot-element {

src/utils.js

@@ -0,0 +1,12 @@
+ 
+const dateString = (date) => {
+  const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date)
+  const mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(date)
+  const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date)
+
+  return `${ye}-${mo}-${da}`
+}
+
+module.exports = {
+  dateString
+}

src/vinlottis-init.js

@@ -1,6 +1,6 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import { routes } from "@/routes/vinlottisRouter";
+import { routes } from "@/router.js";
 import Vinlottis from "@/Vinlottis";
 import VueAnalytics from "vue-analytics";