feat: initial support of Get/ChangeConfiguration

src/components/ChargePoint.tsx

@@ -156,11 +156,11 @@ const ChargePointControls: React.FC<ChargePointControlsProps> = ({
     }
   };
 
-  const handleHeartbeatInterval = (isEnalbe: boolean) => {
-    setIsHeartbeatEnabled(isEnalbe);
+  const handleHeartbeatInterval = (isEnable: boolean) => {
+    setIsHeartbeatEnabled(isEnable);
     if (cp) {
-      if (isEnalbe) {
-        cp.startHeartbeat(10);
+      if (isEnable) {
+        cp.startHeartbeat();
       } else {
         cp.stopHeartbeat();
       }

src/components/Settings.tsx

@@ -1,7 +1,8 @@
 import React, {useState, useEffect} from "react";
-import {configAtom} from "../store/store.ts";
+import {Config, configAtom} from "../store/store.ts";
 import {useAtom} from "jotai/index";
 import {DefaultBootNotification} from "../cp/OcppTypes.ts";
+import {useNavigate} from "react-router-dom";
 
 const Settings: React.FC = () => {
   const [wsURL, setWsURL] = useState<string>("");
@@ -21,7 +22,7 @@ const Settings: React.FC = () => {
   const [experimental, setExperimental] = useState<string | null>(null);
   const [bootNotification, setBootNotification] = useState<string | null>(JSON.stringify(DefaultBootNotification));
   const [config, setConfig] = useAtom(configAtom);
-
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (config) {
@@ -62,10 +63,10 @@ const Settings: React.FC = () => {
         interval: autoMeterValueInterval,
         value: autoMeterValue
       },
-      Experimental: experimental !== "" ? experimental && JSON.parse(experimental) : null,
-      BootNotification: bootNotification !== "" ? bootNotification && JSON.parse(bootNotification) : null,
-    });
-    // navigate(`/${location.hash}`)
+      Experimental: experimental && experimental !== "" ? JSON.parse(experimental) : null,
+      BootNotification: bootNotification && bootNotification !== "" ? JSON.parse(bootNotification) : null,
+    } as Config);
+    navigate("/");
   };
 
   return (

src/components/TopPage.tsx

@@ -6,43 +6,45 @@ import {ChargePoint as OCPPChargePoint} from "../cp/ChargePoint.ts";
 import {useAtom} from 'jotai'
 import {configAtom} from "../store/store.ts";
 import {BootNotification, DefaultBootNotification} from "../cp/OcppTypes.ts";
-
+import {useNavigate} from "react-router-dom";
 
 const TopPage: React.FC = () => {
   const [cps, setCps] = useState<OCPPChargePoint[]>([]);
-  const [connectorNumber, setConnectorNumber] = useState<number>(2);
   const [config] = useAtom(configAtom);
   const [tagIDs, setTagIDs] = useState<string[]>([]);
+  const navigate = useNavigate();
 
   useEffect(() => {
-    console.log(`Connector Number: ${config?.connectorNumber} WSURL: ${config?.wsURL} CPID: ${config?.ChargePointID} TagID: ${config?.tagID}`);
-    if (config?.Experimental === null) {
-      setConnectorNumber(config?.connectorNumber || 2);
-      setCps([
-        NewChargePoint(connectorNumber, config.ChargePointID, config.BootNotification ?? DefaultBootNotification, config.wsURL, config.basicAuthSettings,config.autoMeterValueSetting)
-      ]);
-    } else {
-      const cps = config?.Experimental?.ChargePointIDs.map((cp) =>
-        NewChargePoint(cp.ConnectorNumber, cp.ChargePointID, config.BootNotification ?? DefaultBootNotification, config.wsURL,config.basicAuthSettings,config.autoMeterValueSetting)
+    if (!config) {
+      navigate('/settings');
+      return;
+    }
+    console.log(`Connector Number: ${config.connectorNumber} WSURL: ${config.wsURL} CPID: ${config.ChargePointID} TagID: ${config.tagID}`);
+    if (config.Experimental) {
+      const cps = config.Experimental.ChargePointIDs.map((cp) =>
+          NewChargePoint(cp.ConnectorNumber, cp.ChargePointID, config.BootNotification ?? DefaultBootNotification, config.wsURL, config.basicAuthSettings, config.autoMeterValueSetting)
       )
       setCps(cps ?? []);
-      const tagIDs = config?.Experimental?.TagIDs;
+      const tagIDs = config.Experimental.TagIDs;
       setTagIDs(tagIDs ?? []);
+    } else {
+      setCps([
+        NewChargePoint(config.connectorNumber, config.ChargePointID, config.BootNotification ?? DefaultBootNotification, config.wsURL, config.basicAuthSettings, config.autoMeterValueSetting)
+      ]);
     }
-  }, []);
-
+  }, [config, navigate]);
 
   return (
     <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
       {
-        cps.length === 1 ? (
-          <>
-            <ChargePoint cp={cps[0]} TagID={config?.tagID ?? ""}/>
-          </>
+        config?.Experimental || cps.length !== 1 ? (
+            <>
+              <ExperimentalView cps={cps} tagIDs={tagIDs}/>
+            </>
         ) : (
-          <>
-            <ExperimentalView cps={cps} tagIDs={tagIDs}/>
-          </>
+            <>
+              <ChargePoint cp={cps[0]} TagID={config?.tagID ?? ""}/>
+            </>
         )
       }
     </div>
@@ -89,7 +91,7 @@ const ExperimentalView: React.FC<ExperimentalProps> = ({cps, tagIDs}) => {
     setIsAllHeartbeatEnabled(isEnalbe);
     if (isEnalbe) {
       cps.forEach((cp) => {
-        cp.startHeartbeat(10);
+        cp.startHeartbeat();
       });
     } else {
       cps.forEach((cp) => {

src/cp/ChargePoint.ts

@@ -21,6 +21,7 @@ export class ChargePoint {
   };
 
   private _heartbeat: number | null = null;
+  private _heartbeatPeriod = 10;
   private _autoMeterValueIntervals: Map<number, number> = new Map();
 
   private _statusChangeCallback:
@@ -70,6 +71,10 @@ export class ChargePoint {
     return this._webSocket.url;
   }
 
+  public set wsUrl(value: string) {
+    this._webSocket.url = value;
+  }
+
   get error(): string {
     return this._error;
   }
@@ -242,18 +247,40 @@ export class ChargePoint {
     this._messageHandler.sendHeartbeat();
   }
 
-  public startHeartbeat(period: number): void {
-    this._logger.info("Setting heartbeat period to " + period + "s");
+  public get heartbeatPeriod(): number {
+    return this._heartbeatPeriod;
+  }
+
+  public set heartbeatPeriod(value: number|string) {
+    if (typeof value === 'string') {
+      value = Number(value);
+    }
+    if (value <= 0) {
+      throw new Error("Invalid heartbeat period value");
+    }
+    if (value === this._heartbeat) {
+      return;
+    }
+    this._heartbeatPeriod = value;
+    if (this._heartbeat) {
+      this.stopHeartbeat();
+      this.startHeartbeat();
+    }
+  }
+
+  public startHeartbeat(): void {
+    this._logger.info("Setting heartbeat period to " + this._heartbeatPeriod + "s");
     if (this._heartbeat) {
       clearInterval(this._heartbeat);
     }
-    this._heartbeat = setInterval(() => this.sendHeartbeat(), period * 1000);
+    this._heartbeat = setInterval(() => this.sendHeartbeat(), this._heartbeatPeriod * 1000);
   }
 
   public stopHeartbeat(): void {
     this._logger.info("Stopping heartbeat");
     if (this._heartbeat) {
       clearInterval(this._heartbeat);
+      this._heartbeat = null;
     }
   }