File size: 3,168 Bytes
fa9c65f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | import { Panel } from './Panel';
import { joinSafeHtml, safeHtml } from '@/utils/sanitize';
import { type ClimateAnomaly, getSeverityIcon, formatDelta } from '@/services/climate';
import { t } from '@/services/i18n';
export class ClimateAnomalyPanel extends Panel {
private anomalies: ClimateAnomaly[] = [];
private hasLoadedAnomalies = false;
private onZoneClick?: (lat: number, lon: number) => void;
constructor() {
super({
id: 'climate',
title: t('panels.climate'),
showCount: true,
trackActivity: true,
infoTooltip: t('components.climate.infoTooltip'),
});
this.showLoading(t('common.loadingClimateData'));
}
public setZoneClickHandler(handler: (lat: number, lon: number) => void): void {
this.onZoneClick = handler;
}
public setAnomalies(anomalies: ClimateAnomaly[]): void {
this.anomalies = anomalies;
this.hasLoadedAnomalies = true;
this.setCount(anomalies.length);
this.renderContent();
}
public hasData(): boolean {
return this.hasLoadedAnomalies;
}
private renderContent(): void {
if (this.anomalies.length === 0) {
this.setSafeContent(safeHtml`<div class="panel-empty">${t('components.climate.noAnomalies')}</div>`);
return;
}
const sorted = [...this.anomalies].sort((a, b) => {
const severityOrder = { extreme: 0, moderate: 1, normal: 2 };
return (severityOrder[a.severity] || 2) - (severityOrder[b.severity] || 2);
});
const rows = joinSafeHtml(sorted.map(a => {
const icon = getSeverityIcon(a);
const tempClass = a.tempDelta > 0 ? 'climate-warm' : 'climate-cold';
const precipClass = a.precipDelta > 0 ? 'climate-wet' : 'climate-dry';
const sevClass = `severity-${a.severity}`;
const rowClass = a.severity === 'extreme' ? ' climate-extreme-row' : '';
return safeHtml`<tr class="climate-row${rowClass}" data-lat="${a.lat}" data-lon="${a.lon}">
<td class="climate-zone"><span class="climate-icon">${icon}</span>${a.zone}</td>
<td class="climate-num ${tempClass}">${formatDelta(a.tempDelta, '°C')}</td>
<td class="climate-num ${precipClass}">${formatDelta(a.precipDelta, 'mm')}</td>
<td><span class="climate-badge ${sevClass}">${t(`components.climate.severity.${a.severity}`)}</span></td>
</tr>`;
}));
this.setSafeContent(safeHtml`
<div class="climate-panel-content">
<table class="climate-table">
<thead>
<tr>
<th>${t('components.climate.zone')}</th>
<th>${t('components.climate.temp')}</th>
<th>${t('components.climate.precip')}</th>
<th>${t('components.climate.severityLabel')}</th>
</tr>
</thead>
<tbody>${rows}</tbody>
</table>
</div>
`);
this.content.querySelectorAll('.climate-row').forEach(el => {
el.addEventListener('click', () => {
const lat = Number((el as HTMLElement).dataset.lat);
const lon = Number((el as HTMLElement).dataset.lon);
if (Number.isFinite(lat) && Number.isFinite(lon)) this.onZoneClick?.(lat, lon);
});
});
}
}
|