2 <h1 id="action">Add Charging Stations</h1>
4 <select :key="state.renderTemplates" v-model="state.template">
5 <option disabled value="">Please select a template</option>
7 v-for="template in $templates.value"
8 v-show="Array.isArray($templates.value) && $templates.value.length > 0"
14 <p>Number of stations:</p>
16 id="number-of-stations"
17 v-model="state.numberOfStations"
20 name="number-of-stations"
21 placeholder="number of stations"
23 <p>Template options overrides:</p>
24 <ul id="template-options">
29 v-model.trim="state.supervisionUrl"
31 name="supervision-url"
37 <input v-model="state.autoStart" type="checkbox" true-value="true" false-value="false" />
40 Persistent configuration:
42 v-model="state.persistentConfiguration"
49 OCPP strict compliance:
51 v-model="state.ocppStrictCompliance"
58 Performance statistics:
60 v-model="state.enableStatistics"
73 .addChargingStations(state.template, state.numberOfStations, {
74 supervisionUrls: state.supervisionUrl.length > 0 ? state.supervisionUrl : undefined,
75 autoStart: convertToBoolean(state.autoStart),
76 persistentConfiguration: convertToBoolean(state.persistentConfiguration),
77 ocppStrictCompliance: convertToBoolean(state.ocppStrictCompliance),
78 enableStatistics: convertToBoolean(state.enableStatistics)
81 $toast.success('Charging stations successfully added')
83 .catch((error: Error) => {
84 $toast.error('Error at adding charging stations')
85 console.error('Error at adding charging stations:', error)
88 $router.push({ name: 'charging-stations' })
97 <script setup lang="ts">
98 import { getCurrentInstance, ref, watch } from 'vue'
100 import Button from '@/components/buttons/Button.vue'
101 import { convertToBoolean, randomUUID } from '@/composables'
104 renderTemplates: `${string}-${string}-${string}-${string}-${string}`
106 numberOfStations: number
107 supervisionUrl: string
109 persistentConfiguration: boolean
110 ocppStrictCompliance: boolean
111 enableStatistics: boolean
113 renderTemplates: randomUUID(),
118 persistentConfiguration: true,
119 ocppStrictCompliance: true,
120 enableStatistics: false
123 watch(getCurrentInstance()!.appContext.config.globalProperties.$templates, () => {
124 state.value.renderTemplates = randomUUID()
129 #number-of-stations {
140 list-style: circle inside;