<template>
- <h2>Action Add Charging Stations</h2>
+ <h1 id="action">Add Charging Stations</h1>
<p>Template:</p>
- <select v-if="state.ready" v-model="state.template">
- <option v-for="template in app?.appContext.config.globalProperties.$templates">
+ <select v-model="state.template">
+ <option disabled value="">Please select a template</option>
+ <option
+ v-for="template in $templates.value"
+ v-show="Array.isArray($templates.value) && $templates.value.length > 0"
+ >
{{ template }}
</option>
</select>
<input
id="number-of-stations"
v-model="state.numberOfStations"
- type="text"
+ type="number"
+ min="1"
name="number-of-stations"
placeholder="number of stations"
/>
+ <p>Template options overrides:</p>
+ <ul id="template-options">
+ <li>
+ Supervision url:
+ <input
+ id="supervision-url"
+ v-model.trim="state.supervisionUrl"
+ type="url"
+ name="supervision-url"
+ placeholder="wss://"
+ />
+ </li>
+ <li>
+ Auto start:
+ <input v-model="state.autoStart" type="checkbox" true-value="true" false-value="false" />
+ </li>
+ <li>
+ Persistent configuration:
+ <input
+ v-model="state.persistentConfiguration"
+ type="checkbox"
+ true-value="true"
+ false-value="false"
+ />
+ </li>
+ <li>
+ OCPP strict compliance:
+ <input
+ v-model="state.ocppStrictCompliance"
+ type="checkbox"
+ true-value="true"
+ false-value="false"
+ />
+ </li>
+ <li>
+ Performance statistics:
+ <input
+ v-model="state.enableStatistics"
+ type="checkbox"
+ true-value="true"
+ false-value="false"
+ />
+ </li>
+ </ul>
<br />
<Button
+ id="action-button"
@click="
() => {
- uiClient
- .addChargingStations(state.template, state.numberOfStations)
+ $uiClient
+ .addChargingStations(state.template, state.numberOfStations, {
+ supervisionUrls: state.supervisionUrl.length > 0 ? state.supervisionUrl : undefined,
+ autoStart: convertToBoolean(state.autoStart),
+ persistentConfiguration: convertToBoolean(state.persistentConfiguration),
+ ocppStrictCompliance: convertToBoolean(state.ocppStrictCompliance),
+ enableStatistics: convertToBoolean(state.enableStatistics)
+ })
+ .then(() => {
+ $toast.success('Charging stations successfully added')
+ })
.catch((error: Error) => {
- // TODO: add code for UI notifications or other error handling logic
+ $toast.error('Error at adding charging stations')
console.error('Error at adding charging stations:', error)
})
.finally(() => {
})
}
"
- >Add Charging Stations</Button
>
- <Button @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
+ Add Charging Stations
+ </Button>
</template>
<script setup lang="ts">
-import { getCurrentInstance, onMounted, reactive } from 'vue'
+import { ref } from 'vue'
import Button from '@/components/buttons/Button.vue'
-import type { ResponsePayload } from '@/types'
+import { convertToBoolean } from '@/composables'
-const state = reactive({
- ready: false,
+const state = ref<{
+ template: string
+ numberOfStations: number
+ supervisionUrl: string
+ autoStart: boolean
+ persistentConfiguration: boolean
+ ocppStrictCompliance: boolean
+ enableStatistics: boolean
+}>({
template: '',
- numberOfStations: 1
-})
-
-const app = getCurrentInstance()
-const uiClient = app?.appContext.config.globalProperties.$uiClient
-
-onMounted(() => {
- uiClient
- .listTemplates()
- .then((response: ResponsePayload) => {
- if (app != null && app.appContext.config.globalProperties.$templates == null) {
- app.appContext.config.globalProperties.$templates = response.templates
- }
- })
- .catch((error: Error) => {
- // TODO: add code for UI notifications or other error handling logic
- console.error('Error at fetching charging station templates:', error)
- })
- .finally(() => {
- state.ready = true
- })
+ numberOfStations: 1,
+ supervisionUrl: '',
+ autoStart: false,
+ persistentConfiguration: true,
+ ocppStrictCompliance: true,
+ enableStatistics: false
})
</script>
<style>
#number-of-stations {
+ width: 15%;
text-align: center;
}
+
+#supervision-url {
+ width: 90%;
+ text-align: left;
+}
+
+#template-options {
+ list-style: circle inside;
+ text-align: left;
+}
</style>