From 6367140708d5fdb4340d0ee333237047c39ba100 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 5 Dec 2024 10:15:57 +0900
Subject: [PATCH] [Update] Config Page: VR Tab. Add section show only
 translated messages.

---
 locales/en.json                               |  5 +++-
 .../setting_section/setting_box/vr/Vr.jsx     | 25 +++++++++++++++++
 .../setting_box/vr/Vr.module.scss             |  9 ++++++
 src-ui/logics/configs/index.js                |  1 +
 .../useOverlayShowOnlyTranslatedMessages.js   | 28 +++++++++++++++++++
 src-ui/logics/useReceiveRoutes.js             |  6 ++++
 src-ui/store.js                               |  1 +
 7 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 src-ui/logics/configs/vr/useOverlayShowOnlyTranslatedMessages.js

diff --git a/locales/en.json b/locales/en.json
index 97d74c3f..17660984 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -73,7 +73,10 @@
         "ui_scaling": "UI Scaling",
         "display_duration": "Display duration",
         "fadeout_duration": "Fadeout duration",
-        "tracker": "Tracker"
+        "tracker": "Tracker",
+        "overlay_show_only_translated_messages": {
+            "label": "Show Only Translated Messages"
+        }
     },
     "config_page": {
         "config_title": "Settings",
diff --git a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
index 0d40346c..8e1eab2d 100644
--- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
@@ -7,12 +7,19 @@ import { Slider } from "../_components/";
 import {
     RadioButtonContainer,
     SwitchBoxContainer,
+    CheckboxContainer,
 } from "../_templates/Templates";
+
+import {
+    SectionLabelComponent,
+} from "../_components/";
+
 import {
     useIsEnabledOverlaySmallLog,
     useOverlaySmallLogSettings,
     useIsEnabledOverlayLargeLog,
     useOverlayLargeLogSettings,
+    useOverlayShowOnlyTranslatedMessages,
 } from "@logics_configs";
 
 export const Vr = () => {
@@ -56,6 +63,7 @@ export const Vr = () => {
                     />
                 )}
             </div>
+            <CommonSettingsContainer />
         </div>
     );
 };
@@ -311,4 +319,21 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
             </div>
         </div>
     );
+};
+
+
+const CommonSettingsContainer = () => {
+    const { t } = useTranslation();
+    const { currentOverlayShowOnlyTranslatedMessages, toggleOverlayShowOnlyTranslatedMessages } = useOverlayShowOnlyTranslatedMessages();
+
+    return (
+        <div className={styles.common_container}>
+            <SectionLabelComponent label="Common Settings" />
+            <CheckboxContainer
+                label={t("overlay_settings.overlay_show_only_translated_messages.label")}
+                variable={currentOverlayShowOnlyTranslatedMessages}
+                toggleFunction={toggleOverlayShowOnlyTranslatedMessages}
+            />
+        </div>
+    );
 };
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
index ba202ee0..e32a0fb2 100644
--- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
@@ -6,6 +6,7 @@
     position: relative;
     padding: 2rem;
     width: 100%;
+    gap: 4rem;
 }
 
 .wrapper {
@@ -187,4 +188,12 @@
     position: absolute;
     font-size: 1.6rem;
     width: 100%;
+}
+
+.common_container {
+    width: 100%;
+}
+
+.common_label {
+    font-size: 1.4rem;
 }
\ No newline at end of file
diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js
index c38eda18..aff6b450 100644
--- a/src-ui/logics/configs/index.js
+++ b/src-ui/logics/configs/index.js
@@ -47,6 +47,7 @@ export { useSelectedCTranslate2ComputeDevice } from "./translation/useSelectedCT
 export { useIsEnabledOverlaySmallLog } from "./vr/useIsEnabledOverlaySmallLog";
 export { useOverlaySmallLogSettings } from "./vr/useOverlaySmallLogSettings";
 export { useIsEnabledOverlayLargeLog } from "./vr/useIsEnabledOverlayLargeLog";
