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