Time Offset Widget: IC now changeable #208

src/dashboard/dashboard.js

@@ -557,6 +557,7 @@ class Dashboard extends Component {
           widget={this.state.modalData}
           signals={this.state.signals}
           files={this.state.files}
+          ics={this.state.ics}
         />
 
         <EditFiles

src/styles/widgets.css

@@ -406,8 +406,7 @@ div[class*="-widget"] label {
 
 .time-offset span {
     text-align: center;
-    font-size: 1.5em;
+    font-size: 1em;
     font-weight: 600;
-    padding-top: 10px;
 }
 /* End time offset widget */

src/widget/edit-widget/edit-widget-control-creator.js

@@ -31,9 +31,10 @@ import EditWidgetCheckboxControl from './edit-widget-checkbox-control';
 import EditWidgetColorZonesControl from './edit-widget-color-zones-control';
 import EditWidgetMinMaxControl from './edit-widget-min-max-control';
 import EditWidgetParametersControl from './edit-widget-parameters-control';
+import EditWidgetICControl from './edit-widget-ic-control';
 //import EditWidgetHTMLContent from './edit-widget-html-content';
 
-export default function CreateControls(widgetType = null, widget = null, sessionToken = null, files = null, signals, handleChange) {
+export default function CreateControls(widgetType = null, widget = null, sessionToken = null, files = null,ics = null, signals, handleChange) {
     // Use a list to concatenate the controls according to the widget type
     var DialogControls = [];
 
@@ -160,6 +161,7 @@ export default function CreateControls(widgetType = null, widget = null, session
 
         case 'TimeOffset':
             DialogControls.push(
+                <EditWidgetICControl key={0} widget={widget} controlId={'customProperties.icID'} input ics={ics} handleChange={(e) => handleChange(e)}/>,
                 <EditWidgetNumberControl key={1} widget={widget} controlId={'customProperties.threshold_yellow'} label={'Threshold yellow'} defaultValue={0} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetNumberControl key={2} widget={widget} controlId={'customProperties.threshold_red'} label={'Threshold red'} defaultValue={0} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetCheckboxControl key={3} widget={widget} controlId={'customProperties.horizontal'} input text="Horizontal" handleChange={e => handleChange(e)} />,

src/widget/edit-widget/edit-widget-ic-control.js

@@ -0,0 +1,74 @@
+/**
+ * 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, FormControl, FormLabel} from 'react-bootstrap';
+
+class EditWidgetICControl extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      ics: [],
+    };
+  }
+
+  static getDerivedStateFromProps(props, state){
+    return {
+      ics: props.ics
+    };
+  }
+
+  handleICChange(e) {
+    let value = e.target.value === "Select IC" ? (-1) : (e.target.value);
+    this.props.handleChange({ target: { id: this.props.controlId, value: value } });
+  }
+
+  render() {
+
+    let parts = this.props.controlId.split('.');
+    let isCustomProperty = true;
+    if(parts.length === 1){
+      isCustomProperty = false;
+    }
+
+    let icOptions = [];
+    if (this.state.ics !== null && this.state.ics.length > 0){
+      icOptions.push(
+        <option key = {0} default>Select IC</option>
+        )
+      icOptions.push(this.state.ics.map((ic, index) => (
+        <option key={index+1} value={ic.id}>{ic.name}</option>
+      )))
+    } else {
+      icOptions = <option style={{ display: 'none' }}>No ics found</option>
+    }
+
+    return <div>
+      <FormGroup controlId="ic">
+        <FormLabel>IC</FormLabel>
+        <FormControl
+          as="select"
+          value={isCustomProperty ? this.props.widget[parts[0]][parts[1]] : this.props.widget[this.props.controlId]}
+          onChange={(e) => this.handleICChange(e)}>{icOptions} </FormControl>
+      </FormGroup>
+    </div>;
+  }
+}
+
+export default EditWidgetICControl;

src/widget/edit-widget/edit-widget.js

@@ -141,7 +141,7 @@ class EditWidgetDialog extends React.Component {
         customProperty ? changeObject[parts[0]][parts[1]]= 'default' : changeObject[e.target.id] = 'default';
       }
       changeObject = this.setMaxWidth(changeObject);
-    } else if (parts[1]= 'horizontal'){
+    } else if (parts[1] === 'horizontal'){
       customProperty ? changeObject[parts[0]][parts[1]] = e.target.value : changeObject[e.target.id] = e.target.value ;
       let tempWidth = changeObject.width;
       changeObject.width = changeObject.height;
@@ -168,6 +168,7 @@ class EditWidgetDialog extends React.Component {
             this.state.temporal,
             this.props.sessionToken,
             this.props.files,
+            this.props.ics,
             this.props.signals,
             (e) => this.handleChange(e));
     }

src/widget/widget-factory.js

@@ -199,12 +199,13 @@ class WidgetFactory {
                 widget.minWidth = 20;
                 widget.minHeight = 20;
                 widget.width = 100;
-                widget.height = 100;
+                widget.height = 40;
                 widget.customProperties.threshold_yellow = 1;
                 widget.customProperties.threshold_red = 2;
-                widget.customProperties.icID = 1;
-                widget.customProperties.horizontal = false;
+                widget.customProperties.icID = -1;
+                widget.customProperties.horizontal = true;
                 widget.customProperties.showOffset = true;
+                widget.customProperties.lockAspect = true;
                 break;
 
             default:

src/widget/widgets/time-offset.js

@@ -39,7 +39,7 @@ class WidgetTimeOffset extends Component {
       || props.data[state.icID] == null
       || props.data[state.icID].output == null
       || props.data[state.icID].output.timestamp == null) {
-      return {timeOffset: ''};
+      return {timeOffset: -1};
     }
 
     let serverTime = props.data[state.icID].output.timestamp;
@@ -49,20 +49,21 @@ class WidgetTimeOffset extends Component {
   }
 
   render() {
-
     return (
       <div className="time-offset">
-        <span>IC: {this.state.icID}</span>
+      {this.props.widget.customProperties.icID !== -1 ? 
+      (<span>IC: {this.state.icID}</span>) : (<span>no IC</span>)
+      }        
         <TrafficLight Horizontal={this.props.widget.customProperties.horizontal} width={this.props.widget.width} height={this.props.widget.height}
         RedOn={this.props.widget.customProperties.threshold_red <= this.state.timeOffset}
         YellowOn={(this.props.widget.customProperties.threshold_yellow <= this.state.timeOffset) && (this.state.timeOffset < this.props.widget.customProperties.threshold_red)}
         GreenOn={this.state.timeOffset < this.props.widget.customProperties.threshold_yellow}
       />
-      {this.props.widget.customProperties.showOffset ? 
+      {this.props.widget.customProperties.showOffset && this.props.widget.customProperties.icID !== -1 ? 
       (
       <span>{this.state.timeOffset}s</span>)
       :
-      (<div></div>)
+      (<span>selected</span>)
       }
       </div>
     );