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,140 +1,171 @@
 <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">
+    <h2 id="addwine-title">Prelottery</h2>
-            <div class="wine-image">
+    
-              <img :src="winner.wine.image" />
+    <ScanToVinmonopolet @wine="wineFromVinmonopoletScan" v-if="showCamera"/>
+
+    <div class="button-container">
+      <button class="vin-button" @click="showCamera = !showCamera">
+        {{ showCamera ? "Skjul camera" : "Legg til vin med camera" }}
+      </button>
+      
+      <button class="vin-button" @click="addWine">Legg til en vin manuelt</button>
     </div>
-            <div class="label-div">
+
-              <input type="text" v-model="winner.name" placeholder="Navn vinner" />
+    <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>
+
+    <h3>Vinnere</h3>
+    <div class="winner-container" v-if="winners.length > 0">
+      <wine v-for="winner in winners" :wine="winner.wine">
+        <div class="winner-element">
           <div class="color-selector">
+            <div class="label-div">
+              <label>Farge vunnet</label>
+            </div>
             <button
               class="blue"
               :class="{'active': winner.color == 'blue' }"
-                  @click="updateColorForWinner(winner, 'blue')"
+              @click="winner.color = 'blue'"
             ></button>
             <button
               class="red"
               :class="{'active': winner.color == 'red' }"
-                  @click="updateColorForWinner(winner, 'red')"
+              @click="winner.color = 'red'"
             ></button>
             <button
               class="green"
               :class="{'active': winner.color == 'green' }"
-                  @click="updateColorForWinner(winner, 'green')"
+              @click="winner.color = 'green'"
             ></button>
             <button
               class="yellow"
               :class="{'active': winner.color == 'yellow' }"
-                  @click="updateColorForWinner(winner, 'yellow')"
+              @click="winner.color = 'yellow'"
             ></button>
           </div>
 
-              <span
-                class="color-selected"
-              >Selected color: {{ winner.color ? winner.color : '(none)' }}</span>
-            </div>
           <div class="label-div">
-              <input type="text" v-model="winner.wine.name" placeholder="Vin-navn" />
+            <label for="winner-name">Navn vinner</label>
-            </div>
+            <input id="winner-name" type="text" placeholder="Navn" v-model="winner.name"/>
-            <div class="label-div">
-              <input type="text" v-model="winner.wine.vivinoLink" placeholder="Vivino-link" />
-            </div>
-            <div class="label-div">
-              <input type="text" v-model="winner.wine.rating" placeholder="Rating" />
-            </div>
-          </div>
-        </div>
           </div>
         </div>
+      </wine>
+
       <div class="button-container">
