From ec7366ed6c79d62c203c8db30fb74504374427f3 Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Sun, 3 Mar 2024 22:15:12 +0100
Subject: [PATCH] perf(ui): use computed ref when possible
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>
---
 .../components/charging-stations/CSData.vue   |  2 +-
 ui/web/src/views/ChargingStationsView.vue     | 19 +++++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index 6a31e20b..3eab286f 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -9,7 +9,7 @@
     </td>
     <td class="cs-table__column">{{ getWSState() }}</td>
     <td class="cs-table__column">
-      {{ chargingStation?.bootNotificationResponse?.status ?? 'Ø' }}
+      {{ chargingStation.bootNotificationResponse?.status ?? 'Ø' }}
     </td>
     <td class="cs-table__column">
       {{ chargingStation.stationInfo.templateName }}
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index f76e40e6..2546c6bf 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -65,14 +65,9 @@
         :status="state.simulatorState?.started"
         :on="() => startSimulator()"
         :off="() => stopSimulator()"
-        :class="
-          state.simulatorState?.started === true
-            ? 'simulator-stop-button'
-            : 'simulator-start-button'
-        "
+        :class="simulatorButtonClass"
       >
-        {{ state.simulatorState?.started === true ? 'Stop' : 'Start' }} Simulator
-        {{ state.simulatorState?.version != null ? ` (${state.simulatorState?.version})` : '' }}
+        {{ simulatorButtonMessage }}
       </ToggleButton>
       <ToggleButton
         :id="'add-charging-stations'"
@@ -120,7 +115,7 @@
 </template>
 
 <script setup lang="ts">
-import { getCurrentInstance, onMounted, ref } from 'vue'
+import { computed, getCurrentInstance, onMounted, ref } from 'vue'
 import { useToast } from 'vue-toast-notification'
 import CSTable from '@/components/charging-stations/CSTable.vue'
 import type { ResponsePayload, SimulatorState, UIServerConfigurationSection } from '@/types'
@@ -150,6 +145,14 @@ const state = ref<{
   uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
 })
 
+const simulatorButtonClass = computed<string>(() =>
+  state.value.simulatorState?.started === true ? 'simulator-stop-button' : 'simulator-start-button'
+)
+const simulatorButtonMessage = computed<string>(
+  () =>
+    `${state.value.simulatorState?.started === true ? 'Stop' : 'Start'} Simulator ${state.value.simulatorState?.version != null ? `(${state.value.simulatorState.version})` : ''}`
+)
+
 const app = getCurrentInstance()
 
 const clearToggleButtons = (): void => {
-- 
2.34.1