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     id="action-button"
   9     @click="
  10       () => {
  11         uiClient
  12           .startTransaction(props.hashId, parseInt(props.connectorId), state.idTag)
  13           .then(() => {
  14             $toast.success('Transaction successfully started')
  15           })
  16           .catch((error: Error) => {
  17             $toast.error('Error at starting transaction')
  18             console.error('Error at starting transaction:', error)
  19           })
  20           .finally(() => {
  21             $router.push({ name: 'charging-stations' })
  22           })
  23       }
  24     "
  25   >
  26     Start Transaction
  27   </Button>
  28   <Button id="action-button" @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
  29 </template>
  30
  31 <script setup lang="ts">
  32 import { getCurrentInstance, reactive } from 'vue'
  33 import Button from '@/components/buttons/Button.vue'
  34
  35 const props = defineProps<{
  36   hashId: string
  37   chargingStationId: string
  38   connectorId: string
  39 }>()
  40
  41 const state = reactive({
  42   idTag: ''
  43 })
  44
  45 const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
  46 </script>
  47
  48 <style>
  49 #idtag {
  50   text-align: center;
  51 }
  52 </style>