diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js index e45c5ad..f35eb67 100644 --- a/src/dashboard/dashboard.js +++ b/src/dashboard/dashboard.js @@ -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} diff --git a/src/widget/edit-widget.js b/src/widget/edit-widget.js index 8b19af0..f2c2161 100644 --- a/src/widget/edit-widget.js +++ b/src/widget/edit-widget.js @@ -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() { diff --git a/src/widget/widget.js b/src/widget/widget.js index e9c3f2c..3bca049 100644 --- a/src/widget/widget.js +++ b/src/widget/widget.js @@ -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, diff --git a/src/widget/widgets/button.js b/src/widget/widgets/button.js index e9c32c2..62b8c1b 100644 --- a/src/widget/widgets/button.js +++ b/src/widget/widgets/button.js @@ -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) { diff --git a/src/widget/widgets/custom-action.js b/src/widget/widgets/custom-action.js index ceba7d0..63005f3 100644 --- a/src/widget/widgets/custom-action.js +++ b/src/widget/widgets/custom-action.js @@ -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
; } diff --git a/src/widget/widgets/gauge.js b/src/widget/widgets/gauge.js index 25cacf6..bd268d4 100644 --- a/src/widget/widgets/gauge.js +++ b/src/widget/widgets/gauge.js @@ -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 ( diff --git a/src/widget/widgets/html.js b/src/widget/widgets/html.js index 78dd3c6..773aefa 100644 --- a/src/widget/widgets/html.js +++ b/src/widget/widgets/html.js @@ -23,7 +23,7 @@ import React from 'react'; class WidgetHTML extends React.Component { render() { - return
+ return
} } diff --git a/src/widget/widgets/image.js b/src/widget/widgets/image.js index 1b73f2a..a38c0b7 100644 --- a/src/widget/widgets/image.js +++ b/src/widget/widgets/image.js @@ -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 (
diff --git a/src/widget/widgets/input.js b/src/widget/widgets/input.js index 7272279..464f9b0 100644 --- a/src/widget/widgets/input.js +++ b/src/widget/widgets/input.js @@ -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 {
- + {this.props.widget.name} diff --git a/src/widget/widgets/label.js b/src/widget/widgets/label.js index 68a2ee0..c9cafdf 100644 --- a/src/widget/widgets/label.js +++ b/src/widget/widgets/label.js @@ -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] diff --git a/src/widget/widgets/lamp.js b/src/widget/widgets/lamp.js index 0514047..8ca0bcc 100644 --- a/src/widget/widgets/lamp.js +++ b/src/widget/widgets/lamp.js @@ -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, diff --git a/src/widget/widgets/plot-table.js b/src/widget/widgets/plot-table.js index 1b6fc80..2f9b552 100644 --- a/src/widget/widgets/plot-table.js +++ b/src/widget/widgets/plot-table.js @@ -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 {
diff --git a/src/widget/widgets/plot.js b/src/widget/widgets/plot.js index e61ca10..7a2425d 100644 --- a/src/widget/widgets/plot.js +++ b/src/widget/widgets/plot.js @@ -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} />
diff --git a/src/widget/widgets/slider.js b/src/widget/widgets/slider.js index 8754752..435a29e 100644 --- a/src/widget/widgets/slider.js +++ b/src/widget/widgets/slider.js @@ -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 { { fields.control } { fields.value } - { this.props.widget.showUnit && fields.unit } + { this.props.widget.customProperties.showUnit && fields.unit }
) ); diff --git a/src/widget/widgets/table.js b/src/widget/widgets/table.js index 9ac2d0e..c618000 100644 --- a/src/widget/widgets/table.js +++ b/src/widget/widgets/table.js @@ -83,7 +83,7 @@ class WidgetTable extends Component { ]; - if (this.props.widget.showUnit) + if (this.props.widget.customProperties.showUnit) columns.push() return ( diff --git a/src/widget/widgets/topology.js b/src/widget/widgets/topology.js index bd7c62a..00542a3 100644 --- a/src/widget/widgets/topology.js +++ b/src/widget/widgets/topology.js @@ -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.'}); diff --git a/src/widget/widgets/value.js b/src/widget/widgets/value.js index c58f57d..49393db 100644 --- a/src/widget/widgets/value.js +++ b/src/widget/widgets/value.js @@ -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 (
- {this.props.widget.name} - {Number.isNaN(value_to_render) ? NaN : format('.3s')(value_to_render)} - {this.props.widget.showUnit && - [{this.state.unit}] + {this.props.widget.name} + {Number.isNaN(value_to_render) ? NaN : format('.3s')(value_to_render)} + {this.props.widget.customProperties.showUnit && + [{this.state.unit}] }
);