[Update] Config Page: Vr Tab: Add OverlayLargeLogSettings.

src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { clsx } from "clsx";
 import styles from "./Vr.module.scss";
@@ -8,163 +8,132 @@ import {
 } from "../_templates/Templates";
 import {
     useIsEnabledOverlaySmallLog,
-    useOverlaySettings,
     useOverlaySmallLogSettings,
+    useIsEnabledOverlayLargeLog,
+    useOverlayLargeLogSettings,
 } from "@logics_configs";
 
 export const Vr = () => {
     const { t } = useTranslation();
-    const [is_opened_position_controller, setIsOpenedPositionController] = useState(true);
-    const toggleController = () => {
-        setIsOpenedPositionController(!is_opened_position_controller);
+    const [is_opened_small_settings, setIsOpenedSmallSettings] = useState(true);
+    const toggleIsOpenedSmallSettings = () => {
+        setIsOpenedSmallSettings(!is_opened_small_settings);
     };
 
     const { currentOverlaySmallLogSettings, setOverlaySmallLogSettings } = useOverlaySmallLogSettings();
+    const { currentIsEnabledOverlaySmallLog, toggleIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
 
-    const [settings, setSettings] = useState({
-        x_pos: 0,
-        y_pos: 0,
-        z_pos: 0,
-        x_rotation: 0,
-        y_rotation: 0,
-        z_rotation: 0,
-        display_duration: 5,
-        fadeout_duration: 2,
-    });
-
-    const [timeout_id, setTimeoutId] = useState(null);
-
-    const onchangeFunction = (key, value) => {
-        setSettings((prev) => {
-            const new_data = { ...prev, [key]: value };
-            return new_data;
-        });
-
-        if (timeout_id) {
-            clearTimeout(timeout_id);
-        }
-
-        const newTimeoutId = setTimeout(() => {
-            let new_data = settings;
-            new_data[key] = value;
-            setOverlaySmallLogSettings(new_data);
-        }, 50);
-
-        setTimeoutId(newTimeoutId);
-    };
-
-    const toggle_button_class_names__position = clsx(styles.controller_type_switcher, {
-        [styles.is_selected]: is_opened_position_controller,
-    });
-    const toggle_button_class_names__rotation = clsx(styles.controller_type_switcher, {
-        [styles.is_selected]: !is_opened_position_controller,
-    });
+    const { currentOverlayLargeLogSettings, setOverlayLargeLogSettings } = useOverlayLargeLogSettings();
+    const { currentIsEnabledOverlayLargeLog, toggleIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
 
     return (
         <div className={styles.container}>
-            <EnableOverlaySmallLogContainer />
-            <CommonControls />
-            <div className={styles.controller_type_switch} onClick={toggleController}>
-                <div className={toggle_button_class_names__position}>
-                    <p className={styles.controller_switcher_label}>Position</p>
-                </div>
-                <div className={toggle_button_class_names__rotation}>
-                    <p className={styles.controller_switcher_label}>Rotation</p>
-                </div>
+            <div className={styles.wrapper}>
+                <PageSwitcherContainer
+                    toggleFunction={toggleIsOpenedSmallSettings}
+                    is_selected={is_opened_small_settings}
+                    label_1="Small"
+                    label_2="Large"
+                    />
+                {is_opened_small_settings ? (
+                    <OverlaySettingsContainer
+                    current_overlay_settings={currentOverlaySmallLogSettings.data}
+                    set_overlay_settings={setOverlaySmallLogSettings}
+                    current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
+                    toggle_is_enabled_overlay={toggleIsEnabledOverlaySmallLog}
+                    />
+                ) : (
+                    <OverlaySettingsContainer
+                    current_overlay_settings={currentOverlayLargeLogSettings.data}
+                    set_overlay_settings={setOverlayLargeLogSettings}
+                    current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
+                    toggle_is_enabled_overlay={toggleIsEnabledOverlayLargeLog}
+                    />
+                )}
             </div>
-            <div className={styles.position_rotation_controls_box}>
-                {is_opened_position_controller
-                    ? <PositionControls settings={settings} onchangeFunction={onchangeFunction} />
-                    : <RotationControls settings={settings} onchangeFunction={onchangeFunction} />
-                }
-            </div>
-            <OtherControls settings={settings} onchangeFunction={onchangeFunction} />
         </div>
     );
 };
 
-const EnableOverlaySmallLogContainer = () => {
+const OverlaySettingsContainer = ({
+    current_overlay_settings,
+    set_overlay_settings,
+    current_is_enabled_overlay,
+    toggle_is_enabled_overlay,
+}) => {
+
     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();
-
-    const [settings, setSettings] = useState({
-        opacity: 1,
-        ui_scaling: 1,
-    });
+    useEffect(() => {
+        setSettings(current_overlay_settings);
+    }, [current_overlay_settings]);
 
+    const [settings, setSettings] = useState(current_overlay_settings);
     const [timeout_id, setTimeoutId] = useState(null);
 
-    const onchangeFunction = (key, value) => {
-        setSettings((prev) => {
-            const new_data = { ...prev, [key]: value };
-            return new_data;
-        });
+    const [is_opened_position_controller, setIsOpenedPositionController] = useState(true);
+    const togglePositionRotationController = () => {
+        setIsOpenedPositionController(!is_opened_position_controller);
+    };
 
-        if (timeout_id) {
-            clearTimeout(timeout_id);
-        }
+    const onchangeFunction = (key, value) => {
+        setSettings((prev) => ({ ...prev, [key]: value }));
+
+        if (timeout_id) clearTimeout(timeout_id);
 
         const newTimeoutId = setTimeout(() => {
-            let new_data = settings;
-            new_data[key] = value;
-            setOverlaySettings(settings);
+            const new_data = { ...settings, [key]: value };
+            set_overlay_settings(new_data);
         }, 50);
 
         setTimeoutId(newTimeoutId);
     };
 
-    const ui_variable_opacity = (settings.opacity * 100).toFixed(0);
-    const ui_variable_ui_scaling = (settings.ui_scaling * 100).toFixed(0);
-
     return (
-        <div className={styles.common_controls}>
-            <div className={styles.common_controls_wrapper}>
-                <label className={clsx(styles.common_controls_slider_label, styles.opacity_label)}>
-                    {t("overlay_settings.opacity")}
-                </label>
-                <Slider
-                    className={clsx(styles.common_controls_slider, styles.opacity_slider)}
-                    variable={settings.opacity * 100}
-                    valueLabelFormat={`${ui_variable_opacity}%`}
-                    step={5}
-                    min={10}
-                    max={100}
-                    onchangeFunction={(value) => onchangeFunction("opacity", value / 100)}
-                />
+        <>
+            <SwitchBoxContainer
+                label={t("overlay_settings.enable")}
+                variable={current_is_enabled_overlay}
+                toggleFunction={toggle_is_enabled_overlay}
+            />
+            <PageSwitcherContainer
+                toggleFunction={togglePositionRotationController}
+                is_selected={is_opened_position_controller}
+                label_1={t("overlay_settings.position")}
+                label_2={t("overlay_settings.rotation")}
+            />
+
+            <div className={styles.position_rotation_controls_box}>
+                {is_opened_position_controller ? (
+                    <PositionControls settings={settings} onchangeFunction={onchangeFunction} />
+                ) : (
+                    <RotationControls settings={settings} onchangeFunction={onchangeFunction} />
+                )}
             </div>
-            <div className={styles.common_controls_wrapper}>
-                <label className={clsx(styles.common_controls_slider_label, styles.ui_scaling_label)}>
-                    {t("overlay_settings.ui_scaling")}
-                </label>
-                <Slider
-                    className={clsx(styles.common_controls_slider, styles.ui_scaling_slider)}
-                    variable={settings.ui_scaling * 100}
-                    valueLabelFormat={`${ui_variable_ui_scaling}%`}
-                    step={10}
-                    min={40}
-                    max={200}
-                    onchangeFunction={(value) => onchangeFunction("ui_scaling", value / 100)}
-                />
-            </div>
-        </div>
+            <OtherControls settings={settings} onchangeFunction={onchangeFunction} />
+        </>
     );
 };
 
 
+const PageSwitcherContainer = (props) => {
+    const toggle_button_class_names__position = clsx(styles.controller_type_switcher, {
+        [styles.is_selected]: props.is_selected,
+    });
+    const toggle_button_class_names__rotation = clsx(styles.controller_type_switcher, {
+        [styles.is_selected]: !props.is_selected,
+    });
 
+    return (
+        <div className={styles.controller_type_switch} onClick={() => props.toggleFunction()}>
+            <div className={toggle_button_class_names__position}>
+                <p className={styles.controller_switcher_label}>{props.label_1}</p>
+            </div>
+            <div className={toggle_button_class_names__rotation}>
+                <p className={styles.controller_switcher_label}>{props.label_2}</p>
+            </div>
+        </div>
+    );
+};
 
 const PositionControls = ({settings, onchangeFunction}) => {
     const { t } = useTranslation();
@@ -258,8 +227,39 @@ const RotationControls = ({settings, onchangeFunction}) => {
 const OtherControls = ({settings, onchangeFunction}) => {
     const { t } = useTranslation();
 
+    const ui_variable_opacity = (settings.opacity * 100).toFixed(0);
+    const ui_variable_ui_scaling = (settings.ui_scaling * 100).toFixed(0);
+
     return(
         <div className={styles.other_controls}>
+            <div className={styles.other_controls_wrapper}>
+                <label className={clsx(styles.other_controls_slider_label, styles.opacity_label)}>
+                    {t("overlay_settings.opacity")}
+                </label>
+                <Slider
+                    className={clsx(styles.other_controls_slider, styles.opacity_slider)}
+                    variable={settings.opacity * 100}
+                    valueLabelFormat={`${ui_variable_opacity}%`}
+                    step={5}
+                    min={10}
+                    max={100}
+                    onchangeFunction={(value) => onchangeFunction("opacity", value / 100)}
+                />
+            </div>
+            <div className={styles.other_controls_wrapper}>
+                <label className={clsx(styles.other_controls_slider_label, styles.ui_scaling_label)}>
+                    {t("overlay_settings.ui_scaling")}
+                </label>
+                <Slider
+                    className={clsx(styles.other_controls_slider, styles.ui_scaling_slider)}
+                    variable={settings.ui_scaling * 100}
+                    valueLabelFormat={`${ui_variable_ui_scaling}%`}
+                    step={10}
+                    min={40}
+                    max={200}
+                    onchangeFunction={(value) => onchangeFunction("ui_scaling", value / 100)}
+                />
+            </div>
             <div className={styles.other_controls_wrapper}>
                 <label className={clsx(styles.other_controls_slider_label, styles.display_duration_label)}>{t("overlay_settings.display_duration")}</label>
                 <Slider

src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss

@@ -5,14 +5,25 @@
     justify-content: center;
     position: relative;
     padding: 2rem;
+    width: 100%;
+}
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: 56rem;
+    gap: 2rem;
 }
 
 .controller_type_switch {
-    margin-top: 6rem;
+    margin-top: 2rem;
     display: flex;
     border: 0.1rem solid var(--dark_600_color);
     border-radius: 0.4rem;
-    width: 50%;
+    width: 80%;
     align-items: center;
     justify-content: center;
     cursor: pointer;
@@ -151,41 +162,6 @@
     height: 100%;
 }
 
-
-
-
-.common_controls {
-    padding-top: 4rem;
-    padding-bottom: 2rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 2rem;
-    width: 100%;
-    max-width: 56rem;
-    border-bottom: 0.1rem solid var(--dark_700_color);
-}
-
-.common_controls_wrapper {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    position: relative;
-}
-.common_controls_slider {
-    margin-left: 18rem;
-}
-
-.common_controls_slider_label {
-    position: absolute;
-    font-size: 1.6rem;
-    width: 100%;
-}
-
-
-
 .other_controls {
     margin-top: 6rem;
     display: flex;
@@ -193,7 +169,6 @@
     align-items: center;
     gap: 2rem;
     width: 100%;
-    max-width: 56rem;
 }
 
 .other_controls_wrapper {