refactoring using external lib

shiv3 · Jul 7, 2024 · 409ad6b · 409ad6b
1 parent c482615
commit 409ad6b
Show file tree

Hide file tree

Showing 9 changed files with 926 additions and 332 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@voltbras/ts-ocpp": "^2.7.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.0"

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,9 +3,8 @@ import React from "react";
 import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
 import Navbar from "./components/Navbar.tsx";
 import ChargePoint from "./components/ChargePoint.tsx";
-import Connector from "./components/Connector.tsx";
 import Settings from "./components/Settings.tsx";
-import Logger from "./components/Logger.tsx";
+
 
 const App: React.FC = () => {
   return (

diff --git a/src/components/ChargePoint.tsx b/src/components/ChargePoint.tsx
@@ -8,9 +8,6 @@ import Logger from "./Logger.tsx";
 const ChargePoint: React.FC = () => {
   const [cpStatus, setCpStatus] = useState<string>(ocpp.OCPPStatus.Unavailable);
   const [cp, setCp] = useState<OCPPChargePoint | null>(null);
-  const [tagID, setTagID] = useState<string>("");
-
-  const [isHeartbeatEnabled, setIsHeartbeatEnabled] = useState<boolean>(false);
 
   const search = useLocation().search;
   const query = new URLSearchParams(search);
@@ -27,16 +24,11 @@ const ChargePoint: React.FC = () => {
     localStorage.setItem("TAG", tagID);
 
     const newCp = new OCPPChargePoint(connectorNumber, wsURL, cpID);
-
     newCp.setStatusChangeCallback(statusChangeCb);
     newCp.setLoggingCallback(logMsg);
     setCp(newCp);
   }, []);
 
-  useEffect(() => {
-    setTagID(localStorage.getItem("TAG") || "");
-  }, []);
-
   const statusChangeCb = (s: string, msg?: string) => {
     setCpStatus(s);
     if (msg) logMsg(msg);
@@ -46,119 +38,14 @@ const ChargePoint: React.FC = () => {
     console.log(msg);
   };
 
-  const handleConnect = () => {
-    if (cp) {
-      cp.wsConnect();
-    }
-  };
-
-  const handleDisconnect = () => {
-    if (cp) {
-      cp.wsDisconnect();
-    }
-  };
-
-  const handleAuthorize = () => {
-    if (cp) {
-      const tagId = localStorage.getItem("TAG") || "DEADBEEF";
-      cp.authorize(tagId);
-    }
-  };
-
-  const handleHeartbeat = () => {
-    if (cp) {
-      cp.sendHeartbeat();
-    }
-  };
-
-  const handleHeartbeatInterval = (isEnalbe:boolean) => {
-    setIsHeartbeatEnabled(isEnalbe);
-    if (cp) {
-      if(isEnalbe){
-        cp.startHeartbeat(10);
-      }else{
-        cp.stopHeartbeat();
-      }
-    }
-  }
 
   return (
     <div className="bg-white shadow-md rounded px-2 pt-2 pb-1 h-screen">
-      <Settings/>
+      <SettingsView/>
       <div className="flex flex-col md:flex-row">
-        <div className="bg-gray-100 rounded p-4 mr-4">
-          <div className="bg-gray-100 rounded p-4 mr-4">
-            <CPStatus status={cpStatus}/>
-          </div>
-          <button
-            onClick={handleConnect}
-            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-2 w-full
-            disabled:bg-blue-300
-            "
-            disabled={cpStatus !== ocpp.OCPPStatus.Unavailable}
-          >
-            Connect
-          </button>
-          <button
-            onClick={handleDisconnect}
-            className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mb-2 w-full
-            disabled:bg-red-300
-            "
-            disabled={cpStatus === ocpp.OCPPStatus.Unavailable}
-          >
-            Disconnect
-          </button>
-          <div className="bg-gray-100 rounded p-4">
-            <button
-              onClick={handleHeartbeat}
-              className="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded mb-2 w-full
-            disabled:bg-purple-300
-            "
-              disabled={cpStatus === ocpp.OCPPStatus.Unavailable}
-            >
-              Heartbeat
-            </button>
-            <div className="flex items-center">
-              <button
-                className={`bg-${isHeartbeatEnabled ? "red" : "green"}-500 hover:bg-${isHeartbeatEnabled ? "red" : "green"}-700 text-white font-bold py-2 px-4 rounded mb-2 w-full`}
-                onClick={() => handleHeartbeatInterval(!isHeartbeatEnabled)}
-              >
-                {isHeartbeatEnabled ? "Disable" : "Enable"} Heartbeat
-              </button>
-            </div>
-          </div>
-        </div>
+        <ChargePointControls cp={cp} cpStatus={cpStatus}/>
         <div className="flex-1">
-          <div className="bg-gray-100 rounded p-4">
-            <div className="mb-6">
-              <label
-                className="block text-gray-700 text-sm font-bold mb-2"
-                htmlFor="TAG"
-              >RFID Tag
-              </label>
-              <input
-                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                id="TAG"
-                type="text"
-                value={tagID}
-                onChange={(e) => setTagID(e.target.value)}
-                placeholder="DEADBEEF"
-                style={{maxWidth: "20ch"}}
-              />
-              <p className="text-gray-600 text-xs italic mt-1">
-                The ID of the simulated RFID tag
-              </p>
-            </div>
-            <button
-              onClick={handleAuthorize}
-              className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full
-              disabled:bg-green-300
-              "
-              disabled={cpStatus !== ocpp.OCPPStatus.Available}
-            >
-              Authorize
-            </button>
-          </div>
+          <AuthView cp={cp} cpStatus={cpStatus}/>
           <div className="flex flex-col md:flex-row mt-4">
             {
               cp?.connectorNumber && Array.from(Array(cp.connectorNumber).keys()).map((i) => (
@@ -170,7 +57,8 @@ const ChargePoint: React.FC = () => {
       </div>
       <Logger/>
     </div>
-  );
+  )
+    ;
 };
 
 const CPStatus: React.FC<{ status: string }> = ({status}) => {
@@ -193,15 +81,149 @@ const CPStatus: React.FC<{ status: string }> = ({status}) => {
         <span className={statusColor(status)}>{status}</span>
       </p>
     </div>
+  );
+}
+
+interface AuthViewProps {
+  cp: OCPPChargePoint | null;
+  cpStatus: string
+}
+
+const AuthView: React.FC<AuthViewProps> = ({cp, cpStatus}) => {
+  const [tagID, setTagID] = useState<string>("");
+
+  useEffect(() => {
+    setTagID(localStorage.getItem("TAG") || "");
+  }, []);
+
+
+  const handleAuthorize = () => {
+    if (cp) {
+      const tagId = localStorage.getItem("TAG") || "DEADBEEF";
+      cp.authorize(tagId);
+    }
+  };
+
+  return (
+    <div className="bg-gray-100 rounded p-4">
+      <div className="mb-6">
+        <label
+          className="block text-gray-700 text-sm font-bold mb-2"
+          htmlFor="TAG"
+        > RFID Tag
+        </label>
+        <input
+          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+          id="TAG"
+          type="text"
+          value={tagID}
+          onChange={(e) => setTagID(e.target.value)}
+          placeholder="DEADBEEF"
+          style={{maxWidth: "20ch"}}
+        />
+        <p className="text-gray-600 text-xs italic mt-1">
+          The ID of the simulated RFID tag
+        </p>
+      </div>
+      <button
+        onClick={handleAuthorize}
+        className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full
+              disabled:bg-green-300
+              "
+        disabled={cpStatus !== ocpp.OCPPStatus.Available}
+      >
+        Authorize
+      </button>
+    </div>
+  )
+}
+
+interface ChargePointControlsProps {
+  cp: OCPPChargePoint | null;
+  cpStatus: string;
+}
+
+const ChargePointControls: React.FC<ChargePointControlsProps> = ({cp, cpStatus}) => {
+  const [isHeartbeatEnabled, setIsHeartbeatEnabled] = useState<boolean>(false);
+
+  const handleConnect = () => {
+    if (cp) {
+      cp.wsConnect();
+    }
+  };
+
+  const handleDisconnect = () => {
+    if (cp) {
+      cp.wsDisconnect();
+    }
+  };
+  const handleHeartbeat = () => {
+    if (cp) {
+      cp.sendHeartbeat();
+    }
+  };
+
+  const handleHeartbeatInterval = (isEnalbe: boolean) => {
+    setIsHeartbeatEnabled(isEnalbe);
+    if (cp) {
+      if (isEnalbe) {
+        cp.startHeartbeat(10);
+      } else {
+        cp.stopHeartbeat();
+      }
+    }
+  }
+  return (
+    <div className="bg-gray-100 rounded p-4 mr-4">
+      <div className="bg-gray-100 rounded p-4 mr-4">
+        <CPStatus status={cpStatus}/>
+      </div>
+      <button
+        onClick={handleConnect}
+        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-2 w-full
+            disabled:bg-blue-300
+            "
+        disabled={cpStatus !== ocpp.OCPPStatus.Unavailable}
+      >
+        Connect
+      </button>
+      <button
+        onClick={handleDisconnect}
+        className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mb-2 w-full
+            disabled:bg-red-300
+            "
+        disabled={cpStatus === ocpp.OCPPStatus.Unavailable}
+      >
+        Disconnect
+      </button>
+      <div className="bg-gray-100 rounded p-4">
+        <button
+          onClick={handleHeartbeat}
+          className="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded mb-2 w-full
+            disabled:bg-purple-300
+            "
+          disabled={cpStatus === ocpp.OCPPStatus.Unavailable}
+        >
+          Heartbeat
+        </button>
+        <div className="flex items-center">
+          <button
+            className={`bg-${isHeartbeatEnabled ? "red" : "green"}-500 hover:bg-${isHeartbeatEnabled ? "red" : "green"}-700 text-white font-bold py-2 px-4 rounded mb-2 w-full`}
+            onClick={() => handleHeartbeatInterval(!isHeartbeatEnabled)}
+          >
+            {isHeartbeatEnabled ? "Disable" : "Enable"} Heartbeat
+          </button>
+        </div>
+      </div>
+    </div>
   )
-    ;
 }
 
-const Settings: React.FC = () => {
-  const [wsURL, setWsURL] = useState<string>(localStorage.getItem("WSURL") || "");
-  const [connectorNumber, setConnectorNumber] = useState<number>(parseInt(localStorage.getItem("CONNECTORS") || "2"));
-  const [cpID, setCpID] = useState<string>(localStorage.getItem("CPID") || "CP-001");
-  const [ocppVersion, setOcppVersion] = useState < string > (localStorage.getItem("OCPP") || "OCPP-1.6J");
+const SettingsView: React.FC = () => {
+  const [wsURL] = useState<string>(localStorage.getItem("WSURL") || "");
+  const [connectorNumber] = useState<number>(parseInt(localStorage.getItem("CONNECTORS") || "2"));
+  const [cpID] = useState<string>(localStorage.getItem("CPID") || "CP-001");
+  const [ocppVersion] = useState<string>(localStorage.getItem("OCPP") || "OCPP-1.6J");
   return (
     <div className="mb-1 bg-gray-100 rounded p-2">
       <p className="text-lg font-semibold">settings</p>