1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00

improve signal mapping dialog (point 2 of #225)

This commit is contained in:
Sonja Happ 2020-06-23 11:48:37 +02:00
parent ea5311a43b
commit ef1d960cd4
2 changed files with 66 additions and 101 deletions

View file

@ -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 {
<EditSignalMapping
show={this.state.editOutputSignalsModal}
onCloseEdit={(data, direction) => 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}
/>
<EditSignalMapping
show={this.state.editInputSignalsModal}
onCloseEdit={(data, direction) => 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*/}
<h2 style={tableHeadingStyle}>Dashboards</h2>

View file

@ -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(
<Dialog show={this.props.show} title="Edit Signal Mapping" buttonTitle="Save Edits" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
<Dialog
show={this.props.show}
title="Edit Signal Mapping"
buttonTitle="Close"
blendOutCancel = {true}
onClose={(c) => this.onClose(c)}
onReset={() => this.resetState()}
valid={true}>
<FormGroup>
<FormLabel>{this.props.direction} Mapping</FormLabel>