Commit | Line | Data |
---|---|---|
7086aac2 | 1 | <template> |
916f0920 | 2 | <h1 id="action">Add Charging Stations</h1> |
878855a2 | 3 | <p>Template:</p> |
f6cb1767 | 4 | <select :key="state.renderTemplates" v-model="state.template"> |
b221407f | 5 | <option disabled value="">Please select a template</option> |
2610da71 | 6 | <option |
7e315430 JB |
7 | v-for="template in $templates.value" |
8 | v-show="Array.isArray($templates.value) && $templates.value.length > 0" | |
84ec8d34 | 9 | :key="template" |
2610da71 | 10 | > |
878855a2 JB |
11 | {{ template }} |
12 | </option> | |
13 | </select> | |
14 | <p>Number of stations:</p> | |
15 | <input | |
16 | id="number-of-stations" | |
17 | v-model="state.numberOfStations" | |
d18fc1e3 JB |
18 | type="number" |
19 | min="1" | |
3a3ba0a2 | 20 | name="number-of-stations" |
878855a2 JB |
21 | placeholder="number of stations" |
22 | /> | |
2293fadc | 23 | <p>Template options overrides:</p> |
ef2b2d03 | 24 | <ul id="template-options"> |
2293fadc JB |
25 | <li> |
26 | Supervision url: | |
27 | <input | |
28 | id="supervision-url" | |
29 | v-model.trim="state.supervisionUrl" | |
30 | type="url" | |
31 | name="supervision-url" | |
32 | placeholder="wss://" | |
33 | /> | |
34 | </li> | |
093ca832 JB |
35 | <li> |
36 | Auto start: | |
37 | <input v-model="state.autoStart" type="checkbox" true-value="true" false-value="false" /> | |
38 | </li> | |
3d9f3741 JB |
39 | <li> |
40 | Persistent configuration: | |
41 | <input | |
42 | v-model="state.persistentConfiguration" | |
43 | type="checkbox" | |
44 | true-value="true" | |
45 | false-value="false" | |
46 | /> | |
47 | </li> | |
48 | <li> | |
49 | OCPP strict compliance: | |
50 | <input | |
51 | v-model="state.ocppStrictCompliance" | |
52 | type="checkbox" | |
53 | true-value="true" | |
54 | false-value="false" | |
55 | /> | |
56 | </li> | |
57 | <li> | |
58 | Performance statistics: | |
59 | <input | |
60 | v-model="state.enableStatistics" | |
61 | type="checkbox" | |
62 | true-value="true" | |
63 | false-value="false" | |
64 | /> | |
65 | </li> | |
093ca832 | 66 | </ul> |
878855a2 JB |
67 | <br /> |
68 | <Button | |
14ee627a | 69 | id="action-button" |
878855a2 JB |
70 | @click=" |
71 | () => { | |
7e315430 | 72 | $uiClient |
093ca832 | 73 | .addChargingStations(state.template, state.numberOfStations, { |
2293fadc | 74 | supervisionUrls: state.supervisionUrl.length > 0 ? state.supervisionUrl : undefined, |
3d9f3741 JB |
75 | autoStart: convertToBoolean(state.autoStart), |
76 | persistentConfiguration: convertToBoolean(state.persistentConfiguration), | |
77 | ocppStrictCompliance: convertToBoolean(state.ocppStrictCompliance), | |
78 | enableStatistics: convertToBoolean(state.enableStatistics) | |
093ca832 | 79 | }) |
cea23fa0 JB |
80 | .then(() => { |
81 | $toast.success('Charging stations successfully added') | |
82 | }) | |
878855a2 | 83 | .catch((error: Error) => { |
cea23fa0 | 84 | $toast.error('Error at adding charging stations') |
878855a2 JB |
85 | console.error('Error at adding charging stations:', error) |
86 | }) | |
87 | .finally(() => { | |
88 | $router.push({ name: 'charging-stations' }) | |
89 | }) | |
90 | } | |
91 | " | |
878855a2 | 92 | > |
1eb5f592 JB |
93 | Add Charging Stations |
94 | </Button> | |
7086aac2 JB |
95 | </template> |
96 | ||
97 | <script setup lang="ts"> | |
f6cb1767 | 98 | import { getCurrentInstance, ref, watch } from 'vue' |
84ec8d34 | 99 | |
878855a2 | 100 | import Button from '@/components/buttons/Button.vue' |
f6cb1767 | 101 | import { convertToBoolean, randomUUID } from '@/composables' |
878855a2 | 102 | |
cf959670 | 103 | const state = ref<{ |
f6cb1767 | 104 | renderTemplates: `${string}-${string}-${string}-${string}-${string}` |
cf959670 JB |
105 | template: string |
106 | numberOfStations: number | |
107 | supervisionUrl: string | |
108 | autoStart: boolean | |
109 | persistentConfiguration: boolean | |
110 | ocppStrictCompliance: boolean | |
111 | enableStatistics: boolean | |
112 | }>({ | |
f6cb1767 | 113 | renderTemplates: randomUUID(), |
878855a2 | 114 | template: '', |
093ca832 | 115 | numberOfStations: 1, |
2293fadc | 116 | supervisionUrl: '', |
3d9f3741 JB |
117 | autoStart: false, |
118 | persistentConfiguration: true, | |
119 | ocppStrictCompliance: true, | |
120 | enableStatistics: false | |
878855a2 | 121 | }) |
f6cb1767 | 122 | |
f4b3f35d | 123 | watch(getCurrentInstance()!.appContext.config.globalProperties.$templates, () => { |
f6cb1767 JB |
124 | state.value.renderTemplates = randomUUID() |
125 | }) | |
7086aac2 JB |
126 | </script> |
127 | ||
878855a2 JB |
128 | <style> |
129 | #number-of-stations { | |
d18fc1e3 | 130 | width: 15%; |
878855a2 JB |
131 | text-align: center; |
132 | } | |
427a4970 JB |
133 | |
134 | #supervision-url { | |
135 | width: 90%; | |
136 | text-align: left; | |
137 | } | |
ef2b2d03 JB |
138 | |
139 | #template-options { | |
140 | list-style: circle inside; | |
141 | text-align: left; | |
142 | } | |
878855a2 | 143 | </style> |