Much simpler using prizeDistribution endpoints.

frontend/components/WinnerPage.vue

@@ -1,21 +1,23 @@
 <template>
-  <div class="container">
-    <div v-if="!posted">
-      <h1 v-if="name">Gratulerer {{name}}!</h1>
+  <div>
+    <div v-if="!posted" class="container">
+      <h1 v-if="name">Gratulerer {{ name }}!</h1>
+
       <p v-if="name">
         Her er valgene for dagens lotteri, du har 10 minutter å velge etter du fikk SMS-en.
       </p>
-      <h1 v-else-if="!turn && !existing" class="sent-container">Finner ikke noen vinner her..</h1>
+
+      <h1 v-else-if="!turn && wines.length" class="sent-container">Finner ikke noen vinner her..</h1>
+
       <h1 v-else-if="!turn" class="sent-container">Du må vente på tur..</h1>
+
       <div class="wines-container" v-if="name">
         <Wine :wine="wine" v-for="wine in wines" :key="wine">
-          <button
-            @click="chooseWine(wine.name)"
-            class="vin-button select-wine"
-          >Velg denne vinnen</button>
+          <button @click="chooseWine(wine)" class="vin-button select-wine">Velg denne vinnen</button>
         </Wine>
       </div>
     </div>
+
     <div v-else-if="posted" class="sent-container">
       <h1>Valget ditt er sendt inn!</h1>
       <p>Du får mer info om henting snarest!</p>
@@ -24,15 +26,13 @@
 </template>
 
 <script>
-import { getAmIWinner, postWineChosen, prelottery } from "@/api";
 import Wine from "@/ui/Wine";
+
 export default {
   components: { Wine },
   data() {
     return {
       id: null,
-      existing: false,
-      fetched: false,
       turn: false,
       name: null,
       wines: [],
@@ -40,30 +40,43 @@ export default {
     };
   },
   async mounted() {
-    this.id = this.$router.currentRoute.params.id;
+    const { id } = this.$router.currentRoute.params;
 
-    let winnerObject = await getAmIWinner(this.id);
-    this.fetched = true;
-    if (!winnerObject || !winnerObject.existing) {
-      console.error("non existing", winnerObject);
-      return;
-    }
-    this.existing = true;
-    if (winnerObject.existing && !winnerObject.turn) {
-      console.error("not your turn yet", winnerObject);
-      return;
-    }
-    this.turn = true;
-    this.name = winnerObject.name;
-    this.wines = await prelottery();
+    this.id = id;
+    this.getPrizes(id);
   },
   methods: {
-    chooseWine: async function(name) {
-      let posted = await postWineChosen(this.id, name);
-      console.log("response", posted);
-      if (posted.success) {
-        this.posted = true;
+    getPrizes(id) {
+      fetch(`/api/lottery/prize-distribution/prizes/${id}`)
+        .then(resp => resp.json())
+        .then(response => {
+          if (response.success) {
+            this.wines = response.wines;
+            this.name = response.winner.name;
+            this.turn = true;
           }
+        });
+    },
+    chooseWine(wine) {
+      const options = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ wine })
+      };
+
+      fetch(`/api/lottery/prize-distribution/prize/${this.id}`, options)
+        .then(resp => resp.json())
+        .then(response => {
+          if (response.success) {
+            this.$toast.info({ title: `Valgt vin: ${wine.name}` });
+            this.posted = true;
+          } else {
+            this.$toast.error({
+              title: "Klarte ikke velge vin :(",
+              description: response.message
+            });
+          }
+        });
     }
   }
 };
@@ -74,9 +87,19 @@ export default {
 .container {
   display: flex;
   justify-content: center;
+  align-items: center;
+  flex-direction: column;
   margin-top: 2rem;
   padding: 2rem;
+  width: 80%;
+  margin: 0 auto;
+  max-width: 2000px;
 }
+
+.wines-container {
+  width: 100%;
+}
+
 .sent-container {
   width: 100%;
   height: 90vh;
@@ -90,11 +113,4 @@ export default {
 .select-wine {
   margin-top: 1rem;
 }
-
-.wines-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  align-items: flex-start;
-}
 </style>