Klagarge/MSE-PI-E2EEDA-Plein-de-eeeeeeeeeee
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

style(ui): apply Prettier formatting

Browse Source 
Closes #30

Assisted-by: Claude:claude-sonnet-4-6
This commit is contained in:
khalil-bot
2026-05-21 09:18:27 +02:00
parent a465cba225
commit acea4de599
14 changed files with 831 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
ui/src/app/components/room-details-panel/room-details-panel.component.html
View File

@@ -1,10 +1,16 @@
<div class="page">
<!-- ── Header ─────────────────────────────────────────────────────────── -->
<header class="page-header">
<a routerLink="/dashboard" class="back-btn">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10 12L6 8l4-4"/>
<svg
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 12L6 8l4-4" />
</svg>
Dashboard
</a>
@@ -18,10 +24,9 @@
</div>
@if (latestReading(); as reading) {
<span
class="co2-pill"
[style.background-color]="getCO2Color(reading.co2)"
>{{ getCO2Level(reading.co2).label }}&nbsp;·&nbsp;{{ reading.co2 }}&thinsp;ppm</span>
<span class="co2-pill" [style.background-color]="getCO2Color(reading.co2)"
>{{ getCO2Level(reading.co2).label }}&nbsp;·&nbsp;{{ reading.co2 }}&thinsp;ppm</span
>
}
}
@@ -29,10 +34,17 @@
@if (lastUpdated(); as lu) {
<span class="last-updated">
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
<circle cx="6" cy="6" r="4.5"/><polyline points="6,3.5 6,6 7.5,7.5"/>
<svg
viewBox="0 0 12 12"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
>
<circle cx="6" cy="6" r="4.5" />
<polyline points="6,3.5 6,6 7.5,7.5" />
</svg>
Last updated&nbsp;<strong>{{ lu | date:'HH:mm:ss' }}</strong>
Last updated&nbsp;<strong>{{ lu | date: 'HH:mm:ss' }}</strong>
</span>
}
</header>
@@ -40,11 +52,9 @@
<!-- ── Body ───────────────────────────────────────────────────────────── -->
@if (room(); as r) {
<div class="page-body">
<!-- Left panel : current metrics -->
<aside class="panel-left">
@if (latestReading(); as reading) {
<!-- CO₂ hero -->
<div class="co2-hero" [style.--co2]="getCO2Color(reading.co2)">
<span class="co2-hero-label">CO₂</span>
@@ -56,28 +66,50 @@
<!-- Temp + Humidity -->
<div class="metric-row">
<div class="metric-card">
<svg class="metric-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M12 2v10.5m0 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM8 6h1m-1 3h1m-1 3h1"/>
<svg
class="metric-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.6"
>
<path d="M12 2v10.5m0 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM8 6h1m-1 3h1m-1 3h1" />
</svg>
<div class="metric-label">Temperature</div>
<div class="metric-value">{{ reading.temperature }}<span class="metric-unit">°C</span></div>
<div class="metric-value">
{{ reading.temperature }}<span class="metric-unit">°C</span>
</div>
</div>
<div class="metric-card">
<svg class="metric-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M12 2C6 9 4 13 4 16a8 8 0 0 0 16 0c0-3-2-7-8-14z"/>
<svg
class="metric-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.6"
>
<path d="M12 2C6 9 4 13 4 16a8 8 0 0 0 16 0c0-3-2-7-8-14z" />
</svg>
<div class="metric-label">Humidity</div>
<div class="metric-value">{{ reading.humidity }}<span class="metric-unit">%</span></div>
<div class="metric-value">
{{ reading.humidity }}<span class="metric-unit">%</span>
</div>
</div>
</div>
<!-- Windows -->
<div class="window-card" [class.open]="reading.windowState === 'open'">
<div class="window-card-left">
<svg class="window-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<rect x="3" y="3" width="18" height="18" rx="2"/>
<line x1="12" y1="3" x2="12" y2="21"/>
<line x1="3" y1="12" x2="21" y2="12"/>
<svg
class="window-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.6"
>
<rect x="3" y="3" width="18" height="18" rx="2" />
<line x1="12" y1="3" x2="12" y2="21" />
<line x1="3" y1="12" x2="21" y2="12" />
</svg>
<div>
<div class="window-label">Windows</div>
@@ -86,7 +118,6 @@
</div>
<div class="window-dot" [class.open]="reading.windowState === 'open'"></div>
</div>
} @else {
<div class="no-sensor">No data available currently.</div>
}
@@ -102,14 +133,30 @@
</div>
<div class="pagination">
<button class="page-btn" (click)="prevPage()" [disabled]="currentPage() === 0">
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<path d="M9 2L5 7l4 5"/>
<svg
viewBox="0 0 14 14"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="M9 2L5 7l4 5" />
</svg>
</button>
<span class="page-info">{{ currentPage() + 1 }} / {{ totalPages() }}</span>
<button class="page-btn" (click)="nextPage()" [disabled]="currentPage() === totalPages() - 1">
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<path d="M5 2l4 5-4 5"/>
<button
class="page-btn"
(click)="nextPage()"
[disabled]="currentPage() === totalPages() - 1"
>
<svg
viewBox="0 0 14 14"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="M5 2l4 5-4 5" />
</svg>
</button>
</div>
@@ -129,7 +176,7 @@
<tbody>
@for (entry of pagedHistory(); track entry.timestamp) {
<tr>
<td class="td-time">{{ entry.timestamp | date:'HH:mm' }}</td>
<td class="td-time">{{ entry.timestamp | date: 'HH:mm' }}</td>
<td>
<span class="co2-badge" [style.background-color]="getCO2Color(entry.co2)">
{{ entry.co2 }} ppm
@@ -151,10 +198,8 @@
<div class="no-history">No history available.</div>
}
</main>
</div>
} @else {
<div class="not-found">Room not found.</div>
}
</div>

214
ui/src/app/components/room-details-panel/room-details-panel.component.scss
View File

