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>
28 name: 'set-supervision-url',
30 hashId: props.chargingStation.stationInfo.hashId,
31 chargingStationId: props.chargingStation.stationInfo.chargingStationId
38 <Button @click="openConnection()">Open Connection</Button>
39 <Button @click="closeConnection()">Close Connection</Button>
40 <Button @click="deleteChargingStation()">Delete Charging Station</Button>
42 <td class="cs-table__connectors-column">
43 <table id="connectors-table">
45 <thead id="connectors-table__head">
46 <tr class="connectors-table__row">
47 <th scope="col" class="connectors-table__column">Identifier</th>
48 <th scope="col" class="connectors-table__column">Status</th>
49 <th scope="col" class="connectors-table__column">Transaction</th>
50 <th scope="col" class="connectors-table__column">ATG Started</th>
51 <th scope="col" class="connectors-table__column">Actions</th>
54 <tbody id="connectors-table__body">
55 <!-- eslint-disable-next-line vue/valid-v-for -->
57 v-for="(connector, index) in getConnectorStatuses()"
58 :hash-id="props.chargingStation.stationInfo.hashId"
59 :charging-station-id="props.chargingStation.stationInfo.chargingStationId"
60 :connector-id="index + 1"
61 :connector="connector"
62 :atg-status="getATGStatus(index + 1)"
70 <script setup lang="ts">
71 import { getCurrentInstance } from 'vue'
72 import { useToast } from 'vue-toast-notification'
73 import CSConnector from '@/components/charging-stations/CSConnector.vue'
74 import Button from '@/components/buttons/Button.vue'
75 import type { ChargingStationData, ConnectorStatus, Status } from '@/types'
77 const props = defineProps<{
78 chargingStation: ChargingStationData
81 const getConnectorStatuses = (): ConnectorStatus[] => {
82 if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
83 const connectorStatuses: ConnectorStatus[] = []
84 for (const [evseId, evseStatus] of props.chargingStation.evses.entries()) {
85 if (evseId > 0 && Array.isArray(evseStatus.connectors) && evseStatus.connectors.length > 0) {
86 for (const connectorStatus of evseStatus.connectors) {
87 connectorStatuses.push(connectorStatus)
91 return connectorStatuses
93 return props.chargingStation.connectors?.slice(1)
95 const getATGStatus = (connectorId: number): Status | undefined => {
96 return props.chargingStation.automaticTransactionGenerator
97 ?.automaticTransactionGeneratorStatuses?.[connectorId - 1]
99 const getSupervisionUrl = (): string => {
100 const supervisionUrl = new URL(props.chargingStation.supervisionUrl)
101 return `${supervisionUrl.protocol}//${supervisionUrl.host.split('.').join('.\u200b')}`
103 const getWSState = (): string => {
104 switch (props.chargingStation?.wsState) {
105 case WebSocket.CONNECTING:
109 case WebSocket.CLOSING:
111 case WebSocket.CLOSED:
118 const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
120 const $toast = useToast()
122 const startChargingStation = (): void => {
124 .startChargingStation(props.chargingStation.stationInfo.hashId)
126 $toast.success('Charging station successfully started')
128 .catch((error: Error) => {
129 $toast.error('Error at starting charging station')
130 console.error('Error at starting charging station', error)
133 const stopChargingStation = (): void => {
135 .stopChargingStation(props.chargingStation.stationInfo.hashId)
137 $toast.success('Charging station successfully stopped')
139 .catch((error: Error) => {
140 $toast.error('Error at stopping charging station')
141 console.error('Error at stopping charging station', error)
144 const openConnection = (): void => {
146 .openConnection(props.chargingStation.stationInfo.hashId)
148 $toast.success('Connection successfully opened')
150 .catch((error: Error) => {
151 $toast.error('Error at opening connection')
152 console.error('Error at opening connection', error)
155 const closeConnection = (): void => {
157 .closeConnection(props.chargingStation.stationInfo.hashId)
159 $toast.success('Connection successfully closed')
161 .catch((error: Error) => {
162 $toast.error('Error at closing connection')
163 console.error('Error at closing connection', error)
166 const deleteChargingStation = (): void => {
168 .deleteChargingStation(props.chargingStation.stationInfo.hashId)
170 $toast.success('Charging station successfully deleted')
172 .catch((error: Error) => {
173 $toast.error('Error at deleting charging station')
174 console.error('Error at deleting charging station', error)
182 flex-direction: column;
183 background-color: white;
184 overflow: auto hidden;
185 border-collapse: collapse;
189 #connectors-table__body {
191 flex-direction: column;
194 .connectors-table__row {
197 justify-content: center;
199 border: solid 0.25px black;
202 .connectors-table__row:nth-of-type(even) {
203 background-color: whitesmoke;
206 #connectors-table__head .connectors-table__row {
207 background-color: lightgrey;
210 .connectors-table__column {
211 width: calc(100% / 5);