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

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