From 2aebc843bf22830bdceed8a1756c6e7a776a3e63 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 1 Dec 2023 18:09:32 -0300
Subject: [PATCH] Use intern Vue `capitalize` method when possible

Much more readable.
---
 src/stores/mainVehicle.ts             | 4 ++--
 src/views/ConfigurationAlertsView.vue | 8 +++-----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/stores/mainVehicle.ts b/src/stores/mainVehicle.ts
index 77061f8b7..ed65fcf28 100644
--- a/src/stores/mainVehicle.ts
+++ b/src/stores/mainVehicle.ts
@@ -1,6 +1,6 @@
 import { useStorage, useTimestamp } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue'
+import { capitalize, computed, onBeforeUnmount, reactive, ref, watch } from 'vue'
 
 import { defaultGlobalAddress } from '@/assets/defaults'
 import * as Connection from '@/libs/connection/connection'
@@ -428,7 +428,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
       // @ts-ignore: This type is huge. Needs refactoring typing here.
       Object.entries(parametersTable['BTN0_FUNCTION']['Values']).forEach((param) => {
         const rawText = param[1] as string
-        const formatedText = (rawText.charAt(0).toUpperCase() + rawText.slice(1)).replace(new RegExp('_', 'g'), ' ')
+        const formatedText = capitalize(rawText).replace(new RegExp('_', 'g'), ' ')
         buttonParameterTable.push({ title: formatedText as string, value: Number(param[0]) })
       })
       Object.entries(currentParameters).forEach((param) => {
diff --git a/src/views/ConfigurationAlertsView.vue b/src/views/ConfigurationAlertsView.vue
index 88efd1740..a435bea02 100644
--- a/src/views/ConfigurationAlertsView.vue
+++ b/src/views/ConfigurationAlertsView.vue
@@ -6,11 +6,7 @@
       <span class="text-sm font-medium text-slate-500">Enable voice on specific alert levels:</span>
       <div class="flex items-center justify-start">
         <div v-for="enabledLevel in alertStore.enabledAlertLevels" :key="enabledLevel.level" class="mx-2">
-          <v-switch
-            v-model="enabledLevel.enabled"
-            :label="enabledLevel.level.charAt(0).toUpperCase() + enabledLevel.level.slice(1)"
-            class="text-slate-800"
-          />
+          <v-switch v-model="enabledLevel.enabled" :label="capitalize(enabledLevel.level)" class="text-slate-800" />
         </div>
       </div>
       <span class="text-sm font-medium text-slate-500">Alert voice:</span>
@@ -26,6 +22,8 @@
 </template>
 
 <script setup lang="ts">
+import { capitalize } from 'vue'
+
 import Dropdown from '@/components/Dropdown.vue'
 import { useAlertStore } from '@/stores/alert'