refactor(ui): refine action inputs
[e-mobility-charging-stations-simulator.git] / ui / web / src / components / actions / AddChargingStations.vue
1 <template>
2 <h2>Action Add Charging Stations</h2>
3 <p>Template:</p>
4 <select v-if="state.ready" v-model="state.template">
5 <option disabled value="">Please select a template</option>
6 <option v-for="template in app?.appContext.config.globalProperties.$templates">
7 {{ template }}
8 </option>
9 </select>
10 <p>Number of stations:</p>
11 <input
12 id="number-of-stations"
13 v-model="state.numberOfStations"
14 type="number"
15 min="1"
16 name="number-of-stations"
17 placeholder="number of stations"
18 />
19 <br />
20 <Button
21 @click="
22 () => {
23 uiClient
24 .addChargingStations(state.template, state.numberOfStations)
25 .then(() => {
26 $toast.success('Charging stations successfully added')
27 })
28 .catch((error: Error) => {
29 $toast.error('Error at adding charging stations')
30 console.error('Error at adding charging stations:', error)
31 })
32 .finally(() => {
33 $router.push({ name: 'charging-stations' })
34 })
35 }
36 "
37 >Add Charging Stations</Button
38 >
39 <Button @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
40 </template>
41
42 <script setup lang="ts">
43 import { getCurrentInstance, onMounted, reactive } from 'vue'
44 import { useToast } from 'vue-toast-notification'
45 import Button from '@/components/buttons/Button.vue'
46 import type { ResponsePayload } from '@/types'
47
48 const state = reactive({
49 ready: false,
50 template: '',
51 numberOfStations: 1
52 })
53
54 const app = getCurrentInstance()
55 const uiClient = app?.appContext.config.globalProperties.$uiClient
56
57 const $toast = useToast()
58
59 onMounted(() => {
60 uiClient
61 .listTemplates()
62 .then((response: ResponsePayload) => {
63 if (app != null && app.appContext.config.globalProperties.$templates == null) {
64 app.appContext.config.globalProperties.$templates = response.templates
65 }
66 })
67 .catch((error: Error) => {
68 $toast.error('Error at fetching charging station templates')
69 console.error('Error at fetching charging station templates:', error)
70 })
71 .finally(() => {
72 state.ready = true
73 })
74 })
75 </script>
76
77 <style>
78 #number-of-stations {
79 width: 15%;
80 text-align: center;
81 }
82 </style>