PublicMirrors/voice-changer
1
0
Fork 0
mirror of https://github.com/w-okada/voice-changer.git synced 2025-02-02 16:23:58 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

add server setting viewer

Browse Source
This commit is contained in:
wataru 2023-06-25 18:39:53 +09:00
parent d57362c3c3
commit baeb771c29
6 changed files with 77 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/demo/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

7
client/demo/src/components/demo/001_GuiStateProvider.tsx
View File

@ -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

4
client/demo/src/components/demo/900_Dialogs.tsx
View File

@ -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>

37
client/demo/src/components/demo/907_GetServerInfomationDialog.tsx Normal file
View File

@ -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;
};

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

@ -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>

11
client/demo/src/css/App.css
View File

@ -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;