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     <!-- <TagInputModal
   5       :visibility="state.isTagModalVisible"
   6       :tag="state.tag"
   7       @close="hideTagModal()"
   8       @done="Utils.compose(state.transaction, hideTagModal)()"
   9     >
  10       Start Charging Session
  11     </TagInputModal> -->
  12     <!-- TODO: Use transactionId to stop transaction -->
  13     <!-- <Button @click="stopTransaction()">Stop Transaction</Button> -->
  14   </td>
  15   <td class="cs-table__connector-col">{{ connectorId }}</td>
  16   <td class="cs-table__status-col">{{ connector.bootStatus }}</td>
  17 </template>
  18
  19 <script setup lang="ts">
  20 import TagInputModal from './TagInputModal.vue';
  21 import Button from '../buttons/Button.vue';
  22
  23 import { reactive } from 'vue';
  24 import UIClient from '@/composable/UIClient';
  25 import { ConnectorStatus } from '@/type/ChargingStationType';
  26 import Utils from '@/composable/Utils';
  27
  28 const props = defineProps<{
  29   hashId: string;
  30   connector: ConnectorStatus;
  31   transactionId?: number;
  32   connectorId?: number;
  33   tag?: string;
  34 }>();
  35
  36 type State = {
  37   isTagModalVisible: boolean;
  38   tag: string;
  39   transaction: () => void;
  40 };
  41 const state: State = reactive({
  42   isTagModalVisible: false,
  43   tag: '',
  44   transaction: startTransaction,
  45 });
  46
  47 function getTag(transaction: () => void): void {
  48   state.transaction = transaction;
  49   showTagModal();
  50 }
  51
  52 function showTagModal(): void {
  53   state.isTagModalVisible = true;
  54 }
  55 function hideTagModal(): void {
  56   state.isTagModalVisible = false;
  57 }
  58
  59 function startTransaction(): void {
  60   UIClient.instance.startTransaction(props.hashId, props.connectorId, props.tag);
  61 }
  62 function stopTransaction(): void {
  63   UIClient.instance.stopTransaction(props.hashId, props.transactionId);
  64 }
  65 </script>