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