refactor(ui): cleanup vue.js app initialization code and logic

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>

diff --git a/ui/web/src/App.vue b/ui/web/src/App.vue
index 203fb47f69108690234b283569919e663f491012..b3fc6d1c4c313122a54143f3d42f3d08ecbd842b 100644 (file)
--- a/ui/web/src/App.vue
+++ b/ui/web/src/App.vue
@@ -16,7 +16,7 @@
 body {
   height: fit-content;
   width: fit-content;
-  margin: 0.001%;
-  padding: 0.001%;
+  margin: 0.005%;
+  padding: 0.005%;
 }
 </style>

diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index c0f07792da49311d81d8d40e283d8ca7ad208ad6..b11ad0fe7adc7316f5f47449d3cacef4246a6637 100644 (file)
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -22,6 +22,7 @@
       <Button @click="stopChargingStation()">Stop Charging Station</Button>
       <Button @click="openConnection()">Open Connection</Button>
       <Button @click="closeConnection()">Close Connection</Button>
+      <Button @click="deleteChargingStation()">Delete Charging Station</Button>
     </td>
     <td class="cs-table__connectors-column">
       <table id="connectors-table">
@@ -147,6 +148,9 @@ function openConnection(): void {
 function closeConnection(): void {
   UIClient.closeConnection(getHashId())
 }
+function deleteChargingStation(): void {
+  UIClient.deleteChargingStation(getHashId())
+}
 // function showTagModal(): void {
 //   state.isTagModalVisible = true
 // }
@@ -172,7 +176,6 @@ function closeConnection(): void {
 }
 
 .connectors-table__row {
-  min-height: 4rem;
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/ui/web/src/composables/UIClient.ts b/ui/web/src/composables/UIClient.ts
index 4e7fb24970c86be3f25bd5ec139f9a9aef21d0c8..572dc5d48182c5a6ed883b8472842a3c64326532 100644 (file)
--- a/ui/web/src/composables/UIClient.ts
+++ b/ui/web/src/composables/UIClient.ts
@@ -45,6 +45,10 @@ export class UIClient {
     return this.sendRequest(ProcedureName.STOP_SIMULATOR, {})
   }
 
+  public async deleteChargingStation(hashId: string): Promise<ResponsePayload> {
+    return this.sendRequest(ProcedureName.DELETE_CHARGING_STATIONS, { hashIds: [hashId] })
+  }
+
   public async listChargingStations(): Promise<ResponsePayload> {
     return this.sendRequest(ProcedureName.LIST_CHARGING_STATIONS, {})
   }
@@ -111,7 +115,7 @@ export class UIClient {
     })
   }
 
-  private openWS(): void {
+  public openWS(): void {
     const protocols =
       this.configuration.uiServer.authentication?.enabled === true &&
       this.configuration.uiServer.authentication?.type === AuthenticationType.PROTOCOL_BASIC_AUTH
@@ -141,9 +145,6 @@ export class UIClient {
     payload: RequestPayload
   ): Promise<ResponsePayload> {
     return new Promise<ResponsePayload>((resolve, reject) => {
-      if (this.ws.readyState !== WebSocket.OPEN) {
-        this.openWS()
-      }
       if (this.ws.readyState === WebSocket.OPEN) {
         const uuid = crypto.randomUUID()
         const msg = JSON.stringify([uuid, procedureName, payload])

diff --git a/ui/web/src/main.ts b/ui/web/src/main.ts
index ac9c9e8244df59b63bc7f60465b05270c16decb3..1c213741953a0e4571411d72f29c7771b3c6b128 100644 (file)
--- a/ui/web/src/main.ts
+++ b/ui/web/src/main.ts
@@ -1,19 +1,31 @@
 import { createApp } from 'vue'
+import type { ConfigurationData } from './types'
 import router from '@/router'
 import { UIClient } from '@/composables'
 import App from '@/App.vue'
 
-const app = createApp(App)
+const initializeApp = async (config: ConfigurationData) => {
+  const app = createApp(App)
+  app.config.errorHandler = (error, instance, info) => {
+    console.error('Error:', error)
+    console.info('Vue instance:', instance)
+    console.info('Error info:', info)
+    // TODO: Add code for UI notifications or other error handling logic
+  }
+  app.config.globalProperties.$UIClient = UIClient.getInstance(config)
+  app.config.globalProperties.$UIClient.openWS()
+  app.use(router).mount('#app')
+}
 
 fetch('/config.json')
   .then(response => response.json())
+  .catch(error => {
+    console.error('Error at fetching app configuration:', error)
+    throw error
+  })
   .then(config => {
-    app.config.errorHandler = (error, instance, info) => {
-      console.error('Error:', error)
-      console.info('Vue instance:', instance)
-      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')
+    initializeApp(config)
+  })
+  .catch(error => {
+    console.error('Error at initializing app:', error)
   })

diff --git a/ui/web/src/types/UIProtocol.ts b/ui/web/src/types/UIProtocol.ts
index 6883cf8b1d9c0bb03dd3e931424847a8c472662d..a431540b7d44bdc0cf41b750dd660ed7d5a7e225 100644 (file)
--- a/ui/web/src/types/UIProtocol.ts
+++ b/ui/web/src/types/UIProtocol.ts
@@ -27,6 +27,7 @@ export type ProtocolRequestHandler = (
 export enum ProcedureName {
   START_SIMULATOR = 'startSimulator',
   STOP_SIMULATOR = 'stopSimulator',
+  DELETE_CHARGING_STATIONS = 'deleteChargingStations',
   LIST_CHARGING_STATIONS = 'listChargingStations',
   START_CHARGING_STATION = 'startChargingStation',
   STOP_CHARGING_STATION = 'stopChargingStation',