Fix issue with QR code generation

pkg/ui/frontend/package-lock.json

@@ -12,11 +12,14 @@
         "core-js": "^3.6.5",
         "jwt-decode": "^3.1.2",
         "material-design-icons-iconfont": "^6.1.1",
+        "qrious": "^4.0.2",
         "sass": "^1.43.4",
         "sass-loader": "^10.2.0",
         "vue": "^2.6.11",
         "vue-barcode-reader": "^0.0.3",
+        "vue-barcode-reader-plus": "^1.2.2",
         "vue-cookies": "^1.7.4",
+        "vue-html-to-paper": "^1.4.4",
         "vue-router": "^3.5.3",
         "vuetify": "^2.6.0",
         "vuex": "^3.6.2"
@@ -2864,6 +2867,12 @@
         "text-encoding": "^0.7.0"
       }
     },
+    "node_modules/@zxing/text-encoding": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
+      "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
+      "optional": true
+    },
     "node_modules/accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -11185,6 +11194,11 @@
         "teleport": ">=0.2.0"
       }
     },
+    "node_modules/qrious": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/qrious/-/qrious-4.0.2.tgz",
+      "integrity": "sha512-xWPJIrK1zu5Ypn898fBp8RHkT/9ibquV2Kv24S/JY9VYEhMBMKur1gHVsOiNUh7PHP9uCgejjpZUHUIXXKoU/g=="
+    },
     "node_modules/qs": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
@@ -13979,6 +13993,28 @@
         "@zxing/library": "^0.15.1"
       }
     },
+    "node_modules/vue-barcode-reader-plus": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/vue-barcode-reader-plus/-/vue-barcode-reader-plus-1.2.2.tgz",
+      "integrity": "sha512-ObiOHx30WrYpuD+Ns49uxSAwiv34GYqeWjOeVlbh8MZ4WxrZc4V+EvIQOC3s7bG/ynRFPZdSnMh3JWYsBHgd3Q==",
+      "dependencies": {
+        "@zxing/library": "^0.19.1"
+      }
+    },
+    "node_modules/vue-barcode-reader-plus/node_modules/@zxing/library": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.19.1.tgz",
+      "integrity": "sha512-rKwvl3Uuqs8yf364iU9l3HDDaIx8yPv+CH6DbtQaQr67VdKLG22G1ukEp9fOdDefE6tpLtRAdMnTrgtpiaKAZw==",
+      "dependencies": {
+        "ts-custom-error": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.4.0"
+      },
+      "optionalDependencies": {
+        "@zxing/text-encoding": "~0.9.0"
+      }
+    },
     "node_modules/vue-cli-plugin-axios": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/vue-cli-plugin-axios/-/vue-cli-plugin-axios-0.0.4.tgz",
@@ -14049,6 +14085,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue-html-to-paper": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/vue-html-to-paper/-/vue-html-to-paper-1.4.4.tgz",
+      "integrity": "sha512-5Stkm0jJDsC7A/WJWroxqxiASR1+9fcgVWy7AXv30uxdxTPOr7k1Z4KUklZJm7dkHR45tExVCMSOHuxrC22TEw=="
+    },
     "node_modules/vue-loader": {
       "version": "15.9.8",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.8.tgz",
@@ -16954,6 +16995,12 @@
         "ts-custom-error": "^3.0.0"
       }
     },
+    "@zxing/text-encoding": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
+      "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
+      "optional": true
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -23086,6 +23133,11 @@
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
       "dev": true
     },
+    "qrious": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/qrious/-/qrious-4.0.2.tgz",
+      "integrity": "sha512-xWPJIrK1zu5Ypn898fBp8RHkT/9ibquV2Kv24S/JY9VYEhMBMKur1gHVsOiNUh7PHP9uCgejjpZUHUIXXKoU/g=="
+    },
     "qs": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
@@ -25206,6 +25258,25 @@
         "@zxing/library": "^0.15.1"
       }
     },
+    "vue-barcode-reader-plus": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/vue-barcode-reader-plus/-/vue-barcode-reader-plus-1.2.2.tgz",
+      "integrity": "sha512-ObiOHx30WrYpuD+Ns49uxSAwiv34GYqeWjOeVlbh8MZ4WxrZc4V+EvIQOC3s7bG/ynRFPZdSnMh3JWYsBHgd3Q==",
+      "requires": {
+        "@zxing/library": "^0.19.1"
+      },
+      "dependencies": {
+        "@zxing/library": {
+          "version": "0.19.1",
+          "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.19.1.tgz",
+          "integrity": "sha512-rKwvl3Uuqs8yf364iU9l3HDDaIx8yPv+CH6DbtQaQr67VdKLG22G1ukEp9fOdDefE6tpLtRAdMnTrgtpiaKAZw==",
+          "requires": {
+            "@zxing/text-encoding": "~0.9.0",
+            "ts-custom-error": "^3.0.0"
+          }
+        }
+      }
+    },
     "vue-cli-plugin-axios": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/vue-cli-plugin-axios/-/vue-cli-plugin-axios-0.0.4.tgz",
@@ -25260,6 +25331,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-html-to-paper": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/vue-html-to-paper/-/vue-html-to-paper-1.4.4.tgz",
+      "integrity": "sha512-5Stkm0jJDsC7A/WJWroxqxiASR1+9fcgVWy7AXv30uxdxTPOr7k1Z4KUklZJm7dkHR45tExVCMSOHuxrC22TEw=="
+    },
     "vue-loader": {
       "version": "15.9.8",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.8.tgz",

pkg/ui/frontend/src/views/Location.vue

@@ -1,15 +1,15 @@
 <template>
   <v-container>
-    <strong class="grey--text text-h3 lighten-4" v-if="currentLocation">
+    <div id="qrcode-wrapper">
+      <strong style="font-size:40px" class="grey--text text-h3 lighten-4" v-if="currentLocation">
         {{currentLocation.name}}
       </strong>
       <br>
-    <v-btn dark class="ma-2" @click="displayQR = !displayQR">QR</v-btn>
-    <v-btn dark class="ma-2" @click="print">Print</v-btn>
-    <br>
-    <div id="qrcode-wrapper">
       <img id="qrcode" v-show="this.displayQR"/>
+      <br>
     </div>
+    <v-btn dark class="ma-2" @click="displayQR = !displayQR">QR</v-btn>
+    <v-btn dark class="ma-2" @click="print">Print</v-btn>
     <br>
     <v-card
       class="mx-auto grey darken-4"
@@ -80,9 +80,9 @@ export default {
     this.generateQR();
     this.$watch(
       () => this.$route.params,
-      (toParams, fromParams) => {
+      async (toParams, fromParams) => {
         if (toParams !== fromParams) {
-          this.$store.dispatch("loadCurrentLocation", {id: this.$route.params.id});
+          await this.$store.dispatch("loadCurrentLocation", {id: this.$route.params.id});
           this.getItems();
           this.getChildren();
           this.generateQR();
@@ -92,7 +92,7 @@ export default {
   },
   methods: {
     generateQR() {
-      var qr = {
+      var qrObj = {
         "name": this.currentLocation.name,
         "id": this.currentLocation.id,
         "uri": "https://quartermaster.djpianalto.com/#/location/" + this.currentLocation.id
@@ -100,7 +100,7 @@ export default {
       var qr = new QRious({
         element: document.getElementById('qrcode'),
         level: "M",
-        value: JSON.stringify(qr),
+        value: JSON.stringify(qrObj),
         size: 150
       });
     },