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"> | |
69 | <!-- eslint-disable-next-line vue/valid-v-for --> | |
70 | <CSConnector | |
b221407f | 71 | v-for="(connector, index) in getConnectorStatuses()" |
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' |
9d76f5ec | 87 | import CSConnector from '@/components/charging-stations/CSConnector.vue' |
13c19b7b | 88 | import Button from '@/components/buttons/Button.vue' |
f1df3177 | 89 | import type { ChargingStationData, ConnectorStatus, Status } from '@/types' |
2610da71 | 90 | import ToggleButton from '@/components/buttons/ToggleButton.vue' |
39cd8fcb | 91 | import { useUIClient } from '@/composables' |
32de5a57 LM |
92 | |
93 | const props = defineProps<{ | |
66a7748d | 94 | chargingStation: ChargingStationData |
66a7748d | 95 | }>() |
32de5a57 | 96 | |
83468764 JB |
97 | const $emit = defineEmits(['need-refresh']) |
98 | ||
b221407f | 99 | const getConnectorStatuses = (): ConnectorStatus[] => { |
f1df3177 | 100 | if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) { |
a4baab63 | 101 | const connectorStatuses: ConnectorStatus[] = [] |
f1df3177 JB |
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) { | |
a4baab63 | 105 | connectorStatuses.push(connectorStatus) |
f1df3177 JB |
106 | } |
107 | } | |
108 | } | |
a4baab63 | 109 | return connectorStatuses |
f1df3177 JB |
110 | } |
111 | return props.chargingStation.connectors?.slice(1) | |
9dc8b66f | 112 | } |
fa5d129a | 113 | const getATGStatus = (connectorId: number): Status | undefined => { |
9dc8b66f JB |
114 | return props.chargingStation.automaticTransactionGenerator |
115 | ?.automaticTransactionGeneratorStatuses?.[connectorId - 1] | |
32de5a57 | 116 | } |
fa5d129a | 117 | const getSupervisionUrl = (): string => { |
1d41bc6b JB |
118 | const supervisionUrl = new URL(props.chargingStation.supervisionUrl) |
119 | return `${supervisionUrl.protocol}//${supervisionUrl.host.split('.').join('.\u200b')}` | |
120 | } | |
f292861c | 121 | const getWSState = (): string => { |
5e3cb728 JB |
122 | switch (props.chargingStation?.wsState) { |
123 | case WebSocket.CONNECTING: | |
66a7748d | 124 | return 'Connecting' |
5e3cb728 | 125 | case WebSocket.OPEN: |
66a7748d | 126 | return 'Open' |
5e3cb728 | 127 | case WebSocket.CLOSING: |
66a7748d | 128 | return 'Closing' |
5e3cb728 | 129 | case WebSocket.CLOSED: |
66a7748d | 130 | return 'Closed' |
5e3cb728 | 131 | default: |
66a7748d | 132 | return 'Ø' |
5e3cb728 JB |
133 | } |
134 | } | |
9dc8b66f | 135 | |
39cd8fcb | 136 | const uiClient = useUIClient() |
9dc8b66f | 137 | |
cea23fa0 JB |
138 | const $toast = useToast() |
139 | ||
fa5d129a | 140 | const startChargingStation = (): void => { |
cea23fa0 JB |
141 | uiClient |
142 | .startChargingStation(props.chargingStation.stationInfo.hashId) | |
143 | .then(() => { | |
144 | $toast.success('Charging station successfully started') | |
145 | }) | |
146 | .catch((error: Error) => { | |
147 | $toast.error('Error at starting charging station') | |
148 | console.error('Error at starting charging station', error) | |
149 | }) | |
9dc8b66f | 150 | } |
fa5d129a | 151 | const stopChargingStation = (): void => { |
cea23fa0 JB |
152 | uiClient |
153 | .stopChargingStation(props.chargingStation.stationInfo.hashId) | |
154 | .then(() => { | |
155 | $toast.success('Charging station successfully stopped') | |
156 | }) | |
157 | .catch((error: Error) => { | |
158 | $toast.error('Error at stopping charging station') | |
159 | console.error('Error at stopping charging station', error) | |
160 | }) | |
9dc8b66f | 161 | } |
fa5d129a | 162 | const openConnection = (): void => { |
cea23fa0 JB |
163 | uiClient |
164 | .openConnection(props.chargingStation.stationInfo.hashId) | |
165 | .then(() => { | |
166 | $toast.success('Connection successfully opened') | |
167 | }) | |
168 | .catch((error: Error) => { | |
169 | $toast.error('Error at opening connection') | |
170 | console.error('Error at opening connection', error) | |
171 | }) | |
9dc8b66f | 172 | } |
fa5d129a | 173 | const closeConnection = (): void => { |
cea23fa0 JB |
174 | uiClient |
175 | .closeConnection(props.chargingStation.stationInfo.hashId) | |
176 | .then(() => { | |
177 | $toast.success('Connection successfully closed') | |
178 | }) | |
179 | .catch((error: Error) => { | |
180 | $toast.error('Error at closing connection') | |
181 | console.error('Error at closing connection', error) | |
182 | }) | |
9dc8b66f | 183 | } |
fa5d129a | 184 | const deleteChargingStation = (): void => { |
cea23fa0 JB |
185 | uiClient |
186 | .deleteChargingStation(props.chargingStation.stationInfo.hashId) | |
187 | .then(() => { | |
188 | $toast.success('Charging station successfully deleted') | |
189 | }) | |
190 | .catch((error: Error) => { | |
191 | $toast.error('Error at deleting charging station') | |
192 | console.error('Error at deleting charging station', error) | |
193 | }) | |
a64b9a64 | 194 | } |
32de5a57 | 195 | </script> |
9dc8b66f JB |
196 | |
197 | <style> | |
198 | #connectors-table { | |
199 | display: flex; | |
9dc8b66f | 200 | flex-direction: column; |
b002bbab | 201 | background-color: white; |
9dc8b66f JB |
202 | overflow: auto hidden; |
203 | border-collapse: collapse; | |
204 | empty-cells: show; | |
205 | } | |
206 | ||
9dc8b66f JB |
207 | #connectors-table__body { |
208 | display: flex; | |
209 | flex-direction: column; | |
210 | } | |
211 | ||
212 | .connectors-table__row { | |
213 | display: flex; | |
b002bbab | 214 | flex-direction: row; |
9dc8b66f JB |
215 | justify-content: center; |
216 | align-items: center; | |
6dba76a5 | 217 | border: solid 0.25px black; |
9dc8b66f JB |
218 | } |
219 | ||
9dc8b66f JB |
220 | .connectors-table__row:nth-of-type(even) { |
221 | background-color: whitesmoke; | |
222 | } | |
223 | ||
b002bbab JB |
224 | #connectors-table__head .connectors-table__row { |
225 | background-color: lightgrey; | |
226 | } | |
227 | ||
9dc8b66f JB |
228 | .connectors-table__column { |
229 | width: calc(100% / 5); | |
3802683b JB |
230 | display: flex; |
231 | flex-direction: column; | |
9dc8b66f JB |
232 | text-align: center; |
233 | } | |
234 | </style> |