refactor(ui): put all main actions to the same bar

[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 57ae3e20d7f0ba65d57a1933b1b483887f739189..094988b101d4f9df3184437e6609f022e046b994 100644 (file)
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -1,63 +1,75 @@
 <template>
   <Container id="charging-stations-container">
-    <Container
-      v-show="Array.isArray(uiServerConfigurations) && uiServerConfigurations.length > 1"
-      id="ui-server-container"
-    >
-      <select
-        id="ui-server-selector"
-        v-model="state.uiServerIndex"
-        @change="
-          () => {
-            if (
-              getFromLocalStorage<number>('uiServerConfigurationIndex', 0) !== state.uiServerIndex
-            ) {
-              app?.appContext.config.globalProperties.$uiClient.setConfiguration(
-                app?.appContext.config.globalProperties.$configuration.uiServer[state.uiServerIndex]
-              )
-              initializeWSEventListeners()
-              app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
-                'open',
-                () => {
-                  setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
-                  clearToggleButtons()
-                  $router.currentRoute.value.name !== 'charging-stations' &&
-                    $router.push({ name: 'charging-stations' })
-                },
-                { once: true }
-              )
-              app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
-                'error',
-                () => {
-                  state.uiServerIndex = getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
-                  app?.appContext.config.globalProperties.$uiClient.setConfiguration(
-                    app?.appContext.config.globalProperties.$configuration.uiServer[
-                      getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
-                    ]
-                  )
-                  initializeWSEventListeners()
-                },
-                { once: true }
-              )
-            }
-          }
-        "
+    <Container id="buttons-container">
+      <Container
+        v-show="Array.isArray(uiServerConfigurations) && uiServerConfigurations.length > 1"
+        id="ui-server-container"
       >
-        <option
-          v-for="uiServerConfiguration in uiServerConfigurations"
-          :value="uiServerConfiguration.index"
+        <select
+          id="ui-server-selector"
+          v-model="state.uiServerIndex"
+          @change="
+            () => {
+              if (
+                getFromLocalStorage<number>('uiServerConfigurationIndex', 0) !== state.uiServerIndex
+              ) {
+                app?.appContext.config.globalProperties.$uiClient.setConfiguration(
+                  app?.appContext.config.globalProperties.$configuration.uiServer[
+                    state.uiServerIndex
+                  ]
+                )
+                initializeWSEventListeners()
+                app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
+                  'open',
+                  () => {
+                    setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
+                    clearToggleButtons()
+                    $router.currentRoute.value.name !== 'charging-stations' &&
+                      $router.push({ name: 'charging-stations' })
+                  },
+                  { once: true }
+                )
+                app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
+                  'error',
+                  () => {
+                    state.uiServerIndex = getFromLocalStorage<number>(
+                      'uiServerConfigurationIndex',
+                      0
+                    )
+                    app?.appContext.config.globalProperties.$uiClient.setConfiguration(
+                      app?.appContext.config.globalProperties.$configuration.uiServer[
+                        getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
+                      ]
+                    )
+                    initializeWSEventListeners()
+                  },
+                  { once: true }
+                )
+              }
+            }
+          "
         >
-          {{ uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host }}
-        </option>
-      </select>
-    </Container>
-    <Container id="buttons-container">
+          <option
+            v-for="uiServerConfiguration in uiServerConfigurations"
+            :value="uiServerConfiguration.index"
+          >
+            {{
+              uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host
+            }}
+          </option>
+        </select>
+      </Container>
       <ToggleButton
         :id="'simulator'"
         :key="state.renderSimulator"
         :status="state.simulatorState?.started"
         :on="() => startSimulator()"
         :off="() => stopSimulator()"
+        :class="
+          state.simulatorState?.started === true
+            ? 'simulator-stop-button'
+            : 'simulator-start-button'
+        "
       >
         {{ state.simulatorState?.started === true ? 'Stop' : 'Start' }} Simulator
       </ToggleButton>
@@ -114,10 +126,10 @@ import type { ResponsePayload, UIServerConfigurationSection } from '@/types'
 import Container from '@/components/Container.vue'
 import ReloadButton from '@/components/buttons/ReloadButton.vue'
 import {
+  deleteFromLocalStorage,
   getFromLocalStorage,
   getLocalStorage,
   randomUUID,
-  removeFromLocalStorage,
   setToLocalStorage
 } from '@/composables'
 import ToggleButton from '@/components/buttons/ToggleButton.vue'
@@ -142,7 +154,7 @@ const app = getCurrentInstance()
 const clearToggleButtons = (): void => {
   for (const key in getLocalStorage()) {
     if (key.includes('toggle-button')) {
-      removeFromLocalStorage(key)
+      deleteFromLocalStorage(key)
     }
   }
 }
@@ -286,31 +298,43 @@ const stopSimulator = (): void => {
 
 #ui-server-container {
   display: flex;
-  flex-direction: row;
+  justify-content: center;
 }
 
 #ui-server-selector {
   width: 100%;
+  background-color: rgb(239, 239, 239);
   text-align: center;
 }
 
+#ui-server-selector:hover {
+  background-color: lightgrey;
+}
+
 #buttons-container {
   display: flex;
   flex-direction: row;
 }
 
+.simulator-start-button {
+  color: ivory;
+  background-color: green;
+}
+
+.simulator-stop-button {
+  color: ivory;
+  background-color: red;
+}
+
 #action-button {
   flex: none;
 }
 
 #reload-button {
-  flex: auto;
-  color: white;
+  color: ivory;
   background-color: blue;
   font-size: 1.5rem;
   font-weight: bold;
-  align-items: center;
-  justify-content: center;
 }
 
 #reload-button:hover {
@@ -318,11 +342,11 @@ const stopSimulator = (): void => {
 }
 
 #reload-button:active {
-  background-color: seagreen;
+  background-color: darkblue;
 }
 
 #action {
-  color: white;
+  color: ivory;
   background-color: black;
   padding: 1%;
 }