X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;f=ui%2Fweb%2Fsrc%2Fviews%2FChargingStationsView.vue;h=9243b98febe03cc75a4f1a595a9287aeef4012f2;hb=2113b3c6c96d48ec565fef586149f112082c6c0e;hp=f6bf07bb13c24862b560540e3ebb6747c65fd9b4;hpb=01ff4231d1a1640acdf12c0f2819f0c49456b218;p=e-mobility-charging-stations-simulator.git

diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index f6bf07bb..9243b98f 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -17,58 +17,54 @@
 </template>
 
 <script setup lang="ts">
-import Container from '@/components/Container.vue';
-import ReloadButton from '@/components/buttons/ReloadButton.vue';
-import CSTable from '@/components/charging-stations/CSTable.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 { onMounted, reactive } from 'vue';
-import UIClient from '@/composables/UIClient';
-import type { ChargingStationData } from '@/types/ChargingStationType';
-
-const UIClientInstance = UIClient.getInstance();
+const UIClient = getCurrentInstance()?.appContext.config.globalProperties.$UIClient
 
 onMounted(() => {
-  UIClientInstance.registerWSonOpenListener(load);
-});
+  UIClient.registerWSonOpenListener(load)
+})
 
 type State = {
-  isLoading: boolean;
-  chargingStations: ChargingStationData[];
-  idTag: string;
-};
+  isLoading: boolean
+  chargingStations: ChargingStationData[]
+  idTag: string
+}
 
 const state: State = reactive({
   isLoading: false,
   chargingStations: [],
-  idTag: '',
-});
+  idTag: ''
+})
 
 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: 30px;
   background-color: rgb(233, 227, 227);
   display: flex;
   flex-direction: column;
-  gap: 0.5%;
 }
 
 #inputs-container {
@@ -78,9 +74,7 @@ function stopSimulator(): void {
 
 #reload-button {
   flex: auto;
-  padding: 5px 15px;
   background-color: rgb(25, 118, 210);
-  border-radius: 5px;
   color: white;
   font-size: 35px;
   font-weight: bold;
@@ -100,5 +94,6 @@ function stopSimulator(): void {
 
 #idtag-field {
   flex: auto;
+  text-align: center;
 }
 </style>