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