ui/web/src/components/actions/AddChargingStations.vue

   1 <template>
   2   <h1 id="action">Action</h1>
   3   <h2>Add Charging Stations</h2>
   4   <p>Template:</p>
   5   <select v-show="state.ready" v-model="state.template">
   6     <option disabled value="">Please select a template</option>
   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"
  15     type="number"
  16     min="1"
  17     name="number-of-stations"
  18     placeholder="number of stations"
  19   />
  20   <p>Template options overrides:</p>
  21   <ul>
  22     <li>
  23       Supervision url:
  24       <input
  25         id="supervision-url"
  26         v-model.trim="state.supervisionUrl"
  27         type="url"
  28         name="supervision-url"
  29         placeholder="wss://"
  30       />
  31     </li>
  32     <li>
  33       Auto start:
  34       <input v-model="state.autoStart" type="checkbox" true-value="true" false-value="false" />
  35     </li>
  36     <li>
  37       Persistent configuration:
  38       <input
  39         v-model="state.persistentConfiguration"
  40         type="checkbox"
  41         true-value="true"
  42         false-value="false"
  43       />
  44     </li>
  45     <li>
  46       OCPP strict compliance:
  47       <input
  48         v-model="state.ocppStrictCompliance"
  49         type="checkbox"
  50         true-value="true"
  51         false-value="false"
  52       />
  53     </li>
  54     <li>
  55       Performance statistics:
  56       <input
  57         v-model="state.enableStatistics"
  58         type="checkbox"
  59         true-value="true"
  60         false-value="false"
  61       />
  62     </li>
  63   </ul>
  64   <br />
  65   <Button
  66     id="action-button"
  67     @click="
  68       () => {
  69         uiClient
  70           .addChargingStations(state.template, state.numberOfStations, {
  71             supervisionUrls: state.supervisionUrl.length > 0 ? state.supervisionUrl : undefined,
  72             autoStart: convertToBoolean(state.autoStart),
  73             persistentConfiguration: convertToBoolean(state.persistentConfiguration),
  74             ocppStrictCompliance: convertToBoolean(state.ocppStrictCompliance),
  75             enableStatistics: convertToBoolean(state.enableStatistics)
  76           })
  77           .then(() => {
  78             $toast.success('Charging stations successfully added')
  79           })
  80           .catch((error: Error) => {
  81             $toast.error('Error at adding charging stations')
  82             console.error('Error at adding charging stations:', error)
  83           })
  84           .finally(() => {
  85             $router.push({ name: 'charging-stations' })
  86           })
  87       }
  88     "
  89   >
  90     Add Charging Stations
  91   </Button>
  92   <Button id="action-button" @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
  93 </template>
  94
  95 <script setup lang="ts">
  96 import { getCurrentInstance, onMounted, reactive } from 'vue'
  97 import { useToast } from 'vue-toast-notification'
  98 import Button from '@/components/buttons/Button.vue'
  99 import type { ResponsePayload } from '@/types'
 100 import { convertToBoolean } from '@/composables'
 101
 102 const state = reactive({
 103   ready: false,
 104   template: '',
 105   numberOfStations: 1,
 106   supervisionUrl: '',
 107   autoStart: false,
 108   persistentConfiguration: true,
 109   ocppStrictCompliance: true,
 110   enableStatistics: false
 111 })
 112
 113 const app = getCurrentInstance()
 114 const uiClient = app?.appContext.config.globalProperties.$uiClient
 115
 116 const $toast = useToast()
 117
 118 onMounted(() => {
 119   uiClient
 120     .listTemplates()
 121     .then((response: ResponsePayload) => {
 122       if (app != null && app.appContext.config.globalProperties.$templates == null) {
 123         app.appContext.config.globalProperties.$templates = response.templates
 124       }
 125     })
 126     .catch((error: Error) => {
 127       $toast.error('Error at fetching charging station templates')
 128       console.error('Error at fetching charging station templates:', error)
 129     })
 130     .finally(() => {
 131       state.ready = true
 132     })
 133 })
 134 </script>
 135
 136 <style>
 137 #number-of-stations {
 138   width: 15%;
 139   text-align: center;
 140 }
 141
 142 #supervision-url {
 143   width: 90%;
 144   text-align: left;
 145 }
 146 </style>