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:
parent
ea5311a43b
commit
ef1d960cd4
2 changed files with 66 additions and 101 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Reference in a new issue