@@ -1,19 +1,19 @@
// ── Tokens (aligned with room-map) ───────────────────────────────────────────
$navy-deep: #0d1b2a;
$navy: #1a3a6b;
$navy-mid: #1f4e8c;
$navy-light: #cfe0f2;
$accent: #00b4d8;
$surface: #f4f7fb;
$border: #d1dce8;
$text-main: #0d1b2a;
$text-muted: #5a7694;
$success: #22c55e;
$navy-deep: #0d1b2a;
$navy: #1a3a6b;
$navy-mid: #1f4e8c;
$navy-light: #cfe0f2;
$accent: #00b4d8;
$surface: #f4f7fb;
$border: #d1dce8;
$text-main: #0d1b2a;
$text-muted: #5a7694;
$success: #22c55e;
$success-border: #4ade80;
$success-bg: #f0fdf4;
$radius-lg: 10px;
$radius-md: 7px;
$radius-sm: 5px;
$success-bg: #f0fdf4;
$radius-lg: 10px;
$radius-md: 7px;
$radius-sm: 5px;
// Breakpoints (identical to room-map)
$bp-md: 768px;
@@ -72,13 +72,21 @@ $t-fast: 0.15s ease;
gap: 6px;
color: $text-muted;
text-decoration: none;
font: 500 13px/1 ui-sans-serif, system-ui, sans-serif;
font:
500 13px/1 ui-sans-serif,
system-ui,
sans-serif;
transition: color 0.15s;
white-space: nowrap;
svg { width: 14px; height: 14px; }
svg {
width: 14px;
height: 14px;
}
&:hover { color: $navy; }
&:hover {
color: $navy;
}
}
.header-sep {
@@ -87,7 +95,9 @@ $t-fast: 0.15s ease;
background: $border;
flex-shrink: 0;
@media (max-width: #{$bp-sm}) { display: none; }
@media (max-width: #{$bp-sm}) {
display: none;
}
}
.room-identity {
@@ -97,7 +107,10 @@ $t-fast: 0.15s ease;
}
.room-eyebrow {
font: 600 9px/1 ui-sans-serif, system-ui, sans-serif;
font:
600 9px/1 ui-sans-serif,
system-ui,
sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
color: $accent;
@@ -105,7 +118,10 @@ $t-fast: 0.15s ease;
.room-name {
margin: 0;
font: 700 16px/1.2 ui-sans-serif, system-ui, sans-serif;
font:
700 16px/1.2 ui-sans-serif,
system-ui,
sans-serif;
color: $navy;
white-space: nowrap;
}
@@ -115,33 +131,53 @@ $t-fast: 0.15s ease;
align-items: center;
padding: 4px 12px;
border-radius: 20px;
font: 600 12px/1 ui-sans-serif, system-ui, sans-serif;
font:
600 12px/1 ui-sans-serif,
system-ui,
sans-serif;
color: rgba(0, 0, 0, 0.72);
white-space: nowrap;
letter-spacing: 0.01em;
// La pill est redondante sur mobile (visible dans panel-left)
@media (max-width: #{$bp-sm}) { display: none; }
@media (max-width: #{$bp-sm}) {
display: none;
}
}
.header-spacer {
flex: 1;
@media (max-width: #{$bp-md}) { display: none; }
@media (max-width: #{$bp-md}) {
display: none;
}
}
.last-updated {
display: flex;
align-items: center;
gap: 5px;
font: 400 12px/1 ui-sans-serif, system-ui, sans-serif;
font:
400 12px/1 ui-sans-serif,
system-ui,
sans-serif;
color: $text-muted;
white-space: nowrap;
svg { width: 12px; height: 12px; flex-shrink: 0; color: $accent; }
strong { font-weight: 600; color: $text-main; }
svg {
width: 12px;
height: 12px;
flex-shrink: 0;
color: $accent;
}
strong {
font-weight: 600;
color: $text-main;
}
@media (max-width: #{$bp-sm}) { font-size: 11px; }
@media (max-width: #{$bp-sm}) {
font-size: 11px;
}
}
// ── Body ──────────────────────────────────────────────────────────────────────
@@ -200,7 +236,9 @@ $t-fast: 0.15s ease;
&::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--co2, #{$accent});
border-radius: $radius-lg $radius-lg 0 0;
@@ -209,7 +247,10 @@ $t-fast: 0.15s ease;
.co2-hero-label {
display: block;
font: 600 10px/1 ui-sans-serif, system-ui, sans-serif;
font:
600 10px/1 ui-sans-serif,
system-ui,
sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
color: $text-muted;
@@ -226,7 +267,10 @@ $t-fast: 0.15s ease;
}
.co2-hero-unit {
font: 500 14px/1 ui-sans-serif, system-ui, sans-serif;
font:
500 14px/1 ui-sans-serif,
system-ui,
sans-serif;
color: $text-muted;
margin-top: 4px;
}
@@ -237,8 +281,11 @@ $t-fast: 0.15s ease;
padding: 3px 12px;
border-radius: 20px;
background: var(--co2, #{$accent});
color: rgba(0,0,0,0.72);
font: 600 11px/1.6 ui-sans-serif, system-ui, sans-serif;
color: rgba(0, 0, 0, 0.72);
font:
600 11px/1.6 ui-sans-serif,
system-ui,
sans-serif;
letter-spacing: 0.03em;
}
@@ -269,19 +316,27 @@ $t-fast: 0.15s ease;
}
.metric-label {
font: 400 11px/1 ui-sans-serif, system-ui, sans-serif;
font:
400 11px/1 ui-sans-serif,
system-ui,
sans-serif;
color: $text-muted;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.metric-value {
font: 700 26px/1.1 'Courier New', monospace;
font:
700 26px/1.1 'Courier New',
monospace;
color: $navy;
}
.metric-unit {
font: 500 13px/1 ui-sans-serif, system-ui, sans-serif;
font:
500 13px/1 ui-sans-serif,
system-ui,
sans-serif;
color: $text-muted;
margin-left: 2px;
font-family: ui-sans-serif, system-ui, sans-serif;
@@ -296,7 +351,9 @@ $t-fast: 0.15s ease;
display: flex;
align-items: center;
justify-content: space-between;
transition: border-color $t-fast, background $t-fast;
transition:
border-color $t-fast,
background $t-fast;
&.open {
border-color: $success-border;
@@ -318,14 +375,20 @@ $t-fast: 0.15s ease;
}
.window-label {
font: 400 11px/1 ui-sans-serif, system-ui, sans-serif;
font:
400 11px/1 ui-sans-serif,
system-ui,
sans-serif;
color: $text-muted;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.window-state {
font: 600 15px/1.4 ui-sans-serif, system-ui, sans-serif;
font:
600 15px/1.4 ui-sans-serif,
system-ui,
sans-serif;
color: $navy;
text-transform: capitalize;
}
@@ -337,7 +400,9 @@ $t-fast: 0.15s ease;
background: $border;
transition: background $t-fast;
&.open { background: $success; }
&.open {
background: $success;
}
}
// ── Right panel ───────────────────────────────────────────────────────────────
@@ -373,12 +438,18 @@ $t-fast: 0.15s ease;
.history-title {
margin: 0;
font: 700 15px/1.2 ui-sans-serif, system-ui, sans-serif;
font:
700 15px/1.2 ui-sans-serif,
system-ui,
sans-serif;
color: $navy;
}
.history-sub {
font: 400 12px/1 ui-sans-serif, system-ui, sans-serif;
font:
400 12px/1 ui-sans-serif,
system-ui,
sans-serif;
color: $text-muted;
}
@@ -400,9 +471,15 @@ $t-fast: 0.15s ease;
background: #fff;
color: $text-muted;
cursor: pointer;
transition: background $t-fast, color $t-fast, border-color $t-fast;
transition:
background $t-fast,
color $t-fast,
border-color $t-fast;
svg { width: 12px; height: 12px; }
svg {
width: 12px;
height: 12px;
}
&:hover:not(:disabled) {
background: $navy;
@@ -417,7 +494,9 @@ $t-fast: 0.15s ease;
}
.page-info {
font: 600 12px/1 'Courier New', monospace;
font:
600 12px/1 'Courier New',
monospace;
color: $text-muted;
min-width: 44px;
text-align: center;
@@ -443,20 +522,28 @@ $t-fast: 0.15s ease;
.history-table {
width: 100%;
border-collapse: collapse;
font: 400 13px/1 ui-sans-serif, system-ui, sans-serif;
font:
400 13px/1 ui-sans-serif,
system-ui,
sans-serif;
thead {
position: sticky;
top: 0;
z-index: 1;
@media (max-width: #{$bp-md}) { position: static; }
@media (max-width: #{$bp-md}) {
position: static;
}
}
th {
background: $surface;
color: $text-muted;
font: 600 11px/1 ui-sans-serif, system-ui, sans-serif;
font:
600 11px/1 ui-sans-serif,
system-ui,
sans-serif;
text-transform: uppercase;
letter-spacing: 0.07em;
padding: 11px 16px;
@@ -464,7 +551,10 @@ $t-fast: 0.15s ease;
white-space: nowrap;
border-bottom: 1px solid $border;
@media (max-width: #{$bp-sm}) { padding: 9px 10px; font-size: 10px; }
@media (max-width: #{$bp-sm}) {
padding: 9px 10px;
font-size: 10px;
}
}
td {
@@ -474,7 +564,10 @@ $t-fast: 0.15s ease;
vertical-align: middle;
white-space: nowrap;
@media (max-width: #{$bp-sm}) { padding: 8px 10px; font-size: 12px; }
@media (max-width: #{$bp-sm}) {
padding: 8px 10px;
font-size: 12px;
}
}
tr:hover td {
@@ -483,7 +576,9 @@ $t-fast: 0.15s ease;
}
.td-time {
font: 500 13px/1 'Courier New', monospace;
font:
500 13px/1 'Courier New',
monospace;
color: $text-muted;
}
@@ -491,17 +586,25 @@ $t-fast: 0.15s ease;
display: inline-block;
padding: 3px 10px;
border-radius: 20px;
font: 600 12px/1.6 'Courier New', monospace;
font:
600 12px/1.6 'Courier New',
monospace;
color: rgba(0, 0, 0, 0.72);
white-space: nowrap;
}
.win-state {
font: 500 12px/1 ui-sans-serif, system-ui, sans-serif;
font:
500 12px/1 ui-sans-serif,
system-ui,
sans-serif;
color: $text-muted;
text-transform: capitalize;
&.open { color: #16a34a; font-weight: 600; }
&.open {
color: #16a34a;
font-weight: 600;
}
}
// ── States ────────────────────────────────────────────────────────────────────
@@ -512,7 +615,10 @@ $t-fast: 0.15s ease;
padding: 40px 24px;
text-align: center;
color: $text-muted;
font: 400 14px/1.5 ui-sans-serif, system-ui, sans-serif;
font:
400 14px/1.5 ui-sans-serif,
system-ui,
sans-serif;
font-style: italic;
background: #fff;
border-radius: $radius-lg;

60
ui/src/app/components/room-details-panel/room-details-panel.component.ts
View File

@@ -30,19 +30,19 @@ const PAGE_SIZE = 8;
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RoomDetailsPanelComponent implements OnInit {
private route = inject(ActivatedRoute);
private roomService = inject(RoomService);
private route = inject(ActivatedRoute);
private roomService = inject(RoomService);
private sensorService = inject(SensorService);
private destroyRef = inject(DestroyRef);
private destroyRef = inject(DestroyRef);
room = signal<RoomLayout | undefined>(undefined);
room = signal<RoomLayout | undefined>(undefined);
latestReading = signal<SensorReading | undefined>(undefined);
history = signal<SensorReading[]>([]);
lastUpdated = signal<Date | null>(null);
history = signal<SensorReading[]>([]);
lastUpdated = signal<Date | null>(null);
currentPage = signal(0);
totalPages = computed(() => Math.ceil(this.history().length / PAGE_SIZE));
totalPages = computed(() => Math.ceil(this.history().length / PAGE_SIZE));
pagedHistory = computed(() => {
const start = this.currentPage() * PAGE_SIZE;
return this.history().slice(start, start + PAGE_SIZE);
@@ -54,26 +54,34 @@ export class RoomDetailsPanelComponent implements OnInit {
ngOnInit(): void {
const interval = environment.polling.detailIntervalMs;
this.route.paramMap.pipe(
map(params => params.get('id') ?? ''),
switchMap(id => combineLatest([
this.roomService.getRoomById(id),
concat(
this.sensorService.getLatestReadingForRoom(id),
timer(interval, interval).pipe(switchMap(() => this.sensorService.getLatestReadingForRoom(id))),
this.route.paramMap
.pipe(
map(params => params.get('id') ?? ''),
switchMap(id =>
combineLatest([
this.roomService.getRoomById(id),
concat(
this.sensorService.getLatestReadingForRoom(id),
timer(interval, interval).pipe(
switchMap(() => this.sensorService.getLatestReadingForRoom(id))
)
),
concat(
this.sensorService.getHistoryForRoom(id),
timer(interval, interval).pipe(
switchMap(() => this.sensorService.getHistoryForRoom(id))
)
),
])
),
concat(
this.sensorService.getHistoryForRoom(id),
timer(interval, interval).pipe(switchMap(() => this.sensorService.getHistoryForRoom(id))),
),
])),
takeUntilDestroyed(this.destroyRef),
).subscribe(([room, reading, history]) => {
this.room.set(room);
this.latestReading.set(reading);
this.history.set(history ?? []);
if (reading) this.lastUpdated.set(new Date());
});
takeUntilDestroyed(this.destroyRef)
)
.subscribe(([room, reading, history]) => {
this.room.set(room);
this.latestReading.set(reading);
this.history.set(history ?? []);
if (reading) this.lastUpdated.set(new Date());
});
}
prevPage(): void {

183
ui/src/app/components/room-map/room-map.component.html
View File

@@ -1,10 +1,8 @@
<div class="layout">
<!-- ══════════════════════════════════════════════
Zone carte principale
═══════════════════════════════════════════════════ -->
<div class="map-area">
<!-- En-tête + contrôles zoom -->
<div class="map-header">
<div class="title-group">
@@ -14,42 +12,93 @@
@if (lastUpdatedStr(); as ts) {
<span class="last-updated-badge">
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
<circle cx="6" cy="6" r="4.5"/>
<polyline points="6,3.5 6,6 7.5,7.5"/>
<svg
viewBox="0 0 12 12"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
>
<circle cx="6" cy="6" r="4.5" />
<polyline points="6,3.5 6,6 7.5,7.5" />
</svg>
Last updated&nbsp;<strong>{{ ts }}</strong>
</span>
}
<nav class="controls" aria-label="Contrôles de navigation du plan">
<button class="ctrl ctrl-zoom" (click)="zoomOut()" title="Zoom arrière (−)" aria-label="Zoom arrière">
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<line x1="2" y1="7" x2="12" y2="7"/>
<button
class="ctrl ctrl-zoom"
(click)="zoomOut()"
title="Zoom arrière (−)"
aria-label="Zoom arrière"
>
<svg
viewBox="0 0 14 14"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<line x1="2" y1="7" x2="12" y2="7" />
</svg>
</button>
<span class="scale-badge">{{ scalePct() }}&thinsp;%</span>
<button class="ctrl ctrl-zoom" (click)="zoomIn()" title="Zoom avant (+)" aria-label="Zoom avant">
<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<line x1="7" y1="2" x2="7" y2="12"/>
<line x1="2" y1="7" x2="12" y2="7"/>
<button
class="ctrl ctrl-zoom"
(click)="zoomIn()"
title="Zoom avant (+)"
aria-label="Zoom avant"
>
<svg
viewBox="0 0 14 14"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<line x1="7" y1="2" x2="7" y2="12" />
<line x1="2" y1="7" x2="12" y2="7" />
</svg>
</button>
<div class="ctrl-divider"></div>
<button class="ctrl ctrl-action" (click)="fitToView()" title="Ajuster à la fenêtre" aria-label="Ajuster à la fenêtre">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
<path d="M1 5.5V2H4.5M15 5.5V2H11.5M1 10.5V14H4.5M15 10.5V14H11.5"/>
<button
class="ctrl ctrl-action"
(click)="fitToView()"
title="Ajuster à la fenêtre"
aria-label="Ajuster à la fenêtre"
>
<svg
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
stroke-width="1.6"
stroke-linecap="round"
>
<path d="M1 5.5V2H4.5M15 5.5V2H11.5M1 10.5V14H4.5M15 10.5V14H11.5" />
</svg>
</button>
<button class="ctrl ctrl-action" (click)="reset()" title="Vue 1:1" aria-label="Réinitialiser le zoom">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M13 3A7 7 0 1 0 14.5 8"/>
<path d="M14.5 3v3h-3"/>
<button
class="ctrl ctrl-action"
(click)="reset()"
title="Vue 1:1"
aria-label="Réinitialiser le zoom"
>
<svg
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
stroke-width="1.6"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M13 3A7 7 0 1 0 14.5 8" />
<path d="M14.5 3v3h-3" />
</svg>
</button>
</nav>
@@ -66,7 +115,6 @@
(pointercancel)="onPointerUp()"
(pointerleave)="onPointerUp(); hideTooltip()"
>
<!-- Chargement -->
@if (isLoading()) {
<div class="state-overlay">
@@ -80,7 +128,7 @@
<div class="state-overlay state-error">
<div class="error-icon">⚠</div>
<p>
Fichier introuvable.<br>
Fichier introuvable.<br />
Copiez <code>plan.svg</code> dans le dossier <code>public/</code> du projet Angular.
</p>
</div>
@@ -94,7 +142,6 @@
[style.width.px]="CANVAS_W"
[style.height.px]="CANVAS_H"
>
<!-- ① Plan SVG original — rendu fidèle via innerHTML -->
<div class="plan-host" [innerHTML]="svgHtml()"></div>
@@ -110,14 +157,24 @@
<defs>
<!-- Ombre portée sous chaque badge -->
<filter id="f-shadow" x="-40%" y="-40%" width="180%" height="180%">
<feDropShadow dx="0" dy="300" stdDeviation="600"
flood-color="#0d1b2a" flood-opacity="0.35"/>
<feDropShadow
dx="0"
dy="300"
stdDeviation="600"
flood-color="#0d1b2a"
flood-opacity="0.35"
/>
</filter>
<!-- Halo de survol -->
<filter id="f-hover" x="-40%" y="-40%" width="180%" height="180%">
<feDropShadow dx="0" dy="0" stdDeviation="800"
flood-color="#ffffff" flood-opacity="0.6"/>
<feDropShadow
dx="0"
dy="0"
stdDeviation="800"
flood-color="#ffffff"
flood-opacity="0.6"
/>
</filter>
</defs>
@@ -134,7 +191,9 @@
[class.no-sensor]="!room.layout.hasSensor"
[attr.transform]="'translate(' + pos.cx + ' ' + pos.cy + ')'"
role="button"
[attr.aria-label]="room.layout.name + ' — CO2 : ' + (room.reading?.co2 ?? 'N/A') + ' ppm'"
[attr.aria-label]="
room.layout.name + ' — CO2 : ' + (room.reading?.co2 ?? 'N/A') + ' ppm'
"
(click)="navigateToRoom(room.layout.id)"
(mouseenter)="showTooltip($event, room)"
(mousemove)="showTooltip($event, room)"
@@ -142,9 +201,12 @@
>
<!-- Fond du badge -->
<rect
x="-8000" y="-5200"
width="16000" height="10400"
rx="2400" ry="2400"
x="-8000"
y="-5200"
width="16000"
height="10400"
rx="2400"
ry="2400"
[attr.fill]="room.color"
fill-opacity="0.93"
filter="url(#f-shadow)"
@@ -153,23 +215,24 @@
<!-- Liseré blanc séparateur (ID / valeur) -->
<line
x1="-7000" y1="600" x2="7000" y2="600"
stroke="white" stroke-opacity="0.30" stroke-width="180"
x1="-7000"
y1="600"
x2="7000"
y2="600"
stroke="white"
stroke-opacity="0.30"
stroke-width="180"
/>
<!-- Indicateur de statut (petit cercle coin haut-droit) -->
@if (room.reading) {
<circle
cx="5800" cy="-4000"
r="900"
fill="white"
fill-opacity="0.85"
/>
<circle cx="5800" cy="-4000" r="900" fill="white" fill-opacity="0.85" />
}
<!-- ID de la salle -->
<text
x="0" y="-2000"
x="0"
y="-2000"
font-size="4200"
font-weight="700"
font-family="'Courier New', 'Lucida Console', monospace"
@@ -177,11 +240,14 @@
text-anchor="middle"
dominant-baseline="middle"
letter-spacing="200"
>{{ room.layout.id }}</text>
>
{{ room.layout.id }}
</text>
<!-- Valeur CO₂ (ou tiret si pas de capteur) -->
<text
x="0" y="2800"
x="0"
y="2800"
font-size="3200"
font-weight="500"
font-family="'Courier New', 'Lucida Console', monospace"
@@ -191,25 +257,22 @@
dominant-baseline="middle"
letter-spacing="100"
>
@if (room.reading) { {{ room.reading.co2 }}&thinsp;ppm }
@else { — }
@if (room.reading) {
{{ room.reading.co2 }}&thinsp;ppm
} @else {
—
}
</text>
</g>
}
}
</svg>
</div>
}
<!-- ───── Tooltip ───── -->
@if (tooltip(); as t) {
<div
class="tooltip"
[style.left.px]="t.x"
[style.top.px]="t.y"
role="tooltip"
>
<div class="tooltip" [style.left.px]="t.x" [style.top.px]="t.y" role="tooltip">
<div class="tt-name">{{ t.room.layout.name }}</div>
<!-- <div class="tt-type">{{ t.room.layout.type }} · cap. {{ t.room.layout.capacity ?? '—' }}</div> -->
<div class="tt-divider"></div>
@@ -218,8 +281,12 @@
<span>CO₂</span>
<strong [style.color]="t.room.color">{{ t.room.reading.co2 }} ppm</strong>
</div>
<div class="tt-row"><span>Temperature</span><strong>{{ t.room.reading.temperature }} °C</strong></div>
<div class="tt-row"><span>Humidity</span> <strong>{{ t.room.reading.humidity }} %</strong></div>
<div class="tt-row">
<span>Temperature</span><strong>{{ t.room.reading.temperature }} °C</strong>
</div>
<div class="tt-row">
<span>Humidity</span> <strong>{{ t.room.reading.humidity }} %</strong>
</div>
<div class="tt-row">
<span>Windows</span>
<strong [class.open]="t.room.reading.windowState === 'open'">
@@ -240,10 +307,10 @@
<span class="hint-sep">·</span>
<span>Click · details</span>
</div>
</div><!-- /viewport -->
</div><!-- /map-area -->
</div>
<!-- /viewport -->
</div>
<!-- /map-area -->
<!-- ══════════════════════════════════════════════
Légende (sidebar droite)
@@ -257,5 +324,5 @@
<app-legend />
</div>
</aside>
</div><!-- /layout -->
</div>
<!-- /layout -->

184
ui/src/app/components/room-map/room-map.component.scss
View File

@@ -5,28 +5,28 @@
// ── Tokens ───────────────────────────────────────────────────────────────────
$navy-deep: #0d1b2a;
$navy: #1a3a6b;
$navy-mid: #1f4e8c;
$navy-light: #cfe0f2;
$accent: #00b4d8;
$surface: #f4f7fb;
$border: #d1dce8;
$text-main: #0d1b2a;
$text-muted: #5a7694;
$radius-lg: 10px;
$radius-md: 7px;
$radius-sm: 5px;
$ctrl-h: 34px;
$navy-deep: #0d1b2a;
$navy: #1a3a6b;
$navy-mid: #1f4e8c;
$navy-light: #cfe0f2;
$accent: #00b4d8;
$surface: #f4f7fb;
$border: #d1dce8;
$text-main: #0d1b2a;
$text-muted: #5a7694;
$radius-lg: 10px;
$radius-md: 7px;
$radius-sm: 5px;
$ctrl-h: 34px;
// Breakpoints
$bp-lg: 1100px;
$bp-md: 768px;
$bp-sm: 480px;
$bp-md: 768px;
$bp-sm: 480px;
// Transitions
$t-fast: 0.12s ease;
$t-normal: 0.20s ease;
$t-fast: 0.12s ease;
$t-normal: 0.2s ease;
// ── Layout global ─────────────────────────────────────────────────────────────
@@ -84,7 +84,10 @@ $t-normal: 0.20s ease;
}
.sidebar-eyebrow {
font: 600 10px/1 ui-sans-serif, system-ui, sans-serif;
font:
600 10px/1 ui-sans-serif,
system-ui,
sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
color: $accent;
@@ -92,7 +95,10 @@ $t-normal: 0.20s ease;
.sidebar-title {
margin: 0;
font: 700 15px/1.2 ui-sans-serif, system-ui, sans-serif;
font:
700 15px/1.2 ui-sans-serif,
system-ui,
sans-serif;
color: $navy;
}
@@ -146,7 +152,10 @@ $t-normal: 0.20s ease;
}
.title-eyebrow {
font: 600 10px/1 ui-sans-serif, system-ui, sans-serif;
font:
600 10px/1 ui-sans-serif,
system-ui,
sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
color: $accent;
@@ -154,7 +163,10 @@ $t-normal: 0.20s ease;
.title {
margin: 0;
font: 700 18px/1.2 ui-sans-serif, system-ui, sans-serif;
font:
700 18px/1.2 ui-sans-serif,
system-ui,
sans-serif;
color: $navy;
}
@@ -164,13 +176,23 @@ $t-normal: 0.20s ease;
display: flex;
align-items: center;
gap: 5px;
font: 500 11px/1 ui-sans-serif, system-ui, sans-serif;
font:
500 11px/1 ui-sans-serif,
system-ui,
sans-serif;
color: $text-muted;
letter-spacing: 0.02em;
svg { width: 12px; height: 12px; flex-shrink: 0; color: $accent; }
svg {
width: 12px;
height: 12px;
flex-shrink: 0;
color: $accent;
}
@media (max-width: 480px) { display: none; }
@media (max-width: 480px) {
display: none;
}
}
// ── Barre de contrôles ────────────────────────────────────────────────────────
@@ -195,28 +217,40 @@ $t-normal: 0.20s ease;
background: transparent;
color: #8ab0cc;
cursor: pointer;
transition: background $t-fast, color $t-fast;
transition:
background $t-fast,
color $t-fast;
&:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
&:active { transform: scale(0.93); }
&:active {
transform: scale(0.93);
}
svg { display: block; }
svg {
display: block;
}
}
.ctrl-zoom {
width: $ctrl-h;
svg { width: 14px; height: 14px; }
svg {
width: 14px;
height: 14px;
}
}
.ctrl-action {
width: $ctrl-h;
svg { width: 15px; height: 15px; }
svg {
width: 15px;
height: 15px;
}
}
.ctrl-divider {
@@ -227,7 +261,9 @@ $t-normal: 0.20s ease;
}
.scale-badge {
font: 600 12px/1 'Courier New', monospace;
font:
600 12px/1 'Courier New',
monospace;
color: $accent;
min-width: 42px;
text-align: center;
@@ -259,19 +295,29 @@ $t-normal: 0.20s ease;
linear-gradient(45deg, transparent 75%, #e2eaf4 75%),
linear-gradient(-45deg, transparent 75%, #e2eaf4 75%);
background-size: 24px 24px;
background-position: 0 0, 0 12px, 12px -12px, -12px 0;
background-position:
0 0,
0 12px,
12px -12px,
-12px 0;
&.panning { cursor: grabbing; }
&.panning {
cursor: grabbing;
}
// Hauteur explicite sur mobile (flex:1 ne suffit pas en colonne avec height:auto)
@media (max-width: 1100px) { min-height: 55vh; }
@media (max-width: 480px) { min-height: 50vh; border-radius: $radius-md; }
@media (max-width: 1100px) {
min-height: 55vh;
}
@media (max-width: 480px) {
min-height: 50vh;
border-radius: $radius-md;
}
}
// ── Canvas transformable ──────────────────────────────────────────────────────
.canvas {
position: absolute;
top: 0;
left: 0;
@@ -279,7 +325,6 @@ $t-normal: 0.20s ease;
will-change: transform;
// Ombre extérieure pour matérialiser les bords du plan
filter: drop-shadow(0 4px 24px rgba($navy-deep, 0.18));
}
// ── Hôte du SVG injecté ───────────────────────────────────────────────────────
@@ -322,7 +367,9 @@ $t-normal: 0.20s ease;
cursor: pointer;
.badge-bg {
transition: filter 0.15s ease, fill-opacity 0.15s ease;
transition:
filter 0.15s ease,
fill-opacity 0.15s ease;
}
&:hover .badge-bg {
@@ -357,7 +404,10 @@ $t-normal: 0.20s ease;
p {
margin: 0;
font: 400 14px/1.5 ui-sans-serif, system-ui, sans-serif;
font:
400 14px/1.5 ui-sans-serif,
system-ui,
sans-serif;
color: $text-muted;
text-align: center;
}
@@ -392,7 +442,9 @@ $t-normal: 0.20s ease;
}
@keyframes spin {
to { transform: rotate(360deg); }
to {
transform: rotate(360deg);
}
}
// ── Hint viewport ─────────────────────────────────────────────────────────────
@@ -408,7 +460,10 @@ $t-normal: 0.20s ease;
background: rgba($navy-deep, 0.62);
backdrop-filter: blur(4px);
color: rgba(255, 255, 255, 0.7);
font: 400 10px/1 ui-sans-serif, system-ui, sans-serif;
font:
400 10px/1 ui-sans-serif,
system-ui,
sans-serif;
letter-spacing: 0.04em;
padding: 5px 12px;
border-radius: 20px;
@@ -423,7 +478,11 @@ $t-normal: 0.20s ease;
// Cache les spans "Mouse wheel" et "Drag" sur mobile, garde juste "Click"
@media (max-width: 480px) {
.hint-mouse, .hint-drag, .hint-sep:not(:last-of-type) { display: none; }
.hint-mouse,
.hint-drag,
.hint-sep:not(:last-of-type) {
display: none;
}
}
}
@@ -446,19 +505,31 @@ $t-normal: 0.20s ease;
animation: tt-in 0.1s ease;
@keyframes tt-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
.tt-name {
font: 700 13px/1.2 ui-sans-serif, system-ui, sans-serif;
font:
700 13px/1.2 ui-sans-serif,
system-ui,
sans-serif;
color: $navy-light;
margin-bottom: 2px;
}
.tt-type {
font: 400 10px/1 ui-sans-serif, system-ui, sans-serif;
font:
400 10px/1 ui-sans-serif,
system-ui,
sans-serif;
color: $text-muted;
text-transform: capitalize;
margin-bottom: 8px;
@@ -475,16 +546,29 @@ $t-normal: 0.20s ease;
justify-content: space-between;
align-items: center;
gap: 16px;
font: 400 11px/1.8 ui-sans-serif, system-ui, sans-serif;
font:
400 11px/1.8 ui-sans-serif,
system-ui,
sans-serif;
span { color: #6a90b0; }
strong { color: #fff; font-weight: 600; }
span {
color: #6a90b0;
}
strong {
color: #fff;
font-weight: 600;
}
strong.open { color: #69e09a; }
strong.open {
color: #69e09a;
}
}
.tt-empty {
font: 400 11px/1 ui-sans-serif, system-ui, sans-serif;
font:
400 11px/1 ui-sans-serif,
system-ui,
sans-serif;
color: #5a7694;
font-style: italic;
margin-top: 4px;

147
ui/src/app/components/room-map/room-map.component.ts
View File

@@ -40,9 +40,9 @@ export interface RoomMapEntry {
// Les badges se chevauchent légèrement à l'échelle globale ; zoomer > 3× les sépare.
// ─────────────────────────────────────────────────────────────────────────────
const SVG_ROOM_CENTERS: Record<string, { cx: number; cy: number }> = {
A8: { cx: 155500, cy: 9000 },
A9: { cx: 177200, cy: 57000 },
A7: { cx: 134800, cy: 84700 },
A8: { cx: 155500, cy: 9000 },
A9: { cx: 177200, cy: 57000 },
A7: { cx: 134800, cy: 84700 },
A6: { cx: 166500, cy: 81200 },
A5: { cx: 134800, cy: 130200 },
A4: { cx: 166500, cy: 141500 },
@@ -51,10 +51,10 @@ const SVG_ROOM_CENTERS: Record<string, { cx: number; cy: number }> = {
A1: { cx: 110000, cy: 225000 },
// B rooms : labels hors de la zone visible analysée du SVG (section tronquée).
// Décommentez et ajustez après inspection du fichier complet.
B4: { cx: 17000, cy: 138000 },
B3: { cx: 17000, cy: 170000 },
B2: { cx: 17000, cy: 205000 },
B1: { cx: 52000, cy: 225000 },
B4: { cx: 17000, cy: 138000 },
B3: { cx: 17000, cy: 170000 },
B2: { cx: 17000, cy: 205000 },
B1: { cx: 52000, cy: 225000 },
};
// Dimensions du SVG original (attributs width/height du fichier Inkscape)
@@ -74,21 +74,21 @@ const SCALE = 100;
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RoomMapComponent implements OnInit, AfterViewInit, OnDestroy {
private http = inject(HttpClient);
private sanitizer = inject(DomSanitizer);
private router = inject(Router);
private roomService = inject(RoomService);
private http = inject(HttpClient);
private sanitizer = inject(DomSanitizer);
private router = inject(Router);
private roomService = inject(RoomService);
private sensorService = inject(SensorService);
private zone = inject(NgZone);
private zone = inject(NgZone);
@ViewChild('viewport') viewportRef!: ElementRef<HTMLDivElement>;
// ── Données ──────────────────────────────────────────────────────────────
rooms = signal<RoomMapEntry[]>([]);
svgHtml = signal<SafeHtml | null>(null);
isLoading = signal(true);
svgError = signal(false);
tooltip = signal<{ room: RoomMapEntry; x: number; y: number } | null>(null);
rooms = signal<RoomMapEntry[]>([]);
svgHtml = signal<SafeHtml | null>(null);
isLoading = signal(true);
svgError = signal(false);
tooltip = signal<{ room: RoomMapEntry; x: number; y: number } | null>(null);
lastUpdated = signal<Date | null>(null);
lastUpdatedStr = computed(() => {
@@ -98,36 +98,36 @@ export class RoomMapComponent implements OnInit, AfterViewInit, OnDestroy {
});
private pollSub?: Subscription;
private svgSub?: Subscription;
private svgSub?: Subscription;
private fitTimer?: ReturnType<typeof setTimeout>;
private roomLayouts: RoomLayout[] = [];
// ── État pan / zoom ──────────────────────────────────────────────────────
// Variables privées pour les mutations hors zone (wheel)
private _s = 1;
private _s = 1;
private _tx = 0;
private _ty = 0;
scale = signal(1);
tx = signal(0);
ty = signal(0);
scale = signal(1);
tx = signal(0);
ty = signal(0);
isPanning = signal(false);
scalePct = computed(() => Math.round(this.scale() * 100));
scalePct = computed(() => Math.round(this.scale() * 100));
transform = computed(() => `translate(${this.tx()}px,${this.ty()}px) scale(${this.scale()})`);
// ── Constantes exposées au template ──────────────────────────────────────
readonly SVG_W = SVG_W;
readonly SVG_H = SVG_H;
readonly CANVAS_W = Math.round(SVG_W / SCALE); // 1843 px
readonly CANVAS_H = Math.round(SVG_H / SCALE); // 2457 px
readonly SVG_W = SVG_W;
readonly SVG_H = SVG_H;
readonly CANVAS_W = Math.round(SVG_W / SCALE); // 1843 px
readonly CANVAS_H = Math.round(SVG_H / SCALE); // 2457 px
readonly MIN_SCALE = 0.04;
readonly MAX_SCALE = 25;
readonly NO_SENSOR_COLOR = '#94a3b8';
// ── Pan ──────────────────────────────────────────────────────────────────
private panStart = { x: 0, y: 0 };
private panStart = { x: 0, y: 0 };
private panOrigin = { tx: 0, ty: 0 };
// Référence stable pour removeEventListener
@@ -140,7 +140,7 @@ export class RoomMapComponent implements OnInit, AfterViewInit, OnDestroy {
ngOnInit(): void {
// Chargement du plan SVG depuis public/
this.svgSub = this.http.get('/plan.svg', { responseType: 'text' }).subscribe({
next: (raw) => {
next: raw => {
const cleaned = raw
.replace(/(<svg\b[^>]*?)\s+width="[^"]*"/, '$1')
.replace(/(<svg\b[^>]*?)\s+height="[^"]*"/, '$1');
@@ -154,27 +154,34 @@ export class RoomMapComponent implements OnInit, AfterViewInit, OnDestroy {
});
// Charge les salles une fois, puis poll les capteurs selon l'intervalle configuré
this.pollSub = this.roomService.getRooms().pipe(
tap((layouts) => { this.roomLayouts = layouts; }),
switchMap((rooms) => concat(
this.sensorService.getLatestReadings(rooms),
timer(environment.polling.mapIntervalMs, environment.polling.mapIntervalMs).pipe(
switchMap(() => this.sensorService.getLatestReadings(rooms)),
),
)),
).subscribe((readings) => {
this.rooms.set(
this.roomLayouts.map((layout) => {
const reading = readings.find((r) => r.roomId === layout.id);
return {
layout,
reading,
color: reading ? getCO2Color(reading.co2) : this.NO_SENSOR_COLOR,
};
})
);
this.lastUpdated.set(new Date());
});
this.pollSub = this.roomService
.getRooms()
.pipe(
tap(layouts => {
this.roomLayouts = layouts;
}),
switchMap(rooms =>
concat(
this.sensorService.getLatestReadings(rooms),
timer(environment.polling.mapIntervalMs, environment.polling.mapIntervalMs).pipe(
switchMap(() => this.sensorService.getLatestReadings(rooms))
)
)
)
)
.subscribe(readings => {
this.rooms.set(
this.roomLayouts.map(layout => {
const reading = readings.find(r => r.roomId === layout.id);
return {
layout,
reading,
color: reading ? getCO2Color(reading.co2) : this.NO_SENSOR_COLOR,
};
})
);
this.lastUpdated.set(new Date());
});
}
ngAfterViewInit(): void {
@@ -213,7 +220,7 @@ export class RoomMapComponent implements OnInit, AfterViewInit, OnDestroy {
const factor = newScale / this._s;
this._tx = pivotX - factor * (pivotX - this._tx);
this._ty = pivotY - factor * (pivotY - this._ty);
this._s = newScale;
this._s = newScale;
// Re-entre dans la zone Angular pour déclencher la détection de changements
this.zone.run(() => {
this.scale.set(this._s);
@@ -224,21 +231,25 @@ export class RoomMapComponent implements OnInit, AfterViewInit, OnDestroy {
onWheel(e: WheelEvent): void {
e.preventDefault();
const rect = this.viewportRef.nativeElement.getBoundingClientRect();
const rect = this.viewportRef.nativeElement.getBoundingClientRect();
// Zoom progressif : ~12% par cran de molette
const factor = e.deltaY < 0 ? 1.12 : 1 / 1.12;
this.applyZoom(this._s * factor, e.clientX - rect.left, e.clientY - rect.top);
}
zoomIn(): void { this.applyZoom(this._s * 1.5, ...this.vpCenter()); }
zoomOut(): void { this.applyZoom(this._s / 1.5, ...this.vpCenter()); }
zoomIn(): void {
this.applyZoom(this._s * 1.5, ...this.vpCenter());
}
zoomOut(): void {
this.applyZoom(this._s / 1.5, ...this.vpCenter());
}
fitToView(): void {
const vp = this.viewportRef?.nativeElement;
if (!vp) return;
const s = Math.min(vp.clientWidth / this.CANVAS_W, vp.clientHeight / this.CANVAS_H) * 0.90;
this._s = s;
this._tx = (vp.clientWidth - this.CANVAS_W * s) / 2;
const s = Math.min(vp.clientWidth / this.CANVAS_W, vp.clientHeight / this.CANVAS_H) * 0.9;
this._s = s;
this._tx = (vp.clientWidth - this.CANVAS_W * s) / 2;
this._ty = (vp.clientHeight - this.CANVAS_H * s) / 2;
this.scale.set(this._s);
this.tx.set(this._tx);
@@ -246,8 +257,12 @@ export class RoomMapComponent implements OnInit, AfterViewInit, OnDestroy {
}
reset(): void {
this._s = 1; this._tx = 0; this._ty = 0;
this.scale.set(1); this.tx.set(0); this.ty.set(0);
this._s = 1;
this._tx = 0;
this._ty = 0;
this.scale.set(1);
this.tx.set(0);
this.ty.set(0);
}
private vpCenter(): [number, number] {
@@ -262,7 +277,7 @@ export class RoomMapComponent implements OnInit, AfterViewInit, OnDestroy {
onPointerDown(e: PointerEvent): void {
if (e.button !== 0) return;
this.isPanning.set(true);
this.panStart = { x: e.clientX, y: e.clientY };
this.panStart = { x: e.clientX, y: e.clientY };
this.panOrigin = { tx: this._tx, ty: this._ty };
(e.target as HTMLElement).setPointerCapture(e.pointerId);
}
@@ -275,7 +290,9 @@ export class RoomMapComponent implements OnInit, AfterViewInit, OnDestroy {
this.ty.set(this._ty);
}
onPointerUp(): void { this.isPanning.set(false); }
onPointerUp(): void {
this.isPanning.set(false);
}
// ═══════════════════════════════════════════════════════════════════════
// Tooltip & Navigation
@@ -286,6 +303,10 @@ export class RoomMapComponent implements OnInit, AfterViewInit, OnDestroy {
this.tooltip.set({ room, x: e.clientX - rect.left + 18, y: e.clientY - rect.top - 12 });
}
hideTooltip(): void { this.tooltip.set(null); }
navigateToRoom(id: string): void { this.router.navigate(['/room', id]); }
hideTooltip(): void {
this.tooltip.set(null);
}
navigateToRoom(id: string): void {
this.router.navigate(['/room', id]);
}
}

12
ui/src/app/config/co2-levels.config.ts
View File

@@ -11,12 +11,12 @@ export interface CO2Level {
}
export const CO2_LEVELS: CO2Level[] = [
{ label: 'Excellent', range: '< 800 ppm', color: '#4caf50', maxPpm: 800 },
{ label: 'Good', range: '800-1000 ppm', color: '#8bc34a', maxPpm: 1000 },
{ label: 'Moderate', range: '1000-1200 ppm', color: '#ffc107', maxPpm: 1200 },
{ label: 'Poor', range: '1200-1500 ppm', color: '#ff9800', maxPpm: 1500 },
{ label: 'Very Poor', range: '1500-2000 ppm', color: '#ff5722', maxPpm: 2000 },
{ label: 'Critical', range: '> 2000 ppm', color: '#f44336', maxPpm: Infinity },
{ label: 'Excellent', range: '< 800 ppm', color: '#4caf50', maxPpm: 800 },
{ label: 'Good', range: '800-1000 ppm', color: '#8bc34a', maxPpm: 1000 },
{ label: 'Moderate', range: '1000-1200 ppm', color: '#ffc107', maxPpm: 1200 },
{ label: 'Poor', range: '1200-1500 ppm', color: '#ff9800', maxPpm: 1500 },
{ label: 'Very Poor', range: '1500-2000 ppm', color: '#ff5722', maxPpm: 2000 },
{ label: 'Critical', range: '> 2000 ppm', color: '#f44336', maxPpm: Infinity },
];
export function getCO2Color(ppm: number): string {

169
ui/src/app/config/rooms-layout.config.ts
View File

@@ -32,61 +32,178 @@ export interface RoomLayout {
export const ROOM_LAYOUTS: RoomLayout[] = [
// ── Espace B (lower-left, x=29–361) ──────────────────────────────────────
{
id: 'B4', name: 'B4', espace: 'B', floor: 1, type: 'meeting',
x: 29, y: 445, width: 332, height: 60, capacity: 12, hasSensor: true,
id: 'B4',
name: 'B4',
espace: 'B',
floor: 1,
type: 'meeting',
x: 29,
y: 445,
width: 332,
height: 60,
capacity: 12,
hasSensor: true,
},
{
id: 'B3', name: 'B3', espace: 'B', floor: 1, type: 'office',
x: 29, y: 505, width: 332, height: 60, capacity: 8, hasSensor: true,
id: 'B3',
name: 'B3',
espace: 'B',
floor: 1,
type: 'office',
x: 29,
y: 505,
width: 332,
height: 60,
capacity: 8,
hasSensor: true,
},
{
id: 'B2', name: 'B2', espace: 'B', floor: 1, type: 'classroom',
x: 29, y: 565, width: 332, height: 80, capacity: 20, hasSensor: true,
id: 'B2',
name: 'B2',
espace: 'B',
floor: 1,
type: 'classroom',
x: 29,
y: 565,
width: 332,
height: 80,
capacity: 20,
hasSensor: true,
},
{
id: 'B1', name: 'B1', espace: 'B', floor: 1, type: 'lab',
x: 29, y: 645, width: 332, height: 50, capacity: 0, hasSensor: false,
id: 'B1',
name: 'B1',
espace: 'B',
floor: 1,
type: 'lab',
x: 29,
y: 645,
width: 332,
height: 50,
capacity: 0,
hasSensor: false,
},
// ── Espace A — upper-right column (x=811–1095) ───────────────────────────
{
id: 'A8', name: 'A8', espace: 'A', floor: 1, type: 'office',
x: 811, y: 15, width: 142, height: 90, capacity: 10, hasSensor: true,
id: 'A8',
name: 'A8',
espace: 'A',
floor: 1,
type: 'office',
x: 811,
y: 15,
width: 142,
height: 90,
capacity: 10,
hasSensor: true,
},
{
id: 'A9', name: 'A9', espace: 'A', floor: 1, type: 'classroom',
x: 953, y: 15, width: 142, height: 90, capacity: 40, hasSensor: true,
id: 'A9',
name: 'A9',
espace: 'A',
floor: 1,
type: 'classroom',
x: 953,
y: 15,
width: 142,
height: 90,
capacity: 40,
hasSensor: true,
},
{
id: 'A7', name: 'A7', espace: 'A', floor: 1, type: 'classroom',
x: 811, y: 105, width: 284, height: 60, capacity: 40, hasSensor: true,
id: 'A7',
name: 'A7',
espace: 'A',
floor: 1,
type: 'classroom',
x: 811,
y: 105,
width: 284,
height: 60,
capacity: 40,
hasSensor: true,
},
{
id: 'A6', name: 'A6', espace: 'A', floor: 1, type: 'classroom',
x: 811, y: 165, width: 284, height: 80, capacity: 30, hasSensor: true,
id: 'A6',
name: 'A6',
espace: 'A',
floor: 1,
type: 'classroom',
x: 811,
y: 165,
width: 284,
height: 80,
capacity: 30,
hasSensor: true,
},
// ── Espace A — centre-right (A5 left of A4, same y-band) ─────────────────
{
id: 'A5', name: 'A5', espace: 'A', floor: 1, type: 'conference',
x: 598, y: 245, width: 213, height: 80, capacity: 20, hasSensor: true,
id: 'A5',
name: 'A5',
espace: 'A',
floor: 1,
type: 'conference',
x: 598,
y: 245,
width: 213,
height: 80,
capacity: 20,
hasSensor: true,
},
{
id: 'A4', name: 'A4', espace: 'A', floor: 1, type: 'classroom',
x: 811, y: 245, width: 284, height: 95, capacity: 60, hasSensor: true,
id: 'A4',
name: 'A4',
espace: 'A',
floor: 1,
type: 'classroom',
x: 811,
y: 245,
width: 284,
height: 95,
capacity: 60,
hasSensor: true,
},
{
id: 'A2', name: 'A2', espace: 'A', floor: 1, type: 'classroom',
x: 811, y: 340, width: 284, height: 95, capacity: 60, hasSensor: true,
id: 'A2',
name: 'A2',
espace: 'A',
floor: 1,
type: 'classroom',
x: 811,
y: 340,
width: 284,
height: 95,
capacity: 60,
hasSensor: true,
},
// ── Espace A — lower centre ───────────────────────────────────────────────
{
id: 'A3', name: 'A3', espace: 'A', floor: 1, type: 'lab',
x: 408, y: 445, width: 403, height: 60, capacity: 25, hasSensor: true,
id: 'A3',
name: 'A3',
espace: 'A',
floor: 1,
type: 'lab',
x: 408,
y: 445,
width: 403,
height: 60,
capacity: 25,
hasSensor: true,
},
{
id: 'A1', name: 'A1', espace: 'A', floor: 1, type: 'meeting',
x: 598, y: 595, width: 261, height: 100, capacity: 15, hasSensor: true,
id: 'A1',
name: 'A1',
espace: 'A',
floor: 1,
type: 'meeting',
x: 598,
y: 595,
width: 261,
height: 100,
capacity: 15,
hasSensor: true,
},
];

4
ui/src/app/services/room.service.ts
View File

@@ -6,7 +6,7 @@ import { environment } from '../../environments/environment';
@Injectable({ providedIn: 'root' })
export class RoomService {
private http = inject(HttpClient);
private http = inject(HttpClient);
private apiUrl = environment.apiUrl;
/**
@@ -21,7 +21,7 @@ export class RoomService {
.filter((r): r is RoomLayout => r !== undefined);
return matched.length > 0 ? matched : ROOM_LAYOUTS;
}),
catchError(() => of(ROOM_LAYOUTS)),
catchError(() => of(ROOM_LAYOUTS))
);
}

32
ui/src/app/services/sensor.service.spec.ts
View File

@@ -32,8 +32,12 @@ describe('SensorService', () => {
service.getLatestReadings(roomsWithSensors).subscribe();
roomsWithSensors.forEach(r =>
httpMock.expectOne(`${environment.apiUrl}/rooms/${r.id}/current`).flush({
time: new Date().toISOString(), co2_ppm: 600, temp: 21,
humidity: 45, window: false, room: r.id,
time: new Date().toISOString(),
co2_ppm: 600,
temp: 21,
humidity: 45,
window: false,
room: r.id,
})
);
});
@@ -44,7 +48,8 @@ describe('SensorService', () => {
done();
});
roomsWithSensors.forEach(r =>
httpMock.expectOne(`${environment.apiUrl}/rooms/${r.id}/current`)
httpMock
.expectOne(`${environment.apiUrl}/rooms/${r.id}/current`)
.error(new ProgressEvent('network error'))
);
});
@@ -53,8 +58,12 @@ describe('SensorService', () => {
const subset = roomsWithSensors.slice(0, 1);
service.getLatestReadings(subset).subscribe();
httpMock.expectOne(`${environment.apiUrl}/rooms/${subset[0].id}/current`).flush({
time: new Date().toISOString(), co2_ppm: 500, temp: 20,
humidity: 50, window: true, room: subset[0].id,
time: new Date().toISOString(),
co2_ppm: 500,
temp: 20,
humidity: 50,
window: true,
room: subset[0].id,
});
});
});
@@ -64,7 +73,14 @@ describe('SensorService', () => {
service.getLatestReadingForRoom(firstRoomId).subscribe();
const req = httpMock.expectOne(`${environment.apiUrl}/rooms/${firstRoomId}/current`);
expect(req.request.method).toBe('GET');
req.flush({ time: new Date().toISOString(), co2_ppm: 600, temp: 21, humidity: 45, window: false, room: firstRoomId });
req.flush({
time: new Date().toISOString(),
co2_ppm: 600,
temp: 21,
humidity: 45,
window: false,
room: firstRoomId,
});
});
it('should return undefined on HTTP error', done => {
@@ -81,7 +97,9 @@ describe('SensorService', () => {
describe('getHistoryForRoom()', () => {
it('should call GET /rooms/:roomId/history', () => {
service.getHistoryForRoom(firstRoomId).subscribe();
const req = httpMock.expectOne(`${environment.apiUrl}/rooms/${firstRoomId}/history?window=1 day`);
const req = httpMock.expectOne(
`${environment.apiUrl}/rooms/${firstRoomId}/history?window=1 day`
);
expect(req.request.method).toBe('GET');
req.flush([]);
});

78
ui/src/app/services/sensor.service.ts
View File

@@ -7,46 +7,46 @@ import { environment } from '../../environments/environment';
// Raw shape returned by the Go API (InfluxDB row)
interface GoReading {
time: string;
co2_ppm: number;
temp: number;
time: string;
co2_ppm: number;
temp: number;
humidity: number;
window: boolean;
room: string;
campus?: string;
node?: string;
window: boolean;
room: string;
campus?: string;
node?: string;
}
function toSensorReading(raw: GoReading): SensorReading {
const layout = ROOM_LAYOUTS.find(r => r.id === raw.room);
return {
roomId: raw.room,
roomName: layout?.name ?? raw.room,
co2: raw.co2_ppm ?? 0,
temperature: raw.temp ?? 0,
humidity: raw.humidity ?? 0,
roomId: raw.room,
roomName: layout?.name ?? raw.room,
co2: raw.co2_ppm ?? 0,
temperature: raw.temp ?? 0,
humidity: raw.humidity ?? 0,
windowState: (raw.window ? 'open' : 'closed') as WindowState,
timestamp: new Date(raw.time),
timestamp: new Date(raw.time),
};
}
const randomWindowState = (): WindowState => Math.random() > 0.5 ? 'open' : 'closed';
const randomWindowState = (): WindowState => (Math.random() > 0.5 ? 'open' : 'closed');
const MOCK_HISTORY: SensorReading[] = ROOM_LAYOUTS.filter(r => r.hasSensor).flatMap(room =>
Array.from({ length: 24 }, (_, i) => ({
roomId: room.id,
roomName: room.name,
co2: Math.floor(Math.random() * 800) + 300,
roomId: room.id,
roomName: room.name,
co2: Math.floor(Math.random() * 800) + 300,
temperature: Math.round((Math.random() * 8 + 18) * 10) / 10,
humidity: Math.floor(Math.random() * 30 + 35),
humidity: Math.floor(Math.random() * 30 + 35),
windowState: randomWindowState(),
timestamp: new Date(Date.now() - i * 60 * 60 * 1000),
timestamp: new Date(Date.now() - i * 60 * 60 * 1000),
}))
);
@Injectable({ providedIn: 'root' })
export class SensorService {
private http = inject(HttpClient);
private http = inject(HttpClient);
private apiUrl = environment.apiUrl;
/** Fetches the latest reading for the given rooms in parallel. */
@@ -58,40 +58,36 @@ export class SensorService {
const requests = rooms.map(r =>
this.http.get<GoReading>(`${this.apiUrl}/rooms/${r.id}/current`).pipe(
map(toSensorReading),
catchError(() => of(null)),
catchError(() => of(null))
)
);
return forkJoin(requests).pipe(
map(results => results.filter((r): r is SensorReading => r !== null)),
catchError((e) => {
catchError(e => {
console.error('[SensorService] getLatestReadings failed', e);
return of(fallback);
}),
})
);
}
getLatestReadingForRoom(roomId: string): Observable<SensorReading | undefined> {
return this.http
.get<GoReading>(`${this.apiUrl}/rooms/${roomId}/current`)
.pipe(
map(toSensorReading),
catchError((e) => {
console.error(`[SensorService] getLatestReadingForRoom(${roomId}) failed`, e);
return of(undefined);
}),
);
return this.http.get<GoReading>(`${this.apiUrl}/rooms/${roomId}/current`).pipe(
map(toSensorReading),
catchError(e => {
console.error(`[SensorService] getLatestReadingForRoom(${roomId}) failed`, e);
return of(undefined);
})
);
}
getHistoryForRoom(roomId: string): Observable<SensorReading[]> {
return this.http
.get<GoReading[]>(`${this.apiUrl}/rooms/${roomId}/history?window=1 day`)
.pipe(
map(rows => rows.map(toSensorReading)),
catchError((e) => {
console.error(`[SensorService] getHistoryForRoom(${roomId}) failed`, e);
return of([]);
}),
);
return this.http.get<GoReading[]>(`${this.apiUrl}/rooms/${roomId}/history?window=1 day`).pipe(
map(rows => rows.map(toSensorReading)),
catchError(e => {
console.error(`[SensorService] getHistoryForRoom(${roomId}) failed`, e);
return of([]);
})
);
}
}

2
ui/src/environments/environment.prod.ts
View File

@@ -5,7 +5,7 @@ export const environment = {
influxUrl: '',
logLevel: 'error',
polling: {
mapIntervalMs: 30_000,
mapIntervalMs: 30_000,
detailIntervalMs: 15_000,
},
api: {

2
ui/src/environments/environment.template.ts
View File

@@ -9,7 +9,7 @@ export const environment = {
influxUrl: '',
logLevel: 'error',
polling: {
mapIntervalMs: 30_000,
mapIntervalMs: 30_000,
detailIntervalMs: 15_000,
},
};

2
ui/src/environments/environment.ts
View File

@@ -6,7 +6,7 @@ export const environment = {
influxUrl: '',
logLevel: 'debug',
polling: {
mapIntervalMs: 30_000,
mapIntervalMs: 30_000,
detailIntervalMs: 15_000,
},
api: {