refactor: spell fix in log messages

[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 320731f71df5b4c2fd5a48727f272d957d481fe2..695b88608b4df60c0e90ff848167057ddcbcdfb7 100644 (file)
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -13,7 +13,11 @@
               if (
                 getFromLocalStorage<number>('uiServerConfigurationIndex', 0) !== state.uiServerIndex
               ) {
-                $uiClient.setConfiguration($configuration.value.uiServer[state.uiServerIndex])
+                $uiClient.setConfiguration(
+                  ($configuration.value.uiServer as UIServerConfigurationSection[])[
+                    state.uiServerIndex
+                  ]
+                )
                 registerWSEventListeners()
                 $uiClient.registerWSEventListener(
                   'open',
@@ -33,7 +37,7 @@
                       0
                     )
                     $uiClient.setConfiguration(
-                      $configuration.value.uiServer[
+                      ($configuration.value.uiServer as UIServerConfigurationSection[])[
                         getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
                       ]
                     )
@@ -47,6 +51,7 @@
         >
           <option
             v-for="uiServerConfiguration in uiServerConfigurations"
+            :key="uiServerConfiguration.index"
             :value="uiServerConfiguration.index"
           >
             {{
@@ -110,10 +115,11 @@
 <script setup lang="ts">
 import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useToast } from 'vue-toast-notification'
+
+import ReloadButton from '@/components/buttons/ReloadButton.vue'
+import ToggleButton from '@/components/buttons/ToggleButton.vue'
 import CSTable from '@/components/charging-stations/CSTable.vue'
-import type { ResponsePayload, SimulatorState, UIServerConfigurationSection } from '@/types'
 import Container from '@/components/Container.vue'
-import ReloadButton from '@/components/buttons/ReloadButton.vue'
 import {
   deleteFromLocalStorage,
   getFromLocalStorage,
@@ -122,7 +128,12 @@ import {
   setToLocalStorage,
   useUIClient
 } from '@/composables'
-import ToggleButton from '@/components/buttons/ToggleButton.vue'
+import type {
+  ChargingStationData,
+  ResponsePayload,
+  SimulatorState,
+  UIServerConfigurationSection
+} from '@/types'
 
 const simulatorState = ref<SimulatorState | undefined>(undefined)
 
@@ -164,7 +175,7 @@ const clearToggleButtons = (): void => {
 
 const app = getCurrentInstance()
 
-watch(app?.appContext.config.globalProperties.$chargingStations, () => {
+watch(app!.appContext.config.globalProperties.$chargingStations, () => {
   state.value.renderChargingStations = randomUUID()
 })
 
@@ -213,7 +224,7 @@ const getTemplates = (): void => {
       .listTemplates()
       .then((response: ResponsePayload) => {
         if (app != null) {
-          app.appContext.config.globalProperties.$templates.value = response.templates
+          app.appContext.config.globalProperties.$templates.value = response.templates as string[]
         }
       })
       .catch((error: Error) => {
@@ -234,7 +245,8 @@ const getChargingStations = (): void => {
       .listChargingStations()
       .then((response: ResponsePayload) => {
         if (app != null) {
-          app.appContext.config.globalProperties.$chargingStations.value = response.chargingStations
+          app.appContext.config.globalProperties.$chargingStations.value =
+            response.chargingStations as ChargingStationData[]
         }
       })
       .catch((error: Error) => {
@@ -274,13 +286,13 @@ onUnmounted(() => {
   unregisterWSEventListeners()
 })
 
-const uiServerConfigurations: { index: number; configuration: UIServerConfigurationSection }[] =
-  app?.appContext.config.globalProperties.$configuration.value.uiServer.map(
-    (configuration: UIServerConfigurationSection, index: number) => ({
-      index,
-      configuration
-    })
-  )
+const uiServerConfigurations: { index: number; configuration: UIServerConfigurationSection }[] = (
+  app?.appContext.config.globalProperties.$configuration.value
+    .uiServer as UIServerConfigurationSection[]
+).map((configuration: UIServerConfigurationSection, index: number) => ({
+  index,
+  configuration
+}))
 
 const startSimulator = (): void => {
   uiClient
@@ -341,6 +353,8 @@ const stopSimulator = (): void => {
 #buttons-container {
   display: flex;
   flex-direction: row;
+  position: sticky;
+  top: 0;
 }
 
 .simulator-start-button {
@@ -368,7 +382,7 @@ const stopSimulator = (): void => {
 #reload-button {
   color: ivory;
   background-color: blue;
-  font-size: 2rem;
+  font-size: 1.5rem;
 }
 
 #reload-button:hover {