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