176 lines
4.9 KiB
Vue
176 lines
4.9 KiB
Vue
<template>
|
|
<v-layout row justify-center>
|
|
<v-dialog v-model="dialog_scanner" persistent max-width="290">
|
|
|
|
<v-card>
|
|
<v-card-title class="headline">Arahkan kamera ke QR / Barcode</v-card-title>
|
|
<v-card-text>
|
|
<v-layout align-content-center row>
|
|
<v-flex align-self-center xs12 ma-2>
|
|
<div id="qr-reader" style="width:290"></div>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn dark color="blue darken-1" @click="startscan">mulai</v-btn>
|
|
<v-btn color="grey darken-1" flat @click="dialog_scanner = false">tutup</v-btn>
|
|
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
<!--<one-dialog-alert :status="alert_status" :msg="alert_msg"></one-dialog-alert>-->
|
|
|
|
|
|
<v-dialog
|
|
v-model="alert_status"
|
|
width="80%"
|
|
>
|
|
|
|
|
|
<v-card >
|
|
<v-card-title
|
|
class="headline red lighten-2 white--text"
|
|
primary-title
|
|
|
|
>
|
|
Peringatan
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
<p>{{alert_msg}}</p>
|
|
</v-card-text>
|
|
|
|
<v-divider></v-divider>
|
|
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn
|
|
color="grey"
|
|
flat
|
|
@click="closeAlert()"
|
|
>
|
|
Tutup
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
|
|
</v-layout>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
module.exports = {
|
|
components : {
|
|
//'one-dialog-info':httpVueLoader('../../common/oneDialogInfo.vue'),
|
|
//'one-dialog-alert':httpVueLoader('../../common/oneDialogAlert.vue')
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods : {
|
|
startscan(){
|
|
if(!this.isScanning){
|
|
this.isScanning = true;
|
|
this.html5QrCode = new Html5Qrcode("qr-reader");
|
|
this.html5QrCode.start(
|
|
{ facingMode: "environment" },
|
|
{
|
|
fps: 10,
|
|
qrbox: { width: 250, height: 250 }
|
|
},
|
|
this.qrCodeSuccessCallback)
|
|
.catch(err => {
|
|
console.error(`Error scanning QR code: ${err}`);
|
|
this.isScanning = false;
|
|
});
|
|
}
|
|
|
|
},
|
|
qrCodeSuccessCallback(decodedText, decodedResult){
|
|
//alert(`QR Code Content: ${decodedText}`);
|
|
let act = this.$store.state.patient.act_scan
|
|
if(act === "qrpatient"){
|
|
//alert(`QR Code Content: ${decodedText}`)
|
|
this.dialog_scanner = false
|
|
location.replace("/one-ui/test/vuex/cpone-doctor-klinik-mobile/?labnumber="+decodedText)
|
|
//this.$store.dispatch("patient/scan_patient",{'labnumber':decodedText})
|
|
}
|
|
if(act === "scanbarcode"){
|
|
this.dialog_scanner = false
|
|
this.$store.dispatch("patient/scan_barcode",{'barcode':decodedText})
|
|
}
|
|
},
|
|
closeAlert(){
|
|
let act = this.$store.state.patient.act_scan
|
|
if(act === "scanbarcode")
|
|
this.$store.dispatch("patient/skipaction")
|
|
else
|
|
location.replace("/one-ui/test/vuex/cpone-doctor-klinik-mobile/")
|
|
}
|
|
|
|
},
|
|
computed: {
|
|
alert_msg() {
|
|
return this.$store.state.patient.alert_msg
|
|
},
|
|
alert_status: {
|
|
get() {
|
|
return this.$store.state.patient.alert_status
|
|
},
|
|
set(val) {
|
|
this.$store.commit("patient/update_alert_status",val)
|
|
}
|
|
},
|
|
dialog_scanner: {
|
|
get() {
|
|
return this.$store.state.patient.dialog_scanner
|
|
},
|
|
set(val) {
|
|
this.$store.commit("patient/update_dialog_scanner",val)
|
|
}
|
|
},
|
|
isScanning: {
|
|
get() {
|
|
return this.$store.state.patient.isScanning
|
|
},
|
|
set(val) {
|
|
this.$store.commit("patient/update_isScanning",val)
|
|
}
|
|
},
|
|
html5QrCode: {
|
|
get() {
|
|
return this.$store.state.patient.html5QrCode
|
|
},
|
|
set(val) {
|
|
this.$store.commit("patient/update_html5QrCode",val)
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
isDialogVisible: false,
|
|
|
|
}
|
|
},
|
|
watch : {
|
|
dialog_scanner (n, o) {
|
|
console.log('blallal')
|
|
if (n == true) {
|
|
|
|
} else {
|
|
if (this.isScanning && this.html5QrCode) {
|
|
this.html5QrCode.stop().then(() => {
|
|
this.isScanning = false;
|
|
}).catch(err => {
|
|
console.error('Failed to stop QR code scanning.', err);
|
|
});
|
|
}
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script> |