sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx

   1 import * as React from 'react';
   2
   3 import Button from '@material-ui/core/Button';
   4 import TextField from '@material-ui/core/TextField';
   5 import Dialog from '@material-ui/core/Dialog';
   6 import DialogActions from '@material-ui/core/DialogActions';
   7 import DialogContent from '@material-ui/core/DialogContent';
   8 import DialogContentText from '@material-ui/core/DialogContentText';
   9 import DialogTitle from '@material-ui/core/DialogTitle';
  10
  11 import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect';
  12
  13 import {
  14   addToRequiredNetworkElementsAsyncActionCreator,
  15   removeFromRequiredNetworkElementsAsyncActionCreator
  16 } from '../actions/requiredNetworkElementsActions';
  17
  18 import { unmountNetworkElementAsyncActionCreator, mountNetworkElementAsyncActionCreator } from '../actions/mountedNetworkElementsActions';
  19 import { RequiredNetworkElementType } from '../models/requiredNetworkElements';
  20
  21 export enum EditNetworkElementDialogMode {
  22   None = "none",
  23   UnknownNetworkElementToRequiredNetworkElements = "unknownNetworkElementToRequiredNetworkElements",
  24   RequiredNetworkElementToUnknownNetworkElements = "requiredNetworkElementToUnknownNetworkElements",
  25   MountNetworkElementToRequiredNetworkElements = "mountNetworkElementToRequiredNetworkElements",
  26   MountNetworkElementToUnknonwNetworkElements = "mountNetworkElementToRequiredUnknownElements",
  27   MountNetworkElement = "mountNetworkElement",
  28   UnmountNetworkElement = "unmountNetworkElement",
  29 }
  30
  31 const mapDispatch = (dispatcher: IDispatcher) => ({
  32   addToRequiredNetworkElements: (element: RequiredNetworkElementType) => {
  33     dispatcher.dispatch(addToRequiredNetworkElementsAsyncActionCreator(element));
  34   },
  35   removeFromRequiredNetworkElements: (element: RequiredNetworkElementType) => {
  36     dispatcher.dispatch(removeFromRequiredNetworkElementsAsyncActionCreator(element));
  37   },
  38   mountNetworkElement: (element: RequiredNetworkElementType) => {
  39     dispatcher.dispatch(mountNetworkElementAsyncActionCreator(element));
  40   },
  41   mountAndRquireNetworkElement: (element: RequiredNetworkElementType) => {
  42     dispatcher.dispatch(addToRequiredNetworkElementsAsyncActionCreator(element));
  43     dispatcher.dispatch(mountNetworkElementAsyncActionCreator(element));
  44   },
  45   unmountNetworkElement: (element: RequiredNetworkElementType) => {
  46     dispatcher.dispatch(unmountNetworkElementAsyncActionCreator(element && element.mountId));
  47   }
  48 }
  49 );
  50
  51 type DialogSettings = {
  52   dialogTitle: string,
  53   dialogDescription: string,
  54   applyButtonText: string,
  55   cancelButtonText: string,
  56   enableMountIdEditor: boolean,
  57   enableUsernameEditor: boolean,
  58   enableExtendedEditor: boolean,
  59 }
  60
  61 const settings: { [key: string]: DialogSettings } = {
  62   [EditNetworkElementDialogMode.None]: {
  63     dialogTitle: "",
  64     dialogDescription: "",
  65     applyButtonText: "",
  66     cancelButtonText: "",
  67     enableMountIdEditor: false,
  68     enableUsernameEditor: false,
  69     enableExtendedEditor: false,
  70   },
  71   [EditNetworkElementDialogMode.UnknownNetworkElementToRequiredNetworkElements] : {
  72     dialogTitle: "Add to required network elements" ,
  73     dialogDescription: "Create a new NetworkElement in planning database as clone of existing real NetworkElement." ,
  74     applyButtonText: "Add to required network elements" ,
  75     cancelButtonText: "Cancel",
  76     enableMountIdEditor: false,
  77     enableUsernameEditor: true,
  78     enableExtendedEditor: false,
  79   },
  80   [EditNetworkElementDialogMode.RequiredNetworkElementToUnknownNetworkElements]: {
  81     dialogTitle: "Remove from required network elements",
  82     dialogDescription: "Do you really want to remove the required element:",
  83     applyButtonText: "Remove network element",
  84     cancelButtonText: "Cancel",
  85     enableMountIdEditor: false,
  86     enableUsernameEditor: false,
  87     enableExtendedEditor: false,
  88   },
  89   [EditNetworkElementDialogMode.MountNetworkElementToUnknonwNetworkElements]: {
  90     dialogTitle: "Mount to unknown network elements",
  91     dialogDescription: "Mount this network element:",
  92     applyButtonText: "Mount network element",
  93     cancelButtonText: "Cancel",
  94     enableMountIdEditor: true,
  95     enableUsernameEditor: true,
  96     enableExtendedEditor: true,
  97   },
  98   [EditNetworkElementDialogMode.MountNetworkElementToRequiredNetworkElements]: {
  99     dialogTitle: "Mount to required network elements",
 100     dialogDescription: "Mount this network element:",
 101     applyButtonText: "Mount network element",
 102     cancelButtonText: "Cancel",
 103     enableMountIdEditor: true,
 104     enableUsernameEditor: true,
 105     enableExtendedEditor: true,
 106   },
 107   [EditNetworkElementDialogMode.MountNetworkElement]: {
 108     dialogTitle: "Mount network element",
 109     dialogDescription: "mount this network element:",
 110     applyButtonText: "mount network element",
 111     cancelButtonText: "Cancel",
 112     enableMountIdEditor: false,
 113     enableUsernameEditor: false,
 114     enableExtendedEditor: false,
 115   },
 116   [EditNetworkElementDialogMode.UnmountNetworkElement]: {
 117     dialogTitle: "Unmount network element",
 118     dialogDescription: "unmount this network element:",
 119     applyButtonText: "Unmount network element",
 120     cancelButtonText: "Cancel",
 121     enableMountIdEditor: false,
 122     enableUsernameEditor: false,
 123     enableExtendedEditor: false,
 124   },
 125 }
 126
 127 type EditNetworkElementDialogComponentProps = Connect<undefined,typeof mapDispatch> & {
 128   mode: EditNetworkElementDialogMode;
 129   initialNetworkElement: RequiredNetworkElementType;
 130   onClose: () => void;
 131 };
 132
 133 type EditNetworkElementDialogComponentState = RequiredNetworkElementType & {
 134   required: boolean;
 135 };
 136
 137 class EditNetworkElementDialogComponent extends React.Component<EditNetworkElementDialogComponentProps, EditNetworkElementDialogComponentState> {
 138   constructor(props: EditNetworkElementDialogComponentProps) {
 139     super(props);
 140
 141     this.state = {
 142       mountId: this.props.initialNetworkElement.mountId,
 143       host: this.props.initialNetworkElement.host,
 144       port: this.props.initialNetworkElement.port,
 145       password: this.props.initialNetworkElement.password,
 146       username: this.props.initialNetworkElement.username,
 147       required: false
 148     };
 149   }
 150
 151   render(): JSX.Element {
 152     const setting = settings[this.props.mode];
 153     return (
 154       <Dialog open={ this.props.mode !== EditNetworkElementDialogMode.None }>
 155         <DialogTitle id="form-dialog-title">{ setting.dialogTitle }</DialogTitle>
 156         <DialogContent>
 157           <DialogContentText>
 158             { setting.dialogDescription }
 159           </DialogContentText>
 160           <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}); } } />
 161           <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}); } }/>
 162           <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}); } }/>
 163           { 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 }
 164           { 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 }
 165         </DialogContent>
 166         <DialogActions>
 167           <Button onClick={ (event) => {
 168             this.onApply({
 169               mountId: this.state.mountId,
 170               host: this.state.host,
 171               port: this.state.port,
 172               username: this.state.username,
 173               password: this.state.password
 174             });
 175             event.preventDefault();
 176             event.stopPropagation();
 177           } } > { setting.applyButtonText } </Button>
 178           <Button onClick={ (event) => {
 179             this.onCancel();
 180             event.preventDefault();
 181             event.stopPropagation();
 182           } } color="secondary"> { setting.cancelButtonText } </Button>
 183         </DialogActions>
 184       </Dialog>
 185     )
 186   }
 187
 188   private onApply = (element: RequiredNetworkElementType) => {
 189     this.props.onClose && this.props.onClose();
 190     switch (this.props.mode) {
 191       case EditNetworkElementDialogMode.UnknownNetworkElementToRequiredNetworkElements:
 192         element && this.props.addToRequiredNetworkElements(element);
 193         break;
 194       case EditNetworkElementDialogMode.RequiredNetworkElementToUnknownNetworkElements:
 195         element && this.props.removeFromRequiredNetworkElements(element);
 196         break;
 197       case EditNetworkElementDialogMode.MountNetworkElementToUnknonwNetworkElements:
 198         element && this.props.mountNetworkElement(element);
 199         break;
 200       case EditNetworkElementDialogMode.MountNetworkElementToRequiredNetworkElements:
 201         element && this.props.mountAndRquireNetworkElement(element);
 202         break;
 203       case EditNetworkElementDialogMode.MountNetworkElement:
 204         element && this.props.mountNetworkElement(element);
 205         break;
 206       case EditNetworkElementDialogMode.UnmountNetworkElement:
 207         element && this.props.unmountNetworkElement(element);
 208         break;
 209     }
 210   };
 211
 212   private onCancel = () => {
 213     this.props.onClose && this.props.onClose();
 214   }
 215
 216   static getDerivedStateFromProps(props: EditNetworkElementDialogComponentProps, state: EditNetworkElementDialogComponentState & { _initialNetworkElement: RequiredNetworkElementType }): EditNetworkElementDialogComponentState & { _initialNetworkElement: RequiredNetworkElementType } {
 217     if (props.initialNetworkElement !== state._initialNetworkElement) {
 218       state = {
 219         ...state,
 220         ...props.initialNetworkElement,
 221         _initialNetworkElement: props.initialNetworkElement,
 222       };
 223     }
 224     return state;
 225   }
 226 }
 227
 228 export const EditNetworkElementDialog = connect(undefined, mapDispatch)(EditNetworkElementDialogComponent);
 229 export default EditNetworkElementDialog;