ui/web/src/components/charging-stations/CSConnector.vue

   1 <template>
   2   <td class="cs-table__action-col">
   3     <Button @click="startChargingStation()">Start Charging Station</Button>
   4     <Button @click="stopChargingStation()">Stop Charging Station</Button>
   5     <Button @click="openConnection()">Open Connection</Button>
   6     <Button @click="closeConnection()">Close Connection</Button>
   7     <Button @click="startTransaction()">Start Transaction</Button>
   8     <!-- <IdTagInputModal
   9       :visibility="state.isIdTagModalVisible"
  10       :idTag="state.idTag"
  11       @close="hideIdTagModal()"
  12       @done="Utils.compose(state.transaction, hideIdTagModal)()"
  13     >
  14       Start Transaction
  15     </IdTagInputModal> -->
  16     <Button @click="stopTransaction()">Stop Transaction</Button>
  17     <Button @click="startAutomaticTransactionGenerator()">Start ATG</Button>
  18     <Button @click="stopAutomaticTransactionGenerator()">Stop ATG</Button>
  19   </td>
  20   <td class="cs-table__connector-col">{{ connectorId }}</td>
  21   <td class="cs-table__status-col">{{ connector.status }}</td>
  22   <td class="cs-table__transaction-col">{{ connector.transactionStarted ? 'Yes' : 'No' }}</td>
  23 </template>
  24
  25 <script setup lang="ts">
  26 // import IdTagInputModal from './IdTagInputModal.vue';
  27 import Button from '../buttons/Button.vue';
  28
  29 // import { reactive } from 'vue';
  30 import UIClient from '@/composables/UIClient';
  31 import type { ConnectorStatus } from '@/types/ChargingStationType';
  32 // import Utils from '@/composables/Utils';
  33
  34 const props = defineProps<{
  35   hashId: string;
  36   connector: ConnectorStatus;
  37   connectorId: number;
  38   transactionId?: number;
  39   idTag?: string;
  40 }>();
  41
  42 // type State = {
  43 //   isIdTagModalVisible: boolean;
  44 //   idTag: string;
  45 //   transaction: () => void;
  46 // };
  47
  48 // const state: State = reactive({
  49 //   isIdTagModalVisible: false,
  50 //   idTag: '',
  51 //   transaction: startTransaction,
  52 // });
  53
  54 // function getIdTag(transaction: () => void): void {
  55 //   state.transaction = transaction;
  56 //   showTagModal();
  57 // }
  58
  59 // function showTagModal(): void {
  60 //   state.isIdTagModalVisible = true;
  61 // }
  62 // function hideIdTagModal(): void {
  63 //   state.isIdTagModalVisible = false;
  64 // }
  65
  66 function startChargingStation(): void {
  67   UIClient.getInstance().startChargingStation(props.hashId);
  68 }
  69 function stopChargingStation(): void {
  70   UIClient.getInstance().stopChargingStation(props.hashId);
  71 }
  72 function openConnection(): void {
  73   UIClient.getInstance().openConnection(props.hashId);
  74 }
  75 function closeConnection(): void {
  76   UIClient.getInstance().closeConnection(props.hashId);
  77 }
  78 function startTransaction(): void {
  79   UIClient.getInstance().startTransaction(props.hashId, props.connectorId, props.idTag);
  80 }
  81 function stopTransaction(): void {
  82   UIClient.getInstance().stopTransaction(props.hashId, props.transactionId);
  83 }
  84 function startAutomaticTransactionGenerator(): void {
  85   UIClient.getInstance().startAutomaticTransactionGenerator(props.hashId, props.connectorId);
  86 }
  87 function stopAutomaticTransactionGenerator(): void {
  88   UIClient.getInstance().stopAutomaticTransactionGenerator(props.hashId, props.connectorId);
  89 }
  90 </script>