Skip to content

Commit 2b1db3b

Browse files
jerome-benoitjerome-benoit
committed
refactor(ui/web): remove redundant connector status column from classic skin
The connector status is now accessible via the Set Status dropdown in the Actions column, making the dedicated read-only Status column redundant. Move status/error-code selects to the top of Actions and style them to fill the column width consistently with buttons.
1 parent 550e294 commit 2b1db3b

3 files changed

Lines changed: 51 additions & 63 deletions

File tree

‎ui/web/src/skins/classic/components/charging-stations/CSConnector.vue‎

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,6 @@
33
<td>
44
{{ evseId != null ? `${evseId}/${connectorId}` : connectorId }}
55
</td>
6-
<td>
7-
{{ connector.status ?? EMPTY_VALUE_PLACEHOLDER }}
8-
</td>
96
<td>
107
{{ connector.locked === true ? 'Yes' : 'No' }}
118
</td>
@@ -16,6 +13,35 @@
1613
{{ atgStatus?.start === true ? 'Yes' : 'No' }}
1714
</td>
1815
<td>
16+
<select
17+
v-model="selectedStatus"
18+
class="connector-action-select"
19+
:aria-label="`Set status for connector ${connectorId}`"
20+
@change="applyConnectorStatus"
21+
>
22+
<option
23+
v-for="s in statusOptions"
24+
:key="s"
25+
:value="s"
26+
>
27+
{{ s }}
28+
</option>
29+
</select>
30+
<select
31+
v-if="!isOCPP20x(ocppVersion)"
32+
v-model="selectedErrorCode"
33+
class="connector-action-select"
34+
:aria-label="`Set error code for connector ${connectorId}`"
35+
@change="applyConnectorStatus"
36+
>
37+
<option
38+
v-for="e in errorCodeOptions"
39+
:key="e"
40+
:value="e"
41+
>
42+
{{ e }}
43+
</option>
44+
</select>
1945
<StateButton
2046
:active="connector.locked === true"
2147
:off="() => unlockConnector()"
@@ -61,35 +87,6 @@
6187
:on="() => startAutomaticTransactionGenerator()"
6288
on-label="Start ATG"
6389
/>
64-
<select
65-
v-model="selectedStatus"
66-
class="connector-status-select"
67-
:aria-label="`Set status for connector ${connectorId}`"
68-
@change="applyConnectorStatus"
69-
>
70-
<option
71-
v-for="s in statusOptions"
72-
:key="s"
73-
:value="s"
74-
>
75-
{{ s }}
76-
</option>
77-
</select>
78-
<select
79-
v-if="!isOCPP20x(ocppVersion)"
80-
v-model="selectedErrorCode"
81-
class="connector-status-select"
82-
:aria-label="`Set error code for connector ${connectorId}`"
83-
@change="applyConnectorStatus"
84-
>
85-
<option
86-
v-for="e in errorCodeOptions"
87-
:key="e"
88-
:value="e"
89-
>
90-
{{ e }}
91-
</option>
92-
</select>
9390
</td>
9491
</tr>
9592
</template>
@@ -106,7 +103,7 @@ import {
106103
import { computed, ref, watch } from 'vue'
107104
import { useRouter } from 'vue-router'
108105
109-
import { EMPTY_VALUE_PLACEHOLDER, ROUTE_NAMES } from '@/core/index.js'
106+
import { ROUTE_NAMES } from '@/core/index.js'
110107
import { useConnectorActions } from '@/shared/composables/useConnectorActions.js'
111108
112109
import Button from '../buttons/ClassicButton.vue'
@@ -174,3 +171,13 @@ const applyConnectorStatus = (): void => {
174171
setConnectorStatus(selectedStatus.value, undefined, errorCode)
175172
}
176173
</script>
174+
175+
<style scoped>
176+
.connector-action-select {
177+
display: block;
178+
width: 100%;
179+
text-align: center;
180+
font-size: var(--font-size-sm);
181+
cursor: pointer;
182+
}
183+
</style>

‎ui/web/src/skins/classic/components/charging-stations/CSData.vue‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,6 @@
7979
<th scope="col">
8080
Identifier
8181
</th>
82-
<th scope="col">
83-
Status
84-
</th>
8582
<th scope="col">
8683
Locked
8784
</th>

‎ui/web/tests/unit/skins/classic/CSConnector.test.ts‎

Lines changed: 11 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -110,64 +110,48 @@ describe('CSConnector', () => {
110110
expect(cells[0].text()).toBe('1/3')
111111
})
112112

113-
it('should render connector status', () => {
114-
const wrapper = mountConnector({
115-
connectorOverrides: { status: OCPP16ChargePointStatus.CHARGING },
116-
})
117-
const cells = wrapper.findAll('td')
118-
expect(cells[1].text()).toBe('Charging')
119-
})
120-
121-
it('should render placeholder when status is undefined', () => {
122-
const wrapper = mountConnector({
123-
connectorOverrides: { status: undefined },
124-
})
125-
const cells = wrapper.findAll('td')
126-
expect(cells[1].text()).toBe('Ø')
127-
})
128-
129113
it('should render "Yes" when locked', () => {
130114
const wrapper = mountConnector({
131115
connectorOverrides: { locked: true },
132116
})
133117
const cells = wrapper.findAll('td')
134-
expect(cells[2].text()).toBe('Yes')
118+
expect(cells[1].text()).toBe('Yes')
135119
})
136120

137121
it('should render "No" when not locked', () => {
138122
const wrapper = mountConnector({
139123
connectorOverrides: { locked: false },
140124
})
141125
const cells = wrapper.findAll('td')
142-
expect(cells[2].text()).toBe('No')
126+
expect(cells[1].text()).toBe('No')
143127
})
144128

145129
it('should render transaction info when transaction is started', () => {
146130
const wrapper = mountConnector({
147131
connectorOverrides: { transactionId: 42, transactionStarted: true },
148132
})
149133
const cells = wrapper.findAll('td')
150-
expect(cells[3].text()).toBe('Yes (42)')
134+
expect(cells[2].text()).toBe('Yes (42)')
151135
})
152136

153137
it('should render "No" when no transaction', () => {
154138
const wrapper = mountConnector({
155139
connectorOverrides: { transactionStarted: false },
156140
})
157141
const cells = wrapper.findAll('td')
158-
expect(cells[3].text()).toBe('No')
142+
expect(cells[2].text()).toBe('No')
159143
})
160144

161145
it('should render ATG started "Yes" when atgStatus.start is true', () => {
162146
const wrapper = mountConnector({ atgStatus: { start: true } })
163147
const cells = wrapper.findAll('td')
164-
expect(cells[4].text()).toBe('Yes')
148+
expect(cells[3].text()).toBe('Yes')
165149
})
166150

167151
it('should render ATG started "No" when atgStatus is undefined', () => {
168152
const wrapper = mountConnector({ atgStatus: undefined })
169153
const cells = wrapper.findAll('td')
170-
expect(cells[4].text()).toBe('No')
154+
expect(cells[3].text()).toBe('No')
171155
})
172156
})
173157

