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       >
  20         Start Transaction
  21       </Button>
  22       <Button @click="stopTransaction()">Stop Transaction</Button>
  23       <Button @click="startAutomaticTransactionGenerator()">Start ATG</Button>
  24       <Button @click="stopAutomaticTransactionGenerator()">Stop ATG</Button>
  25     </td>
  26   </tr>
  27 </template>
  28
  29 <script setup lang="ts">
  30 import { defineProps, getCurrentInstance } from 'vue'
  31 import { useToast } from 'vue-toast-notification'
  32 import Button from '@/components/buttons/Button.vue'
  33 import type { ConnectorStatus, Status } from '@/types'
  34
  35 const props = defineProps<{
  36   hashId: string
  37   chargingStationId: string
  38   connectorId: number
  39   connector: ConnectorStatus
  40   atgStatus?: Status
  41 }>()
  42
  43 const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
  44
  45 const $toast = useToast()
  46
  47 const stopTransaction = (): void => {
  48   uiClient
  49     .stopTransaction(props.hashId, props.connector.transactionId)
  50     .then(() => {
  51       $toast.success('Transaction successfully stopped')
  52     })
  53     .catch((error: Error) => {
  54       $toast.error('Error at stopping transaction')
  55       console.error('Error at stopping transaction:', error)
  56     })
  57 }
  58 const startAutomaticTransactionGenerator = (): void => {
  59   uiClient
  60     .startAutomaticTransactionGenerator(props.hashId, props.connectorId)
  61     .then(() => {
  62       $toast.success('Automatic transaction generator successfully started')
  63     })
  64     .catch((error: Error) => {
  65       $toast.error('Error at starting automatic transaction generator')
  66       console.error('Error at starting automatic transaction generator:', error)
  67     })
  68 }
  69 const stopAutomaticTransactionGenerator = (): void => {
  70   uiClient
  71     .stopAutomaticTransactionGenerator(props.hashId, props.connectorId)
  72     .then(() => {
  73       $toast.success('Automatic transaction generator successfully stopped')
  74     })
  75     .catch((error: Error) => {
  76       $toast.error('Error at stopping automatic transaction generator')
  77       console.error('Error at stopping automatic transaction generator:', error)
  78     })
  79 }
  80 </script>