ui/web/src/main.ts

   1 import { createApp } from 'vue'
   2 import ToastPlugin from 'vue-toast-notification'
   3 import type { ConfigurationData, ResponsePayload } from './types'
   4 import { router } from '@/router'
   5 import { UIClient } from '@/composables'
   6 import App from '@/App.vue'
   7 import 'vue-toast-notification/dist/theme-bootstrap.css'
   8
   9 const initializeApp = (config: ConfigurationData) => {
  10   const app = createApp(App)
  11   app.config.errorHandler = (error, instance, info) => {
  12     console.error('Error:', error)
  13     console.info('Vue instance:', instance)
  14     console.info('Error info:', info)
  15     // TODO: add code for UI notifications or other error handling logic
  16   }
  17   if (Array.isArray(config.uiServer)) {
  18     throw new Error('Multiple UI server configurations is not yet supported')
  19   }
  20   app.config.globalProperties.$uiClient = UIClient.getInstance(0, config.uiServer)
  21   app.config.globalProperties.$uiClient.registerWSEventListener('open', () => {
  22     app.config.globalProperties.$uiClient
  23       .listChargingStations()
  24       .then((response: ResponsePayload) => {
  25         app.config.globalProperties.$chargingStations = response.chargingStations
  26       })
  27       .catch((error: Error) => {
  28         // TODO: add code for UI notifications or other error handling logic
  29         console.error('Error at fetching charging stations:', error)
  30         throw error
  31       })
  32       .finally(() => {
  33         app.use(router).use(ToastPlugin).mount('#app')
  34       })
  35   })
  36 }
  37
  38 fetch('/config.json')
  39   .then(response => response.json())
  40   .catch(error => {
  41     console.error('Error at fetching app configuration:', error)
  42     throw error
  43   })
  44   .then(config => {
  45     initializeApp(config)
  46   })
  47   .catch(error => {
  48     console.error('Error at initializing app:', error)
  49     throw error
  50   })