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

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>