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