Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

wip: add and edit widgets

Browse source
This commit is contained in:
Laura Fuentes Grau 2020-01-02 18:24:33 +01:00
parent 2f6a6851c4
commit 7fcbe73796
17 changed files with 86 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/dashboard/dashboard.js
View file

@ -293,8 +293,8 @@ class Dashboard extends Component {
}
handleDrop(widget) {
widget.dashboardID = this.state.dashboard.id;
widget.dashboardID = this.state.dashboard.get('id');
console.log(widget);
AppDispatcher.dispatch({
type: 'widgets/start-add',
@ -473,8 +473,8 @@ class Dashboard extends Component {
key={widgetKey}
data={widgets[widgetKey]}
simulation={this.state.simulation}
onWidgetChange={this.widgetChange.bind(this)}
onWidgetStatusChange={this.widgetStatusChange.bind(this)}
onWidgetChange={this.widgetChange}
onWidgetStatusChange={this.widgetStatusChange}
editing={this.state.editing}
index={widgetKey}
grid={grid}

28
src/widget/edit-widget.js
View file

@ -38,6 +38,7 @@ class EditWidgetDialog extends React.Component {
name: '',
simulationModel: '',
signal: 0
}
};
}
@ -68,7 +69,8 @@ class EditWidgetDialog extends React.Component {
}
handleChange(e) {
if (e.constructor === Array) {
/*is this needed?
if (e.constructor === Array) {
// Every property in the array will be updated
console.log("####its an array!");
let changes = e.reduce( (changesObject, event) => {
@ -80,7 +82,8 @@ class EditWidgetDialog extends React.Component {
}, {});
this.setState({ temporal: Object.assign({}, this.state.temporal, changes ) });
} else {
*/
if(e.target.type !== 'text'){
let changeObject = {};
if (e.target.id === 'lockAspect') {
changeObject[e.target.id] = e.target.checked;
@ -100,12 +103,15 @@ class EditWidgetDialog extends React.Component {
changeObject[e.target.id] = e.target.checked;
} else if (e.target.type === 'number') {
changeObject[e.target.id] = Number(e.target.value);
} else {
}
else {
changeObject[e.target.id] = e.target.value;
}
console.log("this.state.temporal is: ");
console.log(this.state.temporal);
console.log("the event target id: " + e.target.id);
console.log("this state target type is: " + e.target.type);
console.log("the value is: " + e.target.value)
console.log("change Object is: ");
console.log(changeObject);
@ -113,11 +119,19 @@ class EditWidgetDialog extends React.Component {
let finalChange = this.state.temporal;
finalChange.customProperties[e.target.id] = changeObject[e.target.id];
this.setState({ temporal: finalChange});
}
}
else{
if(this.state.temporal[e.target.id]){
let finalChange = this.state.temporal;
finalChange[e.target.id] = e.target.value;
this.setState({ temporal: finalChange});
}
}
}
resetState() {

2
src/widget/widget.js
View file

@ -81,7 +81,7 @@ class Widget extends React.Component {
if (this.state.sessionToken == null) {
return;
}
console.log('widget componentwillmount called');
AppDispatcher.dispatch({
type: 'files/start-load',
token: this.state.sessionToken,

8
src/widget/widgets/button.js
View file

@ -34,20 +34,20 @@ class WidgetButton extends Component {
}
onPress(e) {
if (!this.props.widget.toggle) {
if (!this.props.widget.customProperties.toggle) {
this.setState({ pressed: true });
this.valueChanged(this.props.widget.on_value);
this.valueChanged(this.props.widget.customProperties.on_value);
}
}
onRelease(e) {
let nextState = false;
if (this.props.widget.toggle) {
if (this.props.widget.customProperties.toggle) {
nextState = !this.state.pressed;
}
this.setState({ pressed: nextState });
this.valueChanged(nextState ? this.props.widget.on_value : this.props.widget.off_value);
this.valueChanged(nextState ? this.props.widget.customProperties.on_value : this.props.widget.customProperties.off_value);
}
valueChanged(newValue) {

4
src/widget/widgets/custom-action.js
View file

@ -54,7 +54,7 @@ class WidgetCustomAction extends Component {
AppDispatcher.dispatch({
type: 'simulators/start-action',
simulator: this.state.simulator,
data: this.props.widget.actions,
data: this.props.widget.customProperties.actions,
token: this.state.sessionToken
});
}
@ -62,7 +62,7 @@ class WidgetCustomAction extends Component {
render() {
return <div className="widget-custom-action full">
<Button className="full" disabled={this.state.simulator === null} onClick={(e) => this.onClick()}>
<Icon icon={this.props.widget.icon} /> <span dangerouslySetInnerHTML={{ __html: this.props.widget.name }} />
<Icon icon={this.props.widget.customProperties.icon} /> <span dangerouslySetInnerHTML={{ __html: this.props.widget.name }} />
</Button>
</div>;
}

16
src/widget/widgets/gauge.js
View file

@ -66,7 +66,7 @@ class WidgetGauge extends Component {
}
// check if value has changed
const signal = nextProps.data[simulator].output.values[nextProps.widget.signal];
const signal = nextProps.data[simulator].output.values[nextProps.widget.customProperties.signal];
// Take just 3 decimal positions
// Note: Favor this method over Number.toFixed(n) in order to avoid a type conversion, since it returns a String
if (signal != null) {
@ -95,9 +95,9 @@ class WidgetGauge extends Component {
this.gauge.maxValue = maxValue;
}
if (nextProps.widget.valueUseMinMax) {
if (this.state.minValue > nextProps.widget.valueMin) {
minValue = nextProps.widget.valueMin;
if (nextProps.widget.customProperties.valueUseMinMax) {
if (this.state.minValue > nextProps.widget.customProperties.valueMin) {
minValue = nextProps.widget.customProperties.valueMin;
this.setState({ minValue });
this.gauge.setMinValue(minValue);
@ -105,8 +105,8 @@ class WidgetGauge extends Component {
updateLabels = true;
}
if (this.state.maxValue < nextProps.widget.valueMax) {
maxValue = nextProps.widget.valueMax;
if (this.state.maxValue < nextProps.widget.customProperties.valueMax) {
maxValue = nextProps.widget.customProperties.valueMax;
this.setState({ maxValue });
this.gauge.maxValue = maxValue;
@ -153,7 +153,7 @@ class WidgetGauge extends Component {
}
// calculate zones
let zones = this.props.widget.colorZones ? this.props.widget.zones : null;
let zones = this.props.widget.customProperties.colorZones ? this.props.widget.customProperties.zones : null;
if (zones != null) {
// adapt range 0-100 to actual min-max
const step = (maxValue - minValue) / 100;
@ -197,7 +197,7 @@ class WidgetGauge extends Component {
let signalType = null;
if (this.props.simulationModel != null) {
signalType = (this.props.simulationModel != null && this.props.simulationModel.outputLength > 0 && this.props.widget.signal < this.props.simulationModel.outputLength) ? this.props.simulationModel.outputMapping[this.props.widget.signal].type : '';
signalType = (this.props.simulationModel != null && this.props.simulationModel.outputLength > 0 && this.props.widget.customProperties.signal < this.props.simulationModel.outputLength) ? this.props.simulationModel.outputMapping[this.props.widget.customProperties.signal].type : '';
}
return (

2
src/widget/widgets/html.js
View file

@ -23,7 +23,7 @@ import React from 'react';
class WidgetHTML extends React.Component {
render() {
return <div dangerouslySetInnerHTML={{__html: this.props.widget.content }} />
return <div dangerouslySetInnerHTML={{__html: this.props.widget.customProperties.content }} />
}
}

4
src/widget/widgets/image.js
View file

@ -27,7 +27,7 @@ import config from '../../config';
class WidgetImage extends React.Component {
componentWillReceiveProps(nextProps) {
// Query the image referenced by the widget
let widgetFile = nextProps.widget.file;
let widgetFile = nextProps.widget.customProperties.file;
if (widgetFile && !nextProps.files.find(file => file._id === widgetFile)) {
AppDispatcher.dispatch({
type: 'files/start-load',
@ -38,7 +38,7 @@ class WidgetImage extends React.Component {
}
render() {
const file = this.props.files.find(file => file._id === this.props.widget.file);
const file = this.props.files.find(file => file._id === this.props.widget.customProperties.file);
return (
<div className="full">

10
src/widget/widgets/input.js
View file

@ -40,16 +40,16 @@ class WidgetInput extends Component {
}
// Update value
if (nextProps.widget.default_value && this.state.value === undefined) {
if (nextProps.widget.customProperties.default_value && this.state.value === undefined) {
this.setState({
value: nextProps.widget.default_value
value: nextProps.widget.customProperties.default_value
});
}
// Update unit
if (nextProps.widget.simulationModel && nextProps.simulationModel.inputMapping && this.state.unit !== nextProps.simulationModel.inputMapping[nextProps.widget.signal].type) {
if (nextProps.widget.customProperties.simulationModel && nextProps.simulationModel.inputMapping && this.state.unit !== nextProps.simulationModel.inputMapping[nextProps.widget.customProperties.signal].type) {
this.setState({
unit: nextProps.simulationModel.inputMapping[nextProps.widget.signal].type
unit: nextProps.simulationModel.inputMapping[nextProps.widget.customProperties.signal].type
});
}
}
@ -75,7 +75,7 @@ class WidgetInput extends Component {
<div className="number-input-widget full">
<Form componentClass="fieldset" horizontal>
<FormGroup>
<Col componentClass={FormLabel} xs={3}>
<Col as={FormLabel} xs={3}>
{this.props.widget.name}
</Col>
<Col xs={9}>

2
src/widget/widgets/label.js
View file

@ -25,8 +25,6 @@ import EditWidgetColorControl from '../edit-widget-color-control';
class WidgetLabel extends Component {
render() {
console.log("here is the label; ");
console.log(this.props.widget);
const style = {
fontSize: this.props.widget.customProperties.textSize + 'px',
color: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.fontColor]

8
src/widget/widgets/lamp.js
View file

@ -48,7 +48,7 @@ class WidgetLamp extends Component {
}
// check if value has changed
const signal = nextProps.data[simulator].output.values[nextProps.widget.signal];
const signal = nextProps.data[simulator].output.values[nextProps.widget.customProperties.signal];
if (signal != null && this.state.value !== signal[signal.length - 1].y) {
this.setState({ value: signal[signal.length - 1].y });
}
@ -58,10 +58,10 @@ class WidgetLamp extends Component {
let colors = EditWidgetColorControl.ColorPalette;
let color;
if (Number(this.state.value) > Number(this.props.widget.threshold))
color = colors[this.props.widget.on_color];
if (Number(this.state.value) > Number(this.props.widget.customProperties.threshold))
color = colors[this.props.widget.customProperties.on_color];
else
color = colors[this.props.widget.off_color];
color = colors[this.props.widget.customProperties.off_color];
let style = {
backgroundColor: color,

22
src/widget/widgets/plot-table.js
View file

@ -42,15 +42,15 @@ class WidgetPlotTable extends Component {
}
// Update internal selected signals state with props (different array objects)
if (this.props.widget.signals !== nextProps.widget.signals) {
this.setState( {signals: nextProps.widget.signals});
if (this.props.widget.customProperties.signals !== nextProps.widget.customProperties.signals) {
this.setState( {signals: nextProps.widget.customProperties.signals});
}
// Identify if there was a change in the preselected signals
if (JSON.stringify(nextProps.widget.preselectedSignals) !== JSON.stringify(this.props.widget.preselectedSignals) || this.state.preselectedSignals.length === 0) {
if (JSON.stringify(nextProps.widget.customProperties.preselectedSignals) !== JSON.stringify(this.props.widget.customProperties.preselectedSignals) || this.state.preselectedSignals.length === 0) {
// Update the currently selected signals by intersecting with the preselected signals
// Do the same with the plot values
var intersection = this.computeIntersection(nextProps.widget.preselectedSignals, nextProps.widget.signals);
var intersection = this.computeIntersection(nextProps.widget.customProperties.preselectedSignals, nextProps.widget.customProperties.signals);
this.setState({ signals: intersection });
this.updatePreselectedSignalsState(nextProps);
@ -69,7 +69,7 @@ class WidgetPlotTable extends Component {
// Loop through simulation model signals
(accum, model_signal, signal_index) => {
// Append them if they belong to the current selected type
if (nextProps.widget.preselectedSignals.indexOf(signal_index) > -1) {
if (nextProps.widget.customProperties.preselectedSignals.indexOf(signal_index) > -1) {
accum.push(
{
index: signal_index,
@ -105,7 +105,7 @@ class WidgetPlotTable extends Component {
if (this.props.data[simulator] != null && this.props.data[simulator].output != null && this.props.data[simulator].output.values != null) {
simulatorData = this.props.data[simulator].output.values.filter((values, index) => (
this.props.widget.signals.findIndex(value => value === index) !== -1
this.props.widget.customProperties.signals.findIndex(value => value === index) !== -1
));
}
@ -150,14 +150,14 @@ class WidgetPlotTable extends Component {
<div className="widget-plot">
<Plot
data={simulatorData}
time={this.props.widget.time}
time={this.props.widget.customProperties.time}
width={this.props.widget.width - 100}
height={this.props.widget.height - 55}
yMin={this.props.widget.yMin}
yMax={this.props.widget.yMax}
yUseMinMax={this.props.widget.yUseMinMax}
yMin={this.props.widget.customProperties.yMin}
yMax={this.props.widget.customProperties.yMax}
yUseMinMax={this.props.widget.customProperties.yUseMinMax}
paused={this.props.paused}
yLabel={this.props.widget.ylabel}
yLabel={this.props.widget.customProperties.ylabel}
/>
</div>
</div>

14
src/widget/widgets/plot.js
View file

@ -44,10 +44,10 @@ class WidgetPlot extends React.Component {
// Proceed if a simulation with models and a simulator are available
if (simulator && nextProps.data[simulator] != null && nextProps.data[simulator] != null && nextProps.data[simulator].output != null && nextProps.data[simulator].output.values != null) {
const chosenSignals = nextProps.widget.signals;
const chosenSignals = nextProps.widget.customProperties.signals;
const data = nextProps.data[simulator].output.values.filter((values, index) => (
nextProps.widget.signals.findIndex(value => value === index) !== -1
nextProps.widget.customProperties.signals.findIndex(value => value === index) !== -1
));
// Query the signals that will be displayed in the legend
@ -72,12 +72,12 @@ class WidgetPlot extends React.Component {
data={this.state.data}
height={this.props.widget.height - 55}
width={this.props.widget.width - 20}
time={this.props.widget.time}
yMin={this.props.widget.yMin}
yMax={this.props.widget.yMax}
yUseMinMax={this.props.widget.yUseMinMax}
time={this.props.widget.customProperties.time}
yMin={this.props.widget.customProperties.yMin}
yMax={this.props.widget.customProperties.yMax}
yUseMinMax={this.props.widget.customProperties.yUseMinMax}
paused={this.props.paused}
yLabel={this.props.widget.ylabel}
yLabel={this.props.widget.customProperties.ylabel}
/>
</div>
<PlotLegend signals={this.state.legend} />

10
src/widget/widgets/slider.js
View file

@ -57,9 +57,9 @@ class WidgetSlider extends Component {
}
// Update unit
if (nextProps.widget.simulationModel && nextProps.simulationModel.inputMapping && this.state.unit !== nextProps.simulationModel.inputMapping[nextProps.widget.signal].type) {
if (nextProps.widget.customProperties.simulationModel && nextProps.simulationModel.inputMapping && this.state.unit !== nextProps.simulationModel.inputMapping[nextProps.widget.customProperties.signal].type) {
this.setState({
unit: nextProps.simulationModel.inputMapping[nextProps.widget.signal].type
unit: nextProps.simulationModel.inputMapping[nextProps.widget.customProperties.signal].type
});
}
@ -73,8 +73,8 @@ class WidgetSlider extends Component {
height: baseWidget.width,
minWidth: baseWidget.minHeight,
minHeight: baseWidget.minWidth,
maxWidth: baseWidget.maxHeight,
maxHeight: baseWidget.maxWidth
maxWidth: baseWidget.customProperties.maxHeight,
maxHeight: baseWidget.customProperties.maxWidth
});
nextProps.onWidgetChange(newWidget);
@ -122,7 +122,7 @@ class WidgetSlider extends Component {
<label>{ fields.name }</label>
{ fields.control }
{ fields.value }
{ this.props.widget.showUnit && fields.unit }
{ this.props.widget.customProperties.showUnit && fields.unit }
</div>
)
);

2
src/widget/widgets/table.js
View file

@ -83,7 +83,7 @@ class WidgetTable extends Component {
<TableColumn key={2} title="Value" dataKey="value" modifier={format('.4s')} />
];
if (this.props.widget.showUnit)
if (this.props.widget.customProperties.showUnit)
columns.push(<TableColumn key={3} title="Unit" dataKey="unit" />)
return (

6
src/widget/widgets/topology.js
View file

@ -106,9 +106,9 @@ class WidgetTopology extends React.Component {
}
componentWillReceiveProps(nextProps) {
const file = nextProps.files.find(file => file._id === nextProps.widget.file);
const file = nextProps.files.find(file => file._id === nextProps.widget.customProperties.file);
// Ensure model is requested only once or a different was selected
if (this.props.widget.file !== nextProps.widget.file || (this.state.dashboardState === 'initial' && file)) {
if (this.props.widget.customProperties.file !== nextProps.widget.customProperties.file || (this.state.dashboardState === 'initial' && file)) {
this.setState({'dashboardState': 'loading' });
if (file) {
fetch(new Request('/' + config.publicPathBase + file.path))
@ -141,7 +141,7 @@ class WidgetTopology extends React.Component {
}
} else {
// No file has been selected
if (!nextProps.widget.file) {
if (!nextProps.widget.customProperties.file) {
this.setState({
'dashboardState': 'show_message',
'message': 'Select a topology model first.'});

13
src/widget/widgets/value.js
View file

@ -46,10 +46,11 @@ class WidgetValue extends Component {
return;
}
const unit = nextProps.simulationModel.outputMapping[nextProps.widget.signal].type;
//const unit = nextProps.simulationModel.outputMapping[nextProps.widget.customProperties.signal].type;
const unit = 42;
// check if value has changed
const signal = nextProps.data[simulator].output.values[nextProps.widget.signal];
const signal = nextProps.data[simulator].output.values[nextProps.widget.customProperties.signal];
if (signal != null && this.state.value !== signal[signal.length - 1].y) {
this.setState({ value: signal[signal.length - 1].y, unit });
}
@ -59,10 +60,10 @@ class WidgetValue extends Component {
var value_to_render = Number(this.state.value);
return (
<div className="single-value-widget">
<strong style={{ fontSize: this.props.widget.textSize + 'px' }}>{this.props.widget.name}</strong>
<span style={{ fontSize: this.props.widget.textSize + 'px' }}>{Number.isNaN(value_to_render) ? NaN : format('.3s')(value_to_render)}</span>
{this.props.widget.showUnit &&
<span style={{ fontSize: this.props.widget.textSize + 'px' }}>[{this.state.unit}]</span>
<strong style={{ fontSize: this.props.widget.customProperties.textSize + 'px' }}>{this.props.widget.name}</strong>
<span style={{ fontSize: this.props.widget.customProperties.textSize + 'px' }}>{Number.isNaN(value_to_render) ? NaN : format('.3s')(value_to_render)}</span>
{this.props.widget.customProperties.showUnit &&
<span style={{ fontSize: this.props.widget.customProperties.textSize + 'px' }}>[{this.state.unit}]</span>
}
</div>
);