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