improve signal mapping dialog (point 2 of #225)

src/scenario/scenario.js

@@ -49,6 +49,10 @@ class Scenario extends React.Component {
   }
 
   static calculateState(prevState, props) {
+    if (prevState == null) {
+      prevState = {};
+    }
+
     // get selected scenario
     const sessionToken = LoginStore.getState().token;
 
@@ -86,12 +90,12 @@ class Scenario extends React.Component {
       deleteConfigModal: false,
       importConfigModal: false,
       editConfigModal: false,
-      modalConfigData: {},
+      modalConfigData: (prevState.modalConfigData !== {} && prevState.modalConfigData !== undefined )? prevState.modalConfigData : {},
       selectedConfigs: [],
       modalConfigIndex: 0,
 
-      editOutputSignalsModal: false,
-      editInputSignalsModal: false,
+      editOutputSignalsModal: prevState.editOutputSignalsModal || false,
+      editInputSignalsModal: prevState.editInputSignalsModal || false,
 
       newDashboardModal: false,
       deleteDashboardModal: false,
@@ -346,52 +350,12 @@ class Scenario extends React.Component {
   * Signal modification methods
   ############################################## */
 
-  closeDeleteSignalModal(data){
-    // data contains the signal to be deleted
-    if (data){
-
-      AppDispatcher.dispatch({
-        type: 'signals/start-remove',
-        data: data,
-        token: this.state.sessionToken
-      });
-
-    }
-  }
-
-  closeNewSignalModal(data){
-    //data contains the new signal incl. configID and direction
-    if (data) {
-      AppDispatcher.dispatch({
-        type: 'signals/start-add',
-        data: data,
-        token: this.state.sessionToken
-      });
-    }
-  }
-
-  closeEditSignalsModal(data, direction){
-
+  closeEditSignalsModal(direction){
     if( direction === "in") {
       this.setState({editInputSignalsModal: false});
     } else if( direction === "out"){
       this.setState({editOutputSignalsModal: false});
-    } else {
-      return; // no valid direction
     }
-
-    if (data){
-      //data is an array of signals
-      for (let sig of data) {
-        //dispatch changes to signals
-        AppDispatcher.dispatch({
-          type: 'signals/start-edit',
-          data: sig,
-          token: this.state.sessionToken,
-        });
-      }
-    }
-
   }
 
   /* ##############################################
@@ -488,20 +452,20 @@ class Scenario extends React.Component {
 
       <EditSignalMapping
         show={this.state.editOutputSignalsModal}
-        onCloseEdit={(data, direction) => this.closeEditSignalsModal(data, direction)}
-        onAdd={(data) => this.closeNewSignalModal(data)}
-        onDelete={(data) => this.closeDeleteSignalModal(data)}
+        onCloseEdit={(direction) => this.closeEditSignalsModal(direction)}
         direction="Output"
         signals={this.state.signals}
-        configID={this.state.modalConfigData.id} />
+        configID={this.state.modalConfigData.id}
+        sessionToken={this.state.sessionToken}
+      />
       <EditSignalMapping
         show={this.state.editInputSignalsModal}
-        onCloseEdit={(data, direction) => this.closeEditSignalsModal(data, direction)}
-        onAdd={(data) => this.closeNewSignalModal(data)}
-        onDelete={(data) => this.closeDeleteSignalModal(data)}
+        onCloseEdit={(direction) => this.closeEditSignalsModal(direction)}
         direction="Input"
         signals={this.state.signals}
-        configID={this.state.modalConfigData.id}/>
+        configID={this.state.modalConfigData.id}
+        sessionToken={this.state.sessionToken}
+      />
 
       {/*Dashboard table*/}
       <h2 style={tableHeadingStyle}>Dashboards</h2>

src/signal/edit-signal-mapping.js

@@ -18,35 +18,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Button, FormGroup, FormLabel, FormText} from 'react-bootstrap';
-
 import Table from '../common/table';
 import TableColumn from '../common/table-column';
 import Dialog from "../common/dialogs/dialog";
-
-import SignalStore from "./signal-store"
 import Icon from "../common/icon";
+import AppDispatcher from "../common/app-dispatcher";
 
 class EditSignalMapping extends React.Component {
-  valid = false;
-
-  static getStores() {
-    return [ SignalStore];
-  }
 
   constructor(props) {
-      super(props);
+    super(props);
 
-      let dir = "";
-      if ( this.props.direction === "Output"){
-        dir = "out";
-      } else if ( this.props.direction === "Input" ){
-        dir = "in";
-      }
+    let dir = "";
+    if ( this.props.direction === "Output"){
+      dir = "out";
+    } else if ( this.props.direction === "Input" ){
+      dir = "in";
+    }
 
-      this.state = {
-        dir,
-        signals: [],
-      };
+
+    this.state = {
+      dir,
+      signals: []
+    };
   }
 
   static getDerivedStateFromProps(props, state){
@@ -63,55 +57,52 @@ class EditSignalMapping extends React.Component {
 
 
   onClose(canceled) {
-      if (canceled === false) {
-        if (this.valid) {
-          let data = this.state.signals;
-
-          //forward modified signals back to callback function
-          this.props.onCloseEdit(data, this.state.dir)
-        }
-      } else {
-        this.props.onCloseEdit(null, this.state.dir);
-      }
-    }
-
-  onDelete(e){
-    console.log("On signal delete");
+    this.props.onCloseEdit(this.state.dir)
   }
 
-
   handleMappingChange = (event, row, column) => {
       const signals = this.state.signals;
+      let sig = {}
 
       if (column === 1) { // Name change
           if (event.target.value !== '') {
-            signals[row].name = event.target.value;
-            this.setState({signals: signals});
-            this.valid = true;
+            sig = this.state.signals[row];
+            sig.name = event.target.value;
           }
       } else if (column === 2) { // unit change
           if (event.target.value !== '') {
-            signals[row].unit = event.target.value;
-            this.setState({signals: signals});
-            this.valid = true;
+            sig = this.state.signals[row];
+            sig.unit = event.target.value;
           }
       } else if (column === 0) { //index change
-
-            signals[row].index = parseInt(event.target.value, 10);
-            this.setState({signals: signals});
-            this.valid = true;
+        sig = this.state.signals[row];
+        sig.index = parseInt(event.target.value, 10);
       }
+
+      if (sig !== {}){
+        //dispatch changes to signal
+        AppDispatcher.dispatch({
+          type: 'signals/start-edit',
+          data: sig,
+          token: this.props.sessionToken,
+        });
+      }
+
   };
 
   handleDelete = (index) => {
 
     let data = this.state.signals[index]
-    this.props.onDelete(data);
+
+    AppDispatcher.dispatch({
+      type: 'signals/start-remove',
+      data: data,
+      token: this.props.sessionToken
+    });
 
   };
 
   handleAdd = () => {
-    console.log("add signal");
 
     let newSignal = {
       configID: this.props.configID,
@@ -121,12 +112,15 @@ class EditSignalMapping extends React.Component {
       index: 999
     };
 
-    this.props.onAdd(newSignal)
+    AppDispatcher.dispatch({
+      type: 'signals/start-add',
+      data: newSignal,
+      token: this.props.sessionToken
+    });
 
   };
 
   resetState() {
-      this.valid=false;
 
       let signals = this.props.signals.filter((sig) => {
         return (sig.configID === this.props.configID) && (sig.direction === this.state.dir);
@@ -143,7 +137,14 @@ class EditSignalMapping extends React.Component {
 
       return(
 
-        <Dialog show={this.props.show} title="Edit Signal Mapping" buttonTitle="Save Edits" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
+        <Dialog
+          show={this.props.show}
+          title="Edit Signal Mapping"
+          buttonTitle="Close"
+          blendOutCancel = {true}
+          onClose={(c) => this.onClose(c)}
+          onReset={() => this.resetState()}
+          valid={true}>
 
           <FormGroup>
               <FormLabel>{this.props.direction} Mapping</FormLabel>