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}-${connectorId}-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         @clicked="
  29           () => {
  30             $emit('need-refresh')
  31           }
  32         "
  33       >
  34         Start Transaction
  35       </ToggleButton>
  36       <Button @click="stopTransaction()">Stop Transaction</Button>
  37       <Button @click="startAutomaticTransactionGenerator()">Start ATG</Button>
  38       <Button @click="stopAutomaticTransactionGenerator()">Stop ATG</Button>
  39     </td>
  40   </tr>
  41 </template>
  42
  43 <script setup lang="ts">
  44 import { useToast } from 'vue-toast-notification'
  45 import Button from '@/components/buttons/Button.vue'
  46 import type { ConnectorStatus, Status } from '@/types'
  47 import ToggleButton from '@/components/buttons/ToggleButton.vue'
  48 import { useUIClient } from '@/composables'
  49
  50 const props = defineProps<{
  51   hashId: string
  52   chargingStationId: string
  53   connectorId: number
  54   connector: ConnectorStatus
  55   atgStatus?: Status
  56 }>()
  57
  58 const $emit = defineEmits(['need-refresh'])
  59
  60 const uiClient = useUIClient()
  61
  62 const $toast = useToast()
  63
  64 const stopTransaction = (): void => {
  65   uiClient
  66     .stopTransaction(props.hashId, props.connector.transactionId)
  67     .then(() => {
  68       $toast.success('Transaction successfully stopped')
  69     })
  70     .catch((error: Error) => {
  71       $toast.error('Error at stopping transaction')
  72       console.error('Error at stopping transaction:', error)
  73     })
  74 }
  75 const startAutomaticTransactionGenerator = (): void => {
  76   uiClient
  77     .startAutomaticTransactionGenerator(props.hashId, props.connectorId)
  78     .then(() => {
  79       $toast.success('Automatic transaction generator successfully started')
  80     })
  81     .catch((error: Error) => {
  82       $toast.error('Error at starting automatic transaction generator')
  83       console.error('Error at starting automatic transaction generator:', error)
  84     })
  85 }
  86 const stopAutomaticTransactionGenerator = (): void => {
  87   uiClient
  88     .stopAutomaticTransactionGenerator(props.hashId, props.connectorId)
  89     .then(() => {
  90       $toast.success('Automatic transaction generator successfully stopped')
  91     })
  92     .catch((error: Error) => {
  93       $toast.error('Error at stopping automatic transaction generator')
  94       console.error('Error at stopping automatic transaction generator:', error)
  95     })
  96 }
  97 </script>