From c42600b863c2fbf7fa037d60d81a6a9cc017d0c6 Mon Sep 17 00:00:00 2001
From: Nasar Eddaoui <nasar165@hotmail.com>
Date: Mon, 6 May 2024 01:38:03 +0700
Subject: [PATCH 1/5] submit meter values to CSMS

---
 app/components/evse.tsx                       | 14 +++++-
 app/components/meter.value.tsx                | 46 +++++++++++++++++++
 app/components/transaction.tsx                |  6 ++-
 .../{WebSocket.tsx => web.socket.tsx}         |  0
 .../command/meter-value/meter.value.model.ts  |  0
 .../ocpp/command/meter-value/meter.value.ts   | 32 +++++++++++++
 6 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 app/components/meter.value.tsx
 rename app/components/{WebSocket.tsx => web.socket.tsx} (100%)
 create mode 100644 app/service/ocpp/command/meter-value/meter.value.model.ts
 create mode 100644 app/service/ocpp/command/meter-value/meter.value.ts

diff --git a/app/components/evse.tsx b/app/components/evse.tsx
index 0e2c8b5..dc601f7 100644
--- a/app/components/evse.tsx
+++ b/app/components/evse.tsx
@@ -3,7 +3,7 @@
 import { SyntheticEvent, useRef, useState } from 'react';
 import Input from './input';
 import { ConState, IWriter } from '../service/websocket/websocket.model';
-import WebSocket from './WebSocket';
+import WebSocket from './web.socket';
 import { ChargingSocket, IChargingSocket } from '../service/ocpp/connector';
 import { HandleOcpp } from '../service/ocpp/ocpp.handler';
 import { SendBootNotification } from '../service/ocpp/command/boot-notification/boot.notification';
@@ -14,6 +14,7 @@ import {
 } from '../service/ocpp/command/status-notification/status.notification';
 import { SendStatusNotification } from '../service/ocpp/command/status-notification/statusnotification';
 import Transaction from './transaction';
+import MeterValue from './meter.value';
 
 const defaultValue = 'ws://localhost:8080/ocpp/JwNpTpPxPm/CHR202305102';
 const connectorId = 1;
@@ -88,6 +89,17 @@ export default function Evse() {
           changeState={changeState}
         />
       </div>
+      <div
+        className={
+          socket[0].State == StatusNotification.CHARGING ? '' : 'hidden'
+        }
+      >
+        <MeterValue
+          state={socket[0].State}
+          w={writer.current[0]}
+          connectorId={connectorId}
+        />
+      </div>
     </div>
   );
 }
