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