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

   1 <template>
   2   <h1 id="action">Start Transaction</h1>
   3   <h2>{{ chargingStationId }}</h2>
   4   <h3>Connector {{ connectorId }}</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(hashId, convertToInt(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 </template>
  30
  31 <script setup lang="ts">
  32 import { ref } from 'vue'
  33
  34 import Button from '@/components/buttons/Button.vue'
  35 import { convertToInt } from '@/composables'
  36
  37 defineProps<{
  38   hashId: string
  39   chargingStationId: string
  40   connectorId: string
  41 }>()
  42
  43 const state = ref<{ idTag: string }>({
  44   idTag: ''
  45 })
  46 </script>
  47
  48 <style>
  49 #idtag {
  50   text-align: center;
  51 }
  52 </style>