2 <tr class="cs-table__row">
3 <td class="cs-table__column">
4 {{ props.chargingStation.stationInfo.chargingStationId }}
6 <td class="cs-table__column">{{ props.chargingStation.started === true ? 'Yes' : 'No' }}</td>
7 <td class="cs-table__column">
8 {{ getSupervisionUrl() }}
10 <td class="cs-table__column">{{ getWsState() }}</td>
11 <td class="cs-table__column">
12 {{ props.chargingStation?.bootNotificationResponse?.status ?? 'Ø' }}
14 <td class="cs-table__column">
15 {{ props.chargingStation.stationInfo.templateName }}
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 ?? 'Ø' }}
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>
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>
40 <tbody id="connectors-table__body">
41 <!-- eslint-disable-next-line vue/valid-v-for -->
43 v-for="(connector, index) in getConnectors()"
44 :hash-id="props.chargingStation.stationInfo.hashId"
45 :charging-station-id="props.chargingStation.stationInfo.chargingStationId"
46 :connector-id="index + 1"
47 :connector="connector"
48 :atg-status="getATGStatus(index + 1)"
56 <script setup lang="ts">
57 import { getCurrentInstance } from 'vue'
58 import CSConnector from '@/components/charging-stations/CSConnector.vue'
59 import Button from '@/components/buttons/Button.vue'
60 import type { ChargingStationData, ConnectorStatus, Status } from '@/types'
62 const props = defineProps<{
63 chargingStation: ChargingStationData
66 function getConnectors(): ConnectorStatus[] {
67 if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
68 const connectorsStatus: ConnectorStatus[] = []
69 for (const [evseId, evseStatus] of props.chargingStation.evses.entries()) {
70 if (evseId > 0 && Array.isArray(evseStatus.connectors) && evseStatus.connectors.length > 0) {
71 for (const connectorStatus of evseStatus.connectors) {
72 connectorsStatus.push(connectorStatus)
76 return connectorsStatus
78 return props.chargingStation.connectors?.slice(1)
80 function getATGStatus(connectorId: number): Status | undefined {
81 return props.chargingStation.automaticTransactionGenerator
82 ?.automaticTransactionGeneratorStatuses?.[connectorId - 1]
84 function getSupervisionUrl(): string {
85 const supervisionUrl = new URL(props.chargingStation.supervisionUrl)
86 return `${supervisionUrl.protocol}//${supervisionUrl.host.split('.').join('.\u200b')}`
88 function getWsState(): string {
89 switch (props.chargingStation?.wsState) {
90 case WebSocket.CONNECTING:
94 case WebSocket.CLOSING:
96 case WebSocket.CLOSED:
103 const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
105 function startChargingStation(): void {
106 uiClient.startChargingStation(props.chargingStation.stationInfo.hashId)
108 function stopChargingStation(): void {
109 uiClient.stopChargingStation(props.chargingStation.stationInfo.hashId)
111 function openConnection(): void {
112 uiClient.openConnection(props.chargingStation.stationInfo.hashId)
114 function closeConnection(): void {
115 uiClient.closeConnection(props.chargingStation.stationInfo.hashId)
117 function deleteChargingStation(): void {
118 uiClient.deleteChargingStation(props.chargingStation.stationInfo.hashId)
125 flex-direction: column;
126 background-color: white;
127 overflow: auto hidden;
128 border-collapse: collapse;
132 #connectors-table__body {
134 flex-direction: column;
137 .connectors-table__row {
140 justify-content: center;
144 .connectors-table__row:nth-of-type(even) {
145 background-color: whitesmoke;
148 #connectors-table__head .connectors-table__row {
149 background-color: lightgrey;
152 .connectors-table__column {
153 width: calc(100% / 5);