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