Commit | Line | Data |
---|---|---|
7086aac2 | 1 | <template> |
229d8c34 JB |
2 | <h1 id="action">Action</h1> |
3 | <h2>Add Charging Stations</h2> | |
878855a2 | 4 | <p>Template:</p> |
7378b34a | 5 | <select v-show="state.ready" v-model="state.template"> |
b221407f | 6 | <option disabled value="">Please select a template</option> |
878855a2 JB |
7 | <option v-for="template in app?.appContext.config.globalProperties.$templates"> |
8 | {{ template }} | |
9 | </option> | |
10 | </select> | |
11 | <p>Number of stations:</p> | |
12 | <input | |
13 | id="number-of-stations" | |
14 | v-model="state.numberOfStations" | |
d18fc1e3 JB |
15 | type="number" |
16 | min="1" | |
3a3ba0a2 | 17 | name="number-of-stations" |
878855a2 JB |
18 | placeholder="number of stations" |
19 | /> | |
093ca832 JB |
20 | <p>Options:</p> |
21 | <ul> | |
22 | <li> | |
23 | Auto start: | |
24 | <input v-model="state.autoStart" type="checkbox" true-value="true" false-value="false" /> | |
25 | </li> | |
3d9f3741 JB |
26 | <li> |
27 | Persistent configuration: | |
28 | <input | |
29 | v-model="state.persistentConfiguration" | |
30 | type="checkbox" | |
31 | true-value="true" | |
32 | false-value="false" | |
33 | /> | |
34 | </li> | |
35 | <li> | |
36 | OCPP strict compliance: | |
37 | <input | |
38 | v-model="state.ocppStrictCompliance" | |
39 | type="checkbox" | |
40 | true-value="true" | |
41 | false-value="false" | |
42 | /> | |
43 | </li> | |
44 | <li> | |
45 | Performance statistics: | |
46 | <input | |
47 | v-model="state.enableStatistics" | |
48 | type="checkbox" | |
49 | true-value="true" | |
50 | false-value="false" | |
51 | /> | |
52 | </li> | |
093ca832 | 53 | </ul> |
878855a2 JB |
54 | <br /> |
55 | <Button | |
14ee627a | 56 | id="action-button" |
878855a2 JB |
57 | @click=" |
58 | () => { | |
59 | uiClient | |
093ca832 | 60 | .addChargingStations(state.template, state.numberOfStations, { |
3d9f3741 JB |
61 | autoStart: convertToBoolean(state.autoStart), |
62 | persistentConfiguration: convertToBoolean(state.persistentConfiguration), | |
63 | ocppStrictCompliance: convertToBoolean(state.ocppStrictCompliance), | |
64 | enableStatistics: convertToBoolean(state.enableStatistics) | |
093ca832 | 65 | }) |
cea23fa0 JB |
66 | .then(() => { |
67 | $toast.success('Charging stations successfully added') | |
68 | }) | |
878855a2 | 69 | .catch((error: Error) => { |
cea23fa0 | 70 | $toast.error('Error at adding charging stations') |
878855a2 JB |
71 | console.error('Error at adding charging stations:', error) |
72 | }) | |
73 | .finally(() => { | |
74 | $router.push({ name: 'charging-stations' }) | |
75 | }) | |
76 | } | |
77 | " | |
878855a2 | 78 | > |
1eb5f592 JB |
79 | Add Charging Stations |
80 | </Button> | |
14ee627a | 81 | <Button id="action-button" @click="$router.push({ name: 'charging-stations' })">Cancel</Button> |
7086aac2 JB |
82 | </template> |
83 | ||
84 | <script setup lang="ts"> | |
878855a2 | 85 | import { getCurrentInstance, onMounted, reactive } from 'vue' |
cea23fa0 | 86 | import { useToast } from 'vue-toast-notification' |
878855a2 | 87 | import Button from '@/components/buttons/Button.vue' |
3a3ba0a2 | 88 | import type { ResponsePayload } from '@/types' |
093ca832 | 89 | import { convertToBoolean } from '@/composables' |
878855a2 JB |
90 | |
91 | const state = reactive({ | |
92 | ready: false, | |
93 | template: '', | |
093ca832 | 94 | numberOfStations: 1, |
3d9f3741 JB |
95 | autoStart: false, |
96 | persistentConfiguration: true, | |
97 | ocppStrictCompliance: true, | |
98 | enableStatistics: false | |
878855a2 | 99 | }) |
7086aac2 JB |
100 | |
101 | const app = getCurrentInstance() | |
102 | const uiClient = app?.appContext.config.globalProperties.$uiClient | |
103 | ||
cea23fa0 JB |
104 | const $toast = useToast() |
105 | ||
7086aac2 | 106 | onMounted(() => { |
b9d447d2 JB |
107 | uiClient |
108 | .listTemplates() | |
109 | .then((response: ResponsePayload) => { | |
110 | if (app != null && app.appContext.config.globalProperties.$templates == null) { | |
111 | app.appContext.config.globalProperties.$templates = response.templates | |
112 | } | |
113 | }) | |
114 | .catch((error: Error) => { | |
cea23fa0 | 115 | $toast.error('Error at fetching charging station templates') |
b9d447d2 JB |
116 | console.error('Error at fetching charging station templates:', error) |
117 | }) | |
878855a2 JB |
118 | .finally(() => { |
119 | state.ready = true | |
120 | }) | |
7086aac2 JB |
121 | }) |
122 | </script> | |
123 | ||
878855a2 JB |
124 | <style> |
125 | #number-of-stations { | |
d18fc1e3 | 126 | width: 15%; |
878855a2 JB |
127 | text-align: center; |
128 | } | |
129 | </style> |