2 <tr class="cs-table__row">
3 <td class="cs-table__column">
4 {{ chargingStation.stationInfo.chargingStationId }}
6 <td class="cs-table__column">{{ 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 {{ chargingStation?.bootNotificationResponse?.status ?? 'Ø' }}
14 <td class="cs-table__column">
15 {{ chargingStation.stationInfo.templateName }}
17 <td class="cs-table__column">{{ chargingStation.stationInfo.chargePointVendor }}</td>
18 <td class="cs-table__column">{{ chargingStation.stationInfo.chargePointModel }}</td>
19 <td class="cs-table__column">
20 {{ 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>
26 :id="`${chargingStation.stationInfo.hashId}-set-supervision-url`"
31 name: 'set-supervision-url',
33 hashId: chargingStation.stationInfo.hashId,
34 chargingStationId: chargingStation.stationInfo.chargingStationId
41 $router.push({ name: 'charging-stations' })
52 <Button @click="openConnection()">Open Connection</Button>
53 <Button @click="closeConnection()">Close Connection</Button>
54 <Button @click="deleteChargingStation()">Delete Charging Station</Button>
56 <td class="cs-table__connectors-column">
57 <table id="connectors-table">
59 <thead id="connectors-table__head">
60 <tr class="connectors-table__row">
61 <th scope="col" class="connectors-table__column">Identifier</th>
62 <th scope="col" class="connectors-table__column">Status</th>
63 <th scope="col" class="connectors-table__column">Transaction</th>
64 <th scope="col" class="connectors-table__column">ATG Started</th>
65 <th scope="col" class="connectors-table__column">Actions</th>
68 <tbody id="connectors-table__body">
69 <!-- eslint-disable-next-line vue/valid-v-for -->
71 v-for="(connector, index) in getConnectorStatuses()"
72 :hash-id="chargingStation.stationInfo.hashId"
73 :charging-station-id="chargingStation.stationInfo.chargingStationId"
74 :connector-id="index + 1"
75 :connector="connector"
76 :atg-status="getATGStatus(index + 1)"
77 @need-refresh="$emit('need-refresh')"
85 <script setup lang="ts">
86 import { getCurrentInstance } from 'vue'
87 import { useToast } from 'vue-toast-notification'
88 import CSConnector from '@/components/charging-stations/CSConnector.vue'
89 import Button from '@/components/buttons/Button.vue'
90 import type { ChargingStationData, ConnectorStatus, Status } from '@/types'
91 import ToggleButton from '@/components/buttons/ToggleButton.vue'
93 const props = defineProps<{
94 chargingStation: ChargingStationData
97 const $emit = defineEmits(['need-refresh'])
99 const getConnectorStatuses = (): ConnectorStatus[] => {
100 if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
101 const connectorStatuses: ConnectorStatus[] = []
102 for (const [evseId, evseStatus] of props.chargingStation.evses.entries()) {
103 if (evseId > 0 && Array.isArray(evseStatus.connectors) && evseStatus.connectors.length > 0) {
104 for (const connectorStatus of evseStatus.connectors) {
105 connectorStatuses.push(connectorStatus)
109 return connectorStatuses
111 return props.chargingStation.connectors?.slice(1)
113 const getATGStatus = (connectorId: number): Status | undefined => {
114 return props.chargingStation.automaticTransactionGenerator
115 ?.automaticTransactionGeneratorStatuses?.[connectorId - 1]
117 const getSupervisionUrl = (): string => {
118 const supervisionUrl = new URL(props.chargingStation.supervisionUrl)
119 return `${supervisionUrl.protocol}//${supervisionUrl.host.split('.').join('.\u200b')}`
121 const getWSState = (): string => {
122 switch (props.chargingStation?.wsState) {
123 case WebSocket.CONNECTING:
127 case WebSocket.CLOSING:
129 case WebSocket.CLOSED:
136 const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
138 const $toast = useToast()
140 const startChargingStation = (): void => {
142 .startChargingStation(props.chargingStation.stationInfo.hashId)
144 $toast.success('Charging station successfully started')
146 .catch((error: Error) => {
147 $toast.error('Error at starting charging station')
148 console.error('Error at starting charging station', error)
151 const stopChargingStation = (): void => {
153 .stopChargingStation(props.chargingStation.stationInfo.hashId)
155 $toast.success('Charging station successfully stopped')
157 .catch((error: Error) => {
158 $toast.error('Error at stopping charging station')
159 console.error('Error at stopping charging station', error)
162 const openConnection = (): void => {
164 .openConnection(props.chargingStation.stationInfo.hashId)
166 $toast.success('Connection successfully opened')
168 .catch((error: Error) => {
169 $toast.error('Error at opening connection')
170 console.error('Error at opening connection', error)
173 const closeConnection = (): void => {
175 .closeConnection(props.chargingStation.stationInfo.hashId)
177 $toast.success('Connection successfully closed')
179 .catch((error: Error) => {
180 $toast.error('Error at closing connection')
181 console.error('Error at closing connection', error)
184 const deleteChargingStation = (): void => {
186 .deleteChargingStation(props.chargingStation.stationInfo.hashId)
188 $toast.success('Charging station successfully deleted')
190 .catch((error: Error) => {
191 $toast.error('Error at deleting charging station')
192 console.error('Error at deleting charging station', error)
200 flex-direction: column;
201 background-color: white;
202 overflow: auto hidden;
203 border-collapse: collapse;
207 #connectors-table__body {
209 flex-direction: column;
212 .connectors-table__row {
215 justify-content: center;
217 border: solid 0.25px black;
220 .connectors-table__row:nth-of-type(even) {
221 background-color: whitesmoke;
224 #connectors-table__head .connectors-table__row {
225 background-color: lightgrey;
228 .connectors-table__column {
229 width: calc(100% / 5);