<template>
- <h2>Action Add Charging Stations</h2>
+ <h1 id="action">Action</h1>
+ <h2>Add Charging Stations</h2>
<p>Template:</p>
<select v-if="state.ready" v-model="state.template">
+ <option disabled value="">Please select a template</option>
<option v-for="template in app?.appContext.config.globalProperties.$templates">
{{ template }}
</option>
<input
id="number-of-stations"
v-model="state.numberOfStations"
- type="text"
- name="number-of-station"
+ type="number"
+ min="1"
+ name="number-of-stations"
placeholder="number of stations"
/>
<br />
<Button
+ id="action-button"
@click="
() => {
uiClient
.addChargingStations(state.template, state.numberOfStations)
+ .then(() => {
+ $toast.success('Charging stations successfully added')
+ })
.catch((error: Error) => {
- // TODO: add code for UI notifications or other error handling logic
+ $toast.error('Error at adding charging stations')
console.error('Error at adding charging stations:', error)
})
.finally(() => {
})
}
"
- >Add Charging Stations</Button
>
- <Button @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
+ Add Charging Stations
+ </Button>
+ <Button id="action-button" @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
</template>
<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive } from 'vue'
+import { useToast } from 'vue-toast-notification'
import Button from '@/components/buttons/Button.vue'
+import type { ResponsePayload } from '@/types'
const state = reactive({
ready: false,
const app = getCurrentInstance()
const uiClient = app?.appContext.config.globalProperties.$uiClient
+const $toast = useToast()
+
onMounted(() => {
uiClient
.listTemplates()
}
})
.catch((error: Error) => {
- // TODO: add code for UI notifications or other error handling logic
+ $toast.error('Error at fetching charging station templates')
console.error('Error at fetching charging station templates:', error)
})
.finally(() => {
<style>
#number-of-stations {
+ width: 15%;
text-align: center;
}
</style>