fix(ui): ensure the tool bar is sized at 100% width

[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 1e8762f69ecb6c3dfabff2fc644fa21cb459f60b..6f589ccc6a8030136f4449ac5de1a2e64daaf78e 100644 (file)
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -1,57 +1,64 @@
 <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"
@@ -60,11 +67,12 @@
         :off="() => stopSimulator()"
         :class="
           state.simulatorState?.started === true
-            ? 'simulator-button-stop'
-            : 'simulator-button-start'
+            ? 'simulator-stop-button'
+            : 'simulator-start-button'
         "
       >
         {{ state.simulatorState?.started === true ? 'Stop' : 'Start' }} Simulator
+        {{ state.simulatorState?.version != null ? ` (${state.simulatorState?.version})` : '' }}
       </ToggleButton>
       <ToggleButton
         :id="'add-charging-stations'"
@@ -115,14 +123,14 @@
 import { getCurrentInstance, onMounted, ref } from 'vue'
 import { useToast } from 'vue-toast-notification'
 import CSTable from '@/components/charging-stations/CSTable.vue'
-import type { ResponsePayload, UIServerConfigurationSection } from '@/types'
+import type { ResponsePayload, SimulatorState, 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'
@@ -132,7 +140,7 @@ const state = ref<{
   renderAddChargingStations: `${string}-${string}-${string}-${string}-${string}`
   renderChargingStations: `${string}-${string}-${string}-${string}-${string}`
   loading: boolean
-  simulatorState?: { started: boolean }
+  simulatorState?: SimulatorState
   uiServerIndex: number
 }>({
   renderSimulator: randomUUID(),
@@ -147,7 +155,7 @@ const app = getCurrentInstance()
 const clearToggleButtons = (): void => {
   for (const key in getLocalStorage()) {
     if (key.includes('toggle-button')) {
-      removeFromLocalStorage(key)
+      deleteFromLocalStorage(key)
     }
   }
 }
@@ -163,7 +171,7 @@ const getSimulatorState = (): void => {
   uiClient
     .simulatorState()
     .then((response: ResponsePayload) => {
-      state.value.simulatorState = response.state as { started: boolean }
+      state.value.simulatorState = response.state as SimulatorState
     })
     .catch((error: Error) => {
       $toast.error('Error at fetching simulator state')
@@ -291,25 +299,31 @@ 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);
+  font: small-caption;
   text-align: center;
 }
 
+#ui-server-selector:hover {
+  background-color: rgb(229, 229, 229);
+}
+
 #buttons-container {
   display: flex;
   flex-direction: row;
 }
 
-.simulator-button-start {
+.simulator-start-button {
   color: ivory;
   background-color: green;
 }
 
-.simulator-button-stop {
+.simulator-stop-button {
   color: ivory;
   background-color: red;
 }
@@ -321,8 +335,7 @@ const stopSimulator = (): void => {
 #reload-button {
   color: ivory;
   background-color: blue;
-  font-size: 1.5rem;
-  font-weight: bold;
+  font-size: 2rem;
 }
 
 #reload-button:hover {