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