From ef1d960cd48abbb9f39263ae1a92a445f278ea73 Mon Sep 17 00:00:00 2001 From: Sonja Happ Date: Tue, 23 Jun 2020 11:48:37 +0200 Subject: [PATCH] improve signal mapping dialog (point 2 of #225) --- src/scenario/scenario.js | 68 +++++---------------- src/signal/edit-signal-mapping.js | 99 ++++++++++++++++--------------- 2 files changed, 66 insertions(+), 101 deletions(-) diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index e7cd701..3e2d7cd 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -49,6 +49,10 @@ class Scenario extends React.Component { } static calculateState(prevState, props) { + if (prevState == null) { + prevState = {}; + } + // get selected scenario const sessionToken = LoginStore.getState().token; @@ -86,12 +90,12 @@ class Scenario extends React.Component { deleteConfigModal: false, importConfigModal: false, editConfigModal: false, - modalConfigData: {}, + modalConfigData: (prevState.modalConfigData !== {} && prevState.modalConfigData !== undefined )? prevState.modalConfigData : {}, selectedConfigs: [], modalConfigIndex: 0, - editOutputSignalsModal: false, - editInputSignalsModal: false, + editOutputSignalsModal: prevState.editOutputSignalsModal || false, + editInputSignalsModal: prevState.editInputSignalsModal || false, newDashboardModal: false, deleteDashboardModal: false, @@ -346,52 +350,12 @@ class Scenario extends React.Component { * Signal modification methods ############################################## */ - closeDeleteSignalModal(data){ - // data contains the signal to be deleted - if (data){ - - AppDispatcher.dispatch({ - type: 'signals/start-remove', - data: data, - token: this.state.sessionToken - }); - - } - } - - closeNewSignalModal(data){ - //data contains the new signal incl. configID and direction - if (data) { - AppDispatcher.dispatch({ - type: 'signals/start-add', - data: data, - token: this.state.sessionToken - }); - } - } - - closeEditSignalsModal(data, direction){ - + closeEditSignalsModal(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) { - //dispatch changes to signals - AppDispatcher.dispatch({ - type: 'signals/start-edit', - data: sig, - token: this.state.sessionToken, - }); - } - } - } /* ############################################## @@ -488,20 +452,20 @@ class Scenario extends React.Component { this.closeEditSignalsModal(data, direction)} - onAdd={(data) => this.closeNewSignalModal(data)} - onDelete={(data) => this.closeDeleteSignalModal(data)} + onCloseEdit={(direction) => this.closeEditSignalsModal(direction)} direction="Output" signals={this.state.signals} - configID={this.state.modalConfigData.id} /> + configID={this.state.modalConfigData.id} + sessionToken={this.state.sessionToken} + /> this.closeEditSignalsModal(data, direction)} - onAdd={(data) => this.closeNewSignalModal(data)} - onDelete={(data) => this.closeDeleteSignalModal(data)} + onCloseEdit={(direction) => this.closeEditSignalsModal(direction)} direction="Input" signals={this.state.signals} - configID={this.state.modalConfigData.id}/> + configID={this.state.modalConfigData.id} + sessionToken={this.state.sessionToken} + /> {/*Dashboard table*/}

Dashboards

diff --git a/src/signal/edit-signal-mapping.js b/src/signal/edit-signal-mapping.js index 0bfac11..178194f 100644 --- a/src/signal/edit-signal-mapping.js +++ b/src/signal/edit-signal-mapping.js @@ -18,35 +18,29 @@ import React from 'react'; import PropTypes from 'prop-types'; 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 Icon from "../common/icon"; +import AppDispatcher from "../common/app-dispatcher"; class EditSignalMapping extends React.Component { - valid = false; - - static getStores() { - return [ SignalStore]; - } constructor(props) { - super(props); + super(props); - let dir = ""; - if ( this.props.direction === "Output"){ - dir = "out"; - } else if ( this.props.direction === "Input" ){ - dir = "in"; - } + let dir = ""; + if ( this.props.direction === "Output"){ + dir = "out"; + } else if ( this.props.direction === "Input" ){ + dir = "in"; + } - this.state = { - dir, - signals: [], - }; + + this.state = { + dir, + signals: [] + }; } static getDerivedStateFromProps(props, state){ @@ -63,55 +57,52 @@ class EditSignalMapping extends React.Component { onClose(canceled) { - if (canceled === false) { - if (this.valid) { - let data = this.state.signals; - - //forward modified signals back to callback function - this.props.onCloseEdit(data, this.state.dir) - } - } else { - this.props.onCloseEdit(null, this.state.dir); - } - } - - onDelete(e){ - console.log("On signal delete"); + this.props.onCloseEdit(this.state.dir) } - handleMappingChange = (event, row, column) => { const signals = this.state.signals; + let sig = {} if (column === 1) { // Name change if (event.target.value !== '') { - signals[row].name = event.target.value; - this.setState({signals: signals}); - this.valid = true; + sig = this.state.signals[row]; + sig.name = event.target.value; } } else if (column === 2) { // unit change if (event.target.value !== '') { - signals[row].unit = event.target.value; - this.setState({signals: signals}); - this.valid = true; + sig = this.state.signals[row]; + sig.unit = event.target.value; } } else if (column === 0) { //index change - - signals[row].index = parseInt(event.target.value, 10); - this.setState({signals: signals}); - this.valid = true; + sig = this.state.signals[row]; + sig.index = parseInt(event.target.value, 10); } + + if (sig !== {}){ + //dispatch changes to signal + AppDispatcher.dispatch({ + type: 'signals/start-edit', + data: sig, + token: this.props.sessionToken, + }); + } + }; handleDelete = (index) => { let data = this.state.signals[index] - this.props.onDelete(data); + + AppDispatcher.dispatch({ + type: 'signals/start-remove', + data: data, + token: this.props.sessionToken + }); }; handleAdd = () => { - console.log("add signal"); let newSignal = { configID: this.props.configID, @@ -121,12 +112,15 @@ class EditSignalMapping extends React.Component { index: 999 }; - this.props.onAdd(newSignal) + AppDispatcher.dispatch({ + type: 'signals/start-add', + data: newSignal, + token: this.props.sessionToken + }); }; resetState() { - this.valid=false; let signals = this.props.signals.filter((sig) => { return (sig.configID === this.props.configID) && (sig.direction === this.state.dir); @@ -143,7 +137,14 @@ class EditSignalMapping extends React.Component { return( - this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> + this.onClose(c)} + onReset={() => this.resetState()} + valid={true}> {this.props.direction} Mapping