frontend/src/components/Footer.vue

<template>
  <div class="footer">
    <b-modal v-model="feedbackModal">
      <form>
        <div class="modal-card" style="width: auto">
          <header class="modal-card-head">
            <p class="modal-card-title">{{ $t('feedback.title') }}</p>
            <button
                type="button"
                class="delete"
                @click="feedbackModal = false"/>
          </header>
          <section class="modal-card-body">
            <p>This feedback will be used to make Kaverti better.</p>
            <b-field :label="$t('feedback.email')">
              <b-input
                  :placeholder="$store.state.user.email"
                  v-model="feedback.email"
                  required>
              </b-input>
            </b-field>
            <b-field :label="$t('feedback.route')">
              <b-input
                  :placeholder="$t('feedback.route')"
                  v-model="feedback.route"
                  required>
              </b-input>
            </b-field>
            <b-field :label="$t('feedback.rating')">
              <b-rate icon-pack="fas" v-model="feedback.stars" custom-text="Route rating"></b-rate>
            </b-field>
            <b-field :label="$t('feedback.text')">
              <b-input
                  placeholder="Can you elaborate?"
                  v-model="feedback.text"
                  maxlength="512"
                  type="textarea"
                  required>
              </b-input>
            </b-field>
          </section>
          <footer class="modal-card-foot">
            <b-button
                @click="doFeedback()"
                :loading="feedback.loading"
                :label="$t('feedback.submit')"
                type="is-primary" />
            <b-button
                :label="$t('close')"
                @click="feedbackModal = false" />
          </footer>
        </div>
      </form>
    </b-modal>
    <b-modal v-model="langModal">
      <div class="modal-card" style="width: auto">
        <header class="modal-card-head">
          <p class="modal-card-title">{{$t('languages.title')}}</p>
          <button
              type="button"
              class="delete"
              @click="langModal = false"/>
        </header>
        <section class="modal-card-body buttons">
          <b-button v-if="$i18n.locale !== 'en'" @click="en" class="is-large">{{$t('languages.en')}}</b-button>
          <b-button v-if="$i18n.locale === 'en'" @click="en" class="is-large is-info disabled" disabled>{{$t('languages.en')}}</b-button>
          <b-button v-if="$i18n.locale === 'wind'" @click="en" class="is-large is-info disabled" disabled>{{$t('languages.wind')}}</b-button>
          <b-button v-if="$i18n.locale === 'debug'" @click="en" class="is-large is-info disabled" disabled>{{$t('languages.debug')}}</b-button>
        </section>
      </div>
    </b-modal>
    <h1>&copy; 2021 Kaverti</h1>
    <div class="buttons">
      <b-button @click="langModal = true">{{$t('languages.title')}}</b-button>
      <b-button @click="feedbackModal = true">Provide Feedback</b-button>
    </div>
  </div>
</template>
<script>
import AjaxErrorHandler from '.././assets/js/errorHandler'
export default {
  name: 'locale-changer',
  data () {
    return {
      feedbackModal: false,
      langs: ['en', 'debug', 'wind'],
      currentLang: this.$i18n.locale,
      langModal: false,
      feedback: {
        route: this.$route.path,
        stars: 0,
        text: '',
        email: this.$store.state.user.email,
        loading: false
      }
    }
  },
  methods: {
    doFeedback() {
      this.feedback.loading = true
      this.axios
          .post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'feedback', {
            text: this.feedback.text,
            stars: this.feedback.stars,
            email: this.feedback.email,
            route: this.feedback.route
          })
          .then(() => {
            this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
            this.feedbackModal = false
            this.$buefy.snackbar.open({message:this.$t('errors.feedbackThanks'), type: 'is-info'})
            this.feedback.loading = false
          })
          .catch(e => {
            AjaxErrorHandler(this.$store)(e)
            this.feedback.loading = false
          })
    },
    en () {
      this.$i18n.locale = "en"
      this.setLang()
    },
    debug () {
      this.$i18n.locale = "debug"
      this.setLang()
    },
    wind () {
      this.$i18n.locale = "wind"
      this.setLang()
    },
    setLang () {
      localStorage.setItem("lang", this.$i18n.locale);
        this.axios
            .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/preferences', {
              lang: this.$i18n.locale
            })
            .then(() => {
              this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
                  .then(res => {
                    this.$store.commit('setUsername', res.data.username)
                    this.$store.commit('setEmail', res.data.email)
                    this.$store.commit('setEmailVerified', res.data.emailVerified)
                    this.$store.commit('setAdmin', res.data.admin)
                    this.$store.commit('setDevMode', res.data.developerMode)
                    this.$store.commit('setTheme', res.data.theme)
                    this.$store.commit('setLang', res.data.lang)
                  })
            })
            .catch(e => {
              AjaxErrorHandler(this.$store)(e)
            })
    }
  },
  mounted () {
    if(localStorage.getItem("lang")) {
      this.$i18n.locale = localStorage.getItem("lang")
    } else if (this.$store.state.user.lang) {
      this.$i18n.locale = this.$store.state.user.lang
    } else {
      this.$i18n.locale = "en"
    }
    this.$nextTick(() => {
      this.feedback = {
        route: this.$route.path,
            stars: 0,
            text: '',
            email: this.$store.state.user.email
      }
    })
  },
  watch: {
    $route() {
      this.feedback = {
        route: this.$route.path,
        stars: 0,
        text: '',
        email: this.$store.state.user.email
      }
    },
    currentLang() {
      this.setLang()
      console.log('change')
    }
  }
}
</script>