csgowtf/src/components/TranslateChatButton.vue

<template>
  <div class="toggle-btn text-muted">
    <div @click.prevent="$emit('translated', handleBtnClick())"
         class="d-flex">
      <span class="text-center mx-2">
        <i id="toggle-off" class="fa fa-toggle-off show"/>
        <i id="toggle-on" class="fa fa-toggle-on"/>
      </span>
      <div>
        <span :class="toggle === 'translated' ? 'text-warning' : ''"
            class="float-start">
          <span class="text-uppercase">Translate to {{data.browserLang}}</span>
          <span class="loading-icon ms-2" title="Translating..">
            <i class="fa fa-spinner fa-pulse fa-fw"/>
          </span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import {onMounted, reactive, ref} from "vue";
import ISO6391 from 'iso-639-1'
import {GetChatHistoryTranslated} from "@/utils";
import {useStore} from "vuex";

export default {
  name: 'TranslateChatButton',
  props: {
    translated: {
      type: Boolean,
      required: true
    }
  },
  setup() {
    const store = useStore()

    const data = reactive({
      browserIsoCode: '',
      browserLangCode: '',
      browserLang: '',
    })

    const toggle = ref('original')

    const setLanguageVariables = () => {
      const navLangs = navigator.languages

      data.browserIsoCode = navLangs.find((l) => l.length === 5)
      data.browserLangCode = navLangs[0]

      if (ISO6391.validate(data.browserLangCode)) {
        data.browserLang = ISO6391.getNativeName(data.browserLangCode)
      } else {
        data.browserIsoCode = 'en-US'
        data.browserLangCode = 'en'
        data.browserLang = 'English'
      }
    }

    const handleBtnClick = async () => {
      let response

      const refreshButton = document.querySelector('.loading-icon .fa-spinner')
      refreshButton.classList.add('show')

      toggleShow()

      response = await GetChatHistoryTranslated(store, store.state.matchDetails.match_id)

      if (refreshButton.classList.contains('show'))
        refreshButton.classList.remove('show')

      return [response, toggle.value]
    }

    const toggleShow = () => {
      const offBtn = document.getElementById('toggle-off')
      const onBtn = document.getElementById('toggle-on')

      if (offBtn.classList.contains('show')) {
        offBtn.classList.remove('show')
        onBtn.classList.add('show')
        toggle.value = 'translated'
      } else if (onBtn.classList.contains('show')) {
        onBtn.classList.remove('show')
        offBtn.classList.add('show')
        toggle.value = 'original'
      }
    }

    onMounted(() => {
      setLanguageVariables()
    })
    return {data, toggle, handleBtnClick}
  },
}
</script>

<style lang="scss" scoped>
.toggle-btn {
  margin: 0 auto;
  cursor: pointer;
  width: 100%;

  .fa {
    display: none;
    font-size: 1.2rem;
    vertical-align: middle;

    &.show {
      display: inline-block;
    }
  }
}
</style>