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

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>

diff --git a/ui/web/src/App.vue b/ui/web/src/App.vue
index 325c6bd8675d0ccc564da9b40272bff2467a7e0d..48076e62aea7892da94db200784550e3ac8b6ea8 100644 (file)
--- a/ui/web/src/App.vue
+++ b/ui/web/src/App.vue
@@ -26,8 +26,8 @@ import Container from '@/components/Container.vue'
   min-width: max-content;
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   margin: 0.1%;
   padding: 0.1%;
   border: solid black;

diff --git a/ui/web/src/components/buttons/Button.vue b/ui/web/src/components/buttons/Button.vue
index c5ad3fd51715714620c2fb04a97442aee2efd7cc..303c93f4d64fc8f4c34f087e8396dc2e9078080c 100644 (file)
--- a/ui/web/src/components/buttons/Button.vue
+++ b/ui/web/src/components/buttons/Button.vue
@@ -8,7 +8,7 @@
 .button {
   display: flex;
   flex: auto;
-  align-items: center;
   justify-content: center;
+  align-items: center;
 }
 </style>

diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 1babefbae8a82154757d5c1e942b086181124184..094988b101d4f9df3184437e6609f022e046b994 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"
@@ -291,14 +298,19 @@ 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;