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
  13         @click="
  14           $router.push({
  15             name: 'start-transaction',
  16             params: { hashId, chargingStationId, connectorId }
  17           })
  18         "
  19         >Start Transaction</Button
  20       >
  21       <Button @click="stopTransaction()">Stop Transaction</Button>
  22       <Button @click="startAutomaticTransactionGenerator()">Start ATG</Button>
  23       <Button @click="stopAutomaticTransactionGenerator()">Stop ATG</Button>
  24     </td>
  25   </tr>
  26 </template>
  27
  28 <script setup lang="ts">
  29 import { getCurrentInstance } from 'vue'
  30 import Button from '@/components/buttons/Button.vue'
  31 import type { ConnectorStatus, Status } from '@/types'
  32
  33 const props = defineProps<{
  34   hashId: string
  35   chargingStationId: string
  36   connectorId: number
  37   connector: ConnectorStatus
  38   atgStatus?: Status
  39 }>()
  40
  41 const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
  42
  43 function stopTransaction(): void {
  44   uiClient.stopTransaction(props.hashId, props.connector.transactionId)
  45 }
  46 function startAutomaticTransactionGenerator(): void {
  47   uiClient.startAutomaticTransactionGenerator(props.hashId, props.connectorId)
  48 }
  49 function stopAutomaticTransactionGenerator(): void {
  50   uiClient.stopAutomaticTransactionGenerator(props.hashId, props.connectorId)
  51 }
  52 </script>