diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx')
| -rw-r--r-- | sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx | 228 |
1 files changed, 228 insertions, 0 deletions
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx new file mode 100644 index 000000000..ee876e854 --- /dev/null +++ b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx @@ -0,0 +1,228 @@ +import * as React from 'react'; + +import Button from '@material-ui/core/Button'; +import TextField from '@material-ui/core/TextField'; +import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogContentText from '@material-ui/core/DialogContentText'; +import DialogTitle from '@material-ui/core/DialogTitle'; + +import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; + +import { + addToRequiredNetworkElementsAsyncActionCreator, + removeFromRequiredNetworkElementsAsyncActionCreator +} from '../actions/requiredNetworkElementsActions'; + +import { RequiredNetworkElementType } from '../models/requiredNetworkElements'; +import { unmountNetworkElementActionCreatorAsync, mountNetworkElementActionCreatorAsync } from '../actions/mountedNetworkElementsActions'; +export enum EditNetworkElementDialogMode { + None = "none", + UnknownNetworkElementToRequiredNetworkElements = "unknownNetworkElementToRequiredNetworkElements", + RequiredNetworkElementToUnknownNetworkElements = "requiredNetworkElementToUnknownNetworkElements", + MountNetworkElementToRequiredNetworkElements = "mountNetworkElementToRequiredNetworkElements", + MountNetworkElementToUnknonwNetworkElements = "mountNetworkElementToRequiredUnknownElements", + MountNetworkElement = "mountNetworkElement", + UnmountNetworkElement = "unmountNetworkElement", +} + +const mapDispatch = (dispatcher: IDispatcher) => ({ + addToRequiredNetworkElements: (element: RequiredNetworkElementType) => { + dispatcher.dispatch(addToRequiredNetworkElementsAsyncActionCreator(element)); + }, + removeFromRequiredNetworkElements: (element: RequiredNetworkElementType) => { + dispatcher.dispatch(removeFromRequiredNetworkElementsAsyncActionCreator(element)); + }, + mountNetworkElement: (element: RequiredNetworkElementType) => { + dispatcher.dispatch(mountNetworkElementActionCreatorAsync(element)); + }, + mountAndRquireNetworkElement: (element: RequiredNetworkElementType) => { + dispatcher.dispatch(addToRequiredNetworkElementsAsyncActionCreator(element)); + dispatcher.dispatch(mountNetworkElementActionCreatorAsync(element)); + }, + unmountNetworkElement: (element: RequiredNetworkElementType) => { + dispatcher.dispatch(unmountNetworkElementActionCreatorAsync(element && element.mountId)); + } +} +); + +type DialogSettings = { + dialogTitle: string, + dialogDescription: string, + applyButtonText: string, + cancelButtonText: string, + enableMountIdEditor: boolean, + enableUsernameEditor: boolean, + enableExtendedEditor: boolean, +} + +const settings: { [key: string]: DialogSettings } = { + [EditNetworkElementDialogMode.None]: { + dialogTitle: "", + dialogDescription: "", + applyButtonText: "", + cancelButtonText: "", + enableMountIdEditor: false, + enableUsernameEditor: false, + enableExtendedEditor: false, + }, + [EditNetworkElementDialogMode.UnknownNetworkElementToRequiredNetworkElements] : { + dialogTitle: "Add to required network elements" , + dialogDescription: "Create a new NetworkElement in planning database as clone of existing real NetworkElement." , + applyButtonText: "Add to required network elements" , + cancelButtonText: "Cancel", + enableMountIdEditor: false, + enableUsernameEditor: true, + enableExtendedEditor: false, + }, + [EditNetworkElementDialogMode.RequiredNetworkElementToUnknownNetworkElements]: { + dialogTitle: "Remove from required network elements", + dialogDescription: "Do you really want to remove the required element:", + applyButtonText: "Remove network element", + cancelButtonText: "Cancel", + enableMountIdEditor: false, + enableUsernameEditor: false, + enableExtendedEditor: false, + }, + [EditNetworkElementDialogMode.MountNetworkElementToUnknonwNetworkElements]: { + dialogTitle: "Mount to unknown network elements", + dialogDescription: "Mount this network element:", + applyButtonText: "Mount network element", + cancelButtonText: "Cancel", + enableMountIdEditor: true, + enableUsernameEditor: true, + enableExtendedEditor: true, + }, + [EditNetworkElementDialogMode.MountNetworkElementToRequiredNetworkElements]: { + dialogTitle: "Mount to required network elements", + dialogDescription: "Mount this network element:", + applyButtonText: "Mount network element", + cancelButtonText: "Cancel", + enableMountIdEditor: true, + enableUsernameEditor: true, + enableExtendedEditor: true, + }, + [EditNetworkElementDialogMode.MountNetworkElement]: { + dialogTitle: "Mount network element", + dialogDescription: "mount this network element:", + applyButtonText: "mount network element", + cancelButtonText: "Cancel", + enableMountIdEditor: false, + enableUsernameEditor: false, + enableExtendedEditor: false, + }, + [EditNetworkElementDialogMode.UnmountNetworkElement]: { + dialogTitle: "Unmount network element", + dialogDescription: "unmount this network element:", + applyButtonText: "Unmount network element", + cancelButtonText: "Cancel", + enableMountIdEditor: false, + enableUsernameEditor: false, + enableExtendedEditor: false, + }, +} + +type EditNetworkElementDialogComponentProps = Connect<undefined,typeof mapDispatch> & { + mode: EditNetworkElementDialogMode; + initialNetworkElement: RequiredNetworkElementType; + onClose: () => void; +}; + +type EditNetworkElementDialogComponentState = RequiredNetworkElementType & { + required: boolean; +}; + +class EditNetworkElementDialogComponent extends React.Component<EditNetworkElementDialogComponentProps, EditNetworkElementDialogComponentState> { + constructor(props: EditNetworkElementDialogComponentProps) { + super(props); + + this.state = { + mountId: this.props.initialNetworkElement.mountId, + host: this.props.initialNetworkElement.host, + port: this.props.initialNetworkElement.port, + password: this.props.initialNetworkElement.password, + username: this.props.initialNetworkElement.username, + required: false + }; + } + + render(): JSX.Element { + const setting = settings[this.props.mode]; + return ( + <Dialog open={ this.props.mode !== EditNetworkElementDialogMode.None }> + <DialogTitle id="form-dialog-title">{ setting.dialogTitle }</DialogTitle> + <DialogContent> + <DialogContentText> + { setting.dialogDescription } + </DialogContentText> + <TextField disabled={ !setting.enableMountIdEditor } spellCheck={false} autoFocus margin="dense" id="name" label="Name" type="text" fullWidth value={ this.state.mountId } onChange={(event)=>{ this.setState({mountId: event.target.value}); } } /> + <TextField disabled={ !setting.enableMountIdEditor } spellCheck={false} margin="dense" id="ipaddress" label="IP address" type="text" fullWidth value={ this.state.host } onChange={(event)=>{ this.setState({host: event.target.value}); } }/> + <TextField disabled={ !setting.enableMountIdEditor } spellCheck={false} margin="dense" id="netconfport" label="NetConf port" type="number" fullWidth value={ this.state.port.toString() } onChange={(event)=>{ this.setState({port: +event.target.value}); } }/> + { setting.enableUsernameEditor && <TextField disabled={ !setting.enableUsernameEditor } spellCheck={ false } margin="dense" id="username" label="Username" type="text" fullWidth value={ this.state.username } onChange={ (event) => { this.setState({ username: event.target.value }); } } /> || null } + { setting.enableUsernameEditor && <TextField disabled={ !setting.enableUsernameEditor } spellCheck={ false } margin="dense" id="password" label="Password" type="password" fullWidth value={ this.state.password } onChange={ (event) => { this.setState({ password: event.target.value }); } } /> || null } + </DialogContent> + <DialogActions> + <Button onClick={ (event) => { + this.onApply({ + mountId: this.state.mountId, + host: this.state.host, + port: this.state.port, + username: this.state.username, + password: this.state.password + }); + event.preventDefault(); + event.stopPropagation(); + } } > { setting.applyButtonText } </Button> + <Button onClick={ (event) => { + this.onCancel(); + event.preventDefault(); + event.stopPropagation(); + } } color="secondary"> { setting.cancelButtonText } </Button> + </DialogActions> + </Dialog> + ) + } + + private onApply = (element: RequiredNetworkElementType) => { + this.props.onClose && this.props.onClose(); + switch (this.props.mode) { + case EditNetworkElementDialogMode.UnknownNetworkElementToRequiredNetworkElements: + element && this.props.addToRequiredNetworkElements(element); + break; + case EditNetworkElementDialogMode.RequiredNetworkElementToUnknownNetworkElements: + element && this.props.removeFromRequiredNetworkElements(element); + break; + case EditNetworkElementDialogMode.MountNetworkElementToUnknonwNetworkElements: + element && this.props.mountNetworkElement(element); + break; + case EditNetworkElementDialogMode.MountNetworkElementToRequiredNetworkElements: + element && this.props.mountAndRquireNetworkElement(element); + break; + case EditNetworkElementDialogMode.MountNetworkElement: + element && this.props.mountNetworkElement(element); + break; + case EditNetworkElementDialogMode.UnmountNetworkElement: + element && this.props.unmountNetworkElement(element); + break; + } + }; + + private onCancel = () => { + this.props.onClose && this.props.onClose(); + } + + static getDerivedStateFromProps(props: EditNetworkElementDialogComponentProps, state: EditNetworkElementDialogComponentState & { _initialNetworkElement: RequiredNetworkElementType }): EditNetworkElementDialogComponentState & { _initialNetworkElement: RequiredNetworkElementType } { + if (props.initialNetworkElement !== state._initialNetworkElement) { + state = { + ...state, + ...props.initialNetworkElement, + _initialNetworkElement: props.initialNetworkElement, + }; + } + return state; + } +} + +export const EditNetworkElementDialog = connect(undefined, mapDispatch)(EditNetworkElementDialogComponent); +export default EditNetworkElementDialog;
\ No newline at end of file |