feat: vue détail d'un site (#51)
Ajoute la page de détail d'un site (fiche, mesure instantanée, jauge de
consommation, historique) en remplacement du placeholder. Les champs
null sont affichés explicitement avec leur raison plutôt que masqués.
Ajoute l'endpoint GET /sites/{id}/current côté backend, qui retourne la
dernière mesure connue d'un site sans filtre temporel, conformément au
contrat de l'issue.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012i5NteMLRZgfTAKB5GD37X
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
56c134beb0
commit
5d921a9b1e
@@ -0,0 +1,71 @@
|
||||
<div class="site-detail">
|
||||
<nav class="ev-breadcrumb">
|
||||
<a routerLink="/dashboard">Tableau de bord</a>
|
||||
<span>/</span>
|
||||
<a routerLink="/sites">Sites</a>
|
||||
</nav>
|
||||
|
||||
<header class="site-detail__header">
|
||||
<a routerLink="/dashboard" class="ev-brand-link">
|
||||
<ev-brand class="site-detail__logo" />
|
||||
</a>
|
||||
<div>
|
||||
<h1>{{ site()?.site_name ?? siteId() }}</h1>
|
||||
@if (site(); as s) {
|
||||
<p class="site-detail__subtitle">
|
||||
{{ s.site_type }} · {{ s.location || 'Localisation inconnue' }}
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
@if (site(); as s) {
|
||||
<ev-badge [tone]="badgeToneForStatus(s.status)">{{ s.status ?? '-' }}</ev-badge>
|
||||
}
|
||||
</header>
|
||||
|
||||
@if (error(); as message) {
|
||||
<ev-alert severity="danger" class="banner-error">{{ message }}</ev-alert>
|
||||
}
|
||||
|
||||
@if (site(); as s) {
|
||||
<section class="overview">
|
||||
<ev-card class="card card--gauge">
|
||||
<span class="card__label">Consommation vs capacité</span>
|
||||
<app-consumption-gauge
|
||||
[consumption]="latestReading()?.consumption_kw ?? 0"
|
||||
[capacity]="s.capacity_kw ?? 0"
|
||||
/>
|
||||
<span class="card__value">
|
||||
{{ latestReading()?.consumption_kw ?? '-' }} / {{ s.capacity_kw ?? '-' }} kW
|
||||
</span>
|
||||
</ev-card>
|
||||
|
||||
<ev-card class="metrics-card">
|
||||
<span class="card__label">Mesure instantanée</span>
|
||||
<dl class="metrics-grid">
|
||||
@for (metric of metrics(); track metric.key) {
|
||||
<div class="metric">
|
||||
<dt>{{ metric.label }}</dt>
|
||||
@if (metric.value !== null) {
|
||||
<dd>{{ metric.value }}</dd>
|
||||
} @else {
|
||||
<dd class="metric__unavailable">
|
||||
Indisponible
|
||||
<span class="metric__reason">({{ metric.reason }})</span>
|
||||
</dd>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</dl>
|
||||
</ev-card>
|
||||
</section>
|
||||
|
||||
@if (history().length > 0) {
|
||||
<section class="chart-section">
|
||||
<h2>Historique de consommation</h2>
|
||||
<app-reading-history-chart [readings]="history()" />
|
||||
</section>
|
||||
}
|
||||
}
|
||||
|
||||
<a routerLink="/sites" class="ev-link">Retour aux sites</a>
|
||||
</div>
|
||||
Reference in New Issue
Block a user