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