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

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