X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;f=ui%2Fweb%2Fsrc%2Fcomponents%2Fcharging-stations%2FCSData.vue;h=2462e6d6172daeba545bbec7f03add81eae16bf2;hb=7e2e8c9b820004dc6a84d6a5629575460daf8167;hp=5d31cb1ef1b941487e217a01c86156257c0f6939;hpb=13c19b7bd220baedac3b4870057501cb4891acf9;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 5d31cb1e..2462e6d6 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -1,13 +1,13 @@
 <template>
   <tr class="cs-table__row">
     <td class="cs-table__column">
-      {{ props.chargingStation.stationInfo.chargingStationId ?? 'Ø' }}
+      {{ props.chargingStation.stationInfo.chargingStationId }}
     </td>
     <td class="cs-table__column">{{ props.chargingStation.started === true ? 'Yes' : 'No' }}</td>
     <td class="cs-table__column">
       {{ getSupervisionUrl() }}
     </td>
-    <td class="cs-table__column">{{ getWsState() }}</td>
+    <td class="cs-table__column">{{ getWSState() }}</td>
     <td class="cs-table__column">
       {{ props.chargingStation?.bootNotificationResponse?.status ?? 'Ø' }}
     </td>
@@ -22,12 +22,26 @@
     <td class="cs-table__column">
       <Button @click="startChargingStation()">Start Charging Station</Button>
       <Button @click="stopChargingStation()">Stop Charging Station</Button>
+      <Button
+        @click="
+          $router.push({
+            name: 'set-supervision-url',
+            params: {
+              hashId: props.chargingStation.stationInfo.hashId,
+              chargingStationId: props.chargingStation.stationInfo.chargingStationId
+            }
+          })
+        "
+      >
+        Set Supervision Url
+      </Button>
       <Button @click="openConnection()">Open Connection</Button>
       <Button @click="closeConnection()">Close Connection</Button>
       <Button @click="deleteChargingStation()">Delete Charging Station</Button>
     </td>
     <td class="cs-table__connectors-column">
       <table id="connectors-table">
+        <caption></caption>
         <thead id="connectors-table__head">
           <tr class="connectors-table__row">
             <th scope="col" class="connectors-table__column">Identifier</th>
@@ -40,13 +54,12 @@
         <tbody id="connectors-table__body">
           <!-- eslint-disable-next-line vue/valid-v-for -->
           <CSConnector
-            v-for="(connector, index) in getConnectors()"
+            v-for="(connector, index) in getConnectorStatuses()"
             :hash-id="props.chargingStation.stationInfo.hashId"
+            :charging-station-id="props.chargingStation.stationInfo.chargingStationId"
             :connector-id="index + 1"
             :connector="connector"
             :atg-status="getATGStatus(index + 1)"
-            :transaction-id="connector.transactionId"
-            :id-tag="props.idTag"
           />
         </tbody>
       </table>
@@ -56,38 +69,38 @@
 
 <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'
 
 const props = defineProps<{
   chargingStation: ChargingStationData
-  idTag: string
 }>()
 
-function getConnectors(): ConnectorStatus[] {
+const getConnectorStatuses = (): ConnectorStatus[] => {
   if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
-    const connectorsStatus: ConnectorStatus[] = []
+    const connectorStatuses: ConnectorStatus[] = []
     for (const [evseId, evseStatus] of props.chargingStation.evses.entries()) {
       if (evseId > 0 && Array.isArray(evseStatus.connectors) && evseStatus.connectors.length > 0) {
         for (const connectorStatus of evseStatus.connectors) {
-          connectorsStatus.push(connectorStatus)
+          connectorStatuses.push(connectorStatus)
         }
       }
     }
-    return connectorsStatus
+    return connectorStatuses
   }
   return props.chargingStation.connectors?.slice(1)
 }
-function getATGStatus(connectorId: number): Status | undefined {
+const getATGStatus = (connectorId: number): Status | undefined => {
   return props.chargingStation.automaticTransactionGenerator
     ?.automaticTransactionGeneratorStatuses?.[connectorId - 1]
 }
-function getSupervisionUrl(): string {
+const getSupervisionUrl = (): string => {
   const supervisionUrl = new URL(props.chargingStation.supervisionUrl)
   return `${supervisionUrl.protocol}//${supervisionUrl.host.split('.').join('.\u200b')}`
 }
-function getWsState(): string {
+const getWSState = (): string => {
   switch (props.chargingStation?.wsState) {
     case WebSocket.CONNECTING:
       return 'Connecting'
@@ -102,22 +115,64 @@ function getWsState(): string {
   }
 }
 
-const UIClient = getCurrentInstance()?.appContext.config.globalProperties.$UIClient
+const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
 
-function startChargingStation(): void {
-  UIClient.startChargingStation(props.chargingStation.stationInfo.hashId)
+const $toast = useToast()
+
+const startChargingStation = (): void => {
+  uiClient
+    .startChargingStation(props.chargingStation.stationInfo.hashId)
+    .then(() => {
+      $toast.success('Charging station successfully started')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at starting charging station')
+      console.error('Error at starting charging station', error)
+    })
 }
-function stopChargingStation(): void {
-  UIClient.stopChargingStation(props.chargingStation.stationInfo.hashId)
+const stopChargingStation = (): void => {
+  uiClient
+    .stopChargingStation(props.chargingStation.stationInfo.hashId)
+    .then(() => {
+      $toast.success('Charging station successfully stopped')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at stopping charging station')
+      console.error('Error at stopping charging station', error)
+    })
 }
-function openConnection(): void {
-  UIClient.openConnection(props.chargingStation.stationInfo.hashId)
+const openConnection = (): void => {
+  uiClient
+    .openConnection(props.chargingStation.stationInfo.hashId)
+    .then(() => {
+      $toast.success('Connection successfully opened')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at opening connection')
+      console.error('Error at opening connection', error)
+    })
 }
-function closeConnection(): void {
-  UIClient.closeConnection(props.chargingStation.stationInfo.hashId)
+const closeConnection = (): void => {
+  uiClient
+    .closeConnection(props.chargingStation.stationInfo.hashId)
+    .then(() => {
+      $toast.success('Connection successfully closed')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at closing connection')
+      console.error('Error at closing connection', error)
+    })
 }
-function deleteChargingStation(): void {
-  UIClient.deleteChargingStation(props.chargingStation.stationInfo.hashId)
+const deleteChargingStation = (): void => {
+  uiClient
+    .deleteChargingStation(props.chargingStation.stationInfo.hashId)
+    .then(() => {
+      $toast.success('Charging station successfully deleted')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at deleting charging station')
+      console.error('Error at deleting charging station', error)
+    })
 }
 </script>
 
@@ -141,6 +196,7 @@ function deleteChargingStation(): void {
   flex-direction: row;
   justify-content: center;
   align-items: center;
+  border: solid 0.25px black;
 }
 
 .connectors-table__row:nth-of-type(even) {