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   >
  25     Start Transaction
  26   </Button>
  27   <Button @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
  28 </template>
  29
  30 <script setup lang="ts">
  31 import { getCurrentInstance, reactive } from 'vue'
  32 import Button from '@/components/buttons/Button.vue'
  33
  34 const props = defineProps<{
  35   hashId: string
  36   chargingStationId: string
  37   connectorId: string
  38 }>()
  39
  40 const state = reactive({
  41   idTag: ''
  42 })
  43
  44 const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
  45 </script>
  46
  47 <style>
  48 #idtag {
  49   text-align: center;
  50 }
  51 </style>