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