Add edit signals button to dashboard #262

src/dashboard/dashboard-button-group.js

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

src/dashboard/dashboard.js

@@ -90,7 +90,7 @@ class Dashboard extends Component {
         dashboard.height = maxHeight + 80;
       }
     }
-
+    
     // filter signals to the ones belonging to the scenario at hand
     let signals = []
     let allSignals = SignalStore.getState();
@@ -118,6 +118,9 @@ class Dashboard extends Component {
       });
     }
 
+    let editOutputSignalsModal = prevState.editOutputSignalsModal;
+    let editInputSignalsModal = prevState.editInputSignalsModal;
+
     return {
       dashboard,
       widgets,
@@ -131,8 +134,8 @@ class Dashboard extends Component {
       paused: prevState.paused || false,
 
       editModal:  prevState.editModal || false,
-      editOutputSignalsModal: prevState.editOutputSignals || false,
-      editInputSignalsModal: prevState.editInputSignals || false,
+      editOutputSignalsModal: editOutputSignalsModal,
+      editInputSignalsModal: editInputSignalsModal,
       filesEditModal: prevState.filesEditModal || false,
       filesEditSaveState: prevState.filesEditSaveState || [],
       modalData:  null,

src/signal/edit-signal-mapping.js

@@ -18,6 +18,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Button, FormGroup, FormLabel, FormText} from 'react-bootstrap';
+import {Collapse} from 'react-collapse';
 import Table from '../common/table';
 import TableColumn from '../common/table-column';
 import Dialog from "../common/dialogs/dialog";
@@ -40,7 +41,8 @@ class EditSignalMapping extends React.Component {
     this.state = {
       dir,
       signals: [],
-      modifiedSignalIDs : []
+      modifiedSignalIDs : [],
+      openCollapse: false
     };
   }
 
@@ -49,15 +51,15 @@ class EditSignalMapping extends React.Component {
     // filter all signals by configID and direction
     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 = 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);
     }
   }
@@ -132,10 +134,20 @@ class EditSignalMapping extends React.Component {
 
   };
 
-  handleAdd = () => {
+  handleAdd = (configID = null) => {
 
+    if(typeof this.props.configs !== "undefined"){
+
+      if(configID === null){
+        this.setState({openCollapse: true});
+        return
+        }
+      }
+      else{
+        configID = this.props.configID;
+      }
     let newSignal = {
-      configID: this.props.configID,
+      configID: configID,
       direction: this.state.dir,
       name: "PlaceholderName",
       unit: "PlaceholderUnit",
@@ -149,6 +161,7 @@ class EditSignalMapping extends React.Component {
       token: this.props.sessionToken
     });
 
+    this.setState({openCollapse: false});
   };
 
   resetState() {
@@ -190,7 +203,19 @@ class EditSignalMapping extends React.Component {
               </Table>
 
               <div style={{ float: 'right' }}>
-                <Button onClick={() => this.handleAdd()} style={buttonStyle}><Icon icon="plus" /> Signal</Button>
+                <Button key={50} onClick={() => this.handleAdd()} style={buttonStyle}><Icon icon="plus" /> Signal</Button>
+              </div>
+              <div>
+                <Collapse isOpened={this.state.openCollapse}>
+                <h6>Choose a Component Configuration to add the signal to: </h6>
+                <div>
+                {typeof this.props.configs !== "undefined" && this.props.configs.map(config => (
+
+                  <Button key ={config.id} onClick={() => this.handleAdd(config.id)} style={buttonStyle}>{config.name}</Button>
+
+                ))}
+                </div>
+                </Collapse> 
               </div>
           </FormGroup>
         </Dialog>