mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
improve signal mapping dialog, table widget applies scaling Factor for signals and changes legend accordingly #130
This commit is contained in:
parent
453ed4b154
commit
24ccc9eca9
4 changed files with 56 additions and 35 deletions
|
@ -29,6 +29,7 @@ class TableColumn extends Component {
|
|||
linkKey: '',
|
||||
dataIndex: false,
|
||||
inlineEditable: false,
|
||||
inputType: 'text',
|
||||
clickable: false,
|
||||
labelKey: null,
|
||||
checkbox: false,
|
||||
|
|
|
@ -205,7 +205,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 as='input' type="text" value={cell} onChange={(event) => children[cellIndex].props.onInlineChange(event, rowIndex, cellIndex)} ref={ref => { this.activeInput = ref; }} />
|
||||
<FormControl as='input' type={children[cellIndex].props.inputType} value={cell} onChange={(event) => children[cellIndex].props.onInlineChange(event, rowIndex, cellIndex)} ref={ref => { this.activeInput = ref; }} />
|
||||
) : (
|
||||
<span>
|
||||
{cell.map((element, elementIndex) => (
|
||||
|
|
|
@ -39,7 +39,8 @@ class EditSignalMapping extends React.Component {
|
|||
|
||||
this.state = {
|
||||
dir,
|
||||
signals: []
|
||||
signals: [],
|
||||
modifiedSignalIDs : []
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -51,46 +52,60 @@ class EditSignalMapping extends React.Component {
|
|||
});
|
||||
|
||||
return {
|
||||
signals: signals
|
||||
signals: signals,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
onClose(canceled) {
|
||||
|
||||
for (let signalID of this.state.modifiedSignalIDs){
|
||||
|
||||
let sig = this.state.signals.find(s => s.id === signalID);
|
||||
|
||||
//dispatch changes to signal
|
||||
AppDispatcher.dispatch({
|
||||
type: 'signals/start-edit',
|
||||
data: sig,
|
||||
token: this.props.sessionToken,
|
||||
});
|
||||
}
|
||||
|
||||
this.props.onCloseEdit(this.state.dir)
|
||||
}
|
||||
|
||||
handleMappingChange = (event, row, column) => {
|
||||
let sig = {}
|
||||
|
||||
let signals = this.state.signals;
|
||||
let modifiedSignals = this.state.modifiedSignalIDs;
|
||||
|
||||
|
||||
if (column === 1) { // Name change
|
||||
if (event.target.value !== '') {
|
||||
sig = this.state.signals[row];
|
||||
sig.name = event.target.value;
|
||||
}
|
||||
signals[row].name = event.target.value;
|
||||
if (modifiedSignals.find(id => id === signals[row].id) === undefined){
|
||||
modifiedSignals.push(signals[row].id);
|
||||
}
|
||||
} else if (column === 2) { // unit change
|
||||
if (event.target.value !== '') {
|
||||
sig = this.state.signals[row];
|
||||
sig.unit = event.target.value;
|
||||
}
|
||||
signals[row].unit = event.target.value;
|
||||
if (modifiedSignals.find(id => id === signals[row].id) === undefined){
|
||||
modifiedSignals.push(signals[row].id);
|
||||
}
|
||||
} else if (column === 3) { // scaling factor change
|
||||
if (parseFloat(event.target.value) !== 0.0) {
|
||||
sig = this.state.signals[row];
|
||||
sig.scalingFactor = parseFloat(event.target.value);
|
||||
signals[row].scalingFactor = parseFloat(event.target.value);
|
||||
if (modifiedSignals.find(id => id === signals[row].id) === undefined){
|
||||
modifiedSignals.push(signals[row].id);
|
||||
}
|
||||
} else if (column === 0) { //index change
|
||||
sig = this.state.signals[row];
|
||||
sig.index = parseInt(event.target.value, 10);
|
||||
signals[row].index =parseInt(event.target.value, 10);
|
||||
if (modifiedSignals.find(id => id === signals[row].id) === undefined){
|
||||
modifiedSignals.push(signals[row].id);
|
||||
}
|
||||
}
|
||||
|
||||
if (sig !== {}){
|
||||
//dispatch changes to signal
|
||||
AppDispatcher.dispatch({
|
||||
type: 'signals/start-edit',
|
||||
data: sig,
|
||||
token: this.props.sessionToken,
|
||||
});
|
||||
}
|
||||
this.setState({
|
||||
signals: signals,
|
||||
modifiedSignalIDs: modifiedSignals
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
|
@ -145,7 +160,7 @@ class EditSignalMapping extends React.Component {
|
|||
<Dialog
|
||||
show={this.props.show}
|
||||
title="Edit Signal Mapping"
|
||||
buttonTitle="Close"
|
||||
buttonTitle="Save"
|
||||
blendOutCancel = {true}
|
||||
onClose={(c) => this.onClose(c)}
|
||||
onReset={() => this.resetState()}
|
||||
|
@ -155,10 +170,10 @@ class EditSignalMapping extends React.Component {
|
|||
<FormLabel>{this.props.direction} Mapping</FormLabel>
|
||||
<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='Scaling Factor' dataKey='scalingFactor' inlineEditable onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
|
||||
<TableColumn title='Index' dataKey='index' inlineEditable inputType='number' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
|
||||
<TableColumn title='Name' dataKey='name' inlineEditable inputType='text' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
|
||||
<TableColumn title='Unit' dataKey='unit' inlineEditable inputType='text' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
|
||||
<TableColumn title='Scaling Factor' dataKey='scalingFactor' inlineEditable inputType='number' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
|
||||
<TableColumn title='Remove' deleteButton onDelete={(index) => this.handleDelete(index)} />
|
||||
</Table>
|
||||
|
||||
|
|
|
@ -41,15 +41,20 @@ class WidgetTable extends Component {
|
|||
// determine ID of infrastructure component related to signal (via config)
|
||||
let icID = props.icIDs[sig.id]
|
||||
|
||||
let signalName = sig.name;
|
||||
if(sig.scalingFactor !== 1.0){
|
||||
signalName = signalName + "(x" + String(sig.scalingFactor) + ")";
|
||||
}
|
||||
|
||||
// distinguish between input and output signals
|
||||
if (sig.direction === "out") {
|
||||
if (props.data[icID] != null && props.data[icID].output != null && props.data[icID].output.values != null) {
|
||||
if (props.data[icID].output.values[sig.index-1] !== undefined) {
|
||||
let data = props.data[icID].output.values[sig.index-1];
|
||||
rows.push({
|
||||
name: sig.name,
|
||||
name: signalName,
|
||||
unit: sig.unit,
|
||||
value: data[data.length - 1].y
|
||||
value: data[data.length - 1].y * sig.scalingFactor
|
||||
});
|
||||
|
||||
}
|
||||
|
@ -59,9 +64,9 @@ class WidgetTable extends Component {
|
|||
if (props.data[icID].input.values[sig.index-1] !== undefined) {
|
||||
let data = props.data[icID].input.values[sig.index-1];
|
||||
rows.push({
|
||||
name: sig.name,
|
||||
name: signalName,
|
||||
unit: sig.unit,
|
||||
value: data[data.length - 1].y
|
||||
value: data[data.length - 1].y * sig.scalingFactor
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -86,7 +91,7 @@ class WidgetTable extends Component {
|
|||
|
||||
var columns = [
|
||||
<TableColumn key={1} title="Signal" dataKey="name" width={120} />,
|
||||
<TableColumn key={2} title="Value" dataKey="value" modifier={format('.4s')} />
|
||||
<TableColumn key={2} title="Value" dataKey="value" modifier={format('.4f')} />
|
||||
];
|
||||
|
||||
if (this.props.widget.customProperties.showUnit)
|
||||
|
|
Loading…
Add table
Reference in a new issue