[Update] AdvancedSettings: Websocket: Add settings ui.

src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx

@@ -6,13 +6,19 @@ import { useOpenFolder } from "@logics_common";
 import {
     useOscIpAddress,
     useOscPort,
+    useWebsocket,
 } from "@logics_configs";
 
 import {
+    CheckboxContainer,
     ActionButtonContainer,
     EntryWithSaveButtonContainer,
 } from "../_templates/Templates";
 
+import {
+    SectionLabelComponent,
+} from "../_components/";
+
 import OpenFolderSvg from "@images/open_folder.svg?react";
 import HelpSvg from "@images/help.svg?react";
 
@@ -25,6 +31,7 @@ export const AdvancedSettings = () => {
                 <OpenConfigFolderContainer />
                 <OpenSwitchComputeDeviceModalContainer />
             </div>
+            <WebsocketContainer />
         </div>
     );
 };
@@ -87,6 +94,7 @@ const OscPortContainer = () => {
         />
     );
 };
+
 const OpenConfigFolderContainer = () => {
     const { t } = useTranslation();
     const { openFolder_ConfigFile } = useOpenFolder();
@@ -120,4 +128,88 @@ const OpenSwitchComputeDeviceModalContainer = () => {
             />
         </>
     );
+};
+
+
+const WebsocketContainer = () => {
+    return (
+        <div>
+            <SectionLabelComponent label="WebSocket" />
+            <EnableWebsocketContainer />
+            <WebsocketHostContainer />
+            <WebsocketPortContainer />
+        </div>
+    );
+};
+
+const EnableWebsocketContainer = () => {
+    const { t } = useTranslation();
+    const { currentEnableWebsocket, toggleEnableWebsocket } = useWebsocket();
+
+    return (
+        <CheckboxContainer
+            label={t("config_page.advanced_settings.enable_websocket.label")}
+            variable={currentEnableWebsocket}
+            toggleFunction={toggleEnableWebsocket}
+        />
+    );
+};
+
+const WebsocketHostContainer = () => {
+    const { t } = useTranslation();
+    const { currentWebsocketHost, setWebsocketHost } = useWebsocket();
+    const [input_value, setInputValue] = useState(currentWebsocketHost.data);
+
+    const onChangeFunction = (value) => {
+        setInputValue(value);
+    };
+
+    const saveFunction = () => {
+        setWebsocketHost(input_value);
+    };
+
+    useEffect(()=> {
+        setInputValue(currentWebsocketHost.data);
+    }, [currentWebsocketHost]);
+
+    return (
+        <EntryWithSaveButtonContainer
+            label={t("config_page.advanced_settings.websocket_host.label")}
+            variable={input_value}
+            saveFunction={saveFunction}
+            onChangeFunction={onChangeFunction}
+            state={currentWebsocketHost.state}
+            width="14rem"
+        />
+    );
+};
+
+const WebsocketPortContainer = () => {
+    const { t } = useTranslation();
+    const { currentWebsocketPort, setWebsocketPort } = useWebsocket();
+    const [input_value, setInputValue] = useState(currentWebsocketPort.data);
+
+    const onChangeFunction = (value) => {
+        value = value.replace(/[^0-9]/g, "");
+        setInputValue(value);
+    };
+
+    const saveFunction = () => {
+        setWebsocketPort(input_value);
+    };
+
+    useEffect(()=> {
+        setInputValue(currentWebsocketPort.data);
+    }, [currentWebsocketPort]);
+
+    return (
+        <EntryWithSaveButtonContainer
+            label={t("config_page.advanced_settings.websocket_port.label")}
+            variable={input_value}
+            saveFunction={saveFunction}
+            onChangeFunction={onChangeFunction}
+            state={currentWebsocketPort.state}
+            width="10rem"
+        />
+    );
 };