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

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