|
|
@ -40,9 +40,13 @@ const MAP_TO_INPUT_BUILDER: MapToInputBuilder = { |
|
|
|
), |
|
|
|
), |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const combineIds = (...pieces: string[]) => pieces.join('-'); |
|
|
|
|
|
|
|
|
|
|
|
const CommonFenceInputGroup: FC<CommonFenceInputGroupProps> = ({ |
|
|
|
const CommonFenceInputGroup: FC<CommonFenceInputGroupProps> = ({ |
|
|
|
fenceId, |
|
|
|
fenceId, |
|
|
|
fenceTemplate, |
|
|
|
fenceTemplate, |
|
|
|
|
|
|
|
previousFenceName, |
|
|
|
|
|
|
|
previousFenceParameters, |
|
|
|
}) => { |
|
|
|
}) => { |
|
|
|
const fenceParameterElements = useMemo(() => { |
|
|
|
const fenceParameterElements = useMemo(() => { |
|
|
|
let result: ReactNode; |
|
|
|
let result: ReactNode; |
|
|
@ -50,6 +54,20 @@ const CommonFenceInputGroup: FC<CommonFenceInputGroupProps> = ({ |
|
|
|
if (fenceTemplate && fenceId) { |
|
|
|
if (fenceTemplate && fenceId) { |
|
|
|
const { parameters: fenceParameters } = fenceTemplate[fenceId]; |
|
|
|
const { parameters: fenceParameters } = fenceTemplate[fenceId]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let mapToPreviousFenceParameterValues: FenceParameters = {}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (previousFenceParameters) { |
|
|
|
|
|
|
|
mapToPreviousFenceParameterValues = Object.entries( |
|
|
|
|
|
|
|
previousFenceParameters, |
|
|
|
|
|
|
|
).reduce<FenceParameters>((previous, [parameterId, parameterValue]) => { |
|
|
|
|
|
|
|
const newKey = combineIds(fenceId, parameterId); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
previous[newKey] = parameterValue; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return previous; |
|
|
|
|
|
|
|
}, {}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const { optional: optionalInputs, required: requiredInputs } = |
|
|
|
const { optional: optionalInputs, required: requiredInputs } = |
|
|
|
Object.entries(fenceParameters).reduce<{ |
|
|
|
Object.entries(fenceParameters).reduce<{ |
|
|
|
optional: ReactElement[]; |
|
|
|
optional: ReactElement[]; |
|
|
@ -71,15 +89,18 @@ const CommonFenceInputGroup: FC<CommonFenceInputGroupProps> = ({ |
|
|
|
const buildInput = |
|
|
|
const buildInput = |
|
|
|
MAP_TO_INPUT_BUILDER[contentType] ?? MAP_TO_INPUT_BUILDER.string; |
|
|
|
MAP_TO_INPUT_BUILDER[contentType] ?? MAP_TO_INPUT_BUILDER.string; |
|
|
|
|
|
|
|
|
|
|
|
const fenceJoinParameterId = `${fenceId}-${parameterId}`; |
|
|
|
const fenceJoinParameterId = combineIds(fenceId, parameterId); |
|
|
|
|
|
|
|
const initialValue = |
|
|
|
|
|
|
|
mapToPreviousFenceParameterValues[fenceJoinParameterId] ?? |
|
|
|
|
|
|
|
parameterDefault; |
|
|
|
const parameterIsRequired = isRequired === '1'; |
|
|
|
const parameterIsRequired = isRequired === '1'; |
|
|
|
const parameterInput = buildInput({ |
|
|
|
const parameterInput = buildInput({ |
|
|
|
id: fenceJoinParameterId, |
|
|
|
id: fenceJoinParameterId, |
|
|
|
isChecked: CHECKED_STATES.includes(parameterDefault), |
|
|
|
isChecked: CHECKED_STATES.includes(initialValue), |
|
|
|
isRequired: parameterIsRequired, |
|
|
|
isRequired: parameterIsRequired, |
|
|
|
label: parameterId, |
|
|
|
label: parameterId, |
|
|
|
selectOptions: parameterSelectOptions, |
|
|
|
selectOptions: parameterSelectOptions, |
|
|
|
value: parameterDefault, |
|
|
|
value: initialValue, |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
if (parameterIsRequired) { |
|
|
|
if (parameterIsRequired) { |
|
|
@ -94,28 +115,34 @@ const CommonFenceInputGroup: FC<CommonFenceInputGroupProps> = ({ |
|
|
|
optional: [], |
|
|
|
optional: [], |
|
|
|
required: [ |
|
|
|
required: [ |
|
|
|
MAP_TO_INPUT_BUILDER.string({ |
|
|
|
MAP_TO_INPUT_BUILDER.string({ |
|
|
|
id: `${fenceId}-name`, |
|
|
|
id: combineIds(fenceId, 'name'), |
|
|
|
isRequired: true, |
|
|
|
isRequired: true, |
|
|
|
label: 'Fence device name', |
|
|
|
label: 'Fence device name', |
|
|
|
|
|
|
|
value: previousFenceName, |
|
|
|
}), |
|
|
|
}), |
|
|
|
], |
|
|
|
], |
|
|
|
}, |
|
|
|
}, |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
result = ( |
|
|
|
result = ( |
|
|
|
<> |
|
|
|
<FlexBox |
|
|
|
|
|
|
|
sx={{ |
|
|
|
|
|
|
|
'& > div:first-child': { marginTop: 0 }, |
|
|
|
|
|
|
|
'& > div': { marginBottom: 0 }, |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
> |
|
|
|
<ExpandablePanel expandInitially header="Required parameters"> |
|
|
|
<ExpandablePanel expandInitially header="Required parameters"> |
|
|
|
<FlexBox margin=".4em 0">{requiredInputs}</FlexBox> |
|
|
|
<FlexBox margin=".4em 0">{requiredInputs}</FlexBox> |
|
|
|
</ExpandablePanel> |
|
|
|
</ExpandablePanel> |
|
|
|
<ExpandablePanel header="Optional parameters"> |
|
|
|
<ExpandablePanel header="Optional parameters"> |
|
|
|
<FlexBox margin=".4em 0">{optionalInputs}</FlexBox> |
|
|
|
<FlexBox margin=".4em 0">{optionalInputs}</FlexBox> |
|
|
|
</ExpandablePanel> |
|
|
|
</ExpandablePanel> |
|
|
|
</> |
|
|
|
</FlexBox> |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return result; |
|
|
|
return result; |
|
|
|
}, [fenceId, fenceTemplate]); |
|
|
|
}, [fenceId, fenceTemplate, previousFenceName, previousFenceParameters]); |
|
|
|
|
|
|
|
|
|
|
|
return <>{fenceParameterElements}</>; |
|
|
|
return <>{fenceParameterElements}</>; |
|
|
|
}; |
|
|
|
}; |
|
|
|