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

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