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 b15ce3f5ff338645abebcda0681244d9a28a8bd2..6f589ccc6a8030136f4449ac5de1a2e64daaf78e 100644 (file)
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -72,6 +72,7 @@
         "
       >
         {{ state.simulatorState?.started === true ? 'Stop' : 'Start' }} Simulator
+        {{ state.simulatorState?.version != null ? ` (${state.simulatorState?.version})` : '' }}
       </ToggleButton>
       <ToggleButton
         :id="'add-charging-stations'"
@@ -122,7 +123,7 @@
 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 {
@@ -139,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(),
@@ -170,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')
@@ -304,6 +305,7 @@ const stopSimulator = (): void => {
 #ui-server-selector {
   width: 100%;
   background-color: rgb(239, 239, 239);
+  font: small-caption;
   text-align: center;
 }
 
@@ -333,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 {