refactor(webui): align $ prefix convention on composable locals

Rename uiClient to $uiClient in 4 components (convention:
composable-returned Vue service instances use $ prefix).
Rename ref to $chargingStations in Utils.ts (was shadowing
Vue ref import). Keep chargingStationsRef unchanged in
ChargingStationsView (would shadow globalProperty in template).

Author: jerome-benoit

ui/web/src/components/actions/StartTransaction.vue

@@ -72,7 +72,7 @@ const state = ref<{ authorizeIdTag: boolean; idTag: string }>({
   idTag: '',
 })
 
-const uiClient = useUIClient()
+const $uiClient = useUIClient()
 
 const toggleButtonId = computed(
   () => `${props.hashId}-${evseId.value ?? 0}-${props.connectorId}-start-transaction`
@@ -87,7 +87,7 @@ const handleStartTransaction = async (): Promise<void> => {
       return
     }
     try {
-      await uiClient.authorize(props.hashId, idTag)
+      await $uiClient.authorize(props.hashId, idTag)
     } catch (error) {
       $toast.error('Error at authorizing RFID tag')
       console.error('Error at authorizing RFID tag:', error)
@@ -98,7 +98,7 @@ const handleStartTransaction = async (): Promise<void> => {
   }
 
   try {
-    await uiClient.startTransaction(props.hashId, {
+    await $uiClient.startTransaction(props.hashId, {
       connectorId: convertToInt(props.connectorId),
       evseId: evseId.value,
       idTag,

ui/web/src/components/charging-stations/CSConnector.vue

@@ -87,7 +87,7 @@ const props = defineProps<{
 
 const $emit = defineEmits(['need-refresh'])
 
-const uiClient = useUIClient()
+const $uiClient = useUIClient()
 
 const $toast = useToast()
 
@@ -99,7 +99,7 @@ const stopTransaction = (): void => {
     return
   }
   executeAction(
-    uiClient.stopTransaction(props.hashId, {
+    $uiClient.stopTransaction(props.hashId, {
       ocppVersion: props.ocppVersion,
       transactionId: props.connector.transactionId,
     }),
@@ -109,28 +109,28 @@ const stopTransaction = (): void => {
 }
 const lockConnector = (): void => {
   executeAction(
-    uiClient.lockConnector(props.hashId, props.connectorId),
+    $uiClient.lockConnector(props.hashId, props.connectorId),
     'Connector successfully locked',
     'Error at locking connector'
   )
 }
 const unlockConnector = (): void => {
   executeAction(
-    uiClient.unlockConnector(props.hashId, props.connectorId),
+    $uiClient.unlockConnector(props.hashId, props.connectorId),
     'Connector successfully unlocked',
     'Error at unlocking connector'
   )
 }
 const startAutomaticTransactionGenerator = (): void => {
   executeAction(
-    uiClient.startAutomaticTransactionGenerator(props.hashId, props.connectorId),
+    $uiClient.startAutomaticTransactionGenerator(props.hashId, props.connectorId),
     'Automatic transaction generator successfully started',
     'Error at starting automatic transaction generator'
   )
 }
 const stopAutomaticTransactionGenerator = (): void => {
   executeAction(
-    uiClient.stopAutomaticTransactionGenerator(props.hashId, props.connectorId),
+    $uiClient.stopAutomaticTransactionGenerator(props.hashId, props.connectorId),
     'Automatic transaction generator successfully stopped',
     'Error at stopping automatic transaction generator'
   )

ui/web/src/components/charging-stations/CSData.vue

@@ -207,42 +207,42 @@ const getWSState = (): string => {
   }
 }
 
-const uiClient = useUIClient()
+const $uiClient = useUIClient()
 
 const $toast = useToast()
 
 const executeAction = useExecuteAction($emit)
 
 const startChargingStation = (): void => {
   executeAction(
-    uiClient.startChargingStation(props.chargingStation.stationInfo.hashId),
+    $uiClient.startChargingStation(props.chargingStation.stationInfo.hashId),
     'Charging station successfully started',
     'Error at starting charging station'
   )
 }
 const stopChargingStation = (): void => {
   executeAction(
-    uiClient.stopChargingStation(props.chargingStation.stationInfo.hashId),
+    $uiClient.stopChargingStation(props.chargingStation.stationInfo.hashId),
     'Charging station successfully stopped',
     'Error at stopping charging station'
   )
 }
 const openConnection = (): void => {
   executeAction(
-    uiClient.openConnection(props.chargingStation.stationInfo.hashId),
+    $uiClient.openConnection(props.chargingStation.stationInfo.hashId),
     'Connection successfully opened',
     'Error at opening connection'
   )
 }
 const closeConnection = (): void => {
   executeAction(
-    uiClient.closeConnection(props.chargingStation.stationInfo.hashId),
+    $uiClient.closeConnection(props.chargingStation.stationInfo.hashId),
     'Connection successfully closed',
     'Error at closing connection'
   )
 }
 const deleteChargingStation = (): void => {
-  uiClient
+  $uiClient
     .deleteChargingStation(props.chargingStation.stationInfo.hashId)
     .then(() => {
       for (const key in getLocalStorage()) {

ui/web/src/composables/Utils.ts

@@ -94,10 +94,10 @@ export const useChargingStations = (): Ref<ChargingStationData[]> | undefined =>
 }
 
 export const refreshChargingStations = async (): Promise<void> => {
-  const ref = useChargingStations()
-  if (ref == null) return
+  const $chargingStations = useChargingStations()
+  if ($chargingStations == null) return
   const response = await useUIClient().listChargingStations()
-  ref.value = response.chargingStations as ChargingStationData[]
+  $chargingStations.value = response.chargingStations as ChargingStationData[]
 }
 
 export const useExecuteAction = (emit: (event: 'need-refresh') => void) => {

ui/web/src/views/ChargingStationsView.vue

@@ -199,14 +199,14 @@ const clearChargingStations = (): void => {
   }
 }
 
-const uiClient = useUIClient()
+const $uiClient = useUIClient()
 
 const $toast = useToast()
 
 const getSimulatorState = (): void => {
   if (state.value.gettingSimulatorState === false) {
     state.value.gettingSimulatorState = true
-    uiClient
+    $uiClient
       .simulatorState()
       .then((response: ResponsePayload) => {
         simulatorState.value = response.state as SimulatorState
@@ -225,7 +225,7 @@ const getSimulatorState = (): void => {
 const getTemplates = (): void => {
   if (state.value.gettingTemplates === false) {
     state.value.gettingTemplates = true
-    uiClient
+    $uiClient
       .listTemplates()
       .then((response: ResponsePayload) => {
         if (app != null) {
@@ -247,7 +247,7 @@ const getTemplates = (): void => {
 const getChargingStations = (): void => {
   if (state.value.gettingChargingStations === false) {
     state.value.gettingChargingStations = true
-    uiClient
+    $uiClient
       .listChargingStations()
       .then((response: ResponsePayload) => {
         if (chargingStationsRef != null) {
@@ -273,22 +273,22 @@ const getData = (): void => {
 }
 
 const registerWSEventListeners = () => {
-  uiClient.registerWSEventListener('open', getData)
-  uiClient.registerWSEventListener('error', clearChargingStations)
-  uiClient.registerWSEventListener('close', clearChargingStations)
+  $uiClient.registerWSEventListener('open', getData)
+  $uiClient.registerWSEventListener('error', clearChargingStations)
+  $uiClient.registerWSEventListener('close', clearChargingStations)
 }
 
 const unregisterWSEventListeners = () => {
-  uiClient.unregisterWSEventListener('open', getData)
-  uiClient.unregisterWSEventListener('error', clearChargingStations)
-  uiClient.unregisterWSEventListener('close', clearChargingStations)
+  $uiClient.unregisterWSEventListener('open', getData)
+  $uiClient.unregisterWSEventListener('error', clearChargingStations)
+  $uiClient.unregisterWSEventListener('close', clearChargingStations)
 }
 
 let unsubscribeRefresh: (() => void) | undefined
 
 onMounted(() => {
   registerWSEventListeners()
-  unsubscribeRefresh = uiClient.onRefresh(() => {
+  unsubscribeRefresh = $uiClient.onRefresh(() => {
     getChargingStations()
   })
 })
@@ -310,7 +310,7 @@ const uiServerConfigurations: {
 }))
 
 const startSimulator = (): void => {
-  uiClient
+  $uiClient
     .startSimulator()
     .then(() => {
       return $toast.success('Simulator successfully started')
@@ -324,7 +324,7 @@ const startSimulator = (): void => {
     })
 }
 const stopSimulator = (): void => {
-  uiClient
+  $uiClient
     .stopSimulator()
     .then(() => {
       clearChargingStations()