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