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

   1 <template>
   2   <h2>Action Add Charging Stations</h2>
   3   <p>Template:</p>
   4   <select v-if="state.ready" v-model="state.template">
   5     <option disabled value="">Please select a template</option>
   6     <option v-for="template in app?.appContext.config.globalProperties.$templates">
   7       {{ template }}
   8     </option>
   9   </select>
  10   <p>Number of stations:</p>
  11   <input
  12     id="number-of-stations"
  13     v-model="state.numberOfStations"
  14     type="number"
  15     min="1"
  16     name="number-of-stations"
  17     placeholder="number of stations"
  18   />
  19   <br />
  20   <Button
  21     @click="
  22       () => {
  23         uiClient
  24           .addChargingStations(state.template, state.numberOfStations)
  25           .then(() => {
  26             $toast.success('Charging stations successfully added')
  27           })
  28           .catch((error: Error) => {
  29             $toast.error('Error at adding charging stations')
  30             console.error('Error at adding charging stations:', error)
  31           })
  32           .finally(() => {
  33             $router.push({ name: 'charging-stations' })
  34           })
  35       }
  36     "
  37   >
  38     Add Charging Stations
  39   </Button>
  40   <Button @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
  41 </template>
  42
  43 <script setup lang="ts">
  44 import { getCurrentInstance, onMounted, reactive } from 'vue'
  45 import { useToast } from 'vue-toast-notification'
  46 import Button from '@/components/buttons/Button.vue'
  47 import type { ResponsePayload } from '@/types'
  48
  49 const state = reactive({
  50   ready: false,
  51   template: '',
  52   numberOfStations: 1
  53 })
  54
  55 const app = getCurrentInstance()
  56 const uiClient = app?.appContext.config.globalProperties.$uiClient
  57
  58 const $toast = useToast()
  59
  60 onMounted(() => {
  61   uiClient
  62     .listTemplates()
  63     .then((response: ResponsePayload) => {
  64       if (app != null && app.appContext.config.globalProperties.$templates == null) {
  65         app.appContext.config.globalProperties.$templates = response.templates
  66       }
  67     })
  68     .catch((error: Error) => {
  69       $toast.error('Error at fetching charging station templates')
  70       console.error('Error at fetching charging station templates:', error)
  71     })
  72     .finally(() => {
  73       state.ready = true
  74     })
  75 })
  76 </script>
  77
  78 <style>
  79 #number-of-stations {
  80   width: 15%;
  81   text-align: center;
  82 }
  83 </style>