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