WIP: add edit signals button to dashboard #262

src/dashboard/dashboard-button-group.js

@@ -91,6 +91,22 @@ class DashboardButtonGroup extends React.Component {
         </OverlayTrigger>
       );
 
+      buttons.push(
+        <OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"file"}`}> Add, edit or delete input signal </Tooltip>} >
+        <Button key={key} variant= 'light' size="lg" onClick={this.props.onEditInputSignals} style={buttonStyle}>
+          <Icon icon="sign-in-alt" style={iconStyle}/>
+        </Button>
+        </OverlayTrigger>
+      );
+
+      buttons.push(
+        <OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"file"}`}> Add, edit or delete output signals </Tooltip>} >
+        <Button key={key} variant= 'light' size="lg" onClick={this.props.onEditOutputSignals} style={buttonStyle}>
+          <Icon icon="sign-out-alt" style={iconStyle}/>
+        </Button>
+        </OverlayTrigger>
+      );
+
       buttons.push(
         <OverlayTrigger key={key++} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"layout"}`}> Add widgets and edit layout </Tooltip>} >
         <Button key={key} variant= 'light' size="lg" onClick={this.props.onEdit} style={buttonStyle}>

src/dashboard/dashboard.js

@@ -22,7 +22,8 @@ import classNames from 'classnames';
 
 import Widget from '../widget/widget';
 import EditWidget from '../widget/edit-widget/edit-widget';
-import EditFiles from '../file/edit-files'
+import EditFiles from '../file/edit-files';
+import EditSignalMapping from "../signal/edit-signal-mapping";
 import WidgetContextMenu from '../widget/widget-context-menu';
 import WidgetToolbox from '../widget/widget-toolbox';
 import WidgetArea from '../widget/widget-area';
@@ -76,12 +77,11 @@ class Dashboard extends Component {
 
 
     // filter component configurations to the ones that belong to this scenario
-    let configs = []
-    let files = []
+    let configs = [];
+    let files = [];
     if (dashboard !== undefined) {
       configs = ConfigStore.getState().filter(config => config.scenarioID === dashboard.scenarioID);
       files = FileStore.getState().filter(file => file.scenarioID === dashboard.scenarioID);
-
       if(dashboard.height === 0){
         dashboard.height = 400;
       }
@@ -131,6 +131,8 @@ class Dashboard extends Component {
       paused: prevState.paused || false,
 
       editModal:  prevState.editModal || false,
+      editOutputSignalsModal: prevState.editOutputSignals || false,
+      editInputSignalsModal: prevState.editInputSignals || false,
       filesEditModal: prevState.filesEditModal || false,
       filesEditSaveState: prevState.filesEditSaveState || [],
       modalData:  null,
@@ -429,6 +431,22 @@ class Dashboard extends Component {
     this.setState({ paused: false });
   };
 
+  editInputSignals(){
+    this.setState({editInputSignalsModal: true});
+  };
+
+  editOutputSignals(){
+    this.setState({editOutputSignalsModal: true});
+  };
+
+  closeEditSignalsModal(direction){
+    if( direction === "in") {
+      this.setState({editInputSignalsModal: false});
+    } else if( direction === "out"){
+      this.setState({editOutputSignalsModal: false});
+    }
+  }
+
 
   render() {
     if (this.state.dashboard === undefined){
@@ -456,6 +474,8 @@ class Dashboard extends Component {
           onPause={this.pauseData.bind(this)}
           onUnpause={this.unpauseData.bind(this)}
           onEditFiles = {this.startEditFiles.bind(this)}
+          onEditOutputSignals = {this.editOutputSignals.bind(this)}
+          onEditInputSignals = {this.editInputSignals.bind(this)}
         />
       </div>
 
@@ -521,6 +541,25 @@ class Dashboard extends Component {
           scenarioID={this.state.dashboard.scenarioID}
         />
 
+        <EditSignalMapping
+          show={this.state.editOutputSignalsModal}
+          onCloseEdit={(direction) => this.closeEditSignalsModal(direction)}
+          direction="Output"
+          signals={this.state.signals}
+          configID={null}
+          configs={this.state.configs}
+          sessionToken={this.state.sessionToken}
+        />
+        <EditSignalMapping
+          show={this.state.editInputSignalsModal}
+          onCloseEdit={(direction) => this.closeEditSignalsModal(direction)}
+          direction="Input"
+          signals={this.state.signals}
+          configID={null}
+          configs={this.state.configs}
+          sessionToken={this.state.sessionToken}
+        />
+
 
       </div>
     </div>;

src/signal/edit-signal-mapping.js

@@ -47,9 +47,20 @@ class EditSignalMapping extends React.Component {
   static getDerivedStateFromProps(props, state){
 
     // filter all signals by configID and direction
-    let signals = props.signals.filter((sig) => {
+    let signals = [];
+    if(props.signalID != null || typeof props.configs === "undefined"){
+    signals = props.signals.filter((sig) => {
       return (sig.configID === props.configID) && (sig.direction === state.dir);
     });
+  }
+  else{
+    for(let i = 0; i < props.configs.length; i++){
+      let temp = props.signals.filter((sig) => {
+        return (sig.configID === props.configs[i].id) && (sig.direction === state.dir);
+      })
+      signals = signals.concat(temp);
+    }
+  }
 
     return {
       signals: signals,