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

   1 <template>
   2   <tr class="connectors-table__row">
   3     <td class="connectors-table__column">{{ connectorId }}</td>
   4     <td class="connectors-table__column">{{ connector.status ?? 'Ø' }}</td>
   5     <td class="connectors-table__column">
   6       {{ connector.transactionStarted === true ? 'Yes' : 'No' }}
   7     </td>
   8     <td class="connectors-table__column">
   9       {{ atgStatus?.start === true ? 'Yes' : 'No' }}
  10     </td>
  11     <td class="connectors-table__column">
  12       <Button @click="startTransaction()">Start Transaction</Button>
  13       <Button @click="stopTransaction()">Stop Transaction</Button>
  14       <Button @click="startAutomaticTransactionGenerator()">Start ATG</Button>
  15       <Button @click="stopAutomaticTransactionGenerator()">Stop ATG</Button>
  16     </td>
  17   </tr>
  18 </template>
  19
  20 <script setup lang="ts">
  21 import { getCurrentInstance } from 'vue'
  22 import Button from '@/components/buttons/Button.vue'
  23 import type { ConnectorStatus, Status } from '@/types'
  24
  25 const props = defineProps<{
  26   hashId: string
  27   connectorId: number
  28   connector: ConnectorStatus
  29   atgStatus?: Status
  30   transactionId?: number
  31   idTag?: string
  32 }>()
  33
  34 const UIClient = getCurrentInstance()?.appContext.config.globalProperties.$UIClient
  35
  36 function startTransaction(): void {
  37   UIClient.startTransaction(props.hashId, props.connectorId, props.idTag)
  38 }
  39 function stopTransaction(): void {
  40   UIClient.stopTransaction(props.hashId, props.transactionId)
  41 }
  42 function startAutomaticTransactionGenerator(): void {
  43   UIClient.startAutomaticTransactionGenerator(props.hashId, props.connectorId)
  44 }
  45 function stopAutomaticTransactionGenerator(): void {
  46   UIClient.stopAutomaticTransactionGenerator(props.hashId, props.connectorId)
  47 }
  48 </script>