stop camera when modal close

european-epc-competence-center · Dec 8, 2022 · 8640679 · 8640679
1 parent 5e06f38
commit 8640679
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 23 deletions.
diff --git a/frontend/src/views/Entry.vue b/frontend/src/views/Entry.vue
@@ -13,7 +13,7 @@
                 <h5>Credential File</h5>
                 <form v-on:submit.prevent="submitFile">
                     <div class="input-group">
-                        <button @click="scan='file'" data-bs-toggle="modal" type="button" data-bs-target="#scan-modal" class="btn btn-outline-light scanqr">Scan <i class="bi-qr-code" role="img" aria-label="QR-Code"></i></button>
+                        <button @click="scan='file'" data-bs-toggle="modal" type="button" data-bs-target="#scan-modal" class="btn btn-outline-light scanqr"><i class="bi-qr-code" role="img" aria-label="QR-Code"></i></button>
                         <input multiple v-on:change="onFileChange" id="credentialId" type="file" class="form-control" placeholder="credential.json" aria-label="Credential" aria-describedby="credentialHelp">
                         <button class="btn btn-outline-primary" type="submit">Verify</button>
                     </div>
@@ -25,7 +25,7 @@
                 <h5>Credential Id</h5>
                 <form v-on:submit.prevent="submitId">
                     <div class="input-group">
-                        <button @click="scan='credid'" data-bs-toggle="modal" type="button" data-bs-target="#scan-modal" class="btn btn-outline-light scanqr">Scan <i class="bi-qr-code" role="img" aria-label="QR-Code"></i></button>
+                        <button @click="scan='credid'" data-bs-toggle="modal" type="button" data-bs-target="#scan-modal" class="btn btn-outline-light scanqr"><i class="bi-qr-code" role="img" aria-label="QR-Code"></i></button>
                         <input v-model="credentialId" id="credentialId" type="text" class="form-control" placeholder="https://registry.org/vc/uuid" aria-label="Credential Id" aria-describedby="credentialIdHelp">
                         <button class="btn btn-outline-primary" type="submit">Verify</button>
                     </div>
@@ -37,7 +37,7 @@
                 <h5>Subject Id</h5>
                 <form v-on:submit.prevent="submitSubject">
                     <div class="input-group">
-                        <button @click="scan='subid'" data-bs-toggle="modal" type="button" data-bs-target="#scan-modal" class="btn btn-outline-light scanqr">Scan <i class="bi-qr-code" role="img" aria-label="QR-Code"></i></button>
+                        <button @click="scan='subid'" data-bs-toggle="modal" type="button" data-bs-target="#scan-modal" class="btn btn-outline-light scanqr"><i class="bi-qr-code" role="img" aria-label="QR-Code"></i></button>
                         <input v-model="subjectId" id="credentialId" type="text" class="form-control" placeholder="https://gs1.org/123455" aria-label="Subject Id" aria-describedby="subjectIdHelp">
                         <button class="btn btn-outline-primary" type="submit">Verify</button>
                     </div>
@@ -67,6 +67,9 @@
         scan: ''
     }
   },
+  mounted() {
+    document.getElementById('scan-modal').addEventListener('hidden.bs.modal', () => { this.scan = '' });
+  },
   methods: {
     onFileChange(e) {
         var files = Array.from(e.target.files || e.dataTransfer.files);

diff --git a/frontend/src/views/ScanModal.vue b/frontend/src/views/ScanModal.vue
@@ -7,7 +7,7 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body text-center">
-                    <qrcode-stream v-if="scan!=''" @init="onInit" @decode="onDecode">
+                    <qrcode-stream v-if="scan!=''" @init="onInit" @decode="onDecode" :camera="camera">
                         <div v-if="!cameraReady" class="spinner-border text-primary m-5" role="status">
                             <span class="visually-hidden">Waiting for camera ...</span>
                         </div>
@@ -37,12 +37,18 @@ export default {
         return {
             toast: useToast(),
             cameraReady: false,
-            modal: null
+            modal: null,
         }
     },
     mounted() {
         this.modal = new Modal(document.getElementById('scan-modal'));
     },
+    computed: {
+        camera() {
+            if(this.scan == '') return ''
+            return 'auto'
+        }
+    },
     methods: {
         async onInit (promise) {
             try {
@@ -69,33 +75,35 @@ export default {
             }
         },
         onDecode(decodedString) {
-            
-            try{
 
-                if (this.scan == 'file') {
-                    const credential = JSON.parse(decodedString);
-                    if (Array.isArray(credential)) {
-                        this.$store.dispatch("addCredentials", credential);
-                    } else {
-                        this.$store.dispatch("addCredential", credential);
-                    }
+            try{
+                if (decodedString.length != 0) {
+                    
+                    if (this.scan == 'file') {
+                        const credential = JSON.parse(decodedString);
+                        if (Array.isArray(credential)) {
+                            this.$store.dispatch("addCredentials", credential);
+                        } else {
+                            this.$store.dispatch("addCredential", credential);
+                        }
 
-                    this.$router.push({ path: '/verify' })
+                        this.$router.push({ path: '/verify' })
 
-                } else if (this.scan == 'credid') {
+                    } else if (this.scan == 'credid') {
 
-                    this.$router.push({ path: '/verify', query: { credentialId: encodeURIComponent(decodedString) } })
+                        this.$router.push({ path: '/verify', query: { credentialId: encodeURIComponent(decodedString) } })
 
-                } else {
+                    } else {
 
-                    this.$router.push({ path: '/verify', query: { subjectId: encodeURIComponent(decodedString) } })
+                        this.$router.push({ path: '/verify', query: { subjectId: encodeURIComponent(decodedString) } })
 
-                }
+                    }
 
-                this.modal.hide()
-                // modal backdrop does not disappear on hide ....
-                document.getElementsByClassName('modal-backdrop').forEach((el) => el.remove());
+                    this.modal.hide()
+                    // modal backdrop does not disappear on hide ....
+                    document.getElementsByClassName('modal-backdrop').forEach((el) => el.remove());
 
+                }
             } catch (error) {
                 this.toast.warning(`Error reading the credential/s!\n${error}`);
             }