barcode-frontend-backend-docker/docker-front/front/src/pages/Scan.vue

<template>
  <div style="display: flex">
    <div style="display: flex">
      <span> {{texts['scan_scan_instruction']}}</span>
        <div ref="webcam_placeholder" style="height: 80vh; display: flex;
        overflow:hidden">
        <webcam @ready="camera_ready()" :maxres="500" ref="webcam" :height="webcam_height"/>
      </div>
      <!--v<img :src="this.img" style="max-height:90vh"/> -->
    </div>
    <q-field style="display: flex" :label="texts['scan_enter_barcode_manually']">
      <q-input type="tel" @focus="onfocus()"
      @blur="onblur()" @keyup.enter="on_click_manual_entry()" v-model="manual_result"/>
      <q-btn @click="on_click_manual_entry()"> {{ texts['scan_submit'] }} </q-btn>
    </q-field>
    <q-modal no-esc-dismiss no-backdrop-dismiss minimized v-model="opened">
      <div style="padding: 5%"> 
      <div v-if="scanning==2">
        <img :src="this.img" style="max-height:30vh"/> 
        <div ref="result">loading...</div>
        <div class="row">
          <q-btn @click="close_dialog()">{{texts['scan_back']}}</q-btn>
          <q-btn :loading="searching" @click="_continue()" :disabled="!result">{{texts['scan_continue']}}</q-btn>
        </div>
      </div>
      <div v-if="scanning==3">
        <q-card v-if="products.length>0">
          <span> {{texts['scan_found_text']}}</span>
          <div class="row" style="flex-wrap:nowrap; overflow-y: auto; width:300px" >
            <template v-for="product in products">
              <q-item v-for="picture in product.pictures">
                <img :src="api.apiHostname + picture.slice(5)"
            style="max-height: 100px">
  <q-tooltip>
    {{ product.name }}
  </q-tooltip>
            </img>
            </q-item>
            </template>
          </div>
          <div> {{texts['scan_add_new']}} </div>
          <div class="row" style="margin:10px">
            <q-btn @click="$router.push('/new')"> {{texts['scan_yes']}} </q-btn>
            <q-btn @click="$router.push('/home')"> {{texts['scan_no']}} </q-btn>
          </div>
        </q-card>
        <div v-else>
          {{texts['scan_no_product_text']}}<br/>
          {{ texts['scan_create_new']}}
          <div class="row">
            <q-btn @click="$router.push('/home')">{{ texts['scan_no']}}</q-btn>
            <q-btn @click="create_new()">{{ texts['scan_yes']}}</q-btn>
          </div>
        </div>
      </div>
      </div>
    </q-modal>
  </div>
</template>

<script>
import Webcam from '../components/webcam'
import Quagga from 'quagga'
var api = require('../api.js')
var utils = require('../utils.js')
import {
  QCard,
  QLayout,
  QToolbar,
  QToolbarTitle,
  QBtn,
  QIcon,
  QList,
  QListHeader,
  QItem,
  QItemSide,
  QItemMain,
  QModal,
  QModalLayout,
  QTooltip,
  QInput,
  QField
} from 'quasar'
export default {
  name: 'index',
  components: {
    QCard,
    QLayout,
    QToolbar,
    QToolbarTitle,
    QBtn,
    QIcon,
    QList,
    QListHeader,
    QItem,
    QItemSide,
    Webcam,
    QItemMain,
    QModal,
    QModalLayout,
    QTooltip,
    QInput,
    QField
  },
  data () {
    return {
      products: [],
      api: api,
      img: null,
      quagga: null,
      scanning: 2,
      opened: false,
      result: null,
      scan_result: null,
      manual_result: '',
      texts: '',
      scanned: false,
      webcam_height: 0,
      searching: false,
      found: false,
      scan_interval: null,
      manual_input: false
    }
  },
  methods: {
    close_dialog: function () {
      this.scanned = false
      this.opened = false
    },
    on_key_pressed: function (key) {
      this.on_click_manual_entry()
    },
    on_click_manual_entry: function () {
        var regex = /^[0-9]+$/
        if(!this.manual_result.match(regex)) {
          this.$q.notify('invalid barcode')
          return false
        }
        this.scanned = true
        this.$refs.result.innerText = this.manual_result
        this.result = this.manual_result
        this.opened = true
        this.scanning = 2
    },
    _continue: function () {
      var self = this
      self.searching = true
      api.get('scanapp/{LANG}/ean_codes/'+self.result + '/')
        .then((data) => {
          self.products = data.data.products
          window.sessionStorage.setItem('barcode_id', data.data.id)
          self.scanning = 3
          self.found = true
        })
        .catch(err => {
          self.found = false
          self.scanning = 3
        })
    },
    create_new: function () {
      if (!this.found) {
        api.create('scanapp/en-us/ean_codes/', {barcode: this.result})
          .then(data => {
            window.sessionStorage.setItem('barcode_id', data.data.id)
          })
      }
      this.$router.push('/new')
    },
    decode: function (img) {
      var self = this
      Quagga.decodeSingle({
        decoder: {
          readers: ['ean_reader'] // List of active readers
        },
        locate: true, // try to locate the barcode in the image
        src: img // or 'data:image/jpg;base64,' + data
      }, function (result) {
        if (!result) {
          self.scan_result = null
          return null
        }
        if (result.codeResult) {
          self.scanned = true
          self.$refs.result.innerText = result.codeResult.code
          self.scan_result = result.codeResult.code
          self.result = self.scan_result
          self.opened = true
          self.scanning = 2
        }
        else {
          self.scan_result = null
        }
      })
    },
    camera_ready: function () {
      // alert(22)
      console.log('email increase')
      this.scan_interval = window.setInterval(() => {
        if(!this.scanned){ // && !this.manual_input) {
          var img = this.$refs.webcam.capture()
          console.log(33)
          this.decode(img)
        }
      }, 1000)
    },
    onblur: function () {
      this.manual_input = false
      this.$refs.webcam.startCapture()
    },
    onfocus: function () {
      this.manual_input = true
      this.$refs.webcam.stop()
      window.clearInterval(this.scan_interval)
    }
  },
  mounted: function () {
    window.c = this
    utils.setTexts(this)
    var self = this
    this.webcam_height = this.$refs.webcam_placeholder.clientHeight
  },
  beforeDestroy () {
  }
}
</script>

<style lang="stylus" scoped>
div
  display: flex
  flex-direction: column
  align-items: center
.row
  flex-direction: row
</style>