gwadaking/radarsargasses
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ETA côtier — transformer la map en outil de décision actionnable

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gwadaking
2026-04-03 18:42:21 -04:00
parent da7d62fa6a
commit 744f76f85e
6 changed files with 137 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/SpotPanel/SpotPanel.css
View File

@@ -124,6 +124,27 @@
.gauge--medium .spot-panel__gauge-fill { background: #eab308; }
.gauge--high .spot-panel__gauge-fill { background: #ef4444; }
/* ETA */
.spot-panel__eta {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
border-radius: 14px;
border: 2px solid rgba(0,0,0,0.15);
margin-bottom: 10px;
font-weight: 700;
font-size: 15px;
font-family: 'Fredoka One', cursive;
}
.eta--now { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.eta--soon { background: #fef9c3; color: #92400e; border-color: #fde68a; }
.eta--later { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.eta--safe { background: #dcfce7; color: #15803d; border-color: #86efac; }
.spot-panel__eta-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.spot-panel__eta-label { font-family: 'Fredoka', sans-serif; font-weight: 600; }
/* Trend */
.spot-panel__trend {
display: flex;

19
frontend/src/components/SpotPanel/SpotPanel.jsx
View File

@@ -12,6 +12,15 @@ const TREND_CONFIG = {
decreasing: { icon: '📉', label: 'Amélioration en cours', cls: 'trend--good' },
};
function etaLabel(etaHours) {
if (etaHours === 0) return { icon: '🚨', label: 'Impact en cours', cls: 'eta--now' };
if (etaHours === 6) return { icon: '⚠️', label: 'Impact prévu dans ~6h', cls: 'eta--soon' };
if (etaHours === 12) return { icon: '⚠️', label: 'Impact prévu dans ~12h', cls: 'eta--soon' };
if (etaHours === 24) return { icon: '🕐', label: 'Impact prévu dans ~24h', cls: 'eta--later' };
if (etaHours === 48) return { icon: '🕐', label: 'Impact prévu dans ~48h', cls: 'eta--later' };
return { icon: '✅', label: 'Aucun impact prévu (48h)', cls: 'eta--safe' };
}
const HORIZON_LABELS = { now: 'Maintenant', h6: '+6h', h12: '+12h', h24: '+24h', h48: '+48h' };
export default function SpotPanel({ spot, activeStep, onClose }) {
@@ -72,6 +81,16 @@ export default function SpotPanel({ spot, activeStep, onClose }) {
? <p className="spot-panel__no-data">Aucune donnée pour cet horizon.</p>
: (
<>
{activeStep === 'now' && (() => {
const eta = etaLabel(displayScore.etaHours ?? undefined);
return (
<div className={`spot-panel__eta ${eta.cls}`}>
<span className="spot-panel__eta-icon">{eta.icon}</span>
<span className="spot-panel__eta-label">{eta.label}</span>
</div>
);
})()}
<div className={`spot-panel__gauge gauge--${lvl}`}>
<div className="spot-panel__gauge-top">
<span className="spot-panel__gauge-label">{LEVEL_LABEL[lvl] ?? lvl}</span>