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

<template>
  <div style="height: 100vh; width: 100vw">
    <span>{{ texts.new_instruction }}</span>
    <div ref="webcam_placeholder" style="height: 50vh">
      <webcam :maxres="maxres" @ready="webcam_ready=false" ref="webcam" :height="webcam_height" style=""/>
    </div>
    <div class="row" style="height: 10vh">
       <q-btn :loading="webcam_ready" @click="capture">{{ texts.new_snap}}</q-btn>
       <q-btn :disabled="imgs.length==0" @click="save()">{{ texts.new_done }}</q-btn>
    </div>
    <div class="row" style="flex-wrap:nowrap; overflow-y: auto; width:90vw; max-height: 15vh">
      <q-item round v-for="img in imgs"style="display: inline-flex">
        <q-btn @click="delete_image(img)"><q-icon style="position: absolute" mat="clear"/></q-btn>
        <img  :src="img" style="max-height:10vh"/>
      </q-item>
    </div>
  </div>
</template>

<script>
import Webcam from '../components/webcam'
var api = require('../api.js')
var utils = require('../utils.js')
import {
  QCard,
  QLayout,
  QToolbar,
  QToolbarTitle,
  QBtn,
  QIcon,
  QList,
  QListHeader,
  QItem,
  QItemSide,
  QItemMain
} from 'quasar'
export default {
  name: 'index',
  components: {
    QCard,
    QLayout,
    QToolbar,
    QToolbarTitle,
    QBtn,
    QIcon,
    QList,
    QListHeader,
    QItem,
    QItemSide,
    Webcam,
    QItemMain
  },
  data () {
    return {
      products: [
        {name: 'hello'}
      ],
      api: api,
      imgs: [],
      texts: '',
      webcam_height: 0,
      webcam_ready: true,
      maxres: 25600
    }
  },
  methods: {
    capture: function () {
      this.imgs.push(this.$refs.webcam.capture())
    },
    delete_image: function (img) {
      this.imgs.pop(img)
    },
    save: function () {
      var self = this
      window.images = self.imgs
      this.$refs.webcam.stop()
      self.$router.push('save')
    }
  },
  mounted () {
    window.p = this
    utils.setTexts(this)
    this.webcam_height = this.$refs.webcam_placeholder.clientHeight - 50
  },
  beforeDestroy () {
  }
}
</script>

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