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="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           .catch((error: Error) => {
  13             // TODO: add code for UI notifications or other error handling logic
  14             console.error('Error at starting transaction:', error)
  15           })
  16           .finally(() => {
  17             $router.push({ name: 'charging-stations' })
  18           })
  19       }
  20     "
  21     >Start Transaction</Button
  22   >
  23 </template>
  24
  25 <script setup lang="ts">
  26 import { getCurrentInstance, reactive } from 'vue'
  27 import Button from '@/components/buttons/Button.vue'
  28
  29 const props = defineProps<{
  30   hashId: string
  31   chargingStationId: string
  32   connectorId: string
  33 }>()
  34
  35 const state = reactive({
  36   idTag: ''
  37 })
  38
  39 const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
  40 </script>
  41
  42 <style>
  43 #idtag {
  44   text-align: center;
  45 }
  46 </style>