Web UI: display charging stations' registration status

[e-mobility-charging-stations-simulator.git] / src / ui / web / src / components / charging-stations / CSConnector.vue

diff --git a/src/ui/web/src/components/charging-stations/CSConnector.vue b/src/ui/web/src/components/charging-stations/CSConnector.vue
index e2dee5c8f7332d0e6b3d948078fd53bc5c4790ae..c0dd4c4465a70837d4895b87e9a55fb28bc8d8c8 100644 (file)
--- 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>