Align 'started' attribute usage to all classes
[e-mobility-charging-stations-simulator.git] / src / ui / web / src / components / charging-stations / CSConnector.vue
index e2dee5c8f7332d0e6b3d948078fd53bc5c4790ae..99ae1b9c74ef1db1f4ee1bf8a590a02e4acdb895 100644 (file)
@@ -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"
       Start Transaction
     </IdTagInputModal> -->
     <Button @click="stopTransaction()">Stop Transaction</Button>
-    <Button @click="openConnection()">Open Connection</Button>
-    <Button @click="closeConnection()">Close Connection</Button>
+    <Button @click="startAutomaticTransactionGenerator()">Start ATG</Button>
+    <Button @click="stopAutomaticTransactionGenerator()">Stop ATG</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">
 import Button from '../buttons/Button.vue';
 
 // import { reactive } from 'vue';
-import UIClient from '@/composable/UIClient';
-import { ConnectorStatus } from '@/type/ChargingStationType';
-// import Utils from '@/composable/Utils';
+import UIClient from '@/composables/UIClient';
+import type { ConnectorStatus } from '@/types/ChargingStationType';
+// import Utils from '@/composables/Utils';
 
 const props = defineProps<{
   hashId: string;
   connector: ConnectorStatus;
-  transactionId?: number;
   connectorId: number;
+  transactionId?: number;
   idTag?: string;
 }>();
 
@@ -59,16 +63,28 @@ const props = defineProps<{
 //   state.isIdTagModalVisible = false;
 // }
 
-function startTransaction(): void {
-  UIClient.instance.startTransaction(props.hashId, props.connectorId, props.idTag);
+function startChargingStation(): void {
+  UIClient.getInstance().startChargingStation(props.hashId);
 }
-function stopTransaction(): void {
-  UIClient.instance.stopTransaction(props.hashId, props.transactionId);
+function stopChargingStation(): void {
+  UIClient.getInstance().stopChargingStation(props.hashId);
 }
 function openConnection(): void {
-  UIClient.instance.openConnection(props.hashId);
+  UIClient.getInstance().openConnection(props.hashId);
 }
 function closeConnection(): void {
-  UIClient.instance.closeConnection(props.hashId);
+  UIClient.getInstance().closeConnection(props.hashId);
+}
+function startTransaction(): void {
+  UIClient.getInstance().startTransaction(props.hashId, props.connectorId, props.idTag);
+}
+function stopTransaction(): void {
+  UIClient.getInstance().stopTransaction(props.hashId, props.transactionId);
+}
+function startAutomaticTransactionGenerator(): void {
+  UIClient.getInstance().startAutomaticTransactionGenerator(props.hashId, props.connectorId);
+}
+function stopAutomaticTransactionGenerator(): void {
+  UIClient.getInstance().stopAutomaticTransactionGenerator(props.hashId, props.connectorId);
 }
 </script>