From a3230937f3effcd397d0fec83b119332d5ad55a4 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 30 Oct 2024 16:58:54 +0900
Subject: [PATCH] [Update] Config Page: VR Tab. Add EnabledOverlaySmallLog
 Switch and connect to backend.

---
 .../setting_section/setting_box/vr/Vr.jsx     | 20 ++++++++++++++++++-
 .../configs/vr/useIsEnabledOverlaySmallLog.js |  2 +-
 src-ui/logics/useReceiveRoutes.js             |  6 ++++++
 3 files changed, 26 insertions(+), 2 deletions(-)

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 92bc97cf..e49cd033 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
@@ -1,9 +1,13 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { clsx } from "clsx";
 import styles from "./Vr.module.scss";
 import { Slider } from "../_components/";
-import { clsx } from "clsx";
 import {
+    SwitchBoxContainer,
+} from "../_templates/Templates";
+import {
+    useIsEnabledOverlaySmallLog,
     useOverlaySettings,
     useOverlaySmallLogSettings,
 } from "@logics_configs";
@@ -58,6 +62,7 @@ export const Vr = () => {
 
     return (
         <div className={styles.container}>
+            <EnableOverlaySmallLogContainer />
             <CommonControls />
             <div className={styles.controller_type_switch} onClick={toggleController}>
                 <div className={toggle_button_class_names__position}>
@@ -78,6 +83,19 @@ export const Vr = () => {
     );
 };
 
+const EnableOverlaySmallLogContainer = () => {
+    const { t } = useTranslation();
+    const { currentIsEnabledOverlaySmallLog, toggleIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
+
+    return (
+        <SwitchBoxContainer
+            label={t("config_page.enable_overlay_small_log.label")}
+            variable={currentIsEnabledOverlaySmallLog}
+            toggleFunction={toggleIsEnabledOverlaySmallLog}
+        />
+    );
+};
+
 const CommonControls = () => {
     const { t } = useTranslation();
     const { currentOverlaySettings, setOverlaySettings } = useOverlaySettings();
diff --git a/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js b/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js
index cf46ce4e..b27280ab 100644
--- a/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js
+++ b/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js
@@ -6,7 +6,7 @@ export const useIsEnabledOverlaySmallLog = () => {
     const { currentIsEnabledOverlaySmallLog, updateIsEnabledOverlaySmallLog, pendingIsEnabledOverlaySmallLog } = useStore_IsEnabledOverlaySmallLog();
 
     const getIsEnabledOverlaySmallLog = () => {
-        // pendingIsEnabledOverlaySmallLog();
+        pendingIsEnabledOverlaySmallLog();
         asyncStdoutToPython("/get/data/overlay_settings");
     };
 
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index cd109e60..7879b28e 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -46,6 +46,7 @@ import {
     useSpeakerPhraseTimeout,
     useSpeakerMaxWords,
     useOverlaySettings,
+    useIsEnabledOverlaySmallLog,
     useOverlaySmallLogSettings,
     useOscIpAddress,
     useOscPort,
@@ -117,6 +118,7 @@ export const useReceiveRoutes = () => {
 
     const { updateOverlaySettings } = useOverlaySettings();
     const { updateOverlaySmallLogSettings } = useOverlaySmallLogSettings();
+    const { updateIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
 
     const { updateOscIpAddress } = useOscIpAddress();
     const { updateOscPort } = useOscPort();
@@ -320,6 +322,10 @@ export const useReceiveRoutes = () => {
         "/get/data/overlay_settings": updateOverlaySettings,
         "/set/data/overlay_settings": updateOverlaySettings,
 
+        "/get/data/overlay_small_log": updateIsEnabledOverlaySmallLog,
+        "/set/enable/overlay_small_log": updateIsEnabledOverlaySmallLog,
+        "/set/disable/overlay_small_log": updateIsEnabledOverlaySmallLog,
+
         "/get/data/overlay_small_log_settings": updateOverlaySmallLogSettings,
         "/set/data/overlay_small_log_settings": updateOverlaySmallLogSettings,