feat(ui): add charging station options to add action
[e-mobility-charging-stations-simulator.git] / ui / web / src / components / actions / StartTransaction.vue
CommitLineData
c317ae3e 1<template>
229d8c34
JB
2 <h1 id="action">Action</h1>
3 <h2>Start Transaction</h2>
c317ae3e
JB
4 <h3>Connector {{ connectorId }} on {{ chargingStationId }}</h3>
5 <p>Scan RFID tag:</p>
d18fc1e3 6 <input id="idtag" v-model.trim="state.idTag" type="text" name="idtag" placeholder="RFID tag" />
c317ae3e
JB
7 <br />
8 <Button
14ee627a 9 id="action-button"
c317ae3e
JB
10 @click="
11 () => {
12 uiClient
093ca832 13 .startTransaction(props.hashId, convertToInt(props.connectorId), state.idTag)
cea23fa0
JB
14 .then(() => {
15 $toast.success('Transaction successfully started')
16 })
c317ae3e 17 .catch((error: Error) => {
cea23fa0 18 $toast.error('Error at starting transaction')
c317ae3e
JB
19 console.error('Error at starting transaction:', error)
20 })
21 .finally(() => {
22 $router.push({ name: 'charging-stations' })
23 })
24 }
25 "
c317ae3e 26 >
1eb5f592
JB
27 Start Transaction
28 </Button>
14ee627a 29 <Button id="action-button" @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
c317ae3e
JB
30</template>
31
32<script setup lang="ts">
a1cfaa16 33import { getCurrentInstance, reactive } from 'vue'
c317ae3e 34import Button from '@/components/buttons/Button.vue'
093ca832 35import { convertToInt } from '@/composables'
c317ae3e
JB
36
37const props = defineProps<{
38 hashId: string
39 chargingStationId: string
40 connectorId: string
41}>()
42
43const state = reactive({
44 idTag: ''
45})
46
47const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
48</script>
49
50<style>
51#idtag {
52 text-align: center;
53}
54</style>