Refactor: remove react-trafficlight dependency and replace with custom TrafficLight component

added custom TrafficLight implementation

uninstalled react-trafficlight package and removed all of its imports

additionally, adjusted useEffect hook inside timeoffset widgets to update only on necessary prop updates

Signed-off-by: Andrii Podriez <[email protected]>

Author: Anyandsi

package.json

@@ -52,7 +52,6 @@
     "react-router-dom": "^5.3.1",
     "react-svg-pan-zoom": "^3.11.0",
     "react-syntax-highlighter": "^15.5.0",
-    "react-trafficlight": "^5.2.1",
     "superagent": "^7.1.2",
     "swagger-client": "3.19.10",
     "swagger-ui-react": "4.13.0",

src/app.js

@@ -35,6 +35,7 @@ import Dashboard from "./pages/dashboards/dashboard.jsx";
 import Account from "./pages/account/account";
 import "./styles/app.css";
 import "./styles/login.css";
+import "./styles/Trafficlight.css";
 import branding from "./branding/branding";
 import Logout from "./pages/login/logout";
 import Infrastructure from "./pages/infrastructure/infrastructure";
@@ -65,7 +66,6 @@ const App = () => {
     console.log("APP redirecting to logout/login");
     return <Redirect to="/logout" />;
   } else {
-
     console.log("APP rendering app");
     const pages = branding.values.pages;
 

src/pages/dashboards/widget/widget-time-offset/trafficlight.jsx

@@ -0,0 +1,64 @@
+/**
+ * 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 { forwardRef } from "react";
+
+const TrafficLight = ({
+  isHorizontal,
+  height,
+  isRedOn,
+  isYellowOn,
+  isGreenOn,
+}) => {
+  const lamps = [
+    { color: "red", on: isRedOn },
+    { color: "yellow", on: isYellowOn },
+    { color: "green", on: isGreenOn },
+  ];
+
+  const width = height * 2.5;
+  const lampGap = height * 0.15;
+  const lampSize = ((isHorizontal ? width : height) - 4 * lampGap) / 3.5;
+  const borderRadius = height * 0.2;
+
+  return (
+    <div
+      className={`traffic-light ${isHorizontal ? "horizontal" : "vertical"}`}
+      style={{
+        width: isHorizontal ? width : height,
+        height: isHorizontal ? height : width,
+        gap: lampGap,
+        padding: isHorizontal ? `0 ${lampGap}px` : `${lampGap}px 0`,
+        borderRadius: borderRadius,
+      }}
+    >
+      {lamps.map((lamp, i) => (
+        <div
+          key={i}
+          className={`lamp ${lamp.color} ${lamp.on ? "on" : "off"}`}
+          style={{
+            width: lampSize,
+            height: lampSize,
+            flex: `0 0 ${lampSize}px`,
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default TrafficLight;

src/pages/dashboards/widget/widgets/time-offset.jsx

@@ -15,7 +15,7 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 import React, { useState, useEffect } from "react";
-import TrafficLight from "react-trafficlight";
+import TrafficLight from "../widget-time-offset/trafficlight";
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 
 function WidgetTimeOffset(props) {
@@ -79,7 +79,15 @@ function WidgetTimeOffset(props) {
     setState((prevState) => ({ ...prevState, ...derivedState }));
 
     // eslint-disable-next-line
-  }, [props.widget, props.ics, props.websockets, props.data]);
+  }, [
+    props.widget.customProperties.icID,
+    props.widget.customProperties.showOffset,
+    props.widget.customProperties.threshold_red,
+    props.widget.customProperties.threshold_yellow,
+    props.data && state.icID ? props.data[state.icID]?.output?.timestamp : null,
+    props.websockets?.length,
+    props.ics?.length,
+  ]);
 
   const { timeOffset, icID, icName, websocketOpen } = state;
 
@@ -123,20 +131,20 @@ function WidgetTimeOffset(props) {
         }
       >
         <TrafficLight
-          Horizontal={props.widget.customProperties.horizontal}
           width={props.widget.width - 40}
           height={props.widget.height - 40}
-          RedOn={
+          isHorizontal={props.widget.customProperties.horizontal}
+          isRedOn={
             props.widget.customProperties.threshold_red <= timeOffset ||
             !websocketOpen ||
             timeOffset < 0
           }
-          YellowOn={
+          isYellowOn={
             props.widget.customProperties.threshold_yellow <= timeOffset &&
             timeOffset < props.widget.customProperties.threshold_red &&
             websocketOpen
           }
-          GreenOn={
+          isGreenOn={
             timeOffset > 0 &&
             timeOffset < props.widget.customProperties.threshold_yellow &&
             websocketOpen

src/styles/Trafficlight.css

@@ -0,0 +1,53 @@
+/**
+ * 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/>.
+ ******************************************************************************/
+
+.traffic-light {
+  box-sizing: border-box;
+  background-color: #000;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.traffic-light.horizontal {
+  flex-direction: row;
+}
+.traffic-light.vertical {
+  flex-direction: column;
+}
+
+.lamp {
+  border-radius: 50%;
+  box-shadow: inset 0 0 3px #000;
+}
+
+.lamp.red.on {
+  background: #cc3232;
+  box-shadow: 0 0 6px #cc3232, 0 0 12px #cc3232, 0 0 24px #cc3232;
+}
+.lamp.yellow.on {
+  background: #e7b416;
+  box-shadow: 0 0 6px #e7b416, 0 0 12px #e7b416, 0 0 24px #e7b416;
+}
+.lamp.green.on {
+  background: #2dc937;
+  box-shadow: 0 0 6px #2dc937, 0 0 12px #2dc937, 0 0 24px #2dc937;
+}
+.off {
+  background: grey;
+}