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

   1 <template>
   2   <tr class="cs-table__row">
   3     <td class="cs-table__column">
   4       {{ props.chargingStation.stationInfo.chargingStationId }}
   5     </td>
   6     <td class="cs-table__column">{{ props.chargingStation.started === true ? 'Yes' : 'No' }}</td>
   7     <td class="cs-table__column">
   8       {{ getSupervisionUrl() }}
   9     </td>
  10     <td class="cs-table__column">{{ getWSState() }}</td>
  11     <td class="cs-table__column">
  12       {{ props.chargingStation?.bootNotificationResponse?.status ?? 'Ø' }}
  13     </td>
  14     <td class="cs-table__column">
  15       {{ props.chargingStation.stationInfo.templateName }}
  16     </td>
  17     <td class="cs-table__column">{{ props.chargingStation.stationInfo.chargePointVendor }}</td>
  18     <td class="cs-table__column">{{ props.chargingStation.stationInfo.chargePointModel }}</td>
  19     <td class="cs-table__column">
  20       {{ props.chargingStation.stationInfo.firmwareVersion ?? 'Ø' }}
  21     </td>
  22     <td class="cs-table__column">
  23       <Button @click="startChargingStation()">Start Charging Station</Button>
  24       <Button @click="stopChargingStation()">Stop Charging Station</Button>
  25       <Button
  26         @click="
  27           $router.push({
  28             name: 'set-supervision-url',
  29             params: {
  30               hashId: props.chargingStation.stationInfo.hashId,
  31               chargingStationId: props.chargingStation.stationInfo.chargingStationId
  32             }
  33           })
  34         "
  35       >
  36         Set Supervision Url
  37       </Button>
  38       <Button @click="openConnection()">Open Connection</Button>
  39       <Button @click="closeConnection()">Close Connection</Button>
  40       <Button @click="deleteChargingStation()">Delete Charging Station</Button>
  41     </td>
  42     <td class="cs-table__connectors-column">
  43       <table id="connectors-table">
  44         <caption></caption>
  45         <thead id="connectors-table__head">
  46           <tr class="connectors-table__row">
  47             <th scope="col" class="connectors-table__column">Identifier</th>
  48             <th scope="col" class="connectors-table__column">Status</th>
  49             <th scope="col" class="connectors-table__column">Transaction</th>
  50             <th scope="col" class="connectors-table__column">ATG Started</th>
  51             <th scope="col" class="connectors-table__column">Actions</th>
  52           </tr>
  53         </thead>
  54         <tbody id="connectors-table__body">
  55           <!-- eslint-disable-next-line vue/valid-v-for -->
  56           <CSConnector
  57             v-for="(connector, index) in getConnectorStatuses()"
  58             :hash-id="props.chargingStation.stationInfo.hashId"
  59             :charging-station-id="props.chargingStation.stationInfo.chargingStationId"
  60             :connector-id="index + 1"
  61             :connector="connector"
  62             :atg-status="getATGStatus(index + 1)"
  63           />
  64         </tbody>
  65       </table>
  66     </td>
  67   </tr>
  68 </template>
  69
  70 <script setup lang="ts">
  71 import { getCurrentInstance } from 'vue'
  72 import { useToast } from 'vue-toast-notification'
  73 import CSConnector from '@/components/charging-stations/CSConnector.vue'
  74 import Button from '@/components/buttons/Button.vue'
  75 import type { ChargingStationData, ConnectorStatus, Status } from '@/types'
  76
  77 const props = defineProps<{
  78   chargingStation: ChargingStationData
  79 }>()
  80
  81 const getConnectorStatuses = (): ConnectorStatus[] => {
  82   if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
  83     const connectorStatuses: ConnectorStatus[] = []
  84     for (const [evseId, evseStatus] of props.chargingStation.evses.entries()) {
  85       if (evseId > 0 && Array.isArray(evseStatus.connectors) && evseStatus.connectors.length > 0) {
  86         for (const connectorStatus of evseStatus.connectors) {
  87           connectorStatuses.push(connectorStatus)
  88         }
  89       }
  90     }
  91     return connectorStatuses
  92   }
  93   return props.chargingStation.connectors?.slice(1)
  94 }
  95 const getATGStatus = (connectorId: number): Status | undefined => {
  96   return props.chargingStation.automaticTransactionGenerator
  97     ?.automaticTransactionGeneratorStatuses?.[connectorId - 1]
  98 }
  99 const getSupervisionUrl = (): string => {
 100   const supervisionUrl = new URL(props.chargingStation.supervisionUrl)
 101   return `${supervisionUrl.protocol}//${supervisionUrl.host.split('.').join('.\u200b')}`
 102 }
 103 const getWSState = (): string => {
 104   switch (props.chargingStation?.wsState) {
 105     case WebSocket.CONNECTING:
 106       return 'Connecting'
 107     case WebSocket.OPEN:
 108       return 'Open'
 109     case WebSocket.CLOSING:
 110       return 'Closing'
 111     case WebSocket.CLOSED:
 112       return 'Closed'
 113     default:
 114       return 'Ø'
 115   }
 116 }
 117
 118 const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
 119
 120 const $toast = useToast()
 121
 122 const startChargingStation = (): void => {
 123   uiClient
 124     .startChargingStation(props.chargingStation.stationInfo.hashId)
 125     .then(() => {
 126       $toast.success('Charging station successfully started')
 127     })
 128     .catch((error: Error) => {
 129       $toast.error('Error at starting charging station')
 130       console.error('Error at starting charging station', error)
 131     })
 132 }
 133 const stopChargingStation = (): void => {
 134   uiClient
 135     .stopChargingStation(props.chargingStation.stationInfo.hashId)
 136     .then(() => {
 137       $toast.success('Charging station successfully stopped')
 138     })
 139     .catch((error: Error) => {
 140       $toast.error('Error at stopping charging station')
 141       console.error('Error at stopping charging station', error)
 142     })
 143 }
 144 const openConnection = (): void => {
 145   uiClient
 146     .openConnection(props.chargingStation.stationInfo.hashId)
 147     .then(() => {
 148       $toast.success('Connection successfully opened')
 149     })
 150     .catch((error: Error) => {
 151       $toast.error('Error at opening connection')
 152       console.error('Error at opening connection', error)
 153     })
 154 }
 155 const closeConnection = (): void => {
 156   uiClient
 157     .closeConnection(props.chargingStation.stationInfo.hashId)
 158     .then(() => {
 159       $toast.success('Connection successfully closed')
 160     })
 161     .catch((error: Error) => {
 162       $toast.error('Error at closing connection')
 163       console.error('Error at closing connection', error)
 164     })
 165 }
 166 const deleteChargingStation = (): void => {
 167   uiClient
 168     .deleteChargingStation(props.chargingStation.stationInfo.hashId)
 169     .then(() => {
 170       $toast.success('Charging station successfully deleted')
 171     })
 172     .catch((error: Error) => {
 173       $toast.error('Error at deleting charging station')
 174       console.error('Error at deleting charging station', error)
 175     })
 176 }
 177 </script>
 178
 179 <style>
 180 #connectors-table {
 181   display: flex;
 182   flex-direction: column;
 183   background-color: white;
 184   overflow: auto hidden;
 185   border-collapse: collapse;
 186   empty-cells: show;
 187 }
 188
 189 #connectors-table__body {
 190   display: flex;
 191   flex-direction: column;
 192 }
 193
 194 .connectors-table__row {
 195   display: flex;
 196   flex-direction: row;
 197   justify-content: center;
 198   align-items: center;
 199   border: solid 0.25px black;
 200 }
 201
 202 .connectors-table__row:nth-of-type(even) {
 203   background-color: whitesmoke;
 204 }
 205
 206 #connectors-table__head .connectors-table__row {
 207   background-color: lightgrey;
 208 }
 209
 210 .connectors-table__column {
 211   width: calc(100% / 5);
 212   text-align: center;
 213 }
 214 </style>