src/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   </td>
  18   <td class="cs-table__connector-col">{{ connectorId }}</td>
  19   <td class="cs-table__status-col">{{ connector.status }}</td>
  20   <td class="cs-table__transaction-col">{{ connector.transactionStarted ? 'Yes' : 'No' }}</td>
  21 </template>
  22
  23 <script setup lang="ts">
  24 // import IdTagInputModal from './IdTagInputModal.vue';
  25 import Button from '../buttons/Button.vue';
  26
  27 // import { reactive } from 'vue';
  28 import UIClient from '@/composable/UIClient';
  29 import type { ConnectorStatus } from '@/type/ChargingStationType';
  30 // import Utils from '@/composable/Utils';
  31
  32 const props = defineProps<{
  33   hashId: string;
  34   connector: ConnectorStatus;
  35   transactionId?: number;
  36   connectorId: number;
  37   idTag?: string;
  38 }>();
  39
  40 // type State = {
  41 //   isIdTagModalVisible: boolean;
  42 //   idTag: string;
  43 //   transaction: () => void;
  44 // };
  45
  46 // const state: State = reactive({
  47 //   isIdTagModalVisible: false,
  48 //   idTag: '',
  49 //   transaction: startTransaction,
  50 // });
  51
  52 // function getIdTag(transaction: () => void): void {
  53 //   state.transaction = transaction;
  54 //   showTagModal();
  55 // }
  56
  57 // function showTagModal(): void {
  58 //   state.isIdTagModalVisible = true;
  59 // }
  60 // function hideIdTagModal(): void {
  61 //   state.isIdTagModalVisible = false;
  62 // }
  63
  64 function startChargingStation(): void {
  65   UIClient.instance.startChargingStation(props.hashId);
  66 }
  67 function stopChargingStation(): void {
  68   UIClient.instance.stopChargingStation(props.hashId);
  69 }
  70 function openConnection(): void {
  71   UIClient.instance.openConnection(props.hashId);
  72 }
  73 function closeConnection(): void {
  74   UIClient.instance.closeConnection(props.hashId);
  75 }
  76 function startTransaction(): void {
  77   UIClient.instance.startTransaction(props.hashId, props.connectorId, props.idTag);
  78 }
  79 function stopTransaction(): void {
  80   UIClient.instance.stopTransaction(props.hashId, props.transactionId);
  81 }
  82 </script>