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:
Johan LEROY
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
56c134beb0
commit
5d921a9b1e
-19
@@ -1,19 +0,0 @@
|
||||
<div class="site-detail-placeholder">
|
||||
<nav class="ev-breadcrumb">
|
||||
<a routerLink="/dashboard">Tableau de bord</a>
|
||||
<span>/</span>
|
||||
<a routerLink="/sites">Sites</a>
|
||||
</nav>
|
||||
|
||||
<header class="site-detail-placeholder__header">
|
||||
<a routerLink="/dashboard" class="ev-brand-link">
|
||||
<ev-brand class="site-detail-placeholder__logo" />
|
||||
</a>
|
||||
<h1>Site {{ siteId() }}</h1>
|
||||
</header>
|
||||
|
||||
<ev-card>
|
||||
<p>Le détail de ce site est à venir (voir issue #51).</p>
|
||||
<a routerLink="/sites" class="ev-link">Retour aux sites</a>
|
||||
</ev-card>
|
||||
</div>
|
||||
-28
@@ -1,28 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
color: var(--color-text);
|
||||
padding: 2.5rem 2rem;
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.site-detail-placeholder__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.site-detail-placeholder__logo {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
ev-card p {
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
-42
@@ -1,42 +0,0 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { ActivatedRoute, convertToParamMap, provideRouter } from '@angular/router';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
import { SiteDetailPlaceholder } from './site-detail-placeholder';
|
||||
|
||||
describe('SiteDetailPlaceholder', () => {
|
||||
it("affiche l'identifiant du site depuis la route", () => {
|
||||
const paramMap = new BehaviorSubject(convertToParamMap({ siteId: 'SITE001' }));
|
||||
TestBed.configureTestingModule({
|
||||
imports: [SiteDetailPlaceholder],
|
||||
providers: [
|
||||
provideRouter([]),
|
||||
{ provide: ActivatedRoute, useValue: { paramMap } },
|
||||
],
|
||||
});
|
||||
|
||||
const fixture = TestBed.createComponent(SiteDetailPlaceholder);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.textContent).toContain('SITE001');
|
||||
});
|
||||
|
||||
it('met à jour l\'affichage quand le paramètre change sans recréer le composant', () => {
|
||||
const paramMap = new BehaviorSubject(convertToParamMap({ siteId: 'SITE001' }));
|
||||
TestBed.configureTestingModule({
|
||||
imports: [SiteDetailPlaceholder],
|
||||
providers: [
|
||||
provideRouter([]),
|
||||
{ provide: ActivatedRoute, useValue: { paramMap } },
|
||||
],
|
||||
});
|
||||
|
||||
const fixture = TestBed.createComponent(SiteDetailPlaceholder);
|
||||
fixture.detectChanges();
|
||||
|
||||
paramMap.next(convertToParamMap({ siteId: 'SITE002' }));
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.textContent).toContain('SITE002');
|
||||
expect(fixture.nativeElement.textContent).not.toContain('SITE001');
|
||||
});
|
||||
});
|
||||
-19
@@ -1,19 +0,0 @@
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { toSignal } from '@angular/core/rxjs-interop';
|
||||
import { ActivatedRoute, RouterLink } from '@angular/router';
|
||||
import { map } from 'rxjs';
|
||||
import { Card } from '../../../shared/components/ui/card/card';
|
||||
import { Brand } from '../../../shared/components/ui/brand/brand';
|
||||
|
||||
@Component({
|
||||
selector: 'app-site-detail-placeholder',
|
||||
standalone: true,
|
||||
imports: [RouterLink, Card, Brand],
|
||||
templateUrl: './site-detail-placeholder.html',
|
||||
styleUrl: './site-detail-placeholder.scss',
|
||||
})
|
||||
export class SiteDetailPlaceholder {
|
||||
private route = inject(ActivatedRoute);
|
||||
|
||||
siteId = toSignal(this.route.paramMap.pipe(map((params) => params.get('siteId'))));
|
||||
}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,102 @@
|
||||
:host {
|
||||
display: block;
|
||||
color: var(--color-text);
|
||||
padding: 2.5rem 2rem;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.site-detail__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.site-detail__logo {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.site-detail__subtitle {
|
||||
margin: 0.25rem 0 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.banner-error {
|
||||
display: block;
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
|
||||
.overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1.25rem;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.card--gauge {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card__label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.card__value {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem 1.5rem;
|
||||
margin: 0.5rem 0 0;
|
||||
}
|
||||
|
||||
.metric {
|
||||
dt {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.metric__unavailable {
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.metric__reason {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { ActivatedRoute, convertToParamMap, provideRouter } from '@angular/router';
|
||||
import { vi } from 'vitest';
|
||||
import { BehaviorSubject, of, throwError } from 'rxjs';
|
||||
import { SiteDetail } from './site-detail';
|
||||
import { SitesService } from '../../../core/services/sites.service';
|
||||
import { ReadingsService } from '../../../core/services/readings.service';
|
||||
|
||||
const SITE = {
|
||||
site_id: 'SITE001',
|
||||
site_name: 'Site 1',
|
||||
site_type: 'industriel',
|
||||
location: 'Nantes',
|
||||
capacity_kw: 500,
|
||||
status: 'actif',
|
||||
};
|
||||
|
||||
const READING_COMPLETE = {
|
||||
reading_id: 1,
|
||||
site_id: 'SITE001',
|
||||
timestamp: '2026-09-17T10:00:00Z',
|
||||
source: 'api_current' as const,
|
||||
consumption_kw: 120,
|
||||
consumption_kwh: null,
|
||||
consumption_euros: null,
|
||||
voltage_v: 230,
|
||||
current_a: 12,
|
||||
power_factor: 0.95,
|
||||
temperature_celsius: 22,
|
||||
humidity_percent: 55,
|
||||
solar_irradiance_wm2: null,
|
||||
is_working_hours: true,
|
||||
data_quality: 'good' as const,
|
||||
null_reasons: null,
|
||||
imputed_values: null,
|
||||
imputation_method: null,
|
||||
};
|
||||
|
||||
function setup(
|
||||
siteId: string,
|
||||
sitesMock: Partial<SitesService>,
|
||||
readingsMock: Partial<ReadingsService>,
|
||||
) {
|
||||
const paramMap = new BehaviorSubject(convertToParamMap({ siteId }));
|
||||
TestBed.configureTestingModule({
|
||||
imports: [SiteDetail],
|
||||
providers: [
|
||||
provideRouter([]),
|
||||
{ provide: ActivatedRoute, useValue: { paramMap } },
|
||||
{ provide: SitesService, useValue: sitesMock },
|
||||
{ provide: ReadingsService, useValue: readingsMock },
|
||||
],
|
||||
});
|
||||
return { fixture: TestBed.createComponent(SiteDetail), paramMap };
|
||||
}
|
||||
|
||||
describe('SiteDetail', () => {
|
||||
it('charge le site, la dernière lecture et son historique au démarrage', () => {
|
||||
const { fixture } = setup(
|
||||
'SITE001',
|
||||
{ getSite: vi.fn().mockReturnValue(of(SITE)) },
|
||||
{
|
||||
getLatest: vi.fn().mockReturnValue(of(READING_COMPLETE)),
|
||||
getHistory: vi.fn().mockReturnValue(of([READING_COMPLETE])),
|
||||
},
|
||||
);
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.componentInstance.site()?.site_id).toBe('SITE001');
|
||||
expect(fixture.componentInstance.latestReading()?.consumption_kw).toBe(120);
|
||||
expect(fixture.componentInstance.history().length).toBe(1);
|
||||
expect(fixture.componentInstance.error()).toBeNull();
|
||||
});
|
||||
|
||||
it("signale l'indisponibilité quand un des appels échoue", () => {
|
||||
const { fixture } = setup(
|
||||
'SITE001',
|
||||
{ getSite: vi.fn().mockReturnValue(throwError(() => new Error('nope'))) },
|
||||
{
|
||||
getLatest: vi.fn().mockReturnValue(of(READING_COMPLETE)),
|
||||
getHistory: vi.fn().mockReturnValue(of([])),
|
||||
},
|
||||
);
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.componentInstance.error()).not.toBeNull();
|
||||
expect(fixture.componentInstance.site()).toBeNull();
|
||||
});
|
||||
|
||||
it('affiche explicitement les champs null avec leur raison plutôt que de les masquer', () => {
|
||||
const readingPartielle = {
|
||||
...READING_COMPLETE,
|
||||
voltage_v: null,
|
||||
current_a: null,
|
||||
power_factor: null,
|
||||
null_reasons: ['electrical_sensor_failure'],
|
||||
};
|
||||
const { fixture } = setup(
|
||||
'SITE001',
|
||||
{ getSite: vi.fn().mockReturnValue(of(SITE)) },
|
||||
{
|
||||
getLatest: vi.fn().mockReturnValue(of(readingPartielle)),
|
||||
getHistory: vi.fn().mockReturnValue(of([readingPartielle])),
|
||||
},
|
||||
);
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
const tension = fixture.componentInstance
|
||||
.metrics()
|
||||
.find((m) => m.key === 'voltage_v');
|
||||
expect(tension?.value).toBeNull();
|
||||
expect(tension?.reason).toBe('capteur électrique en panne');
|
||||
|
||||
const html = fixture.nativeElement.textContent;
|
||||
expect(html).toContain('Indisponible');
|
||||
expect(html).toContain('capteur électrique en panne');
|
||||
});
|
||||
|
||||
it('recharge les données quand le paramètre de route siteId change', () => {
|
||||
const getSite = vi.fn().mockReturnValue(of(SITE));
|
||||
const { fixture, paramMap } = setup(
|
||||
'SITE001',
|
||||
{ getSite },
|
||||
{
|
||||
getLatest: vi.fn().mockReturnValue(of(READING_COMPLETE)),
|
||||
getHistory: vi.fn().mockReturnValue(of([])),
|
||||
},
|
||||
);
|
||||
|
||||
fixture.detectChanges();
|
||||
paramMap.next(convertToParamMap({ siteId: 'SITE002' }));
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getSite).toHaveBeenCalledWith('SITE002');
|
||||
});
|
||||
|
||||
it("ancre la fenêtre d'historique sur la dernière mesure connue plutôt que sur l'horloge", () => {
|
||||
const getHistory = vi.fn().mockReturnValue(of([]));
|
||||
const { fixture } = setup(
|
||||
'SITE001',
|
||||
{ getSite: vi.fn().mockReturnValue(of(SITE)) },
|
||||
{ getLatest: vi.fn().mockReturnValue(of(READING_COMPLETE)), getHistory },
|
||||
);
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getHistory).toHaveBeenCalledWith(
|
||||
'SITE001',
|
||||
'2026-09-16T10:00:00.000Z',
|
||||
'2026-09-17T10:00:00Z',
|
||||
);
|
||||
});
|
||||
|
||||
it("ne fixe aucune fenêtre d'historique quand le site n'a aucune lecture", () => {
|
||||
const getHistory = vi.fn().mockReturnValue(of([]));
|
||||
const { fixture } = setup(
|
||||
'SITE001',
|
||||
{ getSite: vi.fn().mockReturnValue(of(SITE)) },
|
||||
{ getLatest: vi.fn().mockReturnValue(of(null)), getHistory },
|
||||
);
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getHistory).toHaveBeenCalledWith('SITE001', undefined, undefined);
|
||||
expect(fixture.componentInstance.latestReading()).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,161 @@
|
||||
import { Component, computed, effect, inject, signal } from '@angular/core';
|
||||
import { toSignal } from '@angular/core/rxjs-interop';
|
||||
import { ActivatedRoute, RouterLink } from '@angular/router';
|
||||
import { catchError, EMPTY, map, Observable, switchMap } from 'rxjs';
|
||||
import { SitesService } from '../../../core/services/sites.service';
|
||||
import { ReadingsService } from '../../../core/services/readings.service';
|
||||
import { Site } from '../../../shared/models/site.model';
|
||||
import { Reading } from '../../../shared/models/reading.model';
|
||||
import { Card } from '../../../shared/components/ui/card/card';
|
||||
import { Alert } from '../../../shared/components/ui/alert/alert';
|
||||
import { Badge, BadgeTone } from '../../../shared/components/ui/badge/badge';
|
||||
import { Brand } from '../../../shared/components/ui/brand/brand';
|
||||
import { ConsumptionGauge } from '../../../shared/components/consumption-gauge/consumption-gauge';
|
||||
import { ReadingHistoryChart } from '../../../shared/components/reading-history-chart/reading-history-chart';
|
||||
|
||||
const UNAVAILABLE_MESSAGE = 'Détail du site indisponible, réessayez plus tard.';
|
||||
const HISTORY_WINDOW_MS = 24 * 60 * 60 * 1000;
|
||||
|
||||
const TON_PAR_STATUT: Record<string, BadgeTone> = {
|
||||
actif: 'success',
|
||||
maintenance: 'warning',
|
||||
hors_service: 'danger',
|
||||
};
|
||||
|
||||
type MetricKey =
|
||||
| 'consumption_kw'
|
||||
| 'voltage_v'
|
||||
| 'current_a'
|
||||
| 'power_factor'
|
||||
| 'temperature_celsius'
|
||||
| 'humidity_percent';
|
||||
|
||||
interface MetricDef {
|
||||
key: MetricKey;
|
||||
label: string;
|
||||
format: (value: number) => string;
|
||||
}
|
||||
|
||||
const METRIC_DEFS: MetricDef[] = [
|
||||
{ key: 'consumption_kw', label: 'Consommation', format: (v) => `${v.toFixed(1)} kW` },
|
||||
{ key: 'voltage_v', label: 'Tension', format: (v) => `${v.toFixed(1)} V` },
|
||||
{ key: 'current_a', label: 'Courant', format: (v) => `${v.toFixed(1)} A` },
|
||||
{ key: 'power_factor', label: 'Cos φ', format: (v) => v.toFixed(2) },
|
||||
{ key: 'temperature_celsius', label: 'Température', format: (v) => `${v.toFixed(1)} °C` },
|
||||
{ key: 'humidity_percent', label: 'Humidité', format: (v) => `${v.toFixed(0)} %` },
|
||||
];
|
||||
|
||||
// Contrainte : miroir de `RAISON_VERS_CAPTEUR`/`CHAMPS_PAR_CAPTEUR` côté backend
|
||||
// (apps/backend/app/services/sensor.py) - `null_reasons` porte le code de panne du capteur,
|
||||
// jamais le nom du champ.
|
||||
const RAISONS_PAR_CHAMP: Record<MetricKey, string[]> = {
|
||||
consumption_kw: ['consumption_sensor_failure', 'network_loss'],
|
||||
voltage_v: ['electrical_sensor_failure', 'network_loss'],
|
||||
current_a: ['electrical_sensor_failure', 'network_loss'],
|
||||
power_factor: ['electrical_sensor_failure', 'network_loss'],
|
||||
temperature_celsius: ['temperature_sensor_failure', 'network_loss'],
|
||||
humidity_percent: ['humidity_sensor_failure', 'network_loss'],
|
||||
};
|
||||
|
||||
const LIBELLE_PAR_RAISON: Record<string, string> = {
|
||||
consumption_sensor_failure: 'capteur de consommation en panne',
|
||||
electrical_sensor_failure: 'capteur électrique en panne',
|
||||
temperature_sensor_failure: 'capteur de température en panne',
|
||||
humidity_sensor_failure: 'capteur d\'humidité en panne',
|
||||
network_loss: 'perte réseau',
|
||||
};
|
||||
|
||||
export interface MetricView {
|
||||
key: MetricKey;
|
||||
label: string;
|
||||
value: string | null;
|
||||
reason: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-site-detail',
|
||||
standalone: true,
|
||||
imports: [RouterLink, Card, Alert, Badge, Brand, ConsumptionGauge, ReadingHistoryChart],
|
||||
templateUrl: './site-detail.html',
|
||||
styleUrl: './site-detail.scss',
|
||||
})
|
||||
export class SiteDetail {
|
||||
private route = inject(ActivatedRoute);
|
||||
private sitesService = inject(SitesService);
|
||||
private readingsService = inject(ReadingsService);
|
||||
|
||||
siteId = toSignal(this.route.paramMap.pipe(map((params) => params.get('siteId') ?? '')));
|
||||
|
||||
site = signal<Site | null>(null);
|
||||
latestReading = signal<Reading | null>(null);
|
||||
history = signal<Reading[]>([]);
|
||||
error = signal<string | null>(null);
|
||||
|
||||
metrics = computed<MetricView[]>(() => {
|
||||
const reading = this.latestReading();
|
||||
return METRIC_DEFS.map((def) => {
|
||||
const valeur = reading ? reading[def.key] : null;
|
||||
return {
|
||||
key: def.key,
|
||||
label: def.label,
|
||||
value: valeur != null ? def.format(valeur) : null,
|
||||
reason: valeur == null ? this.reasonFor(def.key, reading) : '',
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
constructor() {
|
||||
effect(() => {
|
||||
const siteId = this.siteId();
|
||||
if (siteId) {
|
||||
this.load(siteId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
badgeToneForStatus(status: string | null): BadgeTone {
|
||||
return status ? (TON_PAR_STATUT[status] ?? 'neutral') : 'neutral';
|
||||
}
|
||||
|
||||
private load(siteId: string): void {
|
||||
this.sitesService
|
||||
.getSite(siteId)
|
||||
.pipe(
|
||||
switchMap((site) =>
|
||||
this.readingsService.getLatest(siteId).pipe(map((latest) => ({ site, latest }))),
|
||||
),
|
||||
switchMap(({ site, latest }) => {
|
||||
// Piège : le dataset historique se termine bien avant « maintenant ». Ancrer la
|
||||
// fenêtre sur la dernière mesure connue plutôt que sur l'horloge évite un historique
|
||||
// vide dès que le jeu de données n'est plus récent.
|
||||
const end = latest?.timestamp;
|
||||
const start = end
|
||||
? new Date(new Date(end).getTime() - HISTORY_WINDOW_MS).toISOString()
|
||||
: undefined;
|
||||
return this.readingsService
|
||||
.getHistory(siteId, start, end)
|
||||
.pipe(map((history) => ({ site, latest, history })));
|
||||
}),
|
||||
catchError(() => this.reportUnavailable()),
|
||||
)
|
||||
.subscribe((result) => {
|
||||
this.error.set(null);
|
||||
this.site.set(result.site);
|
||||
this.latestReading.set(result.latest);
|
||||
this.history.set(result.history);
|
||||
});
|
||||
}
|
||||
|
||||
private reasonFor(field: MetricKey, reading: Reading | null): string {
|
||||
const raisons = RAISONS_PAR_CHAMP[field];
|
||||
const trouvees = (reading?.null_reasons ?? [])
|
||||
.filter((raison) => raisons.includes(raison))
|
||||
.map((raison) => LIBELLE_PAR_RAISON[raison] ?? raison);
|
||||
return trouvees.length > 0 ? trouvees.join(', ') : 'cause inconnue';
|
||||
}
|
||||
|
||||
private reportUnavailable(): Observable<never> {
|
||||
this.error.set(UNAVAILABLE_MESSAGE);
|
||||
return EMPTY;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user