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

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