WIP: implement widget to monitor time offset between server and local time #208

package.json

@@ -5,10 +5,10 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/react-fontawesome": "^0.1.12",
+    "@fortawesome/react-fontawesome": "^0.1.13",
     "babel-runtime": "^6.26.0",
     "bootstrap": "^4.5.3",
-    "bufferutil": "^4.0.1",
+    "bufferutil": "^4.0.2",
     "canvas": "^2.6.1",
     "classnames": "^2.2.6",
     "d3-array": "^2.8.0",
@@ -20,7 +20,7 @@
     "d3-time-format": "^3.0.0",
     "es6-promise": "^4.2.8",
     "fibers": "^5.0.0",
-    "file-saver": "^2.0.2",
+    "file-saver": "^2.0.5",
     "flux": "^3.1.3",
     "gaugeJS": "^1.3.7",
     "handlebars": "^4.7.6",
@@ -29,15 +29,15 @@
     "libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
-    "multiselect-react-dropdown": "^1.6.1",
+    "multiselect-react-dropdown": "^1.6.2",
     "node-sass": "^4.14.1",
     "popper.js": "^1.16.1",
     "prop-types": "^15.7.2",
-    "rc-slider": "^9.6.0",
+    "rc-slider": "^9.6.4",
     "react": "^16.14.0",
     "react-bootstrap": "^1.4.0",
     "react-bootstrap-time-picker": "^2.0.1",
-    "react-collapse": "^5.0.1",
+    "react-collapse": "^5.1.0",
     "react-color": "^2.19.3",
     "react-contexify": "^4.1.1",
     "react-d3": "^0.4.0",
@@ -51,17 +51,18 @@
     "react-rnd": "^10.2.3",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.0",
+    "react-scripts": "^4.0.1",
     "react-svg-pan-zoom": "^3.8.1",
-    "sass": "^1.28.0",
+    "react-trafficlight": "^5.2.1",
+    "sass": "^1.29.0",
     "superagent": "^6.1.0",
     "ts-node": "^9.0.0",
     "type-fest": "^0.13.1",
-    "typescript": "^4.0.5",
-    "utf-8-validate": "^5.0.2",
+    "typescript": "^4.1.2",
+    "utf-8-validate": "^5.0.3",
     "validator": "^13.1.17",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-plugin-serve": "^1.2.0"
+    "webpack-plugin-serve": "^1.2.1"
   },
   "devDependencies": {
     "chai": "^4.2.0"

src/widget/widget-factory.js

@@ -195,6 +195,15 @@ class WidgetFactory {
                 widget.customProperties.lockAspect = true;
                 break;
 
+            case 'TimeOffset':
+                widget.minWidth = 20;
+                widget.minHeight = 20;
+                widget.width = 100;
+                widget.height = 100;
+                widget.customProperties.threshold_yellow = 1;
+                widget.customProperties.threshold_red = 2;
+                widget.customProperties.ic = 1;
+
             default:
                 widget.width = 100;
                 widget.height = 100;

src/widget/widget-toolbox.js

@@ -164,6 +164,7 @@ class WidgetToolbox extends React.Component {
       <ToolboxItem name='Lamp' type='widget' icon = 'plus' />
       <ToolboxItem name='Gauge' type='widget' icon = 'plus'/>
       <ToolboxItem name='Topology' type='widget' disabled={thereIsTopologyWidget} title={topologyItemMsg} icon = 'plus'/>
+      <ToolboxItem name='TimeOffset' type='widget' icon = 'plus' />
       <OverlayTrigger key={0} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"?"}`}> Drag and drop widgets onto the dashboard </Tooltip>} >
       <Button disabled={true} variant="light" size="sm" key={0}  >
           <Icon icon="question" />

src/widget/widget.js

@@ -39,6 +39,7 @@ import WidgetGauge from './widgets/gauge';
 import WidgetBox from './widgets/box';
 import WidgetTopology from './widgets/topology';
 import WidgetLine from './widgets/line';
+import WidgetTimeOffset from './widgets/time-offset'
 //import WidgetHTML from './widgets/html';
 
 
@@ -223,6 +224,10 @@ class Widget extends React.Component {
         widget={widget}
         editing={this.props.editing}
       />
+    } else if (widget.type === 'TimeOffset') {
+      return <WidgetTimeOffset
+        widget={widget}
+      />
     }
 
     return null;

src/widget/widgets/time-offset.js

@@ -0,0 +1,48 @@
+/**
+ * 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, { Component } from 'react';
+import TrafficLight from 'react-trafficlight';
+
+
+class WidgetTimeOffset extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+        redOn: false,
+        yellowOn: false,
+        greenOn: true,
+    };
+  }
+
+  static getDerivedStateFromProps(props, state){
+  }
+
+  render() {
+
+    return (
+        <TrafficLight
+        RedOn={this.state.redOn}
+        YellowOn={this.state.yellowOn}
+        GreenOn={this.state.greenOn}
+      />
+    );
+  }
+}
+
+export default WidgetTimeOffset;