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