Commit 7fcbe737 authored by Laura Fuentes Grau's avatar Laura Fuentes Grau
Browse files

wip: add and edit widgets

parent 2f6a6851
...@@ -293,8 +293,8 @@ class Dashboard extends Component { ...@@ -293,8 +293,8 @@ class Dashboard extends Component {
} }
handleDrop(widget) { handleDrop(widget) {
widget.dashboardID = this.state.dashboard.get('id');
widget.dashboardID = this.state.dashboard.id; console.log(widget);
AppDispatcher.dispatch({ AppDispatcher.dispatch({
type: 'widgets/start-add', type: 'widgets/start-add',
...@@ -473,8 +473,8 @@ class Dashboard extends Component { ...@@ -473,8 +473,8 @@ class Dashboard extends Component {
key={widgetKey} key={widgetKey}
data={widgets[widgetKey]} data={widgets[widgetKey]}
simulation={this.state.simulation} simulation={this.state.simulation}
onWidgetChange={this.widgetChange.bind(this)} onWidgetChange={this.widgetChange}
onWidgetStatusChange={this.widgetStatusChange.bind(this)} onWidgetStatusChange={this.widgetStatusChange}
editing={this.state.editing} editing={this.state.editing}
index={widgetKey} index={widgetKey}
grid={grid} grid={grid}
......
...@@ -38,6 +38,7 @@ class EditWidgetDialog extends React.Component { ...@@ -38,6 +38,7 @@ class EditWidgetDialog extends React.Component {
name: '', name: '',
simulationModel: '', simulationModel: '',
signal: 0 signal: 0
} }
}; };
} }
...@@ -68,7 +69,8 @@ class EditWidgetDialog extends React.Component { ...@@ -68,7 +69,8 @@ class EditWidgetDialog extends React.Component {
} }
handleChange(e) { handleChange(e) {
if (e.constructor === Array) { /*is this needed?
if (e.constructor === Array) {
// Every property in the array will be updated // Every property in the array will be updated
console.log("####its an array!"); console.log("####its an array!");
let changes = e.reduce( (changesObject, event) => { let changes = e.reduce( (changesObject, event) => {
...@@ -80,7 +82,8 @@ class EditWidgetDialog extends React.Component { ...@@ -80,7 +82,8 @@ class EditWidgetDialog extends React.Component {
}, {}); }, {});
this.setState({ temporal: Object.assign({}, this.state.temporal, changes ) }); this.setState({ temporal: Object.assign({}, this.state.temporal, changes ) });
} else { */
if(e.target.type !== 'text'){
let changeObject = {}; let changeObject = {};
if (e.target.id === 'lockAspect') { if (e.target.id === 'lockAspect') {
changeObject[e.target.id] = e.target.checked; changeObject[e.target.id] = e.target.checked;
...@@ -100,12 +103,15 @@ class EditWidgetDialog extends React.Component { ...@@ -100,12 +103,15 @@ class EditWidgetDialog extends React.Component {
changeObject[e.target.id] = e.target.checked; changeObject[e.target.id] = e.target.checked;
} else if (e.target.type === 'number') { } else if (e.target.type === 'number') {
changeObject[e.target.id] = Number(e.target.value); changeObject[e.target.id] = Number(e.target.value);
} else { }
else {
changeObject[e.target.id] = e.target.value; changeObject[e.target.id] = e.target.value;
} }
console.log("this.state.temporal is: "); console.log("this.state.temporal is: ");
console.log(this.state.temporal); console.log(this.state.temporal);
console.log("the event target id: " + e.target.id); 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("the value is: " + e.target.value)
console.log("change Object is: "); console.log("change Object is: ");
console.log(changeObject); console.log(changeObject);
...@@ -113,11 +119,19 @@ class EditWidgetDialog extends React.Component { ...@@ -113,11 +119,19 @@ class EditWidgetDialog extends React.Component {
let finalChange = this.state.temporal; let finalChange = this.state.temporal;
finalChange.customProperties[e.target.id] = changeObject[e.target.id]; finalChange.customProperties[e.target.id] = changeObject[e.target.id];
this.setState({ temporal: finalChange}); 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() { resetState() {
......
...@@ -81,7 +81,7 @@ class Widget extends React.Component { ...@@ -81,7 +81,7 @@ class Widget extends React.Component {
if (this.state.sessionToken == null) { if (this.state.sessionToken == null) {
return; return;
} }
console.log('widget componentwillmount called');
AppDispatcher.dispatch({ AppDispatcher.dispatch({
type: 'files/start-load', type: 'files/start-load',
token: this.state.sessionToken, token: this.state.sessionToken,
......
...@@ -34,20 +34,20 @@ class WidgetButton extends Component { ...@@ -34,20 +34,20 @@ class WidgetButton extends Component {
} }
onPress(e) { onPress(e) {
if (!this.props.widget.toggle) { if (!this.props.widget.customProperties.toggle) {
this.setState({ pressed: true }); this.setState({ pressed: true });
this.valueChanged(this.props.widget.on_value); this.valueChanged(this.props.widget.customProperties.on_value);
} }
} }
onRelease(e) { onRelease(e) {
let nextState = false; let nextState = false;
if (this.props.widget.toggle) { if (this.props.widget.customProperties.toggle) {
nextState = !this.state.pressed; nextState = !this.state.pressed;
} }
this.setState({ pressed: nextState }); 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) { valueChanged(newValue) {
......
...@@ -54,7 +54,7 @@ class WidgetCustomAction extends Component { ...@@ -54,7 +54,7 @@ class WidgetCustomAction extends Component {
AppDispatcher.dispatch({ AppDispatcher.dispatch({
type: 'simulators/start-action', type: 'simulators/start-action',
simulator: this.state.simulator, simulator: this.state.simulator,
data: this.props.widget.actions, data: this.props.widget.customProperties.actions,
token: this.state.sessionToken token: this.state.sessionToken
}); });
} }
...@@ -62,7 +62,7 @@ class WidgetCustomAction extends Component { ...@@ -62,7 +62,7 @@ class WidgetCustomAction extends Component {
render() { render() {
return <div className="widget-custom-action full"> return <div className="widget-custom-action full">
<Button className="full" disabled={this.state.simulator === null} onClick={(e) => this.onClick()}> <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> </Button>
</div>; </div>;
} }
......
...@@ -66,7 +66,7 @@ class WidgetGauge extends Component { ...@@ -66,7 +66,7 @@ class WidgetGauge extends Component {
} }
// check if value has changed // 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 // 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 // Note: Favor this method over Number.toFixed(n) in order to avoid a type conversion, since it returns a String
if (signal != null) { if (signal != null) {
...@@ -95,9 +95,9 @@ class WidgetGauge extends Component { ...@@ -95,9 +95,9 @@ class WidgetGauge extends Component {
this.gauge.maxValue = maxValue; this.gauge.maxValue = maxValue;
} }
if (nextProps.widget.valueUseMinMax) { if (nextProps.widget.customProperties.valueUseMinMax) {
if (this.state.minValue > nextProps.widget.valueMin) { if (this.state.minValue > nextProps.widget.customProperties.valueMin) {
minValue = nextProps.widget.valueMin; minValue = nextProps.widget.customProperties.valueMin;
this.setState({ minValue }); this.setState({ minValue });
this.gauge.setMinValue(minValue); this.gauge.setMinValue(minValue);
...@@ -105,8 +105,8 @@ class WidgetGauge extends Component { ...@@ -105,8 +105,8 @@ class WidgetGauge extends Component {
updateLabels = true; updateLabels = true;
} }
if (this.state.maxValue < nextProps.widget.valueMax) { if (this.state.maxValue < nextProps.widget.customProperties.valueMax) {
maxValue = nextProps.widget.valueMax; maxValue = nextProps.widget.customProperties.valueMax;
this.setState({ maxValue }); this.setState({ maxValue });
this.gauge.maxValue = maxValue; this.gauge.maxValue = maxValue;
...@@ -153,7 +153,7 @@ class WidgetGauge extends Component { ...@@ -153,7 +153,7 @@ class WidgetGauge extends Component {
} }
// calculate zones // 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) { if (zones != null) {
// adapt range 0-100 to actual min-max // adapt range 0-100 to actual min-max
const step = (maxValue - minValue) / 100; const step = (maxValue - minValue) / 100;
...@@ -197,7 +197,7 @@ class WidgetGauge extends Component { ...@@ -197,7 +197,7 @@ class WidgetGauge extends Component {
let signalType = null; let signalType = null;
if (this.props.simulationModel != 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 ( return (
......
...@@ -23,7 +23,7 @@ import React from 'react'; ...@@ -23,7 +23,7 @@ import React from 'react';
class WidgetHTML extends React.Component { class WidgetHTML extends React.Component {
render() { 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'; ...@@ -27,7 +27,7 @@ import config from '../../config';
class WidgetImage extends React.Component { class WidgetImage extends React.Component {
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
// Query the image referenced by the widget // 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)) { if (widgetFile && !nextProps.files.find(file => file._id === widgetFile)) {
AppDispatcher.dispatch({ AppDispatcher.dispatch({
type: 'files/start-load', type: 'files/start-load',
...@@ -38,7 +38,7 @@ class WidgetImage extends React.Component { ...@@ -38,7 +38,7 @@ class WidgetImage extends React.Component {
} }
render() { 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 ( return (
<div className="full"> <div className="full">
......
...@@ -40,16 +40,16 @@ class WidgetInput extends Component { ...@@ -40,16 +40,16 @@ class WidgetInput extends Component {
} }
// Update value // Update value
if (nextProps.widget.default_value && this.state.value === undefined) { if (nextProps.widget.customProperties.default_value && this.state.value === undefined) {
this.setState({ this.setState({
value: nextProps.widget.default_value value: nextProps.widget.customProperties.default_value
}); });
} }
// Update unit // 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({ 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 { ...@@ -75,7 +75,7 @@ class WidgetInput extends Component {
<div className="number-input-widget full"> <div className="number-input-widget full">
<Form componentClass="fieldset" horizontal> <Form componentClass="fieldset" horizontal>
<FormGroup> <FormGroup>
<Col componentClass={FormLabel} xs={3}> <Col as={FormLabel} xs={3}>
{this.props.widget.name} {this.props.widget.name}
</Col> </Col>
<Col xs={9}> <Col xs={9}>
......
...@@ -25,8 +25,6 @@ import EditWidgetColorControl from '../edit-widget-color-control'; ...@@ -25,8 +25,6 @@ import EditWidgetColorControl from '../edit-widget-color-control';
class WidgetLabel extends Component { class WidgetLabel extends Component {
render() { render() {
console.log("here is the label; ");
console.log(this.props.widget);
const style = { const style = {
fontSize: this.props.widget.customProperties.textSize + 'px', fontSize: this.props.widget.customProperties.textSize + 'px',
color: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.fontColor] color: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.fontColor]
......
...@@ -48,7 +48,7 @@ class WidgetLamp extends Component { ...@@ -48,7 +48,7 @@ class WidgetLamp extends Component {
} }
// check if value has changed // 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) { if (signal != null && this.state.value !== signal[signal.length - 1].y) {
this.setState({ value: signal[signal.length - 1].y }); this.setState({ value: signal[signal.length - 1].y });
} }
...@@ -58,10 +58,10 @@ class WidgetLamp extends Component { ...@@ -58,10 +58,10 @@ class WidgetLamp extends Component {
let colors = EditWidgetColorControl.ColorPalette; let colors = EditWidgetColorControl.ColorPalette;
let color; let color;
if (Number(this.state.value) > Number(this.props.widget.threshold)) if (Number(this.state.value) > Number(this.props.widget.customProperties.threshold))
color = colors[this.props.widget.on_color]; color = colors[this.props.widget.customProperties.on_color];
else else
color = colors[this.props.widget.off_color]; color = colors[this.props.widget.customProperties.off_color];
let style = { let style = {
backgroundColor: color, backgroundColor: color,
......
...@@ -42,15 +42,15 @@ class WidgetPlotTable extends Component { ...@@ -42,15 +42,15 @@ class WidgetPlotTable extends Component {
} }
// Update internal selected signals state with props (different array objects) // Update internal selected signals state with props (different array objects)
if (this.props.widget.signals !== nextProps.widget.signals) { if (this.props.widget.customProperties.signals !== nextProps.widget.customProperties.signals) {
this.setState( {signals: nextProps.widget.signals}); this.setState( {signals: nextProps.widget.customProperties.signals});
} }
// Identify if there was a change in the preselected 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 // Update the currently selected signals by intersecting with the preselected signals
// Do the same with the plot values // 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.setState({ signals: intersection });
this.updatePreselectedSignalsState(nextProps); this.updatePreselectedSignalsState(nextProps);
...@@ -69,7 +69,7 @@ class WidgetPlotTable extends Component { ...@@ -69,7 +69,7 @@ class WidgetPlotTable extends Component {
// Loop through simulation model signals // Loop through simulation model signals
(accum, model_signal, signal_index) => { (accum, model_signal, signal_index) => {
// Append them if they belong to the current selected type // 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( accum.push(
{ {
index: signal_index, index: signal_index,
...@@ -105,7 +105,7 @@ class WidgetPlotTable extends Component { ...@@ -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) { 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) => ( 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 { ...@@ -150,14 +150,14 @@ class WidgetPlotTable extends Component {
<div className="widget-plot"> <div className="widget-plot">
<Plot <Plot
data={simulatorData} data={simulatorData}
time={this.props.widget.time} time={this.props.widget.customProperties.time}
width={this.props.widget.width - 100} width={this.props.widget.width - 100}
height={this.props.widget.height - 55} height={this.props.widget.height - 55}
yMin={this.props.widget.yMin} yMin={this.props.widget.customProperties.yMin}
yMax={this.props.widget.yMax} yMax={this.props.widget.customProperties.yMax}
yUseMinMax={this.props.widget.yUseMinMax} yUseMinMax={this.props.widget.customProperties.yUseMinMax}
paused={this.props.paused} paused={this.props.paused}
yLabel={this.props.widget.ylabel} yLabel={this.props.widget.customProperties.ylabel}
/> />
</div> </div>
</div> </div>
......
...@@ -44,10 +44,10 @@ class WidgetPlot extends React.Component { ...@@ -44,10 +44,10 @@ class WidgetPlot extends React.Component {
// Proceed if a simulation with models and a simulator are available // 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) { 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) => ( 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 // Query the signals that will be displayed in the legend
...@@ -72,12 +72,12 @@ class WidgetPlot extends React.Component { ...@@ -72,12 +72,12 @@ class WidgetPlot extends React.Component {
data={this.state.data} data={this.state.data}
height={this.props.widget.height - 55} height={this.props.widget.height - 55}
width={this.props.widget.width - 20} width={this.props.widget.width - 20}
time={this.props.widget.time} time={this.props.widget.customProperties.time}
yMin={this.props.widget.yMin} yMin={this.props.widget.customProperties.yMin}
yMax={this.props.widget.yMax} yMax={this.props.widget.customProperties.yMax}
yUseMinMax={this.props.widget.yUseMinMax} yUseMinMax={this.props.widget.customProperties.yUseMinMax}
paused={this.props.paused} paused={this.props.paused}
yLabel={this.props.widget.ylabel} yLabel={this.props.widget.customProperties.ylabel}
/> />
</div> </div>
<PlotLegend signals={this.state.legend} /> <PlotLegend signals={this.state.legend} />
......
...@@ -57,9 +57,9 @@ class WidgetSlider extends Component { ...@@ -57,9 +57,9 @@ class WidgetSlider extends Component {
} }
// Update unit // 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({ 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 { ...@@ -73,8 +73,8 @@ class WidgetSlider extends Component {
height: baseWidget.width, height: baseWidget.width,
minWidth: baseWidget.minHeight, minWidth: baseWidget.minHeight,
minHeight: baseWidget.minWidth, minHeight: baseWidget.minWidth,
maxWidth: baseWidget.maxHeight, maxWidth: baseWidget.customProperties.maxHeight,
maxHeight: baseWidget.maxWidth maxHeight: baseWidget.customProperties.maxWidth
}); });
nextProps.onWidgetChange(newWidget); nextProps.onWidgetChange(newWidget);
...@@ -122,7 +122,7 @@ class WidgetSlider extends Component { ...@@ -122,7 +122,7 @@ class WidgetSlider extends Component {
<label>{ fields.name }</label> <label>{ fields.name }</label>
{ fields.control } { fields.control }
{ fields.value } { fields.value }
{ this.props.widget.showUnit && fields.unit } { this.props.widget.customProperties.showUnit && fields.unit }
</div> </div>
) )