perf(ui): use computed ref when possible

[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 f76e40e6aebaada6540231283cc77bad37896300..2546c6bf6fcf5de18af79086c306ddd68140c3fd 100644 (file)
--- 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 => {