<template>
- <h2>Action Start Transaction</h2>
- <h3>Connector {{ connectorId }} on {{ chargingStationId }}</h3>
+ <h1 id="action">Start Transaction</h1>
+ <h2>{{ chargingStationId }}</h2>
+ <h3>Connector {{ connectorId }}</h3>
<p>Scan RFID tag:</p>
- <input id="idtag" v-model="state.idTag" type="text" name="idtag" placeholder="RFID tag" />
+ <input id="idtag" v-model.trim="state.idTag" type="text" name="idtag" placeholder="RFID tag" />
<br />
<Button
+ id="action-button"
@click="
() => {
- uiClient
- .startTransaction(props.hashId, parseInt(props.connectorId), state.idTag)
+ $uiClient
+ .startTransaction(hashId, convertToInt(connectorId), state.idTag)
.then(() => {
$toast.success('Transaction successfully started')
})
})
}
"
- >Start Transaction</Button
>
- <Button @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
+ Start Transaction
+ </Button>
</template>
<script setup lang="ts">
-import { getCurrentInstance, reactive } from 'vue'
+import { ref } from 'vue'
import Button from '@/components/buttons/Button.vue'
+import { convertToInt } from '@/composables'
-const props = defineProps<{
+defineProps<{
hashId: string
chargingStationId: string
connectorId: string
}>()
-const state = reactive({
+const state = ref<{ idTag: string }>({
idTag: ''
})
-
-const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
</script>
<style>