ui/web/src/components/actions/StartTransaction.vue

   1 <template>
   2   <h2>Action Start Transaction</h2>
   3   <h3>Connector {{ connectorId }} on {{ chargingStationId }}</h3>
   4   <p>Scan RFID tag:</p>
   5   <input id="idtag" v-model.trim="state.idTag" type="text" name="idtag" placeholder="RFID tag" />
   6   <br />
   7   <Button
   8     @click="
   9       () => {
  10         uiClient
  11           .startTransaction(props.hashId, parseInt(props.connectorId), state.idTag)
  12           .then(() => {
  13             $toast.success('Transaction successfully started')
  14           })
  15           .catch((error: Error) => {
  16             $toast.error('Error at starting transaction')
  17             console.error('Error at starting transaction:', error)
  18           })
  19           .finally(() => {
  20             $router.push({ name: 'charging-stations' })
  21           })
  22       }
  23     "
  24     >Start Transaction</Button
  25   >
  26   <Button @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
  27 </template>
  28
  29 <script setup lang="ts">
  30 import { getCurrentInstance, reactive } from 'vue'
  31 import Button from '@/components/buttons/Button.vue'
  32
  33 const props = defineProps<{
  34   hashId: string
  35   chargingStationId: string
  36   connectorId: string
  37 }>()
  38
  39 const state = reactive({
  40   idTag: ''
  41 })
  42
  43 const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
  44 </script>
  45
  46 <style>
  47 #idtag {
  48   text-align: center;
  49 }
  50 </style>