Register page now uses api functions and can scan from vinmonopolet qr codes. Re-did formatting and styling on page.

api/wineinfo.js

@@ -0,0 +1,31 @@
+const express = require("express");
+const path = require("path");
+const router = express.Router();
+const fetch = require('node-fetch')
+
+const mustBeAuthenticated = require(path.join(__dirname + "/../middleware/mustBeAuthenticated"))
+
+router.use((req, res, next) => {
+  next();
+});
+
+router.route("/wineinfo/:ean").get(async (req, res) => {
+  const vinmonopoletResponse = await fetch("https://app.vinmonopolet.no/vmpws/v2/vmp/products/barCodeSearch/" + req.params.ean)
+    .then(resp => resp.json())
+
+  if (vinmonopoletResponse.errors != null) {
+    return vinmonopoletResponse.errors.map(error => {
+      if (error.type == "UnknownProductError") {
+        return res.status(404).json({
+          message: error.message
+        })
+      } else {
+        return next()
+      }
+    })
+  }
+
+  res.send(vinmonopoletResponse);
+});
+
+module.exports = router;

src/api.js

@@ -0,0 +1,160 @@
+const BASE_URL = __APIURL__ || "http://localhost:30030/";
+
+const statistics = () => {
+  const url = new URL('/api/purchase/statistics', BASE_URL)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+}
+
+const colorStatistics = () => {
+  const url = new URL("/api/purchase/statistics/color", BASE_URL)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+}
+
+const highscoreStatistics = () => {
+  const url = new URL("/api/highscore/statistics", BASE_URL)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+}
+
+const overallWineStatistics = () => {
+  const url = new URL("/api/wines/statistics/overall", BASE_URL)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+}
+
+
+const prelottery = () => {
+  const url = new URL("/api/wines/prelottery", BASE_URL)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+}
+
+const log = (sendObject) => {
+  const url = new URL("/api/log", 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 logWines = (wines) => {
+  const url = new URL("/api/log/wines", BASE_URL)
+
+  const options = {
+    headers: {
+      "Content-Type": "application/json"
+    },
+    method: "POST",
+    body: JSON.stringify(wines)
+  }
+
+  return fetch(url.href, options)
+    .then(resp => resp.json())
+}
+
+const wineSchema = () => {
+  const url = new URL("/api/log/schema", BASE_URL)
+
+  return fetch(url.href)
+    .then(resp => resp.json())
+}
+
+const barcodeToVinmonopolet = (id) => {
+  const url = new URL("/api/wineinfo/" + id, BASE_URL)
+
+  return fetch(url.href)
+    .then(async (resp) => {
+      if (!resp.ok) {
+        if (resp.status == 404) {
+          throw await resp.json()
+        }
+      } else {
+        return resp.json()
+      }
+    })
+}
+
+const handleErrors = async (resp) => {
+  if ([400, 409].includes(resp.status)) {
+    throw await resp.json()
+  } else {
+    console.error("Unexpected error occured when login/register user:", resp)
+    throw await resp.json()
+  }
+}
+
+const login = (username, password) => {
+  const url = new URL("/login", BASE_URL)
+  const options = {
+    headers: {
+      "Content-Type": "application/json"
+    },
+    method: "POST",
+    redirect: "follow",
+    body: JSON.stringify({ username, password })
+  }
+
+  return fetch(url.href, options)
+    .then(resp => {
+      if (resp.ok) {        
+        if (resp.bodyUsed)
+          return resp.json()
+        else
+          return resp
+      } else {
+        return handleErrors(resp)
+      }
+    })
+}
+
+const register = (username, password) => {
+  const url = new URL("/register", BASE_URL)
+  const options = {
+    headers: {
+      "Content-Type": "application/json"
+    },
+    method: "POST",
+    redirect: 'follow',
+    body: JSON.stringify({ username, password })
+  }
+
+  return fetch(url.href, options)
+    .then(resp => {
+      if (resp.ok) {
+        if (resp.bodyUsed)
+          return resp.json()
+        else
+          return resp
+      } else {
+        return handleErrors(resp)
+      }
+    })
+}
+
+export {
+  statistics,
+  colorStatistics,
+  highscoreStatistics,
+  overallWineStatistics,
+  prelottery,
+  log,
+  logWines,
+  wineSchema,
+  barcodeToVinmonopolet,
+  login,
+  register
+}

src/components/RegisterPage.vue

@@ -1,382 +1,439 @@
 <template>
-  <div>
+  <div class="page-container">
     <h1>Registrering</h1>
     <div class="notification-element">
       <div class="label-div">
         <label for="notification">Push-melding</label>
-        <input id="notification" type="text" v-model="pushMessage" />
+        <textarea id="notification" type="text" rows="3" v-model="pushMessage" placeholder="Push meldingtekst" />
       </div>
     </div>
     <div class="button-container">
-      <button @click="sendPush">Send push</button>
+      <button class="vin-button" @click="sendPush">Send push</button>
     </div>
-    <div class="color-container">
-      <div class="label-div">
-        <label for="blue">Blå</label>
-        <input id="blue" type="number" v-model="blue" />
-      </div>
-      <div class="label-div">
-        <label for="red">Rød</label>
-        <input id="red" type="number" v-model="red" />
-      </div>
-      <div class="label-div">
-        <label for="green">Grønn</label>
-        <input id="green" type="number" v-model="green" />
-      </div>
-      <div class="label-div">
-        <label for="yellow">Gul</label>
-        <input id="yellow" type="number" v-model="yellow" />
-      </div>
-      <div class="label-div">
-        <label for="yellow">Kjøpt for sum</label>
-        <input id="yellow" type="number" v-model="payed" />
-      </div>
-    </div>
-    <div class="button-container">
-      <button @click="addWinner">Legg til en vinner</button>
-      <button @click="sendInfo">Send inn</button>
-    </div>
-    <div class="winner-container" v-if="winners.length > 0">
-      Vinnere
-      <div v-for="winner in winners" class="winner-element">
-        <hr />
-        <div class="winnner-container-inner">
-          <div class="input-container">
-            <div class="wine-image">
-              <img :src="winner.wine.image" />
-            </div>
-            <div class="label-div">
-              <input type="text" v-model="winner.name" placeholder="Navn vinner" />
-            </div>
-            <div class="label-div">
-              <div class="color-selector">
-                <button
-                  class="blue"
-                  :class="{'active': winner.color == 'blue' }"
-                  @click="updateColorForWinner(winner, 'blue')"
-                ></button>
-                <button
-                  class="red"
-                  :class="{'active': winner.color == 'red' }"
-                  @click="updateColorForWinner(winner, 'red')"
-                ></button>
-                <button
-                  class="green"
-                  :class="{'active': winner.color == 'green' }"
-                  @click="updateColorForWinner(winner, 'green')"
-                ></button>
-                <button
-                  class="yellow"
-                  :class="{'active': winner.color == 'yellow' }"
-                  @click="updateColorForWinner(winner, 'yellow')"
-                ></button>
-              </div>
 
-              <span
+    <hr />
-                class="color-selected"
+
-              >Selected color: {{ winner.color ? winner.color : '(none)' }}</span>
+    <h2 id="addwine-title">Prelottery</h2>
-            </div>
+    
-            <div class="label-div">
+    <ScanToVinmonopolet @wine="wineFromVinmonopoletScan" v-if="showCamera"/>
-              <input type="text" v-model="winner.wine.name" placeholder="Vin-navn" />
+
-            </div>
+    <div class="button-container">
-            <div class="label-div">
+      <button class="vin-button" @click="showCamera = !showCamera">
-              <input type="text" v-model="winner.wine.vivinoLink" placeholder="Vivino-link" />
+        {{ showCamera ? "Skjul camera" : "Legg til vin med camera" }}
-            </div>
+      </button>
-            <div class="label-div">
+      
-              <input type="text" v-model="winner.wine.rating" placeholder="Rating" />
+      <button class="vin-button" @click="addWine">Legg til en vin manuelt</button>
-            </div>
+    </div>
+
+    <div class="wines-container" v-if="wines.length > 0">
+      <wine v-for="wine in wines" :wine="wine">
+        <div class="button-container row">
+          <button class="vin-button" @click="editWine = amIBeingEdited(wine) ? false : wine">
+            {{ amIBeingEdited(wine) ? "Lukk" : "Rediger" }}
+          </button>
+          <button class="red vin-button" @click="deleteWine(wine)">Slett</button>
+        </div>
+
+        <div v-if="amIBeingEdited(wine)">
+          <div class="edit-div" v-for="key in Object.keys(wine)">
+            <label>{{ key }}</label>
+            <input type="text" v-model="wine[key]" :placeholder="key" />
           </div>
         </div>
+      </wine>
+    </div>
+    <div class="button-container" v-if="wines.length > 0">  
+      <button class="vin-button" @click="sendWines">Send inn viner</button>
+    </div>
+
+    <hr />
+
+    <h2>Lottery</h2>
+
+    <h3>Legg til lodd kjøpt</h3>
+    <div class="colors">
+      <div v-for="color in lotteryColorBoxes" :class="color.css + ' colors-box'">
+       <div class="colors-overlay">
+          <p>{{ color.name }} kjøpt</p>
+          <input v-model="color.value"
+                 min="0"
+                 :placeholder="0"
+                 type="number" />
+        </div>
+      </div>
+
+      <div class="label-div">
+        <label>Totalt kjøpt for:</label>
+        <input v-model="payed" placeholder="NOK" type="number" :step="price || 1" min="0" />
       </div>
     </div>
-    <div class="button-container">
+
-      <button @click="addWine">Legg til en vin</button>
+    <h3>Vinnere</h3>
-      <button @click="sendWines">Send inn viner</button>
+    <div class="winner-container" v-if="winners.length > 0">
-    </div>
+      <wine v-for="winner in winners" :wine="winner.wine">
-    <div class="wines-container" v-if="wines.length > 0">
+        <div class="winner-element">
-      Viner
+          <div class="color-selector">
-      <div v-for="wine in wines" class="wine-element">
+            <div class="label-div">
-        <hr />
+              <label>Farge vunnet</label>
-        <div class="label-div">
+            </div>
-          <input type="text" v-model="wine.name" placeholder="Vin-navn" />
+            <button
+              class="blue"
+              :class="{'active': winner.color == 'blue' }"
+              @click="winner.color = 'blue'"
+            ></button>
+            <button
+              class="red"
+              :class="{'active': winner.color == 'red' }"
+              @click="winner.color = 'red'"
+            ></button>
+            <button
+              class="green"
+              :class="{'active': winner.color == 'green' }"
+              @click="winner.color = 'green'"
+            ></button>
+            <button
+              class="yellow"
+              :class="{'active': winner.color == 'yellow' }"
+              @click="winner.color = 'yellow'"
+            ></button>
+          </div>
+
+          <div class="label-div">
+            <label for="winner-name">Navn vinner</label>
+            <input id="winner-name" type="text" placeholder="Navn" v-model="winner.name"/>
+          </div>
         </div>
-        <div class="label-div">
+      </wine>
-          <input type="text" v-model="wine.vivinoLink" placeholder="Vivino-link" />
+
-        </div>
+      <div class="button-container">
-        <div class="label-div">
+        <button class="vin-button" @click="sendInfo">Send inn vinnere</button>
-          <input type="text" v-model="wine.id" placeholder="Id" />
+        <button class="vin-button" @click="resetWinnerDataInStorage">Reset local wines</button>
-        </div>
-        <div class="label-div">
-          <input type="text" v-model="wine.image" placeholder="Bilde" />
-        </div>
-        <div class="label-div">
-          <input type="text" v-model="wine.rating" placeholder="Rating" />
-        </div>
-        <hr />
       </div>
     </div>
+
+  <TextToast v-if="showToast"
+             :text="toastText"
+             v-on:closeToast="showToast = false" />
   </div>
 </template>
 
 <script>
-export default {
+  import { prelottery, log, logWines, wineSchema } from "@/api";
-  data() {
+  import TextToast from "@/ui/TextToast";
-    return {
+  import Wine from "@/ui/Wine";
-      red: 0,
+  import ScanToVinmonopolet from "@/ui/ScanToVinmonopolet";
-      blue: 0,
+
-      green: 0,
+  export default {
-      yellow: 0,
+    components: { TextToast, Wine, ScanToVinmonopolet },
-      payed: 0,
+    data() {
-      winners: [],
+      return {
-      wines: [],
+        red: 0,
-      pushMessage: ""
+        blue: 0,
-    };
+        green: 0,
-  },
+        yellow: 0,
-  async mounted() {
+        payed: undefined,
-    const _wines = await fetch("/api/wines/prelottery");
+        winners: [],
-    const wines = await _wines.json();
+        wines: [],
-    for (let i = 0; i < wines.length; i++) {
+        pushMessage: "",
-      let wine = wines[i];
+        toastText: undefined,
-      this.winners.push({
+        showToast: false,
-        name: "",
+        showCamera: false,
-        color: "",
+        editWine: false,
-        wine: {
+        price: __PRICE__
-          name: wine.name,
-          vivinoLink: wine.vivinoLink,
-          rating: wine.rating,
-          image: wine.image,
-          id: wine.id
-        }
-      });
-    }
-  },
-  methods: {
-    sendPush: async function() {
-      let _response = await fetch("/subscription/send-notification", {
-        headers: {
-          "Content-Type": "application/json"
-          // 'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        method: "POST",
-        body: JSON.stringify({ message: this.pushMessage })
-      });
-      let response = await _response.json();
-      if (response) {
-        alert("Sendt!");
-      } else {
-        alert("Noe gikk galt!");
-      }
-    },
-    addWine: function(event) {
-      this.wines.push({
-        name: "",
-        vivinoLink: "",
-        rating: "",
-        id: "",
-        image: ""
-      });
-    },
-    updateColorForWinner(winner, color) {
-      winner.color = winner.color == color ? null : color;
-    },
-    sendWines: async function() {
-      let _response = await fetch("/api/log/wines", {
-        headers: {
-          "Content-Type": "application/json"
-          // 'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        method: "POST",
-        body: JSON.stringify(this.wines)
-      });
-      let response = await _response.json();
-      if (response == true) {
-        alert("Sendt!");
-        window.location.reload();
-      } else {
-        alert("Noe gikk galt under innsending");
-      }
-    },
-    addWinner: function(event) {
-      this.winners.push({
-        name: "",
-        color: "",
-        wine: {
-          name: "",
-          vivinoLink: "",
-          rating: ""
-        }
-      });
-    },
-    sendInfo: async function(event) {
-      let sendObject = {
-        purchase: {
-          date: new Date(),
-          blue: this.blue,
-          red: this.red,
-          yellow: this.yellow,
-          green: this.green
-        },
-        winners: this.winners
       };
+    },
+    created() {
+      this.fetchAndAddPrelotteryWines()
+        .then(this.getWinnerdataFromStorage)
 
-      if (sendObject.purchase.red == undefined) {
+      window.addEventListener("unload", this.setWinnerdataToStorage);
-        alert("Rød må defineres");
+    },
-        return;
+    beforeDestroy() {
-      }
+      this.setWinnerdataToStorage()
-      if (sendObject.purchase.green == undefined) {
+    },
-        alert("Grønn må defineres");
+    computed: {
-        return;
+      lotteryColorBoxes() {
-      }
+        return [{ value: this.blue, name: "Blå", css: "blue" },
-      if (sendObject.purchase.yellow == undefined) {
+        { value: this.red, name: "Rød", css: "red" },
-        alert("Gul må defineres");
+        { value: this.green, name: "Grønn", css: "green" },
-        return;
+        { value: this.yellow, name: "Gul", css: "yellow" }]
-      }
-      if (sendObject.purchase.blue == undefined) {
-        alert("Blå må defineres");
-        return;
       }
+    },
+    methods: {
+      amIBeingEdited(wine) {
+        return this.editWine.id == wine.id && this.editWine.name == wine.name;
+      },
+      async fetchAndAddPrelotteryWines() {
+        const wines = await prelottery()
 
-      sendObject.purchase.bought =
+        for (let i = 0; i < wines.length; i++) {
-        parseInt(this.blue) +
+          let wine = wines[i];
-        parseInt(this.red) +
+          this.winners.push({
-        parseInt(this.green) +
+            name: "",
-        parseInt(this.yellow);
+            color: "",
-      const stolen = sendObject.purchase.bought - parseInt(this.payed) / 10;
+            wine: {
-      if (isNaN(stolen) || stolen == undefined) {
+              name: wine.name,
-        alert("Betalt må registreres");
+              vivinoLink: wine.vivinoLink,
-        return;
+              rating: wine.rating,
-      }
+              image: wine.image,
-      sendObject.purchase.stolen = stolen;
+              id: wine.id
+            }
+          });
+        }
+      },
+      wineFromVinmonopoletScan(wineResponse) {
+        if (this.wines.map(wine => wine.name).includes(wineResponse.name)) {
+          this.toastText = "Vinen er allerede lagt til."
+          this.showToast = true
+          return
+        }
 
-      if (sendObject.winners.length == 0) {
+        this.toastText = "Fant og la til vin:<br>" + wineResponse.name 
-        alert("Det må være med vinnere");
+        this.showToast = true;
-        return;
-      }
-      for (let i = 0; i < sendObject.winners.length; i++) {
-        let currentWinner = sendObject.winners[i];
 
-        if (currentWinner.name == undefined || currentWinner.name == "") {
+        this.wines.unshift(wineResponse)
-          alert("Navn må defineres");
+      },
+      sendPush: async function() {
+        let _response = await fetch("/subscription/send-notification", {
+          headers: {
+            "Content-Type": "application/json"
+            // 'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          method: "POST",
+          body: JSON.stringify({ message: this.pushMessage })
+        });
+        let response = await _response.json();
+        if (response) {
+          alert("Sendt!");
+        } else {
+          alert("Noe gikk galt!");
+        }
+      },
+      addWine: async function(event) {
+        const wine = await wineSchema()
+
+        this.editWine = wine;
+        this.wines.unshift(wine);
+      },
+      deleteWine(deletedWine) {
+        this.wines = this.wines.filter(wine => wine.name != deletedWine.name)
+      },
+      sendWines: async function() {
+        let response = await logWines(this.wines)
+        if (response == true) {
+          alert("Sendt!");
+          window.location.reload();
+        } else {
+          alert("Noe gikk galt under innsending");
+        }
+      },
+      addWinner: function(event) {
+        this.winners.push({
+          name: "",
+          color: "",
+          wine: {
+            name: "",
+            vivinoLink: "",
+            rating: ""
+          }
+        });
+      },
+      sendInfo: async function(event) {
+        let sendObject = {
+          purchase: {
+            date: new Date(),
+            blue: this.blue,
+            red: this.red,
+            yellow: this.yellow,
+            green: this.green
+          },
+          winners: this.winners
+        };
+
+        if (sendObject.purchase.red == undefined) {
+          alert("Rød må defineres");
           return;
         }
-        if (currentWinner.color == undefined || currentWinner.color == "") {
+        if (sendObject.purchase.green == undefined) {
-          alert("Farge må defineres");
+          alert("Grønn må defineres");
+          return;
+        }
+        if (sendObject.purchase.yellow == undefined) {
+          alert("Gul må defineres");
+          return;
+        }
+        if (sendObject.purchase.blue == undefined) {
+          alert("Blå må defineres");
           return;
         }
-      }
 
-      let _response = await fetch("/api/log/", {
+        sendObject.purchase.bought =
-        headers: {
+          parseInt(this.blue) +
-          "Content-Type": "application/json"
+          parseInt(this.red) +
-          // 'Content-Type': 'application/x-www-form-urlencoded',
+          parseInt(this.green) +
-        },
+          parseInt(this.yellow);
-        method: "POST",
+        const stolen = sendObject.purchase.bought - parseInt(this.payed) / 10;
-        body: JSON.stringify(sendObject)
+        if (isNaN(stolen) || stolen == undefined) {
-      });
+          alert("Betalt må registreres");
-      let response = await _response.json();
+          return;
-      if (response == true) {
+        }
-        alert("Sendt!");
+        sendObject.purchase.stolen = stolen;
-        window.location.reload();
+
-      } else {
+        if (sendObject.winners.length == 0) {
-        alert("Noe gikk galt under innsending");
+          alert("Det må være med vinnere");
+          return;
+        }
+        for (let i = 0; i < sendObject.winners.length; i++) {
+          let currentWinner = sendObject.winners[i];
+
+          if (currentWinner.name == undefined || currentWinner.name == "") {
+            alert("Navn må defineres");
+            return;
+          }
+          if (currentWinner.color == undefined || currentWinner.color == "") {
+            alert("Farge må defineres");
+            return;
+          }
+        }
+
+        let response = await log(sendObject)
+        if (response == true) {
+          alert("Sendt!");
+          window.location.reload();
+        } else {
+          alert(response.message || "Noe gikk galt under innsending");
+        }
+      },
+      getWinnerdataFromStorage() {
+        if (this.winners.length == 0) {
+          return
+        }
+        
+        let localWinners = localStorage.getItem("winners");
+        if (localWinners) {
+          localWinners = JSON.parse(localWinners);
+
+          this.winners = this.winners.map(winner => {
+            const localWinnerMatch = localWinners.filter(localWinner => localWinner.wine.name == winner.wine.name || localWinner.wine.id == winner.wine.id)
+
+            if (localWinnerMatch.length > 0) {
+              winner.name = localWinnerMatch[0].name || winner.name
+              winner.color = localWinnerMatch[0].color || winner.name
+            }
+      
+            return winner
+          })
+        }
+
+        let localColors = localStorage.getItem("colorValues");
+        if (localColors) {
+          localColors = localColors.split(",")
+          this.lotteryColorBoxes.forEach((color, i) => {
+            color.value = Number(localColors[i]) || null
+          })
+        }
+      },
+      setWinnerdataToStorage() {
+        console.log("saving localstorage")
+        localStorage.setItem("winners", JSON.stringify(this.winners))
+        localStorage.setItem("colorValues", this.lotteryColorBoxes.map(color => color.value || null))
+        window.removeEventListener("unload", this.setWinnerdataToStorage)
+      },
+      resetWinnerDataInStorage() {
+        localStorage.removeItem("winners")
+        localStorage.removeItem("colorValues")
+        this.winners = []
+        this.fetchAndAddPrelotteryWines()
+          .then(resp => this.winners = resp)
+        this.lotteryColorBoxes.map(color => color.value = null)
       }
     }
-  }
+  };
-};
 </script>
 
 <style lang="scss" scoped>
 @import "../styles/global.scss";
 @import "../styles/media-queries.scss";
+
 h1 {
-  width: 100vw;
+  width: 100%;
   text-align: center;
   font-family: knowit, Arial;
 }
-div {
+
-  font-size: 2rem;
+h2 {
-  font-family: Arial;
-}
-input {
-  font-size: 1.5rem;
   width: 100%;
-}
-hr {
-  width: 50vw;
-}
-
-.winner-container,
-.wine-container,
-.wines-container {
-  width: 50vw;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin: auto;
-
-  @include mobile {
-    width: 80%;
-  }
-}
-
-.winner-element,
-.wine-element,
-.color-container,
-.button-container {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-
-  button {
-    cursor: pointer;
-  }
-}
-
-.color-container {
-  width: 50%;
-  margin: auto;
-}
-
-.wines-container {
   text-align: center;
+  font-size: 1.6rem;
+  font-family: knowit, Arial
 }
 
-.label-div {
+hr {
-  display: flex;
+  width: 90%;
-  width: 50%;
+  margin: 2rem auto;
-  flex-direction: column;
+  color: grey;
-  padding-bottom: 20px;
+}
-  margin: auto;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
 
-  @include mobile {
+.page-container {
-    margin-top: 1.2rem;
+  padding: 0 1.5rem 3rem;
+
+  @include desktop {
+    max-width: 60vw;
+    margin: 0 auto;
   }
 }
+.winner-container {
+  width: max-content;
+  max-width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .button-container {
+    width: 100%;
+  }
+}
+
+.notification-element {
+  margin-bottom: 2rem;
+}
+.winner-element {
+  display: flex;
+  flex-direction: row;
+}
+.wine-element {
+  align-items: flex-start;
+}
 
 .color-selector {
+  margin-bottom: 0.65rem;
+  margin-right: 1rem;
+
   .active {
-    border: 2px solid black;
+    border: 2px solid unset;
-    margin-bottom: 1rem;
+
+    &.green {
+      border-color: $green;
+    }
+    &.blue {
+      border-color: $dark-blue;
+    }
+    &.red {
+      border-color: $red;
+    }
+    &.yellow {
+      border-color: $dark-yellow;
+    }
   }
 
   button {
     border: 2px solid transparent;
-    color: #333;
-    padding: 10px 30px;
-    margin: 0;
-    font-size: 1.3rem;
     display: inline-flex;
     flex-wrap: wrap;
     flex-direction: row;
-    max-height: calc(3rem + 18px);
+    height: 2.5rem;
-    max-width: calc(3rem + 18px);
+    width: 2.5rem;
-    margin: 10px;
+
     // disable-dbl-tap-zoom
     touch-action: manipulation;
 
@@ -399,86 +456,88 @@ hr {
   }
 }
 
-.color-selected {
+.colors {
-  margin-bottom: 2rem;
-
-  @include mobile {
-    display: block;
-    width: 100%;
-    font-size: 1.5rem !important;
-  }
-}
-
-.label-div label {
-  padding: 0 6px;
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   justify-content: center;
-  align-items: center;
+  max-width: 1400px;
+  margin: 3rem auto 0;
 
-  font-size: 1.22rem;
-}
-
-.input-container {
   @include mobile {
-    width: 100%;
+    margin: 1.8rem auto 0;
   }
 
-  & .label-div {
+  .label-div {
+    margin-top: 0.5rem;
     width: 100%;
   }
 }
 
-.winnner-container-inner {
+.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;
+  height: 100%;
+  padding: 0 0.5rem;
+  position: relative;
 
-  @include mobile {
+  p {
-    flex-direction: column;
+    margin: 0;
+    font-size: 0.8rem;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    font-weight: 600;
+    position: absolute;
+    top: .4rem;
+    left: .5rem;
+  }
+
+  input {
+    width: 70%;
+    border: 0;
+    padding: 0;
+    font-size: 3rem;
+    height: unset;
+    max-height: unset;
+    position: absolute;
+    bottom: 1.5rem;
   }
 }
 
-.wine-image {
+.green, .green .colors-overlay > input {
-  padding-left: 30px;
+  background-color: $light-green;
-
+  color: $green;
-  & img {
-    height: 400px;
-  }
 }
 
-input,
+.blue, .blue .colors-overlay > input {
-button {
+  background-color: $light-blue;
-  font-size: 1.5rem;
+  color: $blue;
 }
 
-select {
+.yellow, .yellow .colors-overlay > input {
-  width: 100%;
+  background-color: $light-yellow;
-  font-size: 1.5rem;
+  color: $yellow;
 }
 
-input {
+.red, .red .colors-overlay > input {
-  font-size: 1.5rem;
+  background-color: $light-red;
-  padding: 8px;
+  color: $red;
-  margin: 0;
-  height: 3rem;
-  max-height: 3rem;
-  border: 1px solid rgba(#333333, 0.3);
-}
-
-button {
-  border: none;
-  background: #b7debd;
-  color: #333;
-  padding: 10px 30px;
-  margin: 0;
-  width: fit-content;
-  font-size: 1.3rem;
-  display: block;
-  height: calc(3rem + 18px);
-  display: inline-flex;
-  max-height: calc(3rem + 18px);
-  width: 400px;
-  margin: 10px;
-  // disable-dbl-tap-zoom
-  touch-action: manipulation;
 }
 </style>

src/ui/ScanToVinmonopolet.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <h2 v-if="errorMessage">{{ errorMessage }}</h2>
+    <video playsinline autoplay class="hidden"></video>
+  </div>
+</template>
+
+<script>
+import { BrowserBarcodeReader } from '@zxing/library';
+import { barcodeToVinmonopolet } from "@/api";
+
+export default {
+  name: "Scan to vinnopolet",
+  data() {
+    return {
+      video: undefined,
+      errorMessage: undefined
+    }
+  },
+  mounted() {
+    if (navigator.mediaDevices == undefined) {
+      this.errorMessage = "Feil: Ingen kamera funnet."
+      return
+    }
+
+    setTimeout(() => {
+      this.video = document.querySelector('video');
+      this.scrollIntoView();
+
+      const constraints = {
+        audio: false,
+        video: {
+          facingMode: { exact: "environment" }
+        }
+      };
+
+      navigator.mediaDevices.getUserMedia(constraints)
+        .then(this.handleSuccess)
+        .catch(this.handleError)
+    }, 10)
+  },
+  methods: {
+    handleSuccess(stream) {
+      this.video.classList.remove("hidden");
+      this.video.srcObject = stream;
+      this.searchVideoForBarcode(this.video)
+    },
+    handleError(error) {
+      console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
+      this.errorMessage = "Feil ved oppstart av kamera! Feilmelding: " + error.message
+    },
+    searchVideoForBarcode(video) {
+      const codeReader = new BrowserBarcodeReader()
+
+      codeReader.decodeOnceFromVideoDevice(undefined, video)
+        .then(result => {
+            barcodeToVinmonopolet(result.text)
+              .then(this.emitWineFromVinmonopolet)
+              .catch(this.catchVinmonopoletError)
+              .then(this.searchVideoForBarcode(video))
+        })
+        .catch(err => console.error(err));
+    },
+    emitWineFromVinmonopolet(response) {
+      this.errorMessage = ""
+
+      this.$emit("wine", {
+        name: response.name,
+        vivinoLink: "https://vinmonopolet.no" + response.url,
+        price: response.price.value,
+        image: response.images[1].url,
+        country: response.main_country.name,
+        id: Number(response.code)
+      });
+    },
+    catchVinmonopoletError(error) {
+      this.errorMessage = "Feil! " + error.message || error;
+    },
+    scrollIntoView() {
+      window.scrollTo(0, 
+        document.getElementById("addwine-title").offsetTop - 10
+      )
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "./src/styles/variables";
+@import "./src/styles/global";
+
+video {
+  width: 100%;
+  margin: 1rem 0;
+}
+
+.hidden {
+  height: 0px;
+}
+
+h2 {
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  color: $red;
+}
+</style>

src/ui/TextToast.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="update-toast" :class="showClass">
+    <span v-html="text"></span>
+    <div class="button-container">
+      <button @click="closeToast">Lukk</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    text: { type: String, required: true },
+    refreshButton: { type: Boolean, required: false }
+  },
+  data() {
+    return { showClass: null };
+  },
+  created() {
+    this.showClass = "show";
+  },
+  mounted() {
+    if (this.refreshButton) {
+      return;
+    }
+    setTimeout(() => {
+      this.$emit("closeToast");
+    }, 5000);
+  },
+  methods: {
+    refresh: function() {
+      location.reload();
+    },
+    closeToast: function() {
+      this.$emit("closeToast");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/media-queries.scss";
+
+.update-toast {
+  position: fixed;
+  bottom: 1.3rem;
+  left: 0;
+  right: 0;
+  margin: auto;
+  background: #2d2d2d;
+  border-radius: 5px;
+  padding: 15px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 80vw;
+  opacity: 0;
+  pointer-events: none;
+
+  &.show {
+    pointer-events: all;
+    opacity: 1;
+  }
+
+  -webkit-transition: opacity 0.5s ease-in-out;
+  -moz-transition: opacity 0.5s ease-in-out;
+  -ms-transition: opacity 0.5s ease-in-out;
+  -o-transition: opacity 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
+
+  @include mobile {
+    width: 85vw;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+
+  & span {
+    color: white;
+  }
+
+  & .button-container {
+    & button {
+      color: #2d2d2d;
+      background-color: white;
+      border-radius: 5px;
+      padding: 10px;
+      margin: 0 3px;
+      font-size: 0.8rem;
+      height: max-content;
+
+      &:active {
+        background: #2d2d2d;
+        color: white;
+      }
+    }
+  }
+}
+</style>