feat(ui): enhance charging stations list structure

[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 4e4772ecbf22c84a153471243d86c0280d5b16c8..15564785ee2238b555d0f7bac41c1268661abb20 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 = {
@@ -43,28 +42,26 @@ const state: State = reactive({
 })
 
 async function load(): Promise<void> {
-  if (state.isLoading === true) return
-  state.isLoading = true
-  const listChargingStationsPayload = await UIClientInstance.listChargingStations()
-  state.chargingStations =
-    listChargingStationsPayload.chargingStations as unknown as ChargingStationData[]
-  state.isLoading = false
+  if (state.isLoading === false) {
+    state.isLoading = true
+    state.chargingStations = (await UIClient.listChargingStations())
+      .chargingStations as ChargingStationData[]
+    state.isLoading = false
+  }
 }
 
 function startSimulator(): void {
-  UIClientInstance.startSimulator()
+  UIClient.startSimulator()
 }
 function stopSimulator(): void {
-  UIClientInstance.stopSimulator()
+  UIClient.stopSimulator()
 }
 </script>
 
 <style>
 #charging-stations {
-  height: 100%;
+  height: fit-content;
   width: 100%;
-  padding: 0.5%;
-  background-color: rgb(233, 227, 227);
   display: flex;
   flex-direction: column;
 }
@@ -76,18 +73,18 @@ function stopSimulator(): void {
 
 #reload-button {
   flex: auto;
-  background-color: rgb(25, 118, 210);
   color: white;
+  background-color: blue;
   font-size: 35px;
   font-weight: bold;
 }
 
 #reload-button:hover {
-  background-color: rgb(10, 113, 195);
+  background-color: rgb(0, 0, 225);
 }
 
 #reload-button:active {
-  background-color: rgb(255, 113, 195);
+  background-color: red;
 }
 
 #simulator-button {
@@ -96,5 +93,6 @@ function stopSimulator(): void {
 
 #idtag-field {
   flex: auto;
+  text-align: center;
 }
 </style>