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