refactor(ui): use JSON format as runtime configuration

[e-mobility-charging-stations-simulator.git] / ui / web / src / views / ChargingStationsView.vue

diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index f500591a551c2c5332add353dded21d7647ddc5a..be7aefbed233f22451e5ace386402222145ad0d0 100644 (file)
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -17,17 +17,16 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue'
+import { getCurrentInstance, onMounted, reactive } from 'vue'
 import CSTable from '@/components/charging-stations/CSTable.vue'
 import type { ChargingStationData } from '@/types'
 import Container from '@/components/Container.vue'
 import ReloadButton from '@/components/buttons/ReloadButton.vue'
-import { UIClient } from '@/composables/UIClient'
 
-const UIClientInstance = UIClient.getInstance()
+const UIClient = getCurrentInstance()?.appContext.config.globalProperties.$UIClient
 
 onMounted(() => {
-  UIClientInstance.registerWSonOpenListener(load)
+  UIClient.registerWSonOpenListener(load)
 })
 
 type State = {
@@ -45,17 +44,17 @@ const state: State = reactive({
 async function load(): Promise<void> {
   if (state.isLoading === true) return
   state.isLoading = true
-  const listChargingStationsPayload = await UIClientInstance.listChargingStations()
+  const listChargingStationsPayload = await UIClient.listChargingStations()
   state.chargingStations =
     listChargingStationsPayload.chargingStations as unknown as ChargingStationData[]
   state.isLoading = false
 }
 
 function startSimulator(): void {
-  UIClientInstance.startSimulator()
+  UIClient.startSimulator()
 }
 function stopSimulator(): void {
-  UIClientInstance.stopSimulator()
+  UIClient.stopSimulator()
 }
 </script>