]> Piment Noir Git Repositories - e-mobility-charging-stations-simulator.git/commit
feat(webui): add show details action for charging stations (#2072)
authorJérôme Benoit <jerome.benoit@piment-noir.org>
Mon, 10 Aug 2026 15:51:27 +0000 (17:51 +0200)
committerGitHub <noreply@github.com>
Mon, 10 Aug 2026 15:51:27 +0000 (17:51 +0200)
commit742f18690c0119acf6d5672703546d1a2642b579
tree3c794f233231d91c25fb3bf4a4432b80e527ba85
parent68a6e511248a43c5199464c81afd5b8b1a13a7d1
feat(webui): add show details action for charging stations (#2072)

* feat(webui): add show details action for charging stations

Add a read-only "Show details" action in both Web UI skins displaying a
charging station's stationInfo, OCPP configuration parameters and other
relevant ChargingStationData fields. Frontend only: the data is already
shipped to the client via the charging station data payload.

- Shared pure util `stationDetails.ts` (single source of truth for section
  selection, field formatting and OCPP key visibility filtering), matching
  the existing `stationStatus.ts` pure-util convention.
- Classic skin: `show-details` router action + `ShowDetails.vue` panel,
  triggered by a shared ToggleButton in the station actions cell.
- Modern skin: `StationDetailsDialog.vue` modal, triggered by a footer
  "Details" button on the station card, wired through ModernLayout.
- Supervision password is always masked; supervision URL is host-only.

Closes #993

* [autofix.ci] apply automated fixes

* refactor(webui): centralize OCPP row formatting and address review

Review-round-1 fixes for the "Show details" action:

- Move OCPP cell formatting (readonly/reboot/value) into the shared
  `buildConfigurationRows` util so both skins render identical, single-
  sourced rows instead of duplicating the ternaries.
- Format Boot Notification "Current Time" via toLocaleString (consistent
  with "Last Update") and drop the unsafe double cast.
- Give the modern OCPP table an accessible name (aria-labelledby).
- Tests: assert password masking in the classic rendered panel, cover the
  OCPP readonly/reboot/value cell formatting in both skins and the util.

* test(webui): tighten details tests and unify empty-value formatting

Review-round-2 fixes for the "Show details" action:

- Format the OCPP parameter value via the shared `formatValue` so an
  empty-string value renders as the empty placeholder, consistent with
  every other field (was `value ?? Ø`, which left '' blank).
- Strengthen the modern password-masking test to also assert the masked
  placeholder, add coverage for the empty-string value case, and assert
  the modern OCPP table's aria-labelledby accessible name.

* refactor(webui): address initial-review findings for show details

- M1 (DRY): extract shared `useStationDetails(hashId)` composable consumed by
  both skins, removing the duplicated station/sections/configurationRows
  computed (mirrors the shared `useSetUrlForm` precedent).
- M2 (terminology): unify the feature label on "Show Details" across the
  classic header, the modern dialog title and the README; the modern card
  keeps its terse "Details" button per the card convention; route id
  unchanged.
- M3: drop the duplicated Boot Notification "Status" entry (kept as
  "Registration Status" under General).
- N1: factor a private `formatDate` helper and guard both dates.
- N3: give each modern detail `<dl>` section an accessible name via useId().
- N2 (OCPP terminology) intentionally left as "OCPP Parameters" to match the
  issue wording; documented in review.
- Tests: new `useStationDetails` composable tests; assert the modern section
  aria-labelledby wiring; update the "Show Details" heading/title assertions.

* style(webui): harmonize modern show-details with skin conventions

- H3: extract the shared `.modern-section-label` primitive (renamed from
  `.modern-card__section-label`, single consumer migrated) and use it for the
  modern dialog section headings instead of a one-off `.station-details__title`.
- H1: restyle the detail key/value list to the modern spec typography
  (uppercase muted `dt`, strong `dd`) in a left-aligned two-column grid fit
  for the wider dialog (drops the ad-hoc space-between/right-align/hairlines).
- H2: restyle the OCPP table to the modern low-chrome table aesthetic
  (border-collapse, no per-cell borders, muted uppercase headers, subtle row
  separators) matching the existing `.modern-connector__tx-table` precedent;
  scope word-break to values/keys so column headers no longer break mid-word.

Classic skin unchanged (already reuses the shared data-table system). No test
changes: DOM hooks (.station-details__list/__table), aria-labelledby and the
OCPP row formatting are preserved. Card rendering is visually unchanged.

* style(webui): resolve exhaustive-review nits for show details

- MIN-1: left-align the classic detail table cells (target th/td so the
  shared `.data-table` center rule no longer wins), fixing centered values.
- MIN-2: modern dialog title to sentence-case "Show details — {id}" to match
  the sibling dialog titles (classic header keeps Title Case per its convention).
- NIT-1: derive the OCPP heading id from useId() instead of a hardcoded id,
  consistent with the section headings.
- NIT-2: extract a private `formatBoolean` helper reused by
  buildConfigurationRows and formatValue's boolean branch.
- NIT-3: align the shared "Supervision Url" label with the existing majority
  spelling used across the classic surface.
- NIT-4: rename StationDetailsDialog.vue -> ShowDetailsDialog.vue (matches the
  classic ShowDetails.vue and the feature name); update wiring + tests.

"OCPP Parameters" kept (issue #993 wording). Tests updated for the new title,
useId-based aria and the rename. 567 tests green.

* style(webui): order ShowDetailsDialog async import alphabetically

* docs(webui): fix show details JSDoc wording and uniformize empty-state punctuation

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
20 files changed:
ui/web/README.md
ui/web/src/core/Constants.ts
ui/web/src/core/index.ts
ui/web/src/router/index.ts
ui/web/src/shared/composables/useStationDetails.ts [new file with mode: 0644]
ui/web/src/shared/utils/index.ts
ui/web/src/shared/utils/stationDetails.ts [new file with mode: 0644]
ui/web/src/skins/classic/components/actions/ShowDetails.vue [new file with mode: 0644]
ui/web/src/skins/classic/components/charging-stations/CSData.vue
ui/web/src/skins/modern/ModernLayout.vue
ui/web/src/skins/modern/components/StationCard.vue
ui/web/src/skins/modern/components/dialogs/ShowDetailsDialog.vue [new file with mode: 0644]
ui/web/src/skins/modern/modern.css
ui/web/tests/unit/router.test.ts
ui/web/tests/unit/shared/composables/stationDetails.test.ts [new file with mode: 0644]
ui/web/tests/unit/shared/composables/useStationDetails.test.ts [new file with mode: 0644]
ui/web/tests/unit/skins/classic/Actions.test.ts
ui/web/tests/unit/skins/modern/Dialogs.test.ts
ui/web/tests/unit/skins/modern/ModernLayout.test.ts
ui/web/tests/unit/skins/modern/StationCard.test.ts