diff --git a/app/components/meter.value.tsx b/app/components/meter.value.tsx
new file mode 100644
index 0000000..d10b12a
--- /dev/null
+++ b/app/components/meter.value.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import Select, { ReturnValue } from './select';
+import { meterValueList } from './transaction';
+import { StatusNotification } from '../service/ocpp/command/status-notification/status.notification';
+import Button from './button';
+import { SendMeterValue } from '../service/ocpp/command/meter-value/meter.value';
+import { IWriter } from '../service/websocket/websocket.model';
+
+type meterValue = {
+  w: IWriter;
+  connectorId: number;
+  state: StatusNotification;
+};
+
+export default function MeterValue({
+  w,
+  connectorId,
+  state,
+}: meterValue): React.JSX.Element {
+  const [meter, setMeter] = useState(250);
+  const meterValue = { name: meter.toString(), value: meter };
+
+  const onSelectChange = (item: ReturnValue) => {
+    setMeter(item as number);
+  };
+
+  const onClick = () => {
+    SendMeterValue(w, connectorId, meter);
+  };
+
+  return (
+    <div className='border border-black p-2 my-2 rounded-md'>
+      <p className='my-2'>Meter value</p>
+      <Select
+        items={meterValueList}
+        onChange={onSelectChange}
+        defaultItem={meterValue}
+      />
+      <Button
+        onClick={onClick}
+        text='Stop Transaction'
+        disabled={state != StatusNotification.CHARGING}
+      />
+    </div>
+  );
+}
diff --git a/app/components/transaction.tsx b/app/components/transaction.tsx
index 182eb1b..edb131e 100644
--- a/app/components/transaction.tsx
+++ b/app/components/transaction.tsx
@@ -96,13 +96,13 @@ export default function Transaction({
         onChange={onChange}
         disabled={false}
       />
-      <p className='my-2'>Meter value</p>
+      <p className='my-2'>Stop Transaction Meter value</p>
       <Select
         items={meterValueList}
         onChange={onSelectChange}
         defaultItem={meterValue}
       />
-      <div className='grid gap-2 grid-cols-2'>
+      <div className='grid gap-2 grid-cols-1 md:grid-cols-2'>
         <Button
           onClick={onStart}
           text='Start Transaction'
@@ -117,3 +117,5 @@ export default function Transaction({
     </div>
   );
 }
+
+export { meterValueList };
diff --git a/app/components/WebSocket.tsx b/app/components/web.socket.tsx
similarity index 100%
rename from app/components/WebSocket.tsx
rename to app/components/web.socket.tsx
diff --git a/app/service/ocpp/command/meter-value/meter.value.model.ts b/app/service/ocpp/command/meter-value/meter.value.model.ts
new file mode 100644
index 0000000..e69de29
diff --git a/app/service/ocpp/command/meter-value/meter.value.ts b/app/service/ocpp/command/meter-value/meter.value.ts
new file mode 100644
index 0000000..995bd6e
--- /dev/null
+++ b/app/service/ocpp/command/meter-value/meter.value.ts
@@ -0,0 +1,32 @@
+import { IWriter } from '../../../websocket/websocket.model';
+import { Action, CreateRequestFrame, GetRequestFrame } from '../../ocpp.action';
+import { CreateTransaction } from '../../transaction/transaction.handler';
+import { GetSession } from '../charging/start.transaction';
+
+function SendMeterValue(w: IWriter, connectorId: number, value: number): void {
+  const session = GetSession();
+  const payload: any = {
+    connectorId,
+    meterValue: [
+      {
+        context: 'Sample.Periodic',
+        value: value,
+        unit: 'W',
+        measurand: 'Power.Active.Import',
+      },
+    ],
+  };
+
+  if (session.transactionId != 0)
+    payload['transactionId'] = session.transactionId;
+
+  const frame = CreateRequestFrame(Action.METER_VALUES, payload);
+  CreateTransaction(GetRequestFrame(frame), MeterValue);
+  w.Write(frame);
+}
+
+function MeterValue(): void {
+  console.log('meter value accepted by CSMS');
+}
+
+export { SendMeterValue, MeterValue };

From 8da0c6cceec80db2bf5ec82467c2aae81cdad9ca Mon Sep 17 00:00:00 2001
From: Nasar Eddaoui <nasar165@hotmail.com>
Date: Mon, 6 May 2024 01:45:40 +0700
Subject: [PATCH 2/5] send meter value every 30 seconds

---
 app/components/evse.tsx        | 20 +++++++++-----------
 app/components/meter.value.tsx | 17 +++++++++++++++--
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/app/components/evse.tsx b/app/components/evse.tsx
index dc601f7..efe47f5 100644
--- a/app/components/evse.tsx
+++ b/app/components/evse.tsx
@@ -89,17 +89,15 @@ export default function Evse() {
           changeState={changeState}
         />
       </div>
-      <div
-        className={
-          socket[0].State == StatusNotification.CHARGING ? '' : 'hidden'
-        }
-      >
-        <MeterValue
-          state={socket[0].State}
-          w={writer.current[0]}
-          connectorId={connectorId}
-        />
-      </div>
+      {socket[0].State == StatusNotification.CHARGING ? (
+        <div>
+          <MeterValue
+            state={socket[0].State}
+            w={writer.current[0]}
+            connectorId={connectorId}
+          />
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/app/components/meter.value.tsx b/app/components/meter.value.tsx
index d10b12a..0defb3a 100644
--- a/app/components/meter.value.tsx
+++ b/app/components/meter.value.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Select, { ReturnValue } from './select';
 import { meterValueList } from './transaction';
 import { StatusNotification } from '../service/ocpp/command/status-notification/status.notification';
@@ -6,6 +6,10 @@ import Button from './button';
 import { SendMeterValue } from '../service/ocpp/command/meter-value/meter.value';
 import { IWriter } from '../service/websocket/websocket.model';
 
+const DEFAULT_INTERVAL = 30000;
+
+let id: ReturnType<typeof setInterval>;
+
 type meterValue = {
   w: IWriter;
   connectorId: number;
@@ -28,6 +32,15 @@ export default function MeterValue({
     SendMeterValue(w, connectorId, meter);
   };
 
+  useEffect(() => {
+    console.info('start interval');
+    setInterval(onClick, DEFAULT_INTERVAL);
+    return () => {
+      console.info('clean up interval');
+      clearInterval(id);
+    };
+  }, []);
+
   return (
     <div className='border border-black p-2 my-2 rounded-md'>
       <p className='my-2'>Meter value</p>
@@ -38,7 +51,7 @@ export default function MeterValue({
       />
       <Button
         onClick={onClick}
-        text='Stop Transaction'
+        text='Send Meter Values'
         disabled={state != StatusNotification.CHARGING}
       />
     </div>

From 768e9fcc71d3626f3c9cd46922de87b6f06cf117 Mon Sep 17 00:00:00 2001
From: Nasar Eddaoui <nasar165@hotmail.com>
Date: Mon, 6 May 2024 01:46:43 +0700
Subject: [PATCH 3/5] add interval

---
 app/components/meter.value.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/meter.value.tsx b/app/components/meter.value.tsx
index 0defb3a..0fde618 100644
--- a/app/components/meter.value.tsx
+++ b/app/components/meter.value.tsx
@@ -6,7 +6,7 @@ import Button from './button';
 import { SendMeterValue } from '../service/ocpp/command/meter-value/meter.value';
 import { IWriter } from '../service/websocket/websocket.model';
 
-const DEFAULT_INTERVAL = 30000;
+const DEFAULT_INTERVAL = 20000;
 
 let id: ReturnType<typeof setInterval>;
 
@@ -44,6 +44,7 @@ export default function MeterValue({
   return (
     <div className='border border-black p-2 my-2 rounded-md'>
       <p className='my-2'>Meter value</p>
+      <p className='text-xs'>Notes: Meter Values are sent every 20 seconds</p>
       <Select
         items={meterValueList}
         onChange={onSelectChange}

From cf8a44a2f8b24059ffd4ea5c9bdeaad1ec126fe3 Mon Sep 17 00:00:00 2001
From: Nasar Eddaoui <nasar165@hotmail.com>
Date: Mon, 6 May 2024 01:54:28 +0700
Subject: [PATCH 4/5] fix bugs in meter values

---
 app/components/meter.value.tsx                      | 13 ++++++-------
 app/service/ocpp/command/meter-value/meter.value.ts |  2 +-
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/app/components/meter.value.tsx b/app/components/meter.value.tsx
index 0fde618..3aa8c30 100644
--- a/app/components/meter.value.tsx
+++ b/app/components/meter.value.tsx
@@ -8,8 +8,6 @@ import { IWriter } from '../service/websocket/websocket.model';
 
 const DEFAULT_INTERVAL = 20000;
 
-let id: ReturnType<typeof setInterval>;
-
 type meterValue = {
   w: IWriter;
   connectorId: number;
@@ -21,20 +19,21 @@ export default function MeterValue({
   connectorId,
   state,
 }: meterValue): React.JSX.Element {
-  const [meter, setMeter] = useState(250);
-  const meterValue = { name: meter.toString(), value: meter };
+  const [meter, setMeter] = useState<Array<number>>([250]);
+  const meterValue = { name: meter.toString(), value: meter[0] };
 
   const onSelectChange = (item: ReturnValue) => {
-    setMeter(item as number);
+    meter[0] = item as number;
+    setMeter([...meter]);
   };
 
   const onClick = () => {
-    SendMeterValue(w, connectorId, meter);
+    SendMeterValue(w, connectorId, meter[0]);
   };
 
   useEffect(() => {
     console.info('start interval');
-    setInterval(onClick, DEFAULT_INTERVAL);
+    const id = setInterval(onClick, DEFAULT_INTERVAL - 19000);
     return () => {
       console.info('clean up interval');
       clearInterval(id);
diff --git a/app/service/ocpp/command/meter-value/meter.value.ts b/app/service/ocpp/command/meter-value/meter.value.ts
index 995bd6e..edff022 100644
--- a/app/service/ocpp/command/meter-value/meter.value.ts
+++ b/app/service/ocpp/command/meter-value/meter.value.ts
@@ -17,7 +17,7 @@ function SendMeterValue(w: IWriter, connectorId: number, value: number): void {
     ],
   };
 
-  if (session.transactionId != 0)
+  if (session != null && session.transactionId != 0)
     payload['transactionId'] = session.transactionId;
 
   const frame = CreateRequestFrame(Action.METER_VALUES, payload);

From 93e4aa810365a8c663df9db4e230271f9842b5cd Mon Sep 17 00:00:00 2001
From: Nasar Eddaoui <nasar165@hotmail.com>
Date: Mon, 6 May 2024 01:55:44 +0700
Subject: [PATCH 5/5] hide to prevent errors

---
 app/components/evse.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/components/evse.tsx b/app/components/evse.tsx
index efe47f5..36ce413 100644
--- a/app/components/evse.tsx
+++ b/app/components/evse.tsx
@@ -75,10 +75,12 @@ export default function Evse() {
           onMessage={onMessage}
           online={online}
         />
-        <StatusNotificationUI
-          state={socket[0].State}
-          changeState={changeState}
-        />
+        {online ? (
+          <StatusNotificationUI
+            state={socket[0].State}
+            changeState={changeState}
+          />
+        ) : null}
       </div>
 
       <div className={online ? '' : 'hidden'}>