@@ -262,37 +246,37 @@ describe('CSConnector', () => {
262246

263247
it('should render OCPP 1.6 status options by default', () => {
264248
const wrapper = mountConnector()
265-
const selects = wrapper.findAll('select.connector-status-select')
249+
const selects = wrapper.findAll('select.connector-action-select')
266250
const statusSelect = selects[0]
267251
const options = statusSelect.findAll('option')
268252
expect(options.length).toBe(Object.values(OCPP16ChargePointStatus).length)
269253
})
270254

271255
it('should render OCPP 2.0.x status options for OCPP 2.0.1 station', () => {
272256
const wrapper = mountConnector({ ocppVersion: OCPPVersion.VERSION_201 })
273-
const selects = wrapper.findAll('select.connector-status-select')
257+
const selects = wrapper.findAll('select.connector-action-select')
274258
const statusSelect = selects[0]
275259
const options = statusSelect.findAll('option')
276260
expect(options.length).toBe(Object.values(OCPP20ConnectorStatusEnumType).length)
277261
})
278262

279263
it('should hide error code select for OCPP 2.0.x', () => {
280264
const wrapper = mountConnector({ ocppVersion: OCPPVersion.VERSION_201 })
281-
const selects = wrapper.findAll('select.connector-status-select')
265+
const selects = wrapper.findAll('select.connector-action-select')
282266
expect(selects.length).toBe(1)
283267
})
284268

285269
it('should show error code select for OCPP 1.6', () => {
286270
const wrapper = mountConnector({ ocppVersion: OCPPVersion.VERSION_16 })
287-
const selects = wrapper.findAll('select.connector-status-select')
271+
const selects = wrapper.findAll('select.connector-action-select')
288272
expect(selects.length).toBe(2)
289273
const errorOptions = selects[1].findAll('option')
290274
expect(errorOptions.length).toBe(Object.values(OCPP16ChargePointErrorCode).length)
291275
})
292276

293277
it('should call setConnectorStatus on status change', async () => {
294278
const wrapper = mountConnector()
295-
const selects = wrapper.findAll('select.connector-status-select')
279+
const selects = wrapper.findAll('select.connector-action-select')
296280
await selects[0].setValue(OCPP16ChargePointStatus.FAULTED)
297281
await flushPromises()
298282
expect(mockClient.setConnectorStatus).toHaveBeenCalledWith(

0 commit comments

Comments
 (0)