Commit 7c061586 authored by Sonja Happ's avatar Sonja Happ

signal mappings editable

parent 366df81b
......@@ -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({
......
......@@ -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) => (
......
......@@ -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>
......
......@@ -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;
signals[row].index = parseInt(event.target.value, 10);
this.setState({signals: signals});
this.valid = true;
}
};
//this.setState({ length, signals });
//TODO dispatch changes by calling API
handleDelete = (index) => {
/*if (this.props.onChange != null) {
this.props.onChange(this.state.length, signals);
}
*/
}
let data = this.state.signals[index]
this.props.onDelete(data);
resetState() {
//this.setState({});
}
};
render() {
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.valid=false;
// 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);
});
return(
this.setState({signals: signals})
}
<Dialog show={this.props.show} title="Edit Signal Mapping" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
render() {
const buttonStyle = {
marginLeft: '10px'
};
{/*
<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>
*/}
return(
<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>
);
......
......@@ -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();
......@@ -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()
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment