X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;f=ui%2Fweb%2Fsrc%2Fcomponents%2Fcharging-stations%2FCSData.vue;h=48edd609b022ae81d6a8d03f6f4b2696baa5fd7a;hb=16c46962f43a692c996b1c89a94dc572fea52d63;hp=c43616f7567b1b398ae4bf0c772fdcfa20f960ff;hpb=834687644463a925b90dafe0d5c60c249cea963e;p=e-mobility-charging-stations-simulator.git

diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index c43616f7..48edd609 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 }}
@@ -66,9 +66,9 @@
           </tr>
         </thead>
         <tbody id="connectors-table__body">
-          <!-- eslint-disable-next-line vue/valid-v-for -->
           <CSConnector
             v-for="(connector, index) in getConnectorStatuses()"
+            :key="index + 1"
             :hash-id="chargingStation.stationInfo.hashId"
             :charging-station-id="chargingStation.stationInfo.chargingStationId"
             :connector-id="index + 1"
@@ -83,12 +83,13 @@
 </template>
 
 <script setup lang="ts">
-import { getCurrentInstance } from 'vue'
 import { useToast } from 'vue-toast-notification'
-import CSConnector from '@/components/charging-stations/CSConnector.vue'
+
 import Button from '@/components/buttons/Button.vue'
-import type { ChargingStationData, ConnectorStatus, Status } from '@/types'
 import ToggleButton from '@/components/buttons/ToggleButton.vue'
+import CSConnector from '@/components/charging-stations/CSConnector.vue'
+import { useUIClient } from '@/composables'
+import type { ChargingStationData, ConnectorStatus, Status } from '@/types'
 
 const props = defineProps<{
   chargingStation: ChargingStationData
@@ -133,7 +134,7 @@ const getWSState = (): string => {
   }
 }
 
-const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
+const uiClient = useUIClient()
 
 const $toast = useToast()
 
@@ -145,7 +146,7 @@ const startChargingStation = (): void => {
     })
     .catch((error: Error) => {
       $toast.error('Error at starting charging station')
-      console.error('Error at starting charging station', error)
+      console.error('Error at starting charging station:', error)
     })
 }
 const stopChargingStation = (): void => {
@@ -156,7 +157,7 @@ const stopChargingStation = (): void => {
     })
     .catch((error: Error) => {
       $toast.error('Error at stopping charging station')
-      console.error('Error at stopping charging station', error)
+      console.error('Error at stopping charging station:', error)
     })
 }
 const openConnection = (): void => {
@@ -167,7 +168,7 @@ const openConnection = (): void => {
     })
     .catch((error: Error) => {
       $toast.error('Error at opening connection')
-      console.error('Error at opening connection', error)
+      console.error('Error at opening connection:', error)
     })
 }
 const closeConnection = (): void => {
@@ -178,7 +179,7 @@ const closeConnection = (): void => {
     })
     .catch((error: Error) => {
       $toast.error('Error at closing connection')
-      console.error('Error at closing connection', error)
+      console.error('Error at closing connection:', error)
     })
 }
 const deleteChargingStation = (): void => {
@@ -189,7 +190,7 @@ const deleteChargingStation = (): void => {
     })
     .catch((error: Error) => {
       $toast.error('Error at deleting charging station')
-      console.error('Error at deleting charging station', error)
+      console.error('Error at deleting charging station:', error)
     })
 }
 </script>
@@ -227,6 +228,8 @@ const deleteChargingStation = (): void => {
 
 .connectors-table__column {
   width: calc(100% / 5);
+  display: flex;
+  flex-direction: column;
   text-align: center;
 }
 </style>