2 <h1 id="action">Add Charging Stations</h1>
4 <select v-model="state.template">
5 <option disabled value="">Please select a template</option>
7 v-for="template in app?.appContext.config.globalProperties.$templates"
9 Array.isArray(app?.appContext.config.globalProperties.$templates) &&
10 app.appContext.config.globalProperties.$templates.length > 0
16 <p>Number of stations:</p>
18 id="number-of-stations"
19 v-model="state.numberOfStations"
22 name="number-of-stations"
23 placeholder="number of stations"
25 <p>Template options overrides:</p>
26 <ul id="template-options">
31 v-model.trim="state.supervisionUrl"
33 name="supervision-url"
39 <input v-model="state.autoStart" type="checkbox" true-value="true" false-value="false" />
42 Persistent configuration:
44 v-model="state.persistentConfiguration"
51 OCPP strict compliance:
53 v-model="state.ocppStrictCompliance"
60 Performance statistics:
62 v-model="state.enableStatistics"
75 .addChargingStations(state.template, state.numberOfStations, {
76 supervisionUrls: state.supervisionUrl.length > 0 ? state.supervisionUrl : undefined,
77 autoStart: convertToBoolean(state.autoStart),
78 persistentConfiguration: convertToBoolean(state.persistentConfiguration),
79 ocppStrictCompliance: convertToBoolean(state.ocppStrictCompliance),
80 enableStatistics: convertToBoolean(state.enableStatistics)
83 $toast.success('Charging stations successfully added')
85 .catch((error: Error) => {
86 $toast.error('Error at adding charging stations')
87 console.error('Error at adding charging stations:', error)
90 $router.push({ name: 'charging-stations' })
99 <script setup lang="ts">
100 import { getCurrentInstance, ref } from 'vue'
101 import { useToast } from 'vue-toast-notification'
102 import Button from '@/components/buttons/Button.vue'
103 import { convertToBoolean } from '@/composables'
107 numberOfStations: number
108 supervisionUrl: string
110 persistentConfiguration: boolean
111 ocppStrictCompliance: boolean
112 enableStatistics: boolean
118 persistentConfiguration: true,
119 ocppStrictCompliance: true,
120 enableStatistics: false
123 const app = getCurrentInstance()
124 const uiClient = app?.appContext.config.globalProperties.$uiClient
126 const $toast = useToast()
130 #number-of-stations {
141 list-style: circle inside;