feat(ui): add charging stations action support

[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 bd9b239c0463b6073521dffae8427ce25f073111..d0acc4e3562c9e3a1b5ffb9f531cb5adc82ec614 100644 (file)
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -1,25 +1,18 @@
 <template>
-  <Container id="charging-stations">
+  <Container id="charging-stations-container">
     <Container id="buttons-container">
-      <Button id="simulator-button" @click="startSimulator()">Start Simulator</Button>
-      <Button id="simulator-button" @click="stopSimulator()">Stop Simulator</Button>
-      <ReloadButton id="reload-button" :loading="state.isLoading" @click="loadChargingStations()" />
-    </Container>
-    <Container id="inputs-container">
-      <input
-        id="idtag-field"
-        v-model="state.idTag"
-        type="text"
-        name="idtag-field"
-        placeholder="RFID tag"
+      <Button id="button" @click="startSimulator()">Start Simulator</Button>
+      <Button id="button" @click="stopSimulator()">Stop Simulator</Button>
+      <Button id="button" @click="$router.push({ name: 'add-charging-stations' })"
+        >Add Charging Stations</Button
+      >
+      <ReloadButton
+        id="reload-button"
+        :loading="state.isLoading"
+        @click="loadChargingStations(() => $router.go(0))"
       />
     </Container>
-    <CSTable
-      :charging-stations="
-        getCurrentInstance()?.appContext.config.globalProperties.$chargingStations ?? []
-      "
-      :id-tag="state.idTag"
-    />
+    <CSTable :charging-stations="app?.appContext.config.globalProperties.$chargingStations ?? []" />
   </Container>
 </template>
 
@@ -32,14 +25,13 @@ import ReloadButton from '@/components/buttons/ReloadButton.vue'
 import Button from '@/components/buttons/Button.vue'
 
 const state = reactive({
-  isLoading: false,
-  idTag: ''
+  isLoading: false
 })
 
 const app = getCurrentInstance()
 const uiClient = app?.appContext.config.globalProperties.$uiClient
 
-function loadChargingStations(): void {
+function loadChargingStations(reloadCallback?: () => void): void {
   if (state.isLoading === false) {
     state.isLoading = true
     uiClient
@@ -50,9 +42,13 @@ function loadChargingStations(): void {
         }
       })
       .catch((error: Error) => {
+        // TODO: add code for UI notifications or other error handling logic
         console.error('Error at fetching charging stations:', error)
       })
       .finally(() => {
+        if (reloadCallback != null) {
+          reloadCallback()
+        }
         state.isLoading = false
       })
   }
@@ -67,7 +63,7 @@ function stopSimulator(): void {
 </script>
 
 <style>
-#charging-stations {
+#charging-stations-container {
   height: fit-content;
   width: 100%;
   display: flex;
@@ -79,9 +75,8 @@ function stopSimulator(): void {
   flex-direction: row;
 }
 
-#inputs-container {
-  display: flex;
-  flex-direction: row;
+#button {
+  flex: auto;
 }
 
 #reload-button {
@@ -101,14 +96,4 @@ function stopSimulator(): void {
 #reload-button:active {
   background-color: red;
 }
-
-#simulator-button {
-  flex: auto;
-}
-
-#idtag-field {
-  flex: auto;
-  font-size: 1.5rem;
-  text-align: center;
-}
 </style>