mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
wip: add and edit widgets
This commit is contained in:
parent
2f6a6851c4
commit
7fcbe73796
17 changed files with 86 additions and 73 deletions
|
@ -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}
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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>;
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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 }} />
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
);
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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.'});
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Add table
Reference in a new issue