+export { useOverlayShowOnlyTranslatedMessages } from "./vr/useOverlayShowOnlyTranslatedMessages";
 export { useOverlayLargeLogSettings } from "./vr/useOverlayLargeLogSettings";
 
 export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";
diff --git a/src-ui/logics/configs/vr/useOverlayShowOnlyTranslatedMessages.js b/src-ui/logics/configs/vr/useOverlayShowOnlyTranslatedMessages.js
new file mode 100644
index 00000000..895581ae
--- /dev/null
+++ b/src-ui/logics/configs/vr/useOverlayShowOnlyTranslatedMessages.js
@@ -0,0 +1,28 @@
+import { useStore_OverlayShowOnlyTranslatedMessages } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOverlayShowOnlyTranslatedMessages = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentOverlayShowOnlyTranslatedMessages, updateOverlayShowOnlyTranslatedMessages, pendingOverlayShowOnlyTranslatedMessages } = useStore_OverlayShowOnlyTranslatedMessages();
+
+    const getOverlayShowOnlyTranslatedMessages = () => {
+        pendingOverlayShowOnlyTranslatedMessages();
+        asyncStdoutToPython("/get/data/overlay_show_only_translated_messages");
+    };
+
+    const toggleOverlayShowOnlyTranslatedMessages = () => {
+        pendingOverlayShowOnlyTranslatedMessages();
+        if (currentOverlayShowOnlyTranslatedMessages.data) {
+            asyncStdoutToPython("/set/disable/overlay_show_only_translated_messages");
+        } else {
+            asyncStdoutToPython("/set/enable/overlay_show_only_translated_messages");
+        }
+    };
+
+    return {
+        currentOverlayShowOnlyTranslatedMessages,
+        getOverlayShowOnlyTranslatedMessages,
+        updateOverlayShowOnlyTranslatedMessages,
+        toggleOverlayShowOnlyTranslatedMessages,
+    };
+};
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index f09c55e6..748b5061 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -64,6 +64,7 @@ import {
     useOverlaySmallLogSettings,
     useIsEnabledOverlayLargeLog,
     useOverlayLargeLogSettings,
+    useOverlayShowOnlyTranslatedMessages,
     useOscIpAddress,
     useOscPort,
 } from "@logics_configs";
@@ -161,6 +162,7 @@ export const useReceiveRoutes = () => {
     const { updateIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
     const { updateOverlayLargeLogSettings } = useOverlayLargeLogSettings();
     const { updateIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
+    const { updateOverlayShowOnlyTranslatedMessages } = useOverlayShowOnlyTranslatedMessages();
 
     const { updateOscIpAddress } = useOscIpAddress();
     const { updateOscPort } = useOscPort();
@@ -414,6 +416,10 @@ export const useReceiveRoutes = () => {
         "/get/data/overlay_large_log_settings": updateOverlayLargeLogSettings,
         "/set/data/overlay_large_log_settings": updateOverlayLargeLogSettings,
 
+        "/get/data/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
+        "/set/enable/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
+        "/set/disable/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
+
         // Others Tab
         "/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
         "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
diff --git a/src-ui/store.js b/src-ui/store.js
index bdbd17ec..68f8ee78 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -242,6 +242,7 @@ export const { atomInstance: Atom_OverlayLargeLogSettings, useHook: useStore_Ove
     tracker: "HMD",
 }, "OverlayLargeLogSettings");
 export const { atomInstance: Atom_IsEnabledOverlayLargeLog, useHook: useStore_IsEnabledOverlayLargeLog } = createAtomWithHook(false, "IsEnabledOverlayLargeLog");
+export const { atomInstance: Atom_OverlayShowOnlyTranslatedMessages, useHook: useStore_OverlayShowOnlyTranslatedMessages } = createAtomWithHook(false, "OverlayShowOnlyTranslatedMessages");
 
 // Others
 export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox");