From 916fe4560be0062eeb6979d88988584c286ccc50 Mon Sep 17 00:00:00 2001 From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= Date: Wed, 28 Feb 2024 23:38:20 +0100 Subject: [PATCH] fix(ui): ensure app is initialized independently of the WS status MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Signed-off-by: Jérôme Benoit --- ui/web/src/composables/UIClient.ts | 11 +-- ui/web/src/main.ts | 28 +------- ui/web/src/views/ChargingStationsView.vue | 81 ++++++++++++++--------- 3 files changed, 61 insertions(+), 59 deletions(-) diff --git a/ui/web/src/composables/UIClient.ts b/ui/web/src/composables/UIClient.ts index bd0208ad..d7a5eb3d 100644 --- a/ui/web/src/composables/UIClient.ts +++ b/ui/web/src/composables/UIClient.ts @@ -20,7 +20,7 @@ type ResponseHandler = { export class UIClient { private static instance: UIClient | null = null - private ws!: WebSocket + private ws?: WebSocket private responseHandlers: Map private constructor(private uiServerConfiguration: UIServerConfigurationSection) { @@ -36,7 +36,10 @@ export class UIClient { } public setConfiguration(uiServerConfiguration: UIServerConfigurationSection): void { - this.ws.close() + if (this.ws?.readyState === WebSocket.OPEN) { + this.ws.close() + delete this.ws + } this.uiServerConfiguration = uiServerConfiguration this.openWS() } @@ -46,7 +49,7 @@ export class UIClient { listener: (event: WebSocketEventMap[K]) => void, options?: boolean | AddEventListenerOptions ) { - this.ws.addEventListener(event, listener, options) + this.ws?.addEventListener(event, listener, options) } public async startSimulator(): Promise { @@ -186,7 +189,7 @@ export class UIClient { payload: RequestPayload ): Promise { return new Promise((resolve, reject) => { - if (this.ws.readyState === WebSocket.OPEN) { + if (this.ws?.readyState === WebSocket.OPEN) { const uuid = crypto.randomUUID() const msg = JSON.stringify([uuid, procedureName, payload]) const sendTimeout = setTimeout(() => { diff --git a/ui/web/src/main.ts b/ui/web/src/main.ts index 0e799684..8c16f4a7 100644 --- a/ui/web/src/main.ts +++ b/ui/web/src/main.ts @@ -1,6 +1,6 @@ import { type App as AppType, createApp } from 'vue' import ToastPlugin from 'vue-toast-notification' -import type { ConfigurationData, ResponsePayload } from '@/types' +import type { ConfigurationData } from '@/types' import { router } from '@/router' import { UIClient, getFromLocalStorage, setToLocalStorage } from '@/composables' import App from '@/App.vue' @@ -37,25 +37,8 @@ const initializeApp = (app: AppType, config: ConfigurationData) => { getFromLocalStorage('uiServerConfigurationIndex', 0) ] ) - app.config.globalProperties.$uiClient.registerWSEventListener( - 'open', - () => { - app.config.globalProperties.$uiClient - .listChargingStations() - .then((response: ResponsePayload) => { - app.config.globalProperties.$chargingStations = response.chargingStations - }) - .catch((error: Error) => { - // TODO: add code for UI notifications or other error handling logic - console.error('Error at fetching charging stations:', error) - }) - .finally(() => { - app.use(router).use(ToastPlugin).mount('#app') - }) - }, - { once: true } - ) } + app.use(router).use(ToastPlugin).mount('#app') } fetch('/config.json') @@ -68,12 +51,7 @@ fetch('/config.json') response .json() .then(config => { - try { - initializeApp(app, config) - } catch (error) { - // TODO: add code for UI notifications or other error handling logic - console.error('Error at initializing app:', error) - } + initializeApp(app, config) }) .catch(error => { // TODO: add code for UI notifications or other error handling logic diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue index abea2075..03f73d63 100644 --- a/ui/web/src/views/ChargingStationsView.vue +++ b/ui/web/src/views/ChargingStationsView.vue @@ -9,34 +9,33 @@ v-model="state.uiServerIndex" @change=" () => { - try { - if ( - getFromLocalStorage('uiServerConfigurationIndex', 0) !== state.uiServerIndex - ) { - setToLocalStorage('uiServerConfigurationIndex', state.uiServerIndex) - app?.appContext.config.globalProperties.$uiClient.registerWSEventListener( - 'close', - () => { - app!.appContext.config.globalProperties.$chargingStations = [] - }, - { once: true } - ) - app?.appContext.config.globalProperties.$uiClient.setConfiguration( - app?.appContext.config.globalProperties.$configuration.uiServer[ - getFromLocalStorage('uiServerConfigurationIndex', state.uiServerIndex) - ] - ) - app?.appContext.config.globalProperties.$uiClient.registerWSEventListener( - 'open', - () => { - loadChargingStations(() => (state.renderChargingStationsList = randomUUID())) - }, - { once: true } - ) - } - } catch (error) { - $toast.error('Error at changing UI server configuration') - console.error('Error at changing UI server configuration:', error) + if ( + getFromLocalStorage('uiServerConfigurationIndex', 0) !== state.uiServerIndex + ) { + app?.appContext.config.globalProperties.$uiClient.setConfiguration( + app?.appContext.config.globalProperties.$configuration.uiServer[state.uiServerIndex] + ) + initializeWSEventListeners() + app?.appContext.config.globalProperties.$uiClient.registerWSEventListener( + 'open', + () => { + setToLocalStorage('uiServerConfigurationIndex', state.uiServerIndex) + }, + { once: true } + ) + app?.appContext.config.globalProperties.$uiClient.registerWSEventListener( + 'error', + () => { + state.uiServerIndex = getFromLocalStorage('uiServerConfigurationIndex', 0) + app?.appContext.config.globalProperties.$uiClient.setConfiguration( + app?.appContext.config.globalProperties.$configuration.uiServer[ + getFromLocalStorage('uiServerConfigurationIndex', 0) + ] + ) + initializeWSEventListeners() + }, + { once: true } + ) } } " @@ -73,7 +72,7 @@