From 57c0ba059e47d46ad545d9783920b53ee56c7184 Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Sat, 17 Feb 2024 18:38:35 +0100
Subject: [PATCH] refactor(ui): move the charging stations data array to vue.js
 global 	      properties
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>
---
 .../charging-stations/CSConnector.vue         | 10 ++--
 .../components/charging-stations/CSData.vue   | 12 ++---
 ui/web/src/main.ts                            | 21 ++++++--
 ui/web/src/views/ChargingStationsView.vue     | 53 ++++++++++---------
 4 files changed, 57 insertions(+), 39 deletions(-)

diff --git a/ui/web/src/components/charging-stations/CSConnector.vue b/ui/web/src/components/charging-stations/CSConnector.vue
index a2e94b99..81d24fac 100644
--- a/ui/web/src/components/charging-stations/CSConnector.vue
+++ b/ui/web/src/components/charging-stations/CSConnector.vue
@@ -31,18 +31,18 @@ const props = defineProps<{
   idTag?: string
 }>()
 
-const UIClient = getCurrentInstance()?.appContext.config.globalProperties.$UIClient
+const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
 
 function startTransaction(): void {
-  UIClient.startTransaction(props.hashId, props.connectorId, props.idTag)
+  uiClient.startTransaction(props.hashId, props.connectorId, props.idTag)
 }
 function stopTransaction(): void {
-  UIClient.stopTransaction(props.hashId, props.transactionId)
+  uiClient.stopTransaction(props.hashId, props.transactionId)
 }
 function startAutomaticTransactionGenerator(): void {
-  UIClient.startAutomaticTransactionGenerator(props.hashId, props.connectorId)
+  uiClient.startAutomaticTransactionGenerator(props.hashId, props.connectorId)
 }
 function stopAutomaticTransactionGenerator(): void {
-  UIClient.stopAutomaticTransactionGenerator(props.hashId, props.connectorId)
+  uiClient.stopAutomaticTransactionGenerator(props.hashId, props.connectorId)
 }
 </script>
diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index 5d31cb1e..5eaa17b0 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -102,22 +102,22 @@ function getWsState(): string {
   }
 }
 
-const UIClient = getCurrentInstance()?.appContext.config.globalProperties.$UIClient
+const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
 
 function startChargingStation(): void {
-  UIClient.startChargingStation(props.chargingStation.stationInfo.hashId)
+  uiClient.startChargingStation(props.chargingStation.stationInfo.hashId)
 }
 function stopChargingStation(): void {
-  UIClient.stopChargingStation(props.chargingStation.stationInfo.hashId)
+  uiClient.stopChargingStation(props.chargingStation.stationInfo.hashId)
 }
 function openConnection(): void {
-  UIClient.openConnection(props.chargingStation.stationInfo.hashId)
+  uiClient.openConnection(props.chargingStation.stationInfo.hashId)
 }
 function closeConnection(): void {
-  UIClient.closeConnection(props.chargingStation.stationInfo.hashId)
+  uiClient.closeConnection(props.chargingStation.stationInfo.hashId)
 }
 function deleteChargingStation(): void {
-  UIClient.deleteChargingStation(props.chargingStation.stationInfo.hashId)
+  uiClient.deleteChargingStation(props.chargingStation.stationInfo.hashId)
 }
 </script>
 
diff --git a/ui/web/src/main.ts b/ui/web/src/main.ts
index 6cbc4b60..27405eb6 100644
--- a/ui/web/src/main.ts
+++ b/ui/web/src/main.ts
@@ -1,10 +1,10 @@
 import { createApp } from 'vue'
-import type { ConfigurationData } from './types'
+import type { ConfigurationData, ResponsePayload } from './types'
 import { router } from '@/router'
 import { UIClient } from '@/composables'
 import App from '@/App.vue'
 
