X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;f=ui%2Fweb%2Fsrc%2Fviews%2FChargingStationsView.vue;h=5e385955fb060abef6d59dfbffb1d85a94f19703;hb=17ba3be0bb5c0bcb7fff2cefa877af975c0d043a;hp=25ea51d9bc02549c1526725e9f5e92b9fde96e5e;hpb=ebbfbf1c01e010d051956867484b74a94237f546;p=e-mobility-charging-stations-simulator.git

diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 25ea51d9..5e385955 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -5,58 +5,57 @@
     <Container id="inputs-container">
       <input
         id="idtag-field"
+        v-model="state.idTag"
         type="text"
         name="idtag-field"
         placeholder="RFID tag"
-        v-model="state.idTag"
       />
       <ReloadButton id="reload-button" :loading="state.isLoading" @click="load()" />
     </Container>
-    <CSTable :chargingStations="state.chargingStations" :idTag="state.idTag" />
+    <CSTable :charging-stations="state.chargingStations" :id-tag="state.idTag" />
   </Container>
 </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 { 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'
 
-import { onMounted, reactive } from 'vue';
-import UIClient from '@/composables/UIClient';
-import type { ChargingStationData } from '@/types/ChargingStationType';
-
-const UIClientInstance = UIClient.getInstance();
+const UIClientInstance = UIClient.getInstance()
 
 onMounted(() => {
-  UIClientInstance.registerWSonOpenListener(load);
-});
+  UIClientInstance.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();
+  if (state.isLoading === true) return
+  state.isLoading = true
+  const listChargingStationsPayload = await UIClientInstance.listChargingStations()
   state.chargingStations =
-    listChargingStationsPayload.chargingStations as unknown as ChargingStationData[];
-  state.isLoading = false;
+    listChargingStationsPayload.chargingStations as unknown as ChargingStationData[]
+  state.isLoading = false
 }
 
 function startSimulator(): void {
-  UIClientInstance.startSimulator();
+  UIClientInstance.startSimulator()
 }
 function stopSimulator(): void {
-  UIClientInstance.stopSimulator();
+  UIClientInstance.stopSimulator()
 }
 </script>