diff --git a/src/components/wired-tools/WiredCreatorToolsView.tsx b/src/components/wired-tools/WiredCreatorToolsView.tsx index 64ff67c..c189cf5 100644 --- a/src/components/wired-tools/WiredCreatorToolsView.tsx +++ b/src/components/wired-tools/WiredCreatorToolsView.tsx @@ -9,6 +9,7 @@ import { useInventoryTrade, useMessageEvent, useNotification, useObjectSelectedE import { DIRECTION_NAMES, EDITABLE_FURNI_VARIABLES, EDITABLE_USER_VARIABLES, INSPECTION_ELEMENTS, MONITOR_ERROR_INFO, MONITOR_LOG_ORDER, MONTH_NAMES, TABS, TEAM_COLOR_NAMES, VARIABLES_ELEMENTS, VARIABLE_DEFINITIONS, WEEKDAY_NAMES, WIRED_CLOCK_REFRESH_MS, WIRED_FREEZE_EFFECT_IDS, WIRED_INSPECTION_REFRESH_MS, WIRED_MONITOR_ACTION_CLEAR_LOGS, WIRED_MONITOR_ACTION_FETCH, WIRED_MONITOR_POLL_MS, WIRED_VARIABLES_POLL_MS } from './WiredCreatorTools.constants'; import { createEmptyMonitorSnapshot, formatMonitorHistoryOccurrence, formatMonitorLatestOccurrence, formatMonitorSource, formatVariableTimestamp, getHotelDateTimeParts, getHotelTimeFormatter, normalizeMonitorReason } from './WiredCreatorTools.helpers'; import { HotelDateTimeParts, InspectionElementButton, InspectionElementType, InspectionFurniLiveState, InspectionFurniSelection, InspectionUserLiveState, InspectionUserSelection, InspectionUserTeamData, InspectionVariable, ManagedHolderVariableEntry, MonitorLog, MonitorLogDetails, MonitorSnapshot, MonitorStat, ParsedWallLocation, TeamEffectData, VariableDefinition, VariableHighlightOverlay, VariableHighlightTarget, VariableManageEntry, VariableTextValue, VariablesElementButton, VariablesElementType, WiredToolsTab } from './WiredCreatorTools.types'; +import { WiredInspectionTabView } from './WiredInspectionTabView'; import { WiredToolsSettingsTabView } from './WiredToolsSettingsTabView'; import { WiredVariablesTabView } from './WiredVariablesTabView'; @@ -3249,144 +3250,44 @@ export const WiredCreatorToolsView: FC<{}> = () => } } { (activeTab === 'inspection') && -
-
-
- Element type: -
- { INSPECTION_ELEMENTS.map(element => ( - - )) } -
-
-
- Preview: -
- { (inspectionType === 'furni') && selectedFurni && roomSession && -
- -
} - { (inspectionType === 'user') && selectedUser && -
- { (selectedUser.kind === 'pet') - ? - : } -
} - { (inspectionType === 'global') && -
- Global placeholder -
} - { (((inspectionType === 'furni') && !selectedFurni) || ((inspectionType === 'user') && !selectedUser) || (inspectionType === 'global')) && -
- { previewPlaceholder } -
} -
-
- -
-
-
- Variables: -
-
- Variable - Value -
- { !displayedVariables.length && -
- Nothing to display -
} - { !!displayedVariables.length && -
- - - { displayedVariables.map((variable, index) => ( - - { - setSelectedInspectionVariableKeys(prev => ({ ...prev, [inspectionType]: variable.key })); - beginVariableEdit(variable); - } }> - - - - )) } - -
{ variable.key } - { (editingVariable === variable.key) && - event.stopPropagation() } - onBlur={ cancelVariableEdit } - onChange={ event => setEditingValue(event.target.value) } - onKeyDownCapture={ onVariableInputKeyDown } /> } - { (editingVariable !== variable.key) && !variable.editable && { variable.value } } - { (editingVariable !== variable.key) && variable.editable && - } -
-
} -
-
-
- { isInspectionGiveOpen && -
- Variable: - - Value: - setInspectionGiveValue(event.target.value) } /> - -
} - - -
-
-
} + + { + setSelectedInspectionVariableKeys(prev => ({ ...prev, [inspectionType]: variable.key })); + beginVariableEdit(variable); + } } + editingVariable={ editingVariable } + editingValue={ editingValue } + onEditingValueChange={ setEditingValue } + onCancelVariableEdit={ cancelVariableEdit } + onVariableInputKeyDown={ onVariableInputKeyDown } + onBeginVariableEdit={ variable => + { + setSelectedInspectionVariableKeys(prev => ({ ...prev, [inspectionType]: variable.key })); + beginVariableEdit(variable); + } } + isInspectionGiveOpen={ isInspectionGiveOpen } + onToggleInspectionGive={ () => setIsInspectionGiveOpen(value => !value) } + selectedInspectionGiveDefinition={ selectedInspectionGiveDefinition } + onSelectGiveVariable={ setInspectionGiveVariableItemId } + availableInspectionDefinitions={ availableInspectionDefinitions } + inspectionGiveValue={ inspectionGiveValue } + onInspectionGiveValueChange={ setInspectionGiveValue } + canGiveInspectionVariable={ canGiveInspectionVariable } + onGiveInspectionVariable={ () => giveInspectionVariable() } + canRemoveInspectionVariable={ canRemoveInspectionVariable } + onRemoveInspectionVariable={ () => removeInspectionVariable() } + /> } { (activeTab === 'variables') && void; + selectedFurni: InspectionFurniSelection | null; + selectedUser: InspectionUserSelection | null; + roomId: number | null; + previewPlaceholder: string; + + // keep-selected toggle + keepSelected: boolean; + onKeepSelectedChange: (next: boolean) => void; + + // variables table + displayedVariables: InspectionVariable[]; + selectedInspectionVariableKey: string; + onSelectInspectionVariable: (variable: InspectionVariable) => void; + + // inline editor + editingVariable: string; + editingValue: string; + onEditingValueChange: (value: string) => void; + onCancelVariableEdit: () => void; + onVariableInputKeyDown: (event: KeyboardEvent) => void; + onBeginVariableEdit: (variable: InspectionVariable) => void; + + // give-variable popover + isInspectionGiveOpen: boolean; + onToggleInspectionGive: () => void; + selectedInspectionGiveDefinition: InspectionGiveDefinition | null; + onSelectGiveVariable: (itemId: number) => void; + availableInspectionDefinitions: InspectionGiveDefinition[]; + inspectionGiveValue: string; + onInspectionGiveValueChange: (value: string) => void; + canGiveInspectionVariable: boolean; + onGiveInspectionVariable: () => void; + + // remove variable + canRemoveInspectionVariable: boolean; + onRemoveInspectionVariable: () => void; +} + +/** + * The "Inspection" tab body of WiredCreatorToolsView, extracted from + * the parent's inline JSX. Same shape as WiredVariablesTabView: + * pure presentation, all state and actions arrive as typed props. + */ +export const WiredInspectionTabView = (props: WiredInspectionTabViewProps) => +{ + const { + inspectionType, + onInspectionTypeChange, + selectedFurni, + selectedUser, + roomId, + previewPlaceholder, + keepSelected, + onKeepSelectedChange, + displayedVariables, + selectedInspectionVariableKey, + onSelectInspectionVariable, + editingVariable, + editingValue, + onEditingValueChange, + onCancelVariableEdit, + onVariableInputKeyDown, + onBeginVariableEdit, + isInspectionGiveOpen, + onToggleInspectionGive, + selectedInspectionGiveDefinition, + onSelectGiveVariable, + availableInspectionDefinitions, + inspectionGiveValue, + onInspectionGiveValueChange, + canGiveInspectionVariable, + onGiveInspectionVariable, + canRemoveInspectionVariable, + onRemoveInspectionVariable + } = props; + + return ( +
+
+
+ Element type: +
+ { INSPECTION_ELEMENTS.map(element => ( + + )) } +
+
+
+ Preview: +
+ { (inspectionType === 'furni') && selectedFurni && (roomId !== null) && +
+ +
} + { (inspectionType === 'user') && selectedUser && +
+ { (selectedUser.kind === 'pet') + ? + : } +
} + { (inspectionType === 'global') && +
+ Global placeholder +
} + { (((inspectionType === 'furni') && !selectedFurni) || ((inspectionType === 'user') && !selectedUser) || (inspectionType === 'global')) && +
+ { previewPlaceholder } +
} +
+
+ +
+
+
+ Variables: +
+
+ Variable + Value +
+ { !displayedVariables.length && +
+ Nothing to display +
} + { !!displayedVariables.length && +
+ + + { displayedVariables.map((variable, index) => ( + onSelectInspectionVariable(variable) }> + + + + )) } + +
{ variable.key } + { (editingVariable === variable.key) && + event.stopPropagation() } + onBlur={ onCancelVariableEdit } + onChange={ event => onEditingValueChange(event.target.value) } + onKeyDownCapture={ onVariableInputKeyDown } /> } + { (editingVariable !== variable.key) && !variable.editable && { variable.value } } + { (editingVariable !== variable.key) && variable.editable && + } +
+
} +
+
+
+ { isInspectionGiveOpen && +
+ Variable: + + Value: + onInspectionGiveValueChange(event.target.value) } /> + +
} + + +
+
+
+ ); +};