122 lines
3.0 KiB
Vue
122 lines
3.0 KiB
Vue
<template>
|
|
<div class="toggle-btn text-muted">
|
|
<div class="d-flex" @click.prevent="handleBtnClick">
|
|
<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 lang="ts" setup>
|
|
import { onMounted, reactive, ref } from "vue";
|
|
import ISO6391 from "iso-639-1";
|
|
import { GetChatHistoryTranslated } from "@/utils";
|
|
import { useMatchDetailsStore } from "@/stores/matchDetails";
|
|
import { useInfoStateStore } from "@/stores/infoState";
|
|
|
|
const matchDetailsStore = useMatchDetailsStore();
|
|
const infoStateStore = useInfoStateStore();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "translated", toggle: string): void;
|
|
}>();
|
|
|
|
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 () => {
|
|
const refreshButton = document.querySelector(
|
|
".loading-icon .fa-spinner"
|
|
) as HTMLElement;
|
|
refreshButton.classList.add("show");
|
|
|
|
// TODO: Add langCode
|
|
const [response, info] = await GetChatHistoryTranslated(
|
|
matchDetailsStore.matchDetails.match_id
|
|
);
|
|
|
|
if (info.message !== "") infoStateStore.addInfo(info);
|
|
if (response !== null) {
|
|
matchDetailsStore.matchChat = response;
|
|
|
|
toggleShow();
|
|
if (refreshButton.classList.contains("show"))
|
|
refreshButton.classList.remove("show");
|
|
}
|
|
|
|
emit("translated", toggle.value);
|
|
};
|
|
|
|
const toggleShow = () => {
|
|
const offBtn = document.getElementById("toggle-off") as HTMLElement;
|
|
const onBtn = document.getElementById("toggle-on") as HTMLElement;
|
|
|
|
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();
|
|
});
|
|
</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>
|