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

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