From 8fc2e5cc4eb4c5e8560a461f8d9c52e3a7a23b3d Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Fri, 26 Aug 2022 11:56:04 +0200
Subject: [PATCH 1/1] Web UI: add and fix support for start/stop charging
 station
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>
---
 src/charging-station/ChargingStation.ts       |  2 +-
 src/ui/web/src/components/Modal.vue           |  2 +-
 .../charging-stations/CSConnector.vue         | 22 +++++++++----
 .../components/charging-stations/CSData.vue   |  4 +++
 .../charging-stations/CSInfoModal.vue         |  2 +-
 .../components/charging-stations/CSTable.vue  |  9 ++++--
 .../charging-stations/IdTagInputModal.vue     |  2 +-
 src/ui/web/src/composable/UIClient.ts         | 32 ++++++++++++-------
 8 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/src/charging-station/ChargingStation.ts b/src/charging-station/ChargingStation.ts
index 5631a984..f74cf4bd 100644
--- a/src/charging-station/ChargingStation.ts
+++ b/src/charging-station/ChargingStation.ts
@@ -550,8 +550,8 @@ export default class ChargingStation {
     this.templateFileWatcher.close();
     this.sharedLRUCache.deleteChargingStationTemplate(this.stationInfo?.templateHash);
     this.bootNotificationResponse = null;
-    parentPort.postMessage(MessageChannelUtils.buildStoppedMessage(this));
     this.stopped = true;
+    parentPort.postMessage(MessageChannelUtils.buildStoppedMessage(this));
   }
 
   public async reset(reason?: StopTransactionReason): Promise<void> {
diff --git a/src/ui/web/src/components/Modal.vue b/src/ui/web/src/components/Modal.vue
index 20d7f0d5..954c9361 100644
--- a/src/ui/web/src/components/Modal.vue
+++ b/src/ui/web/src/components/Modal.vue
@@ -1,6 +1,6 @@
 <template>
   <teleport to="body">
-    <div id="backdrop" v-if="visibility" @click.self="close()">
+    <div id="backdrop" v-if="props.visibility" @click.self="close()">
       <slot></slot>
     </div>
   </teleport>
diff --git a/src/ui/web/src/components/charging-stations/CSConnector.vue b/src/ui/web/src/components/charging-stations/CSConnector.vue
index e2dee5c8..c0dd4c44 100644
--- a/src/ui/web/src/components/charging-stations/CSConnector.vue
+++ b/src/ui/web/src/components/charging-stations/CSConnector.vue
@@ -1,5 +1,9 @@
 <template>
   <td class="cs-table__action-col">
+    <Button @click="startChargingStation()">Start Charging Station</Button>
+    <Button @click="stopChargingStation()">Stop Charging Station</Button>
+    <Button @click="openConnection()">Open Connection</Button>
+    <Button @click="closeConnection()">Close Connection</Button>
     <Button @click="startTransaction()">Start Transaction</Button>
     <!-- <IdTagInputModal
       :visibility="state.isIdTagModalVisible"
@@ -10,12 +14,10 @@
       Start Transaction
     </IdTagInputModal> -->
     <Button @click="stopTransaction()">Stop Transaction</Button>
-    <Button @click="openConnection()">Open Connection</Button>
-    <Button @click="closeConnection()">Close Connection</Button>
   </td>
   <td class="cs-table__connector-col">{{ connectorId }}</td>
   <td class="cs-table__status-col">{{ connector.status }}</td>
-  <td class="cs-table__transaction-col">{{ connector.transactionStarted }}</td>
+  <td class="cs-table__transaction-col">{{ connector.transactionStarted ? 'Yes' : 'No' }}</td>
 </template>
 
 <script setup lang="ts">
@@ -59,11 +61,11 @@ const props = defineProps<{
 //   state.isIdTagModalVisible = false;
 // }
 
-function startTransaction(): void {
-  UIClient.instance.startTransaction(props.hashId, props.connectorId, props.idTag);
+function startChargingStation(): void {
+  UIClient.instance.startChargingStation(props.hashId);
 }
-function stopTransaction(): void {
-  UIClient.instance.stopTransaction(props.hashId, props.transactionId);
+function stopChargingStation(): void {
+  UIClient.instance.stopChargingStation(props.hashId);
 }
 function openConnection(): void {
   UIClient.instance.openConnection(props.hashId);
@@ -71,4 +73,10 @@ function openConnection(): void {
 function closeConnection(): void {
   UIClient.instance.closeConnection(props.hashId);
 }
+function startTransaction(): void {
+  UIClient.instance.startTransaction(props.hashId, props.connectorId, props.idTag);
+}
+function stopTransaction(): void {
+  UIClient.instance.stopTransaction(props.hashId, props.transactionId);
+}
 </script>
diff --git a/src/ui/web/src/components/charging-stations/CSData.vue b/src/ui/web/src/components/charging-stations/CSData.vue
index 857ef1e2..fac035d0 100644
--- a/src/ui/web/src/components/charging-stations/CSData.vue
+++ b/src/ui/web/src/components/charging-stations/CSData.vue
@@ -8,6 +8,7 @@
       :id-tag="props.idTag"
     />
     <td class="cs-table__name-col">{{ getId() }}</td>
+    <td class="cs-table__stopped-col">{{ getStopped() }}</td>
     <td class="cs-table__vendor-col">{{ getVendor() }}</td>
     <td class="cs-table__model-col">{{ getModel() }}</td>
     <td class="cs-table__firmware-col">{{ getFirmwareVersion() }}</td>
@@ -61,6 +62,9 @@ function getVendor(): string {
 function getFirmwareVersion(): string {
   return Utils.ifUndefined<string>(getInfo().firmwareVersion, 'Ø');
 }
+function getStopped(): string {
+  return props.chargingStation.stopped ? 'Yes' : 'No';
+}
 // function showTagModal(): void {
 //   state.isTagModalVisible = true;
 // }
diff --git a/src/ui/web/src/components/charging-stations/CSInfoModal.vue b/src/ui/web/src/components/charging-stations/CSInfoModal.vue
index d7740d0f..dd7835fd 100644
--- a/src/ui/web/src/components/charging-stations/CSInfoModal.vue
+++ b/src/ui/web/src/components/charging-stations/CSInfoModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal :visibility="isVisible">
+  <Modal :visibility="props.isVisible">
     <div class="card-info">vendor: {{ props.info.chargePointVendor }}</div>
   </Modal>
 </template>
diff --git a/src/ui/web/src/components/charging-stations/CSTable.vue b/src/ui/web/src/components/charging-stations/CSTable.vue
index 34517c41..dc4865a1 100644
--- a/src/ui/web/src/components/charging-stations/CSTable.vue
+++ b/src/ui/web/src/components/charging-stations/CSTable.vue
@@ -7,6 +7,7 @@
         <th scope="col" class="cs-table__status-col">Status</th>
         <th scope="col" class="cs-table__transaction-col">Transaction</th>
         <th scope="col" class="cs-table__name-col">Name</th>
+        <th scope="col" class="cs-table__stopped-col">Stopped</th>
         <th scope="col" class="cs-table__vendor-col">Vendor</th>
         <th scope="col" class="cs-table__model-col">Model</th>
         <th scope="col" class="cs-table__firmware-col">Firmware Version</th>
@@ -64,7 +65,6 @@ const props = defineProps<{
 #cs-table__body {
   /* width: 100%; */
   /* direction: rtl; */
-  /* overflow: visible scroll; */
   overflow: visible overlay;
   flex-grow: 1;
 }
@@ -73,8 +73,9 @@ const props = defineProps<{
   width: 100%;
   /* display: inline-block; */
   display: flex;
+  justify-content: center;
+  align-items: center;
   /* align-content: stretch; */
-  /* align-items: baseline; */
 }
 #cs-table__head .cs-table__row {
   background-color: rgb(194, 188, 188);
@@ -88,6 +89,7 @@ const props = defineProps<{
 .cs-table__status-col,
 .cs-table__transaction-col,
 .cs-table__name-col,
+.cs-table__stopped-col,
 .cs-table__model-col,
 .cs-table__vendor-col,
 .cs-table__firmware-col {
@@ -115,6 +117,9 @@ const props = defineProps<{
 .cs-table__name-col {
   /* min-width: 120px; */
 }
+.cs-table__stopped-col {
+  /* min-width: 120px; */
+}
 .cs-table__model-col {
   /* min-width: 120px; */
 }
diff --git a/src/ui/web/src/components/charging-stations/IdTagInputModal.vue b/src/ui/web/src/components/charging-stations/IdTagInputModal.vue
index 8645f6b6..ec3db54a 100644
--- a/src/ui/web/src/components/charging-stations/IdTagInputModal.vue
+++ b/src/ui/web/src/components/charging-stations/IdTagInputModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal :visibility="visibility">
+  <Modal :visibility="props.visibility">
     <label for="idTag">IdTag</label>
     <!-- eslint-disable-next-line vue/no-mutating-props -->
     <input type="text" name="idTag" v-model="props.idTag" @keypress.enter="done()" />
diff --git a/src/ui/web/src/composable/UIClient.ts b/src/ui/web/src/composable/UIClient.ts
index 7e1fdc01..d0a93bee 100644
--- a/src/ui/web/src/composable/UIClient.ts
+++ b/src/ui/web/src/composable/UIClient.ts
@@ -49,6 +49,26 @@ export default class UIClient {
     return this.sendRequest(ProcedureName.LIST_CHARGING_STATIONS, {});
   }
 
+  public async startChargingStation(hashId: string): Promise<ResponsePayload> {
+    return this.sendRequest(ProcedureName.START_CHARGING_STATION, { hashId });
+  }
+
+  public async stopChargingStation(hashId: string): Promise<ResponsePayload> {
+    return this.sendRequest(ProcedureName.STOP_CHARGING_STATION, { hashId });
+  }
+
+  public async openConnection(hashId: string): Promise<ResponsePayload> {
+    return this.sendRequest(ProcedureName.OPEN_CONNECTION, {
+      hashId,
+    });
+  }
+
+  public async closeConnection(hashId: string): Promise<ResponsePayload> {
+    return this.sendRequest(ProcedureName.CLOSE_CONNECTION, {
+      hashId,
+    });
+  }
+
   public async startTransaction(
     hashId: string,
     connectorId: number,
@@ -71,18 +91,6 @@ export default class UIClient {
     });
   }
 
-  public async openConnection(hashId: string): Promise<ResponsePayload> {
-    return this.sendRequest(ProcedureName.OPEN_CONNECTION, {
-      hashId,
-    });
-  }
-
-  public async closeConnection(hashId: string): Promise<ResponsePayload> {
-    return this.sendRequest(ProcedureName.CLOSE_CONNECTION, {
-      hashId,
-    });
-  }
-
   private openWS(): void {
     this._ws = new WebSocket(
       `ws://${config.emobility.host}:${config.emobility.port}`,
-- 
2.34.1