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

<template>
    <div style="width: 100vw; height: 100vh; margin: 0px" class="bg-black">
      <q-btn @click="$router.push('home')" round color='blue' style="position: sticky; left:50%; top: 70%"> 
        {{ texts.page1_scan }}
      </q-btn> 
        <q-field :label="texts['page1_change_detail']" class="bg-white">
         <q-select v-model="selected_language" :options="languages"/>     
         <q-btn @click="change_language()" style="align-self:right"> {{
           texts.page1_change }}</q-btn>
      </q-field>
   </div>
</template>

<script>
var api = require('../api.js')
var db = require('../db.js')
var utils = require('../utils.js')
import {
  QCard,
  QLayout,
  QToolbar,
  QToolbarTitle,
  QBtn,
  QIcon,
  QList,
  QListHeader,
  QItem,
  QItemSide,
  QItemMain,
  QSelect,
  QInput,
  QField
} from 'quasar'

export default {
  name: 'index',
  components: {
    QCard,
    QLayout,
    QToolbar,
    QToolbarTitle,
    QBtn,
    QIcon,
    QList,
    QListHeader,
    QItem,
    QItemSide,
    QItemMain,
    QSelect,
    QInput,
    QField
  },
  data () {
    return {
      selected_language: '',
      languages: [],
      texts: {}
    }
  },
  methods: {
    change_language: function () {
      // This function is executed after the user change language
      // It saves the selected language in database and then
      // Load the api endpoint for that language
      // And save the language in a local database
      var self = this
      db.saveLang(self.selected_language).then(() => {
        utils.getTexts()
          .then(data => { utils.setTexts(self) })
      })
    },
    populate_languages: function (data) {
      // populate select language select component with list of language given
      // to it
      var self = this
      self.languages = []
      data.forEach((language) => {
        language['label'] = language.name
        language['value'] = language.name
        self.languages.push(language)
      })
    }
  },
  mounted () {
    api.currentPage = this
    // collect list of language from local database or api and then update it
    // in select element
    var self = this
    db.getLang()
      .then(data => { self.selected_language = data.lang })
    utils.setTexts(this)
    db.getData('language/{LANG}/languages/.list')
      .then(data => { self.populate_languages(data) })
  }
}
</script>

<style lang="stylus" scoped>
</style>