Add unit option to value widget

Fix image tag when showing missing image.

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] } },

src/components/dialog/edit-widget-checkbox-control.js

@@ -0,0 +1,45 @@
+/**
+ * File: edit-widget-checkbox-control.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * 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 <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+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 <FormGroup>
+      <Checkbox id={this.props.controlId} checked={this.state.widget[this.props.controlId] || ''} onChange={e => this.props.handleChange(e)}>{this.props.text}</Checkbox>
+    </FormGroup>;
+  }
+}
+
+export default EditWidgetCheckboxControl;

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
                 <EditWidgetTextControl key={1} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
                 <EditWidgetSimulatorControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => valueBoundOnChange(e)} />,
                 <EditWidgetSignalControl key={3} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetTextSizeControl key={4} widget={widget} handleChange={e => handleChange(e)} />
+                <EditWidgetTextSizeControl key={4} widget={widget} handleChange={e => handleChange(e)} />,
+                <EditWidgetCheckboxControl key={5} widget={widget} controlId={'showUnit'} text="Show unit" handleChange={e => handleChange(e)} />
             );
         break;
         case 'Plot':

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;
         }

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;

src/components/widget-image.js

@@ -45,7 +45,7 @@ class WidgetImage extends React.Component {
         {file ? (
           <img className="full" alt={file.name} src={'/' + config.publicPathBase + file.path} onDragStart={e => e.preventDefault()} />
         ) : (
-          <img className="full" alt="missing-image" src={'/' + config.publicPathBase + 'missing-image.png'} onDragStart={e => e.preventDefault()} />
+          <img className="full" alt="questionmark" src={'/' + config.publicPathBase + 'missing-image.png'} onDragStart={e => e.preventDefault()} />
         )}
       </div>
     );

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 (
       <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 : value_to_render.toFixed(3) } </span>
+        <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 : value_to_render.toFixed(3)}</span>
+        {this.props.widget.showUnit &&
+          <span style={{ fontSize: this.props.widget.textSize + 'px' }}>[{this.state.unit}]</span>
+        }
       </div>
     );
   }