signal mappings editable

src/common/data-managers/rest-data-manager.js

@@ -138,7 +138,8 @@ class RestDataManager {
     RestAPI.post(this.requestURL('load/add',null,param), obj, token).then(response => {
         AppDispatcher.dispatch({
           type: this.type + 's/added',
-          data: response[this.type]
+          data: response[this.type],
+          token: token
         });
       }).catch(error => {
         AppDispatcher.dispatch({
@@ -153,7 +154,8 @@ class RestDataManager {
         AppDispatcher.dispatch({
           type: this.type + 's/removed',
           data: response[this.type],
-          original: object
+          original: object,
+          token: token
         });
       }).catch(error => {
         AppDispatcher.dispatch({

src/common/table.js

@@ -206,7 +206,7 @@ class CustomTable extends Component {
 
                     return (<td key={cellIndex} tabIndex={tabIndex} onClick={ evtHdls.onCellClick } onFocus={ evtHdls.onCellFocus } onBlur={ evtHdls.onCellBlur }>
                       {(this.state.editCell[0] === cellIndex && this.state.editCell[1] === rowIndex ) ? (
-                        <FormControl type="text" value={cell} onChange={(event) => children[cellIndex].props.onInlineChange(event, rowIndex, cellIndex)} inputRef={ref => { this.activeInput = ref; }} />
+                        <FormControl as='input' type="text" value={cell} onChange={(event) => children[cellIndex].props.onInlineChange(event, rowIndex, cellIndex)} ref={ref => { this.activeInput = ref; }} />
                       ) : (
                         <span>
                           {cell.map((element, elementIndex) => (

src/scenario/scenario.js

@@ -87,8 +87,8 @@ class Scenario extends React.Component {
       selectedSimulationModels: [],
       modalSimulationModelIndex: 0,
 
-      editInputSignalsModal: false,
       editOutputSignalsModal: false,
+      editInputSignalsModal: false,
 
       newDashboardModal: false,
       deleteDashboardModal: false,
@@ -129,6 +129,15 @@ class Scenario extends React.Component {
 
   }
 
+  static getDerivedStateFromProps(props, state){
+
+    let simulationModels = SimulationModelStore.getState().filter(simmodel => simmodel.scenarioID === parseInt(props.match.params.scenario, 10));
+
+    return {
+      simulationModels: simulationModels
+    };
+  }
+
   addSimulationModel(){
     const simulationModel = {
       scenarioID: this.state.scenario.id,
@@ -163,23 +172,52 @@ class Scenario extends React.Component {
     }
   }
 
-  closeEditOutputSignalsModal(data){
-    this.setState({ editOutputSignalsModal : false });
-    //data is an array of signals
+  closeDeleteSignalModal(data){
+      // data contains the signal to be deleted
+      if (data){
 
-    if (data){
-      //TODO: dispatch changes to signals
-      //TODO: Check if new signal is added
-    }
+        AppDispatcher.dispatch({
+          type: 'signals/start-remove',
+          data: data,
+          token: this.state.sessionToken
+        });
 
+      }
   }
 
-  closeEditInputSignalsModal(data){
-    this.setState({ editInputSignalsModal : false });
-    //data is an array of signals
-    if(data){
-      //TODO: dispatch changes to signals
-      //TODO: Check if new signal is added
+  closeNewSignalModal(data){
+      //data contains the new signal incl. simulationModelID and direction
+      if (data) {
+        AppDispatcher.dispatch({
+          type: 'signals/start-add',
+          data: data,
+          token: this.state.sessionToken
+        });
+      }
+  }
+
+  closeEditSignalsModal(data, 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) {
+        //TODO: Check if new signal is added by checking id set to -1?
+
+        //dispatch changes to signals
+        AppDispatcher.dispatch({
+          type: 'signals/start-edit',
+          data: sig,
+          token: this.state.sessionToken,
+        });
+      }
     }
 
   }
@@ -349,9 +387,6 @@ class Scenario extends React.Component {
       marginLeft: '10px'
     };
 
-    console.log("simulationmodel modal data: ", this.state.modalSimulationModelData)
-    console.log("simulation models: ", this.state.simulationModels)
-
     return <div className='section'>
       <h1>{this.state.scenario.name}</h1>
 
@@ -361,13 +396,13 @@ class Scenario extends React.Component {
         <TableColumn checkbox onChecked={(index, event) => this.onSimulationModelChecked(index, event)} width='30' />
         <TableColumn title='Name' dataKey='name' />
         <TableColumn
-          title='# Outputs'
+          title='# Output Signals'
           dataKey='outputLength'
           editButton
           onEdit={index => this.setState({ editOutputSignalsModal: true, modalSimulationModelData: this.state.simulationModels[index], modalSimulationModelIndex: index })}
         />
         <TableColumn
-          title='# Inputs'
+          title='# Input Signals'
           dataKey='inputLength'
           editButton
           onEdit={index => this.setState({ editInputSignalsModal: true, modalSimulationModelData: this.state.simulationModels[index], modalSimulationModelIndex: index })}
@@ -408,8 +443,22 @@ class Scenario extends React.Component {
       <ImportSimulationModelDialog show={this.state.importSimulationModelModal} onClose={data => this.importSimulationModel(data)} simulators={this.state.simulators} />
       <DeleteDialog title="simulation model" name={this.state.modalSimulationModelData.name} show={this.state.deleteSimulationModelModal} onClose={(c) => this.closeDeleteSimulationModelModal(c)} />
 
-      <EditSignalMapping show={this.state.editOutputSignalsModal} onClose={data => this.closeEditOutputSignalsModal(data)} direction="Output" signals={this.state.signals} simulationModelID={this.state.modalSimulationModelData.id} />
-      <EditSignalMapping show={this.state.editInputSignalsModal} onClose={data => this.closeEditInputSignalsModal(data)} direction="Input" signals={this.state.signals} simulationModelID={this.state.modalSimulationModelData.id}/>
+      <EditSignalMapping
+        show={this.state.editOutputSignalsModal}
+        onCloseEdit={(data, direction) => this.closeEditSignalsModal(data, direction)}
+        onAdd={(data) => this.closeNewSignalModal(data)}
+        onDelete={(data) => this.closeDeleteSignalModal(data)}
+        direction="Output"
+        signals={this.state.signals}
+        simulationModelID={this.state.modalSimulationModelData.id} />
+      <EditSignalMapping
+        show={this.state.editInputSignalsModal}
+        onCloseEdit={(data, direction) => this.closeEditSignalsModal(data, direction)}
+        onAdd={(data) => this.closeNewSignalModal(data)}
+        onDelete={(data) => this.closeDeleteSignalModal(data)}
+        direction="Input"
+        signals={this.state.signals}
+        simulationModelID={this.state.modalSimulationModelData.id}/>
 
       {/*Dashboard table*/}
       <h2>Dashboards</h2>

src/signal/edit-signal-mapping.js

@@ -18,19 +18,20 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, FormLabel, FormText } from 'react-bootstrap';
+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 LoginStore from "../user/login-store";
+import Icon from "../common/icon";
 
 class EditSignalMapping extends React.Component {
+  valid = false;
 
   static getStores() {
-    return [ SignalStore, LoginStore];
+    return [ SignalStore];
   }
 
   constructor(props) {
@@ -44,84 +45,120 @@ class EditSignalMapping extends React.Component {
       }
 
       this.state = {
-        sessionToken: LoginStore.getState().token,
-        dir
+        dir,
+        signals: [],
       };
   }
 
-  componentDidMount(): void {
+  static getDerivedStateFromProps(props, state){
 
+    // filter all signals by Simulation Model ID and direction
+    let signals = props.signals.filter((sig) => {
+      return (sig.simulationModelID === props.simulationModelID) && (sig.direction === state.dir);
+    });
+
+    return {
+      signals: signals
+    };
   }
 
+
   onClose(canceled) {
       if (canceled === false) {
         if (this.valid) {
-          // TODO
-          let data = null;
+          let data = this.state.signals;
 
-          //forward modified simulation model to callback function
-          this.props.onClose(data)
+          //forward modified signals back to callback function
+          this.props.onCloseEdit(data, this.state.dir)
         }
       } else {
-        this.props.onClose();
+        this.props.onCloseEdit(null, this.state.dir);
       }
     }
 
+  onDelete(e){
+    console.log("On signal delete");
+  }
+
 
   handleMappingChange = (event, row, column) => {
       const signals = this.state.signals;
 
-      //const length = this.state.length;
-
       if (column === 1) { // Name change
-          signals[row].name = event.target.value;
+          if (event.target.value !== '') {
+            signals[row].name = event.target.value;
+            this.setState({signals: signals});
+            this.valid = true;
+          }
       } else if (column === 2) { // unit change
-          signals[row].unit = event.target.value;
+          if (event.target.value !== '') {
+            signals[row].unit = event.target.value;
+            this.setState({signals: signals});
+            this.valid = true;
+          }
       } else if (column === 0) { //index change
-          signals[row].index = event.target.value;
-      }
 
-      //this.setState({ length, signals });
-      //TODO dispatch changes by calling API
-
-      /*if (this.props.onChange != null) {
-          this.props.onChange(this.state.length, signals);
+            signals[row].index = parseInt(event.target.value, 10);
+            this.setState({signals: signals});
+            this.valid = true;
       }
-      */
-  }
+  };
+
+  handleDelete = (index) => {
+
+    let data = this.state.signals[index]
+    this.props.onDelete(data);
+
+  };
+
+  handleAdd = () => {
+    console.log("add signal");
+
+    let newSignal = {
+      simulationModelID: this.props.simulationModelID,
+      direction: this.state.dir,
+      name: "PlaceholderName",
+      unit: "PlaceholderUnit",
+      index: 999
+    };
+
+    this.props.onAdd(newSignal)
+
+  };
 
   resetState() {
-    //this.setState({});
-  }
+      this.valid=false;
 
-  render() {
-
-      // filter all signals by Simulation Model ID and direction
       let signals = this.props.signals.filter((sig) => {
         return (sig.simulationModelID === this.props.simulationModelID) && (sig.direction === this.state.dir);
       });
 
+      this.setState({signals: signals})
+  }
+
+  render() {
+
+      const buttonStyle = {
+        marginLeft: '10px'
+      };
+
       return(
 
-        <Dialog show={this.props.show} title="Edit Signal Mapping" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
-
-          {/*
-            <FormGroup validated={this.validateLength()}>
-              <FormLabel>{this.props.name} Length</FormLabel>
-              <FormControl name='length' type='number' placeholder='Enter length' defaultValue={this.state.length}
-                           min='1' onBlur={this.handleLengthChange}/>
-              <FormControl.Feedback/>
-            </FormGroup>
-          */}
+        <Dialog show={this.props.show} title="Edit Signal Mapping" buttonTitle="Save Edits" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
 
           <FormGroup>
               <FormLabel>{this.props.direction} Mapping</FormLabel>
-              <FormText>Click <i>name</i> or <i>type</i> cell to edit</FormText>
-              <Table data={signals}>
-                  <TableColumn title='Index' dataKey='index' inlineEditable onInlineChange={this.handleMappingChange()} />
-                  <TableColumn title='Name' dataKey='name' inlineEditable onInlineChange={this.handleMappingChange} />
-                  <TableColumn title='Unit' dataKey='unit' inlineEditable onInlineChange={this.handleMappingChange} />
+              <FormText>Click <i>Index</i>, <i>Name</i> or <i>Unit</i> cell to edit</FormText>
+              <Table data={this.state.signals}>
+                  <TableColumn title='Index' dataKey='index' inlineEditable onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
+                  <TableColumn title='Name' dataKey='name' inlineEditable onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
+                  <TableColumn title='Unit' dataKey='unit' inlineEditable onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
+                  <TableColumn title='Remove' deleteButton onDelete={(index) => this.handleDelete(index)} />
               </Table>
+
+              <div style={{ float: 'right' }}>
+                <Button onClick={() => this.handleAdd()} style={buttonStyle}><Icon icon="plus" /> Signal</Button>
+              </div>
           </FormGroup>
         </Dialog>
   );

src/signal/signal-store.js

@@ -20,4 +20,26 @@
 import ArrayStore from '../common/array-store';
 import SignalsDataManager from './signals-data-manager'
 
-export default new ArrayStore('signals', SignalsDataManager);
+class SignalStore extends  ArrayStore{
+  constructor() {
+    super('signals', SignalsDataManager);
+  }
+
+  reduce(state, action) {
+    switch (action.type) {
+      case 'signals/added':
+        SignalsDataManager.reloadSimulationModel(action.token, action.data);
+        return super.reduce(state, action);
+      case 'signals/removed':
+        SignalsDataManager.reloadSimulationModel(action.token, action.data);
+        return super.reduce(state, action);
+
+      default:
+        return super.reduce(state, action);
+    }
+  }
+
+
+}
+
+export default new SignalStore();

src/signal/signals-data-manager.js

@@ -18,5 +18,27 @@
  ******************************************************************************/
 
 import RestDataManager from '../common/data-managers/rest-data-manager';
+import RestAPI from "../common/api/rest-api";
+import AppDispatcher from "../common/app-dispatcher";
 
-export default new RestDataManager('signal', '/signals');
+class SignalsDataManager extends RestDataManager{
+
+  constructor() {
+    super('signal', '/signals');
+  }
+
+  reloadSimulationModel(token, data){
+    // request in signals
+    console.log("Reloading simulation model due to signal add/remove")
+    RestAPI.get(this.makeURL('/models/' + data.simulationModelID), token).then(response => {
+      AppDispatcher.dispatch({
+        type: 'simulationModels/edited',
+        data: response.simulationModel
+      });
+    });
+
+  }
+
+}
+
+export default new SignalsDataManager()