quick-view: Pages fill an app-shell quick view through a CDK portal

Aperta
  • Qualcosa non va?
#935 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

by: ai frontend spike
Exploring

The page declares its quick-view content in its own template, using any component, and a CDK portal carries it to one quick view in the app shell. The quick view:

  • renders next to page content on desktop and at phone width, without covering it
  • appears only on pages that supply content, and elsewhere renders nothing and takes no space
  • shows only what the current page supplies, with nothing carried over after you leave a page
  • can be opened and collapsed
flowchart LR
  scylla["scylla-server"]

  subgraph browser["Browser: angular-client"]
    direction LR
    socket["SocketService"] --> storage[("Storage")]
    storage --> page["Page that opts in"]
    page -- "content in its template<br/>(CDK portal)" --> shell["App shell quick view<br/>(portal outlet)"]
    otherPages["Every other page"] --> off["Quick view off"]
  end

  scylla -- "socket" --> socket
Hypothesis

Pages can declare quick-view content in their own templates, and a CDK portal shows exactly that content in one app-shell quick view, which disappears when the page is left.

Context transfer
SUMMARY
Part of idea #933. One of three sibling spikes, each trying one way for pages to fill a single app-shell quick view: a CDK portal (#935), a service that renders registered components (#934), and a service that renders registered readout data (#937). Earlier spikes #898 (app-wide) and #899 (per page) are closed.

CONTEXT
- @angular/cdk 21.2.14 is already a dependency on develop; nothing uses portals yet.
- In the app shell the quick view is a sibling of router-outlet, not a parent of the page, so ng-content alone can't carry a page's content into it.
- develop: StatusBarComponent (angular-client/src/components/status-bar/) is a reusable pop-out panel: docked top-right, sticky while scrolling, auto-opens, with a handle to reopen it after collapse. Chips are projected into it via ng-content; title input defaults to "Quick view".
- develop: only eFuses uses it, projecting LvBatteryChipComponent with voltage and faulted inputs read from Storage (VCU/LV/voltage, VCU/LV/LowVoltageFault). That markup is the closest starting point.
- develop: app-context.component.html renders p-toast, app-nav-bar and router-outlet; no quick view in the app shell.
- Storage is filled by SocketService from scylla-server and uses plain subjects, so a value shows a dash until its topic publishes again.
- Value-display primitives on develop (angular-client/src/components/): stat-display, info-value-display, gauge-stat, stat-summary, sidebar-chip, battery-level-indicator.
- Branch 898-app-wide-quick-view (draft PR #900) chose readouts for Charging (8), BMS (7) and eFuses (LV battery); a realistic set to try against.
- Unpublished topics: BMS/Pack/Voltage, BMS/Pack/SoC, BMS/Status/Balancing; BMS critical faults point mostly at unpublished topics (#902).
- #898 findings: the open panel covers Charging's Faults tile and BMS's segment overview; at 390px it takes about 55% of the width; collapse state carries across pages. https://github.com/Northeastern-Electric-Racing/Argos/issues/898#issuecomment-6260017218
Lingua principale
TypeScript
Stelle
5
Fork
1
Merge medio
1g 15h
PR unite (30g)
49

Preparare l'ambiente

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Northeastern-Electric-Racing/Argos

Tutte le issue di Northeastern-Electric-Racing/Argos

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.