1 files changed, 86 insertions, 23 deletions
diff --git a/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorConfigDialog.tsx b/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorConfigDialog.tsx
index 20ece4c22..bcbccccd7 100644
--- a/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorConfigDialog.tsx
+++ b/sdnr/wt/odlux/apps/mediatorApp/src/components/editMediatorConfigDialog.tsx
@@ -55,8 +55,8 @@ const styles = (theme: Theme) => createStyles({
   },
   fab: {
     position: 'absolute',
-    bottom: theme.spacing.unit,
-    right: theme.spacing.unit,
+    bottom: theme.spacing(1),
+    right: theme.spacing(1),
   },
   title: {
     fontSize: 14,
@@ -72,7 +72,7 @@ const styles = (theme: Theme) => createStyles({
     flexDirection: 'row'
   },
   left: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   right: {
     marginLeft: 0,
@@ -160,16 +160,18 @@ type EditMediatorConfigDialogComponentProps = WithStyles<typeof styles> & Connec
   onClose: () => void;
 };
 
-type EditMediatorConfigDialogComponentState = MediatorConfig & { activeTab: number; activeOdlConfig: string };
+type EditMediatorConfigDialogComponentState = MediatorConfig & { activeTab: number; activeOdlConfig: string, forceAddOdlConfig: boolean, isOdlConfigHostnameEmpty: boolean };
 
 class EditMediatorConfigDialogComponent extends React.Component<EditMediatorConfigDialogComponentProps, EditMediatorConfigDialogComponentState> {
-  constructor (props: EditMediatorConfigDialogComponentProps) {
+  constructor(props: EditMediatorConfigDialogComponentProps) {
     super(props);
 
     this.state = {
       ...this.props.mediatorConfig,
       activeTab: 0,
-      activeOdlConfig: ""
+      activeOdlConfig: "",
+      forceAddOdlConfig: false,
+      isOdlConfigHostnameEmpty: false
     };
   }
 
@@ -195,7 +197,7 @@ class EditMediatorConfigDialogComponent extends React.Component<EditMediatorConf
           <DialogContentText>
             {setting.dialogDescription}
           </DialogContentText>
-          <Tabs value={this.state.activeTab} indicatorColor="primary" textColor="primary" onChange={(event, value) => this.setState({ activeTab: value })} >
+          <Tabs value={this.state.activeTab} indicatorColor="secondary" textColor="secondary" onChange={(event, value) => this.setState({ activeTab: value })} >
             <Tab label="Config" />
             <Tab label="ODL AutoConnect" />
           </Tabs>
@@ -203,8 +205,8 @@ class EditMediatorConfigDialogComponent extends React.Component<EditMediatorConf
             <TextField disabled={setting.readonly || setting.readonlyName} spellCheck={false} autoFocus margin="dense" id="name" label="Name" type="text" fullWidth value={this.state.Name} onChange={(event) => { this.setState({ Name: event.target.value }); }} />
             <FormControl fullWidth disabled={setting.readonly}>
               <InputLabel htmlFor="deviceType">Device</InputLabel>
-              <Select value={this.state.DeviceType} onChange={(event) => {
-                const device = this.props.supportedDevices.find(device => device.id === +event.target.value);
+              <Select value={this.state.DeviceType} onChange={(event, value) => {
+                const device = this.props.supportedDevices.find(device => device.id === event.target.value);
                 if (device) {
                   this.setState({
                     DeviceType: device.id,
@@ -242,11 +244,11 @@ class EditMediatorConfigDialogComponent extends React.Component<EditMediatorConf
                 }} ><DeleteIcon /></IconButton>)
                 return (
                   <Panel title={cfg.Server && `${cfg.User ? `${cfg.User}@` : ''}${cfg.Protocol}://${cfg.Server}:${cfg.Port}` || "new odl config"} key={panelId} panelId={panelId} activePanel={this.state.activeOdlConfig} customActionButtons={[deleteButton]}
-                    onToggle={(id) => this.setState({ activeOdlConfig: (this.state.activeOdlConfig === id) ? "" : (id || "") })} >
+                    onToggle={(id) => { this.setState({ activeOdlConfig: (this.state.activeOdlConfig === id) ? "" : (id || "") }); console.log("activeOdlConfig " + id); this.hideHostnameErrormessage(id) }} >
                     <div className={classes.alignInOneLine}>
                       <FormControl className={classes.left} margin={"dense"} >
                         <InputLabel htmlFor={`protocol-${ind}`}>Protocoll</InputLabel>
-                        <Select value={cfg.Protocol} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Protocol", e => (e.target.value))} inputProps={{ name: `protocol-${ind}`, id: `protocol-${ind}` }} fullWidth >
+                        <Select value={cfg.Protocol} onChange={(e, v) => this.odlConfigValueChangeHandlerCreator(ind, "Protocol", e => v)} inputProps={{ name: `protocol-${ind}`, id: `protocol-${ind}` }} fullWidth >
                           <MenuItem value={"http"}>http</MenuItem>
                           <MenuItem value={"https"}>https</MenuItem>
                         </Select>
@@ -254,6 +256,10 @@ class EditMediatorConfigDialogComponent extends React.Component<EditMediatorConf
                       <TextField className={classes.left} spellCheck={false} margin="dense" id="hostname" label="Hostname" type="text" value={cfg.Server} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Server", e => e.target.value)} />
                       <TextField className={classes.right} style={{ maxWidth: "65px" }} spellCheck={false} margin="dense" id="port" label="Port" type="number" value={cfg.Port || ""} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Port", e => +e.target.value)} />
                     </div>
+                    {
+                      this.state.isOdlConfigHostnameEmpty &&
+                      <Typography component={"div"} className={classes.left} color="error" gutterBottom>Please add a hostname.</Typography>
+                    }
                     <div className={classes.alignInOneLine}>
                       <TextField className={classes.left} spellCheck={false} margin="dense" id="username" label="Username" type="text" value={cfg.User} onChange={this.odlConfigValueChangeHandlerCreator(ind, "User", e => e.target.value)} />
                       <TextField className={classes.right} spellCheck={false} margin="dense" id="password" label="Password" type="password" value={cfg.Password} onChange={this.odlConfigValueChangeHandlerCreator(ind, "Password", e => e.target.value)} />
@@ -264,9 +270,15 @@ class EditMediatorConfigDialogComponent extends React.Component<EditMediatorConf
                   </Panel>
                 );
               })
-              : <div className={classes.center} >
-                <Typography component={"div"} className={classes.title} color="textSecondary" gutterBottom>Please add an ODL auto connect configuration.</Typography>
-              </div>
+              : (this.state.forceAddOdlConfig ?
+                <div className={classes.center} >
+                  <Typography component={"div"} className={classes.title} color="error" gutterBottom>Please add at least one ODL auto connect configuration.</Typography>
+                </div>
+                :
+                <div className={classes.center} >
+                  <Typography component={"div"} className={classes.title} color="textSecondary" gutterBottom>Please add an ODL auto connect configuration.</Typography>
+                </div>
+              )
             }
             <Fab className={classes.fab} color="primary" aria-label="Add" onClick={() => this.setState({
               ODLConfig: [...this.state.ODLConfig, { Server: '', Port: 8181, Protocol: 'https', User: 'admin', Password: 'admin', Trustall: false }]
@@ -276,25 +288,76 @@ class EditMediatorConfigDialogComponent extends React.Component<EditMediatorConf
 
         </DialogContent>
         <DialogActions>
-          <Button onClick={(event) => {
-            this.onApply(Object.keys(this.state).reduce<MediatorConfig & { [kex: string]: any }>((acc, key) => {
-              // do not copy activeTab and activeOdlConfig
-              if (key !== "activeTab" && key !== "activeOdlConfig" && key !== "_initialMediatorConfig") acc[key] = (this.state as any)[key];
-              return acc;
-            }, {} as MediatorConfig));
-            event.preventDefault();
-            event.stopPropagation();
-          }} > {setting.applyButtonText} </Button>
+          <Button onClick={(event) => { this.addConfig(event) }} > {setting.applyButtonText} </Button>
           <Button onClick={(event) => {
             this.onCancel();
             event.preventDefault();
             event.stopPropagation();
+            this.resetPanel();
           }} color="secondary"> {setting.cancelButtonText} </Button>
         </DialogActions>
       </Dialog>
     )
   }
 
+  private addConfig = (event: any) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.state.ODLConfig.length === 0) {
+      this.setState({ activeTab: 1, forceAddOdlConfig: true });
+    }
+    else
+      if (this.state.ODLConfig.length > 0) {
+        for (let i = 0; i <= this.state.ODLConfig.length; i++) {
+          if (this.isHostnameEmpty(i)) {
+            this.setState({ activeOdlConfig: 'panel-' + i })
+            this.setState({ isOdlConfigHostnameEmpty: true })
+            return;
+          }
+        }
+
+        this.onApply(Object.keys(this.state).reduce<MediatorConfig & { [kex: string]: any }>((acc, key) => {
+          // do not copy additional state properties
+          if (key !== "activeTab" && key !== "activeOdlConfig" && key !== "isOdlConfigHostnameEmpty"
+            && key !== "forceAddOdlConfig" && key !== "_initialMediatorConfig") acc[key] = (this.state as any)[key];
+          return acc;
+        }, {} as MediatorConfig));
+        this.resetPanel();
+      }
+  }
+
+  private resetPanel = () => {
+    this.setState({ forceAddOdlConfig: false, isOdlConfigHostnameEmpty: false, activeTab: 0 });
+  }
+
+
+  private hideHostnameErrormessage = (panelId: string | null) => {
+
+    if (panelId) {
+      let id = Number(panelId.split('-')[1]);
+      if (!this.isHostnameEmpty(id)) {
+        this.setState({ isOdlConfigHostnameEmpty: false })
+      }
+    }
+  }
+
+  private isHostnameEmpty = (id: number) => {
+
+    const element = this.state.ODLConfig[id];
+    if (element) {
+      if (!element.Server) {
+        return true;
+      }
+      else {
+        return false
+      }
+
+    } else {
+      return null;
+    }
+  }
+
   private onApply = (config: MediatorConfig) => {
     this.props.onClose && this.props.onClose();
     switch (this.props.mode) {