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

   1 <template>
   2   <tr v-for="(connector, index) in getConnectors()" class="cs-table__row">
   3     <CSConnector
   4       :hash-id="getHashId()"
   5       :connector="connector"
   6       :connector-id="index + 1"
   7       :transaction-id="connector.transactionId"
   8       :id-tag="props.idTag"
   9     />
  10     <td class="cs-table__column">{{ getId() }}</td>
  11     <td class="cs-table__column">{{ getStarted() }}</td>
  12     <td class="cs-table__column">{{ getSupervisionUrl() }}</td>
  13     <td class="cs-table__column">{{ getWsState() }}</td>
  14     <td class="cs-table__column">{{ getRegistrationStatus() }}</td>
  15     <td class="cs-table__column">{{ getInfo().templateName }}</td>
  16     <td class="cs-table__column">{{ getVendor() }}</td>
  17     <td class="cs-table__column">{{ getModel() }}</td>
  18     <td class="cs-table__column">{{ getFirmwareVersion() }}</td>
  19   </tr>
  20 </template>
  21
  22 <script setup lang="ts">
  23 // import { reactive } from 'vue'
  24 import CSConnector from './CSConnector.vue'
  25 import type { ChargingStationData, ChargingStationInfo, ConnectorStatus } from '@/types'
  26
  27 const props = defineProps<{
  28   chargingStation: ChargingStationData
  29   idTag: string
  30 }>()
  31
  32 // type State = {
  33 //   isTagModalVisible: boolean
  34 //   idTag: string
  35 // }
  36
  37 // const state: State = reactive({
  38 //   isTagModalVisible: false,
  39 //   idTag: ''
  40 // })
  41
  42 function getConnectors(): ConnectorStatus[] {
  43   if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
  44     const connectorsStatus: ConnectorStatus[] = []
  45     for (const [evseId, evseStatus] of props.chargingStation.evses.entries()) {
  46       if (evseId > 0 && Array.isArray(evseStatus.connectors) && evseStatus.connectors.length > 0) {
  47         for (const connectorStatus of evseStatus.connectors) {
  48           connectorsStatus.push(connectorStatus)
  49         }
  50       }
  51     }
  52     return connectorsStatus
  53   }
  54   return props.chargingStation.connectors?.slice(1)
  55 }
  56 function getInfo(): ChargingStationInfo {
  57   return props.chargingStation.stationInfo
  58 }
  59 function getHashId(): string {
  60   return getInfo().hashId
  61 }
  62 function getId(): string {
  63   return getInfo().chargingStationId ?? 'Ø'
  64 }
  65 function getModel(): string {
  66   return getInfo().chargePointModel
  67 }
  68 function getVendor(): string {
  69   return getInfo().chargePointVendor
  70 }
  71 function getFirmwareVersion(): string {
  72   return getInfo().firmwareVersion ?? 'Ø'
  73 }
  74 function getStarted(): string {
  75   return props.chargingStation.started === true ? 'Yes' : 'No'
  76 }
  77 function getSupervisionUrl(): string {
  78   const supervisionUrl = new URL(props.chargingStation.supervisionUrl)
  79   return `${supervisionUrl.protocol}//${supervisionUrl.host.split('.').join('.\u200b')}`
  80 }
  81 function getWsState(): string {
  82   switch (props.chargingStation?.wsState) {
  83     case WebSocket.CONNECTING:
  84       return 'Connecting'
  85     case WebSocket.OPEN:
  86       return 'Open'
  87     case WebSocket.CLOSING:
  88       return 'Closing'
  89     case WebSocket.CLOSED:
  90       return 'Closed'
  91     default:
  92       return 'Ø'
  93   }
  94 }
  95 function getRegistrationStatus(): string {
  96   return props.chargingStation?.bootNotificationResponse?.status ?? 'Ø'
  97 }
  98 // function showTagModal(): void {
  99 //   state.isTagModalVisible = true
 100 // }
 101 // function hideTagModal(): void {
 102 //   state.isTagModalVisible = false
 103 // }
 104 </script>