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

   1 <template>
   2   <tr class="cs-table__row">
   3     <td class="cs-table__column">{{ getId() }}</td>
   4     <td class="cs-table__column">{{ getStarted() }}</td>
   5     <td class="cs-table__column">
   6       {{ getSupervisionUrl() }}
   7     </td>
   8     <td class="cs-table__column">{{ getWsState() }}</td>
   9     <td class="cs-table__column">
  10       {{ getRegistrationStatus() }}
  11     </td>
  12     <td class="cs-table__column">
  13       {{ getInfo().templateName }}
  14     </td>
  15     <td class="cs-table__column">{{ getVendor() }}</td>
  16     <td class="cs-table__column">{{ getModel() }}</td>
  17     <td class="cs-table__column">
  18       {{ getFirmwareVersion() }}
  19     </td>
  20     <td class="cs-table__column">
  21       <Button @click="startChargingStation()">Start Charging Station</Button>
  22       <Button @click="stopChargingStation()">Stop Charging Station</Button>
  23       <Button @click="openConnection()">Open Connection</Button>
  24       <Button @click="closeConnection()">Close Connection</Button>
  25       <Button @click="deleteChargingStation()">Delete Charging Station</Button>
  26     </td>
  27     <td class="cs-table__connectors-column">
  28       <table id="connectors-table">
  29         <thead id="connectors-table__head">
  30           <tr class="connectors-table__row">
  31             <th scope="col" class="connectors-table__column">Identifier</th>
  32             <th scope="col" class="connectors-table__column">Status</th>
  33             <th scope="col" class="connectors-table__column">Transaction</th>
  34             <th scope="col" class="connectors-table__column">ATG Started</th>
  35             <th scope="col" class="connectors-table__column">Actions</th>
  36           </tr>
  37         </thead>
  38         <tbody id="connectors-table__body">
  39           <!-- eslint-disable-next-line vue/valid-v-for -->
  40           <CSConnector
  41             v-for="(connector, index) in getConnectors()"
  42             :hash-id="getHashId()"
  43             :connector-id="index + 1"
  44             :connector="connector"
  45             :atg-status="getATGStatus(index + 1)"
  46             :transaction-id="connector.transactionId"
  47             :id-tag="props.idTag"
  48           />
  49         </tbody>
  50       </table>
  51     </td>
  52   </tr>
  53 </template>
  54
  55 <script setup lang="ts">
  56 import { getCurrentInstance } from 'vue'
  57 import CSConnector from '@/components/charging-stations/CSConnector.vue'
  58 import type { ChargingStationData, ChargingStationInfo, ConnectorStatus, Status } from '@/types'
  59
  60 const props = defineProps<{
  61   chargingStation: ChargingStationData
  62   idTag: string
  63 }>()
  64
  65 function getStarted(): string {
  66   return props.chargingStation.started === true ? 'Yes' : 'No'
  67 }
  68 function getATGStatus(connectorId: number): Status | undefined {
  69   return props.chargingStation.automaticTransactionGenerator
  70     ?.automaticTransactionGeneratorStatuses?.[connectorId - 1]
  71 }
  72 function getInfo(): ChargingStationInfo {
  73   return props.chargingStation.stationInfo
  74 }
  75 function getHashId(): string {
  76   return getInfo().hashId
  77 }
  78 function getId(): string {
  79   return getInfo().chargingStationId ?? 'Ø'
  80 }
  81 function getModel(): string {
  82   return getInfo().chargePointModel
  83 }
  84 function getVendor(): string {
  85   return getInfo().chargePointVendor
  86 }
  87 function getFirmwareVersion(): string {
  88   return getInfo().firmwareVersion ?? 'Ø'
  89 }
  90 function getSupervisionUrl(): string {
  91   const supervisionUrl = new URL(props.chargingStation.supervisionUrl)
  92   return `${supervisionUrl.protocol}//${supervisionUrl.host.split('.').join('.\u200b')}`
  93 }
  94 function getWsState(): string {
  95   switch (props.chargingStation?.wsState) {
  96     case WebSocket.CONNECTING:
  97       return 'Connecting'
  98     case WebSocket.OPEN:
  99       return 'Open'
 100     case WebSocket.CLOSING:
 101       return 'Closing'
 102     case WebSocket.CLOSED:
 103       return 'Closed'
 104     default:
 105       return 'Ø'
 106   }
 107 }
 108 function getRegistrationStatus(): string {
 109   return props.chargingStation?.bootNotificationResponse?.status ?? 'Ø'
 110 }
 111 function getConnectors(): ConnectorStatus[] {
 112   if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
 113     const connectorsStatus: ConnectorStatus[] = []
 114     for (const [evseId, evseStatus] of props.chargingStation.evses.entries()) {
 115       if (evseId > 0 && Array.isArray(evseStatus.connectors) && evseStatus.connectors.length > 0) {
 116         for (const connectorStatus of evseStatus.connectors) {
 117           connectorsStatus.push(connectorStatus)
 118         }
 119       }
 120     }
 121     return connectorsStatus
 122   }
 123   return props.chargingStation.connectors?.slice(1)
 124 }
 125
 126 const UIClient = getCurrentInstance()?.appContext.config.globalProperties.$UIClient
 127
 128 function startChargingStation(): void {
 129   UIClient.startChargingStation(getHashId())
 130 }
 131 function stopChargingStation(): void {
 132   UIClient.stopChargingStation(getHashId())
 133 }
 134 function openConnection(): void {
 135   UIClient.openConnection(getHashId())
 136 }
 137 function closeConnection(): void {
 138   UIClient.closeConnection(getHashId())
 139 }
 140 function deleteChargingStation(): void {
 141   UIClient.deleteChargingStation(getHashId())
 142 }
 143 </script>
 144
 145 <style>
 146 #connectors-table {
 147   display: flex;
 148   flex-direction: column;
 149   background-color: white;
 150   overflow: auto hidden;
 151   border-collapse: collapse;
 152   empty-cells: show;
 153 }
 154
 155 #connectors-table__body {
 156   display: flex;
 157   flex-direction: column;
 158 }
 159
 160 .connectors-table__row {
 161   display: flex;
 162   flex-direction: row;
 163   justify-content: center;
 164   align-items: center;
 165 }
 166
 167 .connectors-table__row:nth-of-type(even) {
 168   background-color: whitesmoke;
 169 }
 170
 171 #connectors-table__head .connectors-table__row {
 172   background-color: lightgrey;
 173 }
 174
 175 .connectors-table__column {
 176   width: calc(100% / 5);
 177   text-align: center;
 178 }
 179 </style>