update to version 1.0.6 (package updates + translate function for match-chat)

2022-02-12 03:35:10 +01:00
parent 3c43788494
commit 9ff510a9f6
6 changed files with 454 additions and 85 deletions
--- a/src/components/TranslateChatButton.vue
+++ b/src/components/TranslateChatButton.vue
@@ -0,0 +1,122 @@
+<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(props) {
+    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()
+
+      if (!props.translated && toggle.value === 'translated') {
+        response = await GetChatHistoryTranslated(store, store.state.matchDetails.match_id)
+      }
+      if (props.translated && toggle.value === 'translated')
+        response = 'already translated'
+      if (toggle.value === 'original')
+        response = 'original'
+
+      if (refreshButton.classList.contains('show'))
+        refreshButton.classList.remove('show')
+
+      return response
+    }
+
+    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;
+
+  .fa {
+    display: none;
+    font-size: 1.2rem;
+    vertical-align: middle;
+
+    &.show {
+      display: inline-block;
+    }
+  }
+}
+</style>