-      <button @click="addWine">Legg til en vin</button>
+        <button class="vin-button" @click="sendInfo">Send inn vinnere</button>
-      <button @click="sendWines">Send inn viner</button>
+        <button class="vin-button" @click="resetWinnerDataInStorage">Reset local wines</button>
-    </div>
-    <div class="wines-container" v-if="wines.length > 0">
-      Viner
-      <div v-for="wine in wines" class="wine-element">
-        <hr />
-        <div class="label-div">
-          <input type="text" v-model="wine.name" placeholder="Vin-navn" />
-        </div>
-        <div class="label-div">
-          <input type="text" v-model="wine.vivinoLink" placeholder="Vivino-link" />
-        </div>
-        <div class="label-div">
-          <input type="text" v-model="wine.id" placeholder="Id" />
-        </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>
+  import { prelottery, log, logWines, wineSchema } from "@/api";
+  import TextToast from "@/ui/TextToast";
+  import Wine from "@/ui/Wine";
+  import ScanToVinmonopolet from "@/ui/ScanToVinmonopolet";
+
   export default {
+    components: { TextToast, Wine, ScanToVinmonopolet },
     data() {
       return {
         red: 0,
         blue: 0,
         green: 0,
         yellow: 0,
-      payed: 0,
+        payed: undefined,
         winners: [],
         wines: [],
-      pushMessage: ""
+        pushMessage: "",
+        toastText: undefined,
+        showToast: false,
+        showCamera: false,
+        editWine: false,
+        price: __PRICE__
       };
     },
-  async mounted() {
+    created() {
-    const _wines = await fetch("/api/wines/prelottery");
+      this.fetchAndAddPrelotteryWines()
-    const wines = await _wines.json();
+        .then(this.getWinnerdataFromStorage)
+
+      window.addEventListener("unload", this.setWinnerdataToStorage);
+    },
+    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;
+      },
+      async fetchAndAddPrelotteryWines() {
+        const wines = await prelottery()
+
         for (let i = 0; i < wines.length; i++) {
           let wine = wines[i];
           this.winners.push({
@@ -150,7 +181,18 @@ export default {
           });
         }
       },
-  methods: {
+      wineFromVinmonopoletScan(wineResponse) {
+        if (this.wines.map(wine => wine.name).includes(wineResponse.name)) {
+          this.toastText = "Vinen er allerede lagt til."
+          this.showToast = true
+          return
+        }
+
+        this.toastText = "Fant og la til vin:<br>" + wineResponse.name 
+        this.showToast = true;
+
+        this.wines.unshift(wineResponse)
+      },
       sendPush: async function() {
         let _response = await fetch("/subscription/send-notification", {
           headers: {
@@ -167,28 +209,17 @@ export default {
           alert("Noe gikk galt!");
         }
       },
-    addWine: function(event) {
+      addWine: async function(event) {
-      this.wines.push({
+        const wine = await wineSchema()
-        name: "",
+
-        vivinoLink: "",
+        this.editWine = wine;
-        rating: "",
+        this.wines.unshift(wine);
-        id: "",
-        image: ""
-      });
       },
-    updateColorForWinner(winner, color) {
+      deleteWine(deletedWine) {
-      winner.color = winner.color == color ? null : color;
+        this.wines = this.wines.filter(wine => wine.name != deletedWine.name)
       },
       sendWines: async function() {
-      let _response = await fetch("/api/log/wines", {
+        let response = await logWines(this.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();
@@ -265,21 +296,56 @@ export default {
           }
         }
 
-      let _response = await fetch("/api/log/", {
+        let response = await log(sendObject)
-        headers: {
-          "Content-Type": "application/json"
-          // 'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        method: "POST",
-        body: JSON.stringify(sendObject)
-      });
-      let response = await _response.json();
         if (response == true) {
           alert("Sendt!");
           window.location.reload();
         } else {
-        alert("Noe gikk galt under innsending");
+          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)
       }
     }
   };
@@ -288,95 +354,86 @@ export default {
 <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%;
+  text-align: center;
+  font-size: 1.6rem;
+  font-family: knowit, Arial
 }
+
 hr {
-  width: 50vw;
+  width: 90%;
+  margin: 2rem auto;
+  color: grey;
 }
 
-.winner-container,
+.page-container {
-.wine-container,
+  padding: 0 1.5rem 3rem;
-.wines-container {
+
-  width: 50vw;
+  @include desktop {
+    max-width: 60vw;
+    margin: 0 auto;
+  }
+}
+.winner-container {
+  width: max-content;
+  max-width: 100%;
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
-  justify-content: center;
+  justify-content: space-between;
-  align-items: center;
-  margin: auto;
 
-  @include mobile {
-    width: 80%;
-  }
-}
-
-.winner-element,
-.wine-element,
-.color-container,
   .button-container {
     width: 100%;
+  }
+}
+
+.notification-element {
+  margin-bottom: 2rem;
+}
+.winner-element {
   display: flex;
-  align-items: center;
+  flex-direction: row;
-  flex-direction: column;
-  justify-content: center;
-
-  button {
-    cursor: pointer;
-  }
-}
-
-.color-container {
-  width: 50%;
-  margin: auto;
-}
-
-.wines-container {
-  text-align: center;
-}
-
-.label-div {
-  display: flex;
-  width: 50%;
-  flex-direction: column;
-  padding-bottom: 20px;
-  margin: auto;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-
-  @include mobile {
-    margin-top: 1.2rem;
 }
+.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;
-.wine-image {
+    font-weight: 600;
-  padding-left: 30px;
+    position: absolute;
-
+    top: .4rem;
-  & img {
+    left: .5rem;
-    height: 400px;
-  }
-}
-
-input,
-button {
-  font-size: 1.5rem;
-}
-
-select {
-  width: 100%;
-  font-size: 1.5rem;
   }
 
   input {
-  font-size: 1.5rem;
+    width: 70%;
-  padding: 8px;
+    border: 0;
-  margin: 0;
+    padding: 0;
-  height: 3rem;
+    font-size: 3rem;
-  max-height: 3rem;
+    height: unset;
-  border: 1px solid rgba(#333333, 0.3);
+    max-height: unset;
+    position: absolute;
+    bottom: 1.5rem;
+  }
 }
 
-button {
+.green, .green .colors-overlay > input {
-  border: none;
+  background-color: $light-green;
-  background: #b7debd;
+  color: $green;
-  color: #333;
+}
-  padding: 10px 30px;
+
-  margin: 0;
+.blue, .blue .colors-overlay > input {
-  width: fit-content;
+  background-color: $light-blue;
-  font-size: 1.3rem;
+  color: $blue;
-  display: block;
+}
-  height: calc(3rem + 18px);
+
-  display: inline-flex;
+.yellow, .yellow .colors-overlay > input {
-  max-height: calc(3rem + 18px);
+  background-color: $light-yellow;
-  width: 400px;
+  color: $yellow;
-  margin: 10px;
+}
-  // disable-dbl-tap-zoom
+
-  touch-action: manipulation;
+.red, .red .colors-overlay > input {
+  background-color: $light-red;
+  color: $red;
 }
 </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>