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