add server setting viewer

client/demo/src/components/demo/001_GuiStateProvider.tsx

@@ -18,6 +18,7 @@ export const OpenStartingNoticeDialogCheckbox = "open-starting-notice-dialog-che
 export const OpenModelSlotManagerDialogCheckbox = "open-model-slot-manager-dialog-checkbox"
 export const OpenMergeLabDialogCheckbox = "open-merge-lab-dialog-checkbox"
 export const OpenAdvancedSettingDialogCheckbox = "open-advanced-setting-dialog-checkbox"
+export const OpenGetServerInformationDialogCheckbox = "open-get-server-information-dialog-checkbox"
 
 export const OpenTextInputDialogCheckbox = "open-text-input-dialog-checkbox"
 type Props = {
@@ -40,7 +41,7 @@ export type StateControls = {
 
     showMergeLabCheckbox: StateControlCheckbox
     showAdvancedSettingCheckbox: StateControlCheckbox
-
+    showGetServerInformationCheckbox: StateControlCheckbox
     showTextInputCheckbox: StateControlCheckbox
 }
 
@@ -169,6 +170,8 @@ export const GuiStateProvider = ({ children }: Props) => {
     const showModelSlotManagerCheckbox = useStateControlCheckbox(OpenModelSlotManagerDialogCheckbox);
     const showMergeLabCheckbox = useStateControlCheckbox(OpenMergeLabDialogCheckbox);
     const showAdvancedSettingCheckbox = useStateControlCheckbox(OpenAdvancedSettingDialogCheckbox);
+    const showGetServerInformationCheckbox = useStateControlCheckbox(OpenGetServerInformationDialogCheckbox);
+
 
 
     const showTextInputCheckbox = useStateControlCheckbox(OpenTextInputDialogCheckbox);
@@ -192,6 +195,7 @@ export const GuiStateProvider = ({ children }: Props) => {
         showModelSlotManagerCheckbox.updateState(false)
         showMergeLabCheckbox.updateState(false)
         showAdvancedSettingCheckbox.updateState(false)
+        showGetServerInformationCheckbox.updateState(false)
 
         showTextInputCheckbox.updateState(false)
 
@@ -232,6 +236,7 @@ export const GuiStateProvider = ({ children }: Props) => {
 
             showMergeLabCheckbox,
             showAdvancedSettingCheckbox,
+            showGetServerInformationCheckbox,
 
             showTextInputCheckbox
 

client/demo/src/components/demo/900_Dialogs.tsx

@@ -5,6 +5,7 @@ import { StartingNoticeDialog } from "./903_StartingNoticeDialog";
 import { ModelSlotManagerDialog } from "./904_ModelSlotManagerDialog";
 import { MergeLabDialog } from "./905_MergeLabDialog";
 import { AdvancedSettingDialog } from "./906_AdvancedSettingDialog";
+import { GetServerInfomationDialog } from "./907_GetServerInfomationDialog";
 
 export const Dialogs = () => {
     const guiState = useGuiState()
@@ -15,6 +16,7 @@ export const Dialogs = () => {
             {guiState.stateControls.showModelSlotManagerCheckbox.trigger}
             {guiState.stateControls.showMergeLabCheckbox.trigger}
             {guiState.stateControls.showAdvancedSettingCheckbox.trigger}
+            {guiState.stateControls.showGetServerInformationCheckbox.trigger}
             <div className="dialog-container" id="dialog">
                 {guiState.stateControls.showWaitingCheckbox.trigger}
                 <WaitingDialog></WaitingDialog>
@@ -26,6 +28,8 @@ export const Dialogs = () => {
                 <MergeLabDialog></MergeLabDialog>
                 {guiState.stateControls.showAdvancedSettingCheckbox.trigger}
                 <AdvancedSettingDialog></AdvancedSettingDialog>
+                {guiState.stateControls.showGetServerInformationCheckbox.trigger}
+                <GetServerInfomationDialog></GetServerInfomationDialog>
             </div>
 
         </div>

client/demo/src/components/demo/907_GetServerInfomationDialog.tsx

@@ -0,0 +1,37 @@
+import React, { useMemo } from "react";
+import { useGuiState } from "./001_GuiStateProvider";
+import { useAppState } from "../../001_provider/001_AppStateProvider";
+
+
+export const GetServerInfomationDialog = () => {
+    const guiState = useGuiState()
+    const { serverSetting } = useAppState()
+    const dialog = useMemo(() => {
+        const closeButtonRow = (
+            <div className="body-row split-3-4-3 left-padding-1">
+                <div className="body-item-text">
+                </div>
+                <div className="body-button-container body-button-container-space-around">
+                    <div className="body-button" onClick={() => { guiState.stateControls.showGetServerInformationCheckbox.updateState(false) }} >close</div>
+                </div>
+                <div className="body-item-text"></div>
+            </div>
+        )
+        const content = (
+            <div className="get-server-information-container">
+                <textarea className="get-server-information-text-area" id="get-server-information-text-area" value={JSON.stringify(serverSetting.serverSetting, null, 4)} />
+            </div>
+        )
+        return (
+            <div className="dialog-frame">
+                <div className="dialog-title">Server Information</div>
+                <div className="dialog-content">
+                    {content}
+                    {closeButtonRow}
+                </div>
+            </div>
+        );
+    }, [serverSetting.serverSetting]);
+    return dialog;
+
+};

client/demo/src/components/demo/components2/102-5_MoreActionArea.tsx

@@ -14,15 +14,18 @@ export const MoreActionArea = (_props: MoreActionAreaProps) => {
         const onOpenAdvancedSettingClicked = () => {
             stateControls.showAdvancedSettingCheckbox.updateState(true)
         }
-
+        const onOpenGetServerInformationClicked = () => {
+            stateControls.showGetServerInformationCheckbox.updateState(true)
+        }
         return (
             <>
                 <div className="config-sub-area-control left-padding-1">
                     <div className="config-sub-area-control-title">more...</div>
-                    <div className="config-sub-area-control-field">
+                    <div className="config-sub-area-control-field config-sub-area-control-field-long">
                         <div className="config-sub-area-buttons">
                             <div onClick={onOpenMergeLabClicked} className="config-sub-area-button">Merge Lab</div>
                             <div onClick={onOpenAdvancedSettingClicked} className="config-sub-area-button">Advanced Setting</div>
+                            <div onClick={onOpenGetServerInformationClicked} className="config-sub-area-button">Server Info</div>
                         </div>
                     </div>
                 </div>

client/demo/src/css/App.css

@@ -1493,6 +1493,9 @@ audio::-webkit-media-controls-overlay-enclosure{
                     }
                 }
             }
+            .config-sub-area-control-field-long {
+                width: 30rem;
+            }
         }
     }
 }
@@ -1580,7 +1583,13 @@ audio::-webkit-media-controls-overlay-enclosure{
         }
     }
 }
-
+.get-server-information-container {
+    margin: 10px;
+    .get-server-information-text-area {
+        width: 100%;
+        height: 20rem;
+    }
+}
 .merge-lab-container {
     display: flex;
     flex-direction: column;