-const initializeApp = async (config: ConfigurationData) => {
+const initializeApp = (config: ConfigurationData) => {
   const app = createApp(App)
   app.config.errorHandler = (error, instance, info) => {
     console.error('Error:', error)
@@ -12,8 +12,21 @@ const initializeApp = async (config: ConfigurationData) => {
     console.info('Error info:', info)
     // TODO: Add code for UI notifications or other error handling logic
   }
-  app.config.globalProperties.$UIClient = UIClient.getInstance(config)
-  app.use(router).mount('#app')
+  app.config.globalProperties.$uiClient = UIClient.getInstance(config)
+  app.config.globalProperties.$uiClient.registerWSonOpenListener(async () => {
+    app.config.globalProperties.$uiClient
+      .listChargingStations()
+      .then((response: ResponsePayload) => {
+        app.config.globalProperties.$chargingStations = response.chargingStations
+      })
+      .catch((error: Error) => {
+        console.error('Error at fetching charging stations:', error)
+        throw error
+      })
+      .finally(() => {
+        app.use(router).mount('#app')
+      })
+  })
 }
 
 fetch('/config.json')
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 328e95a8..db374401 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -3,7 +3,7 @@
     <Container id="buttons-container">
       <Button id="simulator-button" @click="startSimulator()">Start Simulator</Button>
       <Button id="simulator-button" @click="stopSimulator()">Stop Simulator</Button>
-      <ReloadButton id="reload-button" :loading="state.isLoading" @click="load()" />
+      <ReloadButton id="reload-button" :loading="state.isLoading" @click="loadChargingStations()" />
     </Container>
     <Container id="inputs-container">
       <input
@@ -14,50 +14,55 @@
         placeholder="RFID tag"
       />
     </Container>
-    <CSTable :charging-stations="state.chargingStations" :id-tag="state.idTag" />
+    <CSTable
+      :charging-stations="
+        getCurrentInstance()?.appContext.config.globalProperties.$chargingStations
+      "
+      :id-tag="state.idTag"
+    />
   </Container>
 </template>
 
 <script setup lang="ts">
-import { getCurrentInstance, onMounted, reactive } from 'vue'
+import { getCurrentInstance, reactive } from 'vue'
 import CSTable from '@/components/charging-stations/CSTable.vue'
-import type { ChargingStationData } from '@/types'
+import type { ResponsePayload } from '@/types'
 import Container from '@/components/Container.vue'
 import ReloadButton from '@/components/buttons/ReloadButton.vue'
 import Button from '@/components/buttons/Button.vue'
 
-const UIClient = getCurrentInstance()?.appContext.config.globalProperties.$UIClient
-
-onMounted(() => {
-  UIClient.registerWSonOpenListener(load)
-})
-
-type State = {
-  isLoading: boolean
-  chargingStations: ChargingStationData[]
-  idTag: string
-}
-
-const state: State = reactive({
+const state = reactive({
   isLoading: false,
-  chargingStations: [],
   idTag: ''
 })
 
-async function load(): Promise<void> {
+const app = getCurrentInstance()
+const uiClient = app?.appContext.config.globalProperties.$uiClient
+
+function loadChargingStations(): void {
   if (state.isLoading === false) {
     state.isLoading = true
-    state.chargingStations = (await UIClient.listChargingStations())
-      .chargingStations as ChargingStationData[]
-    state.isLoading = false
+    uiClient
+      .listChargingStations()
+      .then((response: ResponsePayload) => {
+        if (app != null) {
+          app.appContext.config.globalProperties.$chargingStations = response.chargingStations
+        }
+      })
+      .catch((error: Error) => {
+        console.error('Error at fetching charging stations:', error)
+      })
+      .finally(() => {
+        state.isLoading = false
+      })
   }
 }
 
 function startSimulator(): void {
-  UIClient.startSimulator()
+  uiClient.startSimulator()
 }
 function stopSimulator(): void {
-  UIClient.stopSimulator()
+  uiClient.stopSimulator()
 }
 </script>
 
-- 
2.34.1