Commit | Line | Data |
---|---|---|
32de5a57 | 1 | <template> |
9dc8b66f | 2 | <tr class="cs-table__row"> |
f1df3177 | 3 | <td class="cs-table__column"> |
2610da71 | 4 | {{ chargingStation.stationInfo.chargingStationId }} |
f1df3177 | 5 | </td> |
2610da71 | 6 | <td class="cs-table__column">{{ chargingStation.started === true ? 'Yes' : 'No' }}</td> |
9dc8b66f JB |
7 | <td class="cs-table__column"> |
8 | {{ getSupervisionUrl() }} | |
9 | </td> | |
f292861c | 10 | <td class="cs-table__column">{{ getWSState() }}</td> |
9dc8b66f | 11 | <td class="cs-table__column"> |
ec7366ed | 12 | {{ chargingStation.bootNotificationResponse?.status ?? 'Ø' }} |
9dc8b66f JB |
13 | </td> |
14 | <td class="cs-table__column"> | |
2610da71 | 15 | {{ chargingStation.stationInfo.templateName }} |
9dc8b66f | 16 | </td> |
2610da71 JB |
17 | <td class="cs-table__column">{{ chargingStation.stationInfo.chargePointVendor }}</td> |
18 | <td class="cs-table__column">{{ chargingStation.stationInfo.chargePointModel }}</td> | |
9dc8b66f | 19 | <td class="cs-table__column"> |
2610da71 | 20 | {{ chargingStation.stationInfo.firmwareVersion ?? 'Ø' }} |
9dc8b66f JB |
21 | </td> |
22 | <td class="cs-table__column"> | |
23 | <Button @click="startChargingStation()">Start Charging Station</Button> | |
24 | <Button @click="stopChargingStation()">Stop Charging Station</Button> | |
2610da71 JB |
25 | <ToggleButton |
26 | :id="`${chargingStation.stationInfo.hashId}-set-supervision-url`" | |
27 | :shared="true" | |
28 | :on=" | |
29 | () => { | |
30 | $router.push({ | |
31 | name: 'set-supervision-url', | |
32 | params: { | |
33 | hashId: chargingStation.stationInfo.hashId, | |
34 | chargingStationId: chargingStation.stationInfo.chargingStationId | |
35 | } | |
36 | }) | |
37 | } | |
38 | " | |
39 | :off=" | |
40 | () => { | |
41 | $router.push({ name: 'charging-stations' }) | |
42 | } | |
f8696170 | 43 | " |
83468764 JB |
44 | @clicked=" |
45 | () => { | |
46 | $emit('need-refresh') | |
47 | } | |
48 | " | |
f8696170 | 49 | > |
1eb5f592 | 50 | Set Supervision Url |
2610da71 | 51 | </ToggleButton> |
9dc8b66f JB |
52 | <Button @click="openConnection()">Open Connection</Button> |
53 | <Button @click="closeConnection()">Close Connection</Button> | |
a64b9a64 | 54 | <Button @click="deleteChargingStation()">Delete Charging Station</Button> |
9dc8b66f JB |
55 | </td> |
56 | <td class="cs-table__connectors-column"> | |
57 | <table id="connectors-table"> | |
7e2e8c9b | 58 | <caption></caption> |
9dc8b66f JB |
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> | |
66 | </tr> | |
67 | </thead> | |
68 | <tbody id="connectors-table__body"> | |
9dc8b66f | 69 | <CSConnector |
b221407f | 70 | v-for="(connector, index) in getConnectorStatuses()" |
84ec8d34 | 71 | :key="index + 1" |
2610da71 JB |
72 | :hash-id="chargingStation.stationInfo.hashId" |
73 | :charging-station-id="chargingStation.stationInfo.chargingStationId" | |
9dc8b66f JB |
74 | :connector-id="index + 1" |
75 | :connector="connector" | |
76 | :atg-status="getATGStatus(index + 1)" | |
83468764 | 77 | @need-refresh="$emit('need-refresh')" |
9dc8b66f JB |
78 | /> |
79 | </tbody> | |
80 | </table> | |
81 | </td> | |
32de5a57 LM |
82 | </tr> |
83 | </template> | |
84 | ||
85 | <script setup lang="ts"> | |
cea23fa0 | 86 | import { useToast } from 'vue-toast-notification' |
84ec8d34 | 87 | |
13c19b7b | 88 | import Button from '@/components/buttons/Button.vue' |
2610da71 | 89 | import ToggleButton from '@/components/buttons/ToggleButton.vue' |
84ec8d34 | 90 | import CSConnector from '@/components/charging-stations/CSConnector.vue' |
39cd8fcb | 91 | import { useUIClient } from '@/composables' |
84ec8d34 | 92 | import type { ChargingStationData, ConnectorStatus, Status } from '@/types' |
32de5a57 LM |
93 | |
94 | const props = defineProps<{ | |
66a7748d | 95 | chargingStation: ChargingStationData |
66a7748d | 96 | }>() |
32de5a57 | 97 | |
83468764 JB |
98 | const $emit = defineEmits(['need-refresh']) |
99 | ||
b221407f | 100 | const getConnectorStatuses = (): ConnectorStatus[] => { |
f1df3177 | 101 | if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) { |
a4baab63 | 102 | const connectorStatuses: ConnectorStatus[] = [] |
f1df3177 JB |
103 | for (const [evseId, evseStatus] of props.chargingStation.evses.entries()) { |
104 | if (evseId > 0 && Array.isArray(evseStatus.connectors) && evseStatus.connectors.length > 0) { | |
105 | for (const connectorStatus of evseStatus.connectors) { | |
a4baab63 | 106 | connectorStatuses.push(connectorStatus) |
f1df3177 JB |
107 | } |
108 | } | |
109 | } | |
a4baab63 | 110 | return connectorStatuses |
f1df3177 JB |
111 | } |
112 | return props.chargingStation.connectors?.slice(1) | |
9dc8b66f | 113 | } |
fa5d129a | 114 | const getATGStatus = (connectorId: number): Status | undefined => { |
9dc8b66f JB |
115 | return props.chargingStation.automaticTransactionGenerator |
116 | ?.automaticTransactionGeneratorStatuses?.[connectorId - 1] | |
32de5a57 | 117 | } |
fa5d129a | 118 | const getSupervisionUrl = (): string => { |
1d41bc6b JB |
119 | const supervisionUrl = new URL(props.chargingStation.supervisionUrl) |
120 | return `${supervisionUrl.protocol}//${supervisionUrl.host.split('.').join('.\u200b')}` | |
121 | } | |
f292861c | 122 | const getWSState = (): string => { |
5e3cb728 JB |
123 | switch (props.chargingStation?.wsState) { |
124 | case WebSocket.CONNECTING: | |
66a7748d | 125 | return 'Connecting' |
5e3cb728 | 126 | case WebSocket.OPEN: |
66a7748d | 127 | return 'Open' |
5e3cb728 | 128 | case WebSocket.CLOSING: |
66a7748d | 129 | return 'Closing' |
5e3cb728 | 130 | case WebSocket.CLOSED: |
66a7748d | 131 | return 'Closed' |
5e3cb728 | 132 | default: |
66a7748d | 133 | return 'Ø' |
5e3cb728 JB |
134 | } |
135 | } | |
9dc8b66f | 136 | |
39cd8fcb | 137 | const uiClient = useUIClient() |
9dc8b66f | 138 | |
cea23fa0 JB |
139 | const $toast = useToast() |
140 | ||
fa5d129a | 141 | const startChargingStation = (): void => { |
cea23fa0 JB |
142 | uiClient |
143 | .startChargingStation(props.chargingStation.stationInfo.hashId) | |
144 | .then(() => { | |
145 | $toast.success('Charging station successfully started') | |
146 | }) | |
147 | .catch((error: Error) => { | |
148 | $toast.error('Error at starting charging station') | |
08b55289 | 149 | console.error('Error at starting charging station:', error) |
cea23fa0 | 150 | }) |
9dc8b66f | 151 | } |
fa5d129a | 152 | const stopChargingStation = (): void => { |
cea23fa0 JB |
153 | uiClient |
154 | .stopChargingStation(props.chargingStation.stationInfo.hashId) | |
155 | .then(() => { | |
156 | $toast.success('Charging station successfully stopped') | |
157 | }) | |
158 | .catch((error: Error) => { | |
159 | $toast.error('Error at stopping charging station') | |
08b55289 | 160 | console.error('Error at stopping charging station:', error) |
cea23fa0 | 161 | }) |
9dc8b66f | 162 | } |
fa5d129a | 163 | const openConnection = (): void => { |
cea23fa0 JB |
164 | uiClient |
165 | .openConnection(props.chargingStation.stationInfo.hashId) | |
166 | .then(() => { | |
167 | $toast.success('Connection successfully opened') | |
168 | }) | |
169 | .catch((error: Error) => { | |
170 | $toast.error('Error at opening connection') | |
08b55289 | 171 | console.error('Error at opening connection:', error) |
cea23fa0 | 172 | }) |
9dc8b66f | 173 | } |
fa5d129a | 174 | const closeConnection = (): void => { |
cea23fa0 JB |
175 | uiClient |
176 | .closeConnection(props.chargingStation.stationInfo.hashId) | |
177 | .then(() => { | |
178 | $toast.success('Connection successfully closed') | |
179 | }) | |
180 | .catch((error: Error) => { | |
181 | $toast.error('Error at closing connection') | |
08b55289 | 182 | console.error('Error at closing connection:', error) |
cea23fa0 | 183 | }) |
9dc8b66f | 184 | } |
fa5d129a | 185 | const deleteChargingStation = (): void => { |
cea23fa0 JB |
186 | uiClient |
187 | .deleteChargingStation(props.chargingStation.stationInfo.hashId) | |
188 | .then(() => { | |
189 | $toast.success('Charging station successfully deleted') | |
190 | }) | |
191 | .catch((error: Error) => { | |
192 | $toast.error('Error at deleting charging station') | |
08b55289 | 193 | console.error('Error at deleting charging station:', error) |
cea23fa0 | 194 | }) |
a64b9a64 | 195 | } |
32de5a57 | 196 | </script> |
9dc8b66f JB |
197 | |
198 | <style> | |
199 | #connectors-table { | |
200 | display: flex; | |
9dc8b66f | 201 | flex-direction: column; |
b002bbab | 202 | background-color: white; |
9dc8b66f JB |
203 | overflow: auto hidden; |
204 | border-collapse: collapse; | |
205 | empty-cells: show; | |
206 | } | |
207 | ||
9dc8b66f JB |
208 | #connectors-table__body { |
209 | display: flex; | |
210 | flex-direction: column; | |
211 | } | |
212 | ||
213 | .connectors-table__row { | |
214 | display: flex; | |
b002bbab | 215 | flex-direction: row; |
9dc8b66f JB |
216 | justify-content: center; |
217 | align-items: center; | |
6dba76a5 | 218 | border: solid 0.25px black; |
9dc8b66f JB |
219 | } |
220 | ||
9dc8b66f JB |
221 | .connectors-table__row:nth-of-type(even) { |
222 | background-color: whitesmoke; | |
223 | } | |
224 | ||
b002bbab JB |
225 | #connectors-table__head .connectors-table__row { |
226 | background-color: lightgrey; | |
227 | } | |
228 | ||
9dc8b66f JB |
229 | .connectors-table__column { |
230 | width: calc(100% / 5); | |
3802683b JB |
231 | display: flex; |
232 | flex-direction: column; | |
9dc8b66f JB |
233 | text-align: center; |
234 | } | |
235 | </style> |