From 7c0615862c00b2db363938b8ad8f4ccc11780e3d Mon Sep 17 00:00:00 2001 From: Sonja Happ Date: Tue, 18 Feb 2020 11:43:33 +0100 Subject: [PATCH] signal mappings editable --- src/common/data-managers/rest-data-manager.js | 6 +- src/common/table.js | 2 +- src/scenario/scenario.js | 91 ++++++++++--- src/signal/edit-signal-mapping.js | 125 ++++++++++++------ src/signal/signal-store.js | 24 +++- src/signal/signals-data-manager.js | 24 +++- 6 files changed, 202 insertions(+), 70 deletions(-) diff --git a/src/common/data-managers/rest-data-manager.js b/src/common/data-managers/rest-data-manager.js index b60acbf..db4c610 100644 --- a/src/common/data-managers/rest-data-manager.js +++ b/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({ diff --git a/src/common/table.js b/src/common/table.js index 6ec492f..64d118d 100644 --- a/src/common/table.js +++ b/src/common/table.js @@ -206,7 +206,7 @@ class CustomTable extends Component { return ( {(this.state.editCell[0] === cellIndex && this.state.editCell[1] === rowIndex ) ? ( - children[cellIndex].props.onInlineChange(event, rowIndex, cellIndex)} inputRef={ref => { this.activeInput = ref; }} /> + children[cellIndex].props.onInlineChange(event, rowIndex, cellIndex)} ref={ref => { this.activeInput = ref; }} /> ) : ( {cell.map((element, elementIndex) => ( diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 5c1768c..945d73a 100644 --- a/src/scenario/scenario.js +++ b/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

{this.state.scenario.name}

@@ -361,13 +396,13 @@ class Scenario extends React.Component { this.onSimulationModelChecked(index, event)} width='30' /> this.setState({ editOutputSignalsModal: true, modalSimulationModelData: this.state.simulationModels[index], modalSimulationModelIndex: index })} /> this.setState({ editInputSignalsModal: true, modalSimulationModelData: this.state.simulationModels[index], modalSimulationModelIndex: index })} @@ -408,8 +443,22 @@ class Scenario extends React.Component { this.importSimulationModel(data)} simulators={this.state.simulators} /> this.closeDeleteSimulationModelModal(c)} /> - this.closeEditOutputSignalsModal(data)} direction="Output" signals={this.state.signals} simulationModelID={this.state.modalSimulationModelData.id} /> - this.closeEditInputSignalsModal(data)} direction="Input" signals={this.state.signals} simulationModelID={this.state.modalSimulationModelData.id}/> + 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} /> + 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*/}

Dashboards

diff --git a/src/signal/edit-signal-mapping.js b/src/signal/edit-signal-mapping.js index 1d1a32a..2c31a68 100644 --- a/src/signal/edit-signal-mapping.js +++ b/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( - this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> - - {/* - - {this.props.name} Length - - - - */} + this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> {this.props.direction} Mapping - Click name or type cell to edit - - - - + Click Index, Name or Unit cell to edit +
+ this.handleMappingChange(e, row, column)} /> + this.handleMappingChange(e, row, column)} /> + this.handleMappingChange(e, row, column)} /> + this.handleDelete(index)} />
+ +
+ +
); diff --git a/src/signal/signal-store.js b/src/signal/signal-store.js index 2924824..787a3db 100644 --- a/src/signal/signal-store.js +++ b/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(); diff --git a/src/signal/signals-data-manager.js b/src/signal/signals-data-manager.js index cccf994..e933f20 100644 --- a/src/signal/signals-data-manager.js +++ b/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()