From 505c3a68d1243e340a94d84ae8762ef765e4a8ef Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Sat, 19 Aug 2017 15:38:01 +0200 Subject: [PATCH] Add unit option to value widget Fix image tag when showing missing image. --- .../dialog/edit-widget-control-creator.js | 3 +- .../dialog/edit-widget-checkbox-control.js | 45 +++++++++++++++++++ .../dialog/edit-widget-control-creator.js | 4 +- src/components/dialog/edit-widget.js | 2 + src/components/widget-factory.js | 1 + src/components/widget-image.js | 2 +- src/components/widget-value.js | 21 ++++++--- 7 files changed, 70 insertions(+), 8 deletions(-) create mode 100644 src/components/dialog/edit-widget-checkbox-control.js diff --git a/src/__tests__/components/dialog/edit-widget-control-creator.js b/src/__tests__/components/dialog/edit-widget-control-creator.js index 1842af3..f7c29f2 100644 --- a/src/__tests__/components/dialog/edit-widget-control-creator.js +++ b/src/__tests__/components/dialog/edit-widget-control-creator.js @@ -12,6 +12,7 @@ import EditWidgetSignalsControl from '../../../components/dialog/edit-widget-sig import EditWidgetOrientation from '../../../components/dialog/edit-widget-orientation'; import EditWidgetTextSizeControl from '../../../components/dialog/edit-widget-text-size-control'; import EditWidgetAspectControl from '../../../components/dialog/edit-widget-aspect-control'; +import EditWidgetCheckboxControl from '../../../components/dialog/edit-widget-checkbox-control'; describe('edit widget control creator', () => { it('should not return null', () => { @@ -20,7 +21,7 @@ describe('edit widget control creator', () => { }); var runs = [ - { args: { widgetType: 'Value' }, result: { controlNumber: 4, controlTypes: [EditWidgetTextControl, EditWidgetSimulatorControl, EditWidgetSignalControl, EditWidgetTextSizeControl] } }, + { args: { widgetType: 'Value' }, result: { controlNumber: 5, controlTypes: [EditWidgetTextControl, EditWidgetSimulatorControl, EditWidgetSignalControl, EditWidgetTextSizeControl, EditWidgetCheckboxControl] } }, { args: { widgetType: 'Plot' }, result: { controlNumber: 4, controlTypes: [EditWidgetTimeControl, EditWidgetSimulatorControl, EditWidgetSignalsControl, EditWidgetTextControl] } }, { args: { widgetType: 'Table' }, result: { controlNumber: 1, controlTypes: [EditWidgetSimulatorControl] } }, { args: { widgetType: 'Image' }, result: { controlNumber: 2, controlTypes: [EditImageWidgetControl, EditWidgetAspectControl] } }, diff --git a/src/components/dialog/edit-widget-checkbox-control.js b/src/components/dialog/edit-widget-checkbox-control.js new file mode 100644 index 0000000..9c063fb --- /dev/null +++ b/src/components/dialog/edit-widget-checkbox-control.js @@ -0,0 +1,45 @@ +/** + * File: edit-widget-checkbox-control.js + * Author: Markus Grigull + * Date: 19.08.2017 + * + * This file is part of VILLASweb. + * + * VILLASweb is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * VILLASweb is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with VILLASweb. If not, see . + ******************************************************************************/ + +import React from 'react'; +import { FormGroup, Checkbox } from 'react-bootstrap'; + +class EditWidgetCheckboxControl extends React.Component { + constructor(props) { + super(props); + + this.state = { + widget: {} + }; + } + + componentWillReceiveProps(nextProps) { + this.setState({ widget: nextProps.widget }); + } + + render() { + return + this.props.handleChange(e)}>{this.props.text} + ; + } +} + +export default EditWidgetCheckboxControl; \ No newline at end of file diff --git a/src/components/dialog/edit-widget-control-creator.js b/src/components/dialog/edit-widget-control-creator.js index b592952..87fd786 100644 --- a/src/components/dialog/edit-widget-control-creator.js +++ b/src/components/dialog/edit-widget-control-creator.js @@ -31,6 +31,7 @@ import EditWidgetSignalsControl from './edit-widget-signals-control'; import EditWidgetOrientation from './edit-widget-orientation'; import EditWidgetAspectControl from './edit-widget-aspect-control'; import EditWidgetTextSizeControl from './edit-widget-text-size-control'; +import EditWidgetCheckboxControl from './edit-widget-checkbox-control'; export default function createControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulation, handleChange) { // Use a list to concatenate the controls according to the widget type @@ -45,7 +46,8 @@ export default function createControls(widgetType = null, widget = null, session validateForm(id)} handleChange={e => handleChange(e)} />, validateForm(id)} simulation={simulation} handleChange={(e) => valueBoundOnChange(e)} />, validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />, - handleChange(e)} /> + handleChange(e)} />, + handleChange(e)} /> ); break; case 'Plot': diff --git a/src/components/dialog/edit-widget.js b/src/components/dialog/edit-widget.js index 9f75967..fb52bdd 100644 --- a/src/components/dialog/edit-widget.js +++ b/src/components/dialog/edit-widget.js @@ -90,6 +90,8 @@ class EditWidgetDialog extends React.Component { // get file and update size changeObject = this.assignAspectRatio(changeObject, e.target.value); + } else if (e.target.type === 'checkbox') { + changeObject[e.target.id] = e.target.checked; } else { changeObject[e.target.id] = e.target.value; } diff --git a/src/components/widget-factory.js b/src/components/widget-factory.js index 68afcba..96c678e 100644 --- a/src/components/widget-factory.js +++ b/src/components/widget-factory.js @@ -36,6 +36,7 @@ class WidgetFactory { widget.height = 30; widget.textSize = 16; widget.name = 'Value'; + widget.showUnit = false; break; case 'Plot': widget.simulator = defaultSimulator; diff --git a/src/components/widget-image.js b/src/components/widget-image.js index 3f9914a..cde16e0 100644 --- a/src/components/widget-image.js +++ b/src/components/widget-image.js @@ -45,7 +45,7 @@ class WidgetImage extends React.Component { {file ? ( {file.name} e.preventDefault()} /> ) : ( - missing-image e.preventDefault()} /> + questionmark e.preventDefault()} /> )} ); diff --git a/src/components/widget-value.js b/src/components/widget-value.js index d7337c5..1f5e6b4 100644 --- a/src/components/widget-value.js +++ b/src/components/widget-value.js @@ -26,7 +26,8 @@ class WidgetValue extends Component { super(props); this.state = { - value: '' + value: '', + unit: '' }; } @@ -35,17 +36,23 @@ class WidgetValue extends Component { const simulator = nextProps.widget.simulator.simulator; const node = nextProps.widget.simulator.node; - //console.log(nextProps.widget.simulator); - if (nextProps.data == null || nextProps.data[node] == null || nextProps.data[node][simulator] == null || nextProps.data[node][simulator].values == null) { this.setState({ value: '' }); return; } + // get unit from simulation model + let unit = ''; + + if (nextProps.simulation) { + const simulationModel = nextProps.simulation.models.find(model => model.simulator.node === node && model.simulator.simulator === simulator); + unit = simulationModel.mapping[nextProps.widget.signal].type; + } + // check if value has changed const signal = nextProps.data[node][simulator].values[nextProps.widget.signal]; 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, unit }); } } @@ -53,7 +60,11 @@ class WidgetValue extends Component { var value_to_render = Number(this.state.value); return (
- {this.props.widget.name} { Number.isNaN(value_to_render)? NaN : value_to_render.toFixed(3) } + {this.props.widget.name} + {Number.isNaN(value_to_render) ? NaN : value_to_render.toFixed(3)} + {this.props.widget.showUnit && + [{this.state.unit}] + }
); }