2569718930@qq.com
673 lines
27 KiB
TypeScript
673 lines
27 KiB
TypeScript
"use client";
|
||
|
||
import { useMemo, useState, useEffect, useRef, useCallback } from "react";
|
||
import { useCityDetails, useDashboardActions } from "@/hooks/useDashboardStore";
|
||
import { useI18n } from "@/hooks/useI18n";
|
||
import type { CityDetail, ObservationFreshness } from "@/lib/dashboard-types";
|
||
import {
|
||
getMonitorFreshnessLevel,
|
||
getObservationFreshness,
|
||
shouldRefreshMonitorCity,
|
||
type MonitorFreshnessLevel,
|
||
} from "@/lib/source-freshness";
|
||
import {
|
||
getMonitorRefreshRequest,
|
||
MONITOR_REFRESH_INTERVAL_MS,
|
||
type MonitorRefreshTrigger,
|
||
} from "./monitor-refresh-policy";
|
||
import { resolveMonitorTemperature } from "./monitor-temperature";
|
||
|
||
/* ── Constants ───────────────────────────────────────────────── */
|
||
const MONITOR_KEYS = [
|
||
"seoul", "busan", "tokyo", "ankara", "helsinki", "amsterdam",
|
||
"istanbul", "paris", "hong kong", "lau fau shan", "taipei",
|
||
"new york", "los angeles", "chicago", "denver", "atlanta",
|
||
"miami", "san francisco", "houston", "dallas", "austin", "seattle",
|
||
] as const;
|
||
|
||
type MonitorKey = (typeof MONITOR_KEYS)[number];
|
||
type MonitorRefreshRequest = ReturnType<typeof getMonitorRefreshRequest>;
|
||
|
||
const CONCURRENCY = 6;
|
||
const KOREA_RUNWAY_MONITOR_KEYS = new Set<MonitorKey>(["seoul", "busan"]);
|
||
|
||
/* ── Helpers ─────────────────────────────────────────────────── */
|
||
type Lang = { isEn: boolean };
|
||
function t(en: string, zh: string, { isEn }: Lang) { return isEn ? en : zh; }
|
||
|
||
type Freshness = MonitorFreshnessLevel;
|
||
|
||
function freshnessDotTitle(
|
||
level: Freshness,
|
||
ageMin: number | null | undefined,
|
||
isEn: boolean,
|
||
freshness?: ObservationFreshness | null,
|
||
): string {
|
||
const age = ageMin != null ? (isEn ? `${ageMin} min ago` : `${ageMin} 分钟前`) : "--";
|
||
const source = freshness?.source_label ? `${freshness.source_label} · ` : "";
|
||
const cadence =
|
||
freshness?.native_update_interval_sec != null
|
||
? Math.round(freshness.native_update_interval_sec / 60)
|
||
: null;
|
||
const cadenceText =
|
||
cadence != null
|
||
? isEn
|
||
? ` · native cadence ${cadence} min`
|
||
: ` · 源端约 ${cadence} 分钟更新`
|
||
: "";
|
||
if (isEn) {
|
||
return level === "fresh" ? `${source}Fresh · ${age}${cadenceText}` :
|
||
level === "aging" ? `${source}Waiting / aging · ${age}${cadenceText}` :
|
||
level === "stale" ? `${source}Stale · ${age}${cadenceText}` : `${source}Unknown age${cadenceText}`;
|
||
}
|
||
return level === "fresh" ? `${source}数据新鲜 · ${age}${cadenceText}` :
|
||
level === "aging" ? `${source}等待源端更新 / 数据变旧 · ${age}${cadenceText}` :
|
||
level === "stale" ? `${source}数据陈旧 · ${age}${cadenceText}` : `${source}更新时间未知${cadenceText}`;
|
||
}
|
||
|
||
/* ── Audio alert (Web Audio API, no external file needed) ────── */
|
||
function playNewHighBeep(): void {
|
||
try {
|
||
const ctx = new AudioContext();
|
||
// Two-tone rising beep: signals a new temperature high
|
||
const tones = [
|
||
{ freq: 880, start: 0, dur: 0.12, peak: 0.40 },
|
||
{ freq: 1100, start: 0.15, dur: 0.18, peak: 0.55 },
|
||
];
|
||
for (const { freq, start, dur, peak } of tones) {
|
||
const osc = ctx.createOscillator();
|
||
const g = ctx.createGain();
|
||
osc.type = "sine";
|
||
osc.frequency.value = freq;
|
||
osc.connect(g);
|
||
g.connect(ctx.destination);
|
||
g.gain.setValueAtTime(0, ctx.currentTime + start);
|
||
g.gain.linearRampToValueAtTime(peak, ctx.currentTime + start + 0.03);
|
||
g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + start + dur);
|
||
osc.start(ctx.currentTime + start);
|
||
osc.stop(ctx.currentTime + start + dur + 0.01);
|
||
}
|
||
setTimeout(() => ctx.close(), 600);
|
||
} catch {
|
||
// AudioContext may be blocked before a user gesture — silently ignore
|
||
}
|
||
}
|
||
|
||
function trendClass(detail: CityDetail | undefined, key?: string): "rising" | "falling" | "flat" {
|
||
const ignoreRunway = key === "seoul" || key === "busan";
|
||
const { source } = resolveMonitorTemperature(detail, { ignoreRunway });
|
||
// Runway surface temp vs air temp comparison is meaningless
|
||
if (
|
||
source === "amos_runway_median" ||
|
||
source === "amos_runway" ||
|
||
source === "amsc_awos_runway_max" ||
|
||
source === "amsc_awos_runway"
|
||
) return "flat";
|
||
const cur = resolveMonitorTemperature(detail, { ignoreRunway }).value;
|
||
const max = resolveMaxSoFar(detail, key);
|
||
if (cur != null && max != null && cur >= max + 0.3) return "rising";
|
||
if (cur != null && max != null && cur < max - 1.0) return "falling";
|
||
return "flat";
|
||
}
|
||
|
||
function trendSymbol(tr: "rising" | "falling" | "flat") {
|
||
return tr === "rising" ? "↑" : tr === "falling" ? "↓" : "→";
|
||
}
|
||
|
||
/**
|
||
* Resolve today's observed high temperature.
|
||
*
|
||
* HKO cities (Hong Kong / Lau Fau Shan):
|
||
* current.max_so_far from HKO observatory IS the settlement anchor.
|
||
* airport_current (METAR) is secondary — prefer HKO first.
|
||
*
|
||
* All other cities:
|
||
* airport_current.max_so_far is the authoritative settlement reference.
|
||
*/
|
||
function resolveMaxSoFar(
|
||
detail: CityDetail | undefined,
|
||
key?: string,
|
||
): number | null {
|
||
// HKO: settlement station takes priority over airport METAR
|
||
if (key === "hong kong" || key === "lau fau shan") {
|
||
const hko = detail?.current?.max_so_far ?? null;
|
||
if (hko != null) return Math.round(hko * 10) / 10;
|
||
}
|
||
|
||
const v = detail?.airport_current?.max_so_far ?? null;
|
||
if (v != null) return Math.round(v * 10) / 10;
|
||
|
||
// Non-HKO fallback to current.max_so_far
|
||
if (key !== "hong kong" && key !== "lau fau shan") {
|
||
const cur = detail?.current?.max_so_far ?? null;
|
||
if (cur != null) return Math.round(cur * 10) / 10;
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
/* ── Airport names ───────────────────────────────────────────── */
|
||
const AIRPORT_NAMES: Record<string, { en: string; zh: string }> = {
|
||
seoul: { en: "Incheon", zh: "仁川" },
|
||
busan: { en: "Gimhae", zh: "金海" },
|
||
tokyo: { en: "Haneda", zh: "羽田" },
|
||
ankara: { en: "Esenboğa", zh: "埃森博阿" },
|
||
helsinki: { en: "Vantaa", zh: "万塔" },
|
||
amsterdam: { en: "Schiphol", zh: "史基浦" },
|
||
istanbul: { en: "Airport", zh: "机场站" },
|
||
paris: { en: "Le Bourget", zh: "勒布尔热" },
|
||
"hong kong": { en: "Observatory", zh: "天文台" },
|
||
"lau fau shan": { en: "Lau Fau Shan",zh: "流浮山" },
|
||
taipei: { en: "Songshan", zh: "松山" },
|
||
"new york": { en: "LaGuardia", zh: "拉瓜迪亚" },
|
||
"los angeles": { en: "LAX", zh: "洛杉矶" },
|
||
chicago: { en: "O'Hare", zh: "奥黑尔" },
|
||
denver: { en: "Buckley", zh: "巴克利" },
|
||
atlanta: { en: "Hartsfield", zh: "哈茨菲尔德" },
|
||
miami: { en: "MIA", zh: "迈阿密" },
|
||
"san francisco": { en: "SFO", zh: "旧金山" },
|
||
houston: { en: "Hobby", zh: "霍比" },
|
||
dallas: { en: "Love Field", zh: "勒芙机场" },
|
||
austin: { en: "Bergstrom", zh: "伯格斯特罗姆" },
|
||
seattle: { en: "SeaTac", zh: "西塔克" },
|
||
};
|
||
|
||
function airportLabel(key: string, isEn: boolean) {
|
||
const e = AIRPORT_NAMES[key];
|
||
return e ? (isEn ? e.en : e.zh) : "";
|
||
}
|
||
|
||
/**
|
||
* Cities whose observation data comes from HKO ground stations,
|
||
* NOT ICAO airport METAR. Display "天文台观测 / HKO Obs" for these.
|
||
*/
|
||
const HKO_OBS_CITIES = new Set<MonitorKey>(["hong kong", "lau fau shan"]);
|
||
|
||
const SOURCE_LABELS: Record<string, { en: string; zh: string }> = {
|
||
amsc_awos_runway_max: { en: "AMSC AWOS Runway", zh: "AMSC AWOS 跑道观测" },
|
||
amsc_awos_runway: { en: "AMSC AWOS Runway", zh: "AMSC AWOS 跑道观测" },
|
||
amsc_awos: { en: "AMSC AWOS", zh: "AMSC AWOS" },
|
||
amos_runway_median: { en: "AMOS Runway", zh: "AMOS 跑道温度" },
|
||
amos_runway: { en: "AMOS Runway", zh: "AMOS 跑道温度" },
|
||
amos: { en: "AMOS", zh: "AMOS" },
|
||
madis_hfmetar: { en: "NOAA MADIS", zh: "NOAA MADIS" },
|
||
mgm: { en: "MGM", zh: "MGM" },
|
||
jma_amedas: { en: "JMA AMeDAS", zh: "JMA AMeDAS" },
|
||
fmi: { en: "FMI", zh: "FMI" },
|
||
knmi: { en: "KNMI", zh: "KNMI" },
|
||
sg_mss: { en: "Singapore MSS", zh: "新加坡 MSS" },
|
||
airport_current: { en: "Airport METAR", zh: "机场报文" },
|
||
current: { en: "Obs", zh: "观测" },
|
||
};
|
||
|
||
function resolveSourceLabel(
|
||
detail: CityDetail | undefined,
|
||
key: MonitorKey,
|
||
isEn: boolean,
|
||
): string {
|
||
// Use airport_primary source label from high-freq pipeline
|
||
const apSource = detail?.airport_primary?.source_code;
|
||
if (apSource && SOURCE_LABELS[apSource]) {
|
||
return isEn ? SOURCE_LABELS[apSource].en : SOURCE_LABELS[apSource].zh;
|
||
}
|
||
// Use temperature resolution source
|
||
const { source } = resolveMonitorTemperature(detail, {
|
||
ignoreRunway: KOREA_RUNWAY_MONITOR_KEYS.has(key),
|
||
});
|
||
if (source && SOURCE_LABELS[source]) {
|
||
return isEn ? SOURCE_LABELS[source].en : SOURCE_LABELS[source].zh;
|
||
}
|
||
if (HKO_OBS_CITIES.has(key)) return isEn ? "HKO Obs" : "天文台观测";
|
||
return isEn ? "Airport METAR" : "机场报文";
|
||
}
|
||
|
||
/* ── Skeleton Card ───────────────────────────────────────────── */
|
||
function SkeletonCard({ label }: { label: string }) {
|
||
return (
|
||
<div className="monitor-skeleton-card" aria-label={label}>
|
||
<div className="monitor-skeleton-line" style={{ height: 13, width: "42%", marginBottom: 14 }} />
|
||
<div className="monitor-skeleton-line" style={{ height: 50, width: "52%", marginBottom: 16 }} />
|
||
<div className="monitor-skeleton-line" style={{ height: 11, width: "68%" }} />
|
||
<div className="monitor-skeleton-line" style={{ height: 11, width: "38%", marginTop: 8 }} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ── Freshness dot ───────────────────────────────────────────── */
|
||
function FreshnessDot({ level, title }: { level: Freshness; title: string }) {
|
||
return (
|
||
<span
|
||
className={`monitor-freshness-dot ${level}`}
|
||
title={title}
|
||
aria-label={title}
|
||
/>
|
||
);
|
||
}
|
||
|
||
/* ── Main component ──────────────────────────────────────────── */
|
||
export default function MonitorPanel({
|
||
onCityClick,
|
||
}: {
|
||
onCityClick?: (cityName: string) => void;
|
||
}) {
|
||
const { ensureCityDetail } = useDashboardActions();
|
||
const { locale } = useI18n();
|
||
const isEn = locale === "en-US";
|
||
const lang: Lang = { isEn };
|
||
|
||
const { cityDetailsByName: details } = useCityDetails();
|
||
const detailsRef = useRef(details);
|
||
detailsRef.current = details;
|
||
const ensureCityDetailRef = useRef(ensureCityDetail);
|
||
|
||
useEffect(() => {
|
||
ensureCityDetailRef.current = ensureCityDetail;
|
||
}, [ensureCityDetail]);
|
||
|
||
const [time, setTime] = useState("");
|
||
const [fetchingKeys, setFetchingKeys] = useState<ReadonlySet<string>>(new Set());
|
||
const cancelledRef = useRef(false);
|
||
const globalFetchingRef = useRef(false);
|
||
|
||
/* Flash state: tracks cities whose temperature just changed */
|
||
const [flashingKeys, setFlashingKeys] = useState<ReadonlySet<string>>(new Set());
|
||
const [lastRefreshed, setLastRefreshed] = useState<string | null>(null);
|
||
const prevTempsRef = useRef<Partial<Record<MonitorKey, number>>>({});
|
||
const flashTimersRef = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
|
||
|
||
useEffect(() => {
|
||
setTime(new Date().toLocaleTimeString());
|
||
const timer = setInterval(() => setTime(new Date().toLocaleTimeString()), 30_000);
|
||
return () => clearInterval(timer);
|
||
}, []);
|
||
|
||
const [notify, setNotify] = useState(() => {
|
||
if (typeof window === "undefined") return false;
|
||
return localStorage.getItem("monitor_notify") !== "off";
|
||
});
|
||
|
||
/* Detect temperature changes → trigger per-city flash + update lastRefreshed */
|
||
useEffect(() => {
|
||
const changed: MonitorKey[] = [];
|
||
for (const key of MONITOR_KEYS) {
|
||
const detail = details[key];
|
||
const cur = resolveMonitorTemperature(detail, {
|
||
ignoreRunway: KOREA_RUNWAY_MONITOR_KEYS.has(key),
|
||
}).value;
|
||
const prev = prevTempsRef.current[key];
|
||
if (cur != null && prev != null && cur !== prev) changed.push(key);
|
||
if (cur != null) prevTempsRef.current[key] = cur;
|
||
}
|
||
if (changed.length === 0) return;
|
||
|
||
setLastRefreshed(
|
||
new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
|
||
);
|
||
setFlashingKeys((prev) => new Set([...prev, ...changed]));
|
||
for (const key of changed) {
|
||
clearTimeout(flashTimersRef.current[key]);
|
||
flashTimersRef.current[key] = setTimeout(() => {
|
||
setFlashingKeys((prev) => { const n = new Set(prev); n.delete(key); return n; });
|
||
}, 900);
|
||
}
|
||
}, [details]);
|
||
|
||
/* Per-city fetch with loading-key tracking */
|
||
const fetchCity = useCallback(
|
||
async (key: MonitorKey, request: MonitorRefreshRequest) => {
|
||
setFetchingKeys((prev) => new Set([...prev, key]));
|
||
try {
|
||
await ensureCityDetailRef.current(key, request.force, request.depth);
|
||
} catch {
|
||
/* individual city errors are shown as "--" in the card */
|
||
} finally {
|
||
setFetchingKeys((prev) => {
|
||
const next = new Set(prev);
|
||
next.delete(key);
|
||
return next;
|
||
});
|
||
}
|
||
},
|
||
[],
|
||
);
|
||
|
||
/* Refresh all cities, sorted by staleness (most stale first). */
|
||
const refreshAll = useCallback(
|
||
async (trigger: MonitorRefreshTrigger) => {
|
||
if (globalFetchingRef.current) return;
|
||
globalFetchingRef.current = true;
|
||
const request = getMonitorRefreshRequest(trigger);
|
||
|
||
const now = new Date();
|
||
/* Sort keys: cities with no data first, then by source-aware freshness/staleness. */
|
||
const dueKeys = [...MONITOR_KEYS].filter((key) =>
|
||
shouldRefreshMonitorCity({
|
||
detail: detailsRef.current[key],
|
||
now,
|
||
trigger,
|
||
}),
|
||
);
|
||
|
||
const sorted = dueKeys.sort((a, b) => {
|
||
const d = detailsRef.current;
|
||
const freshA = getObservationFreshness(d[a]);
|
||
const freshB = getObservationFreshness(d[b]);
|
||
const ageA =
|
||
freshA?.age_sec != null
|
||
? freshA.age_sec / 60
|
||
: d[a]?.airport_current?.obs_age_min ?? Infinity;
|
||
const ageB =
|
||
freshB?.age_sec != null
|
||
? freshB.age_sec / 60
|
||
: d[b]?.airport_current?.obs_age_min ?? Infinity;
|
||
return ageB - ageA; // stale first
|
||
});
|
||
|
||
const queue = sorted as MonitorKey[];
|
||
if (queue.length === 0) {
|
||
globalFetchingRef.current = false;
|
||
return;
|
||
}
|
||
const workers = Array.from({ length: CONCURRENCY }, async () => {
|
||
while (queue.length > 0) {
|
||
if (cancelledRef.current) return;
|
||
const key = queue.shift();
|
||
if (!key) break;
|
||
await fetchCity(key, request);
|
||
}
|
||
});
|
||
await Promise.allSettled(workers);
|
||
|
||
globalFetchingRef.current = false;
|
||
setLastRefreshed(
|
||
new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
|
||
);
|
||
},
|
||
[fetchCity],
|
||
);
|
||
|
||
useEffect(() => {
|
||
cancelledRef.current = false;
|
||
void refreshAll("initial");
|
||
const timer = setInterval(() => {
|
||
if (!document.hidden) void refreshAll("interval");
|
||
}, MONITOR_REFRESH_INTERVAL_MS);
|
||
return () => {
|
||
cancelledRef.current = true;
|
||
clearInterval(timer);
|
||
};
|
||
}, [refreshAll]);
|
||
|
||
/* City list sorted by current temp descending */
|
||
const sorted = useMemo(() => {
|
||
return [...MONITOR_KEYS]
|
||
.map((k) => ({ key: k, detail: details[k] }))
|
||
.sort((a, b) => {
|
||
const ta = resolveMonitorTemperature(a.detail, {
|
||
ignoreRunway: KOREA_RUNWAY_MONITOR_KEYS.has(a.key),
|
||
}).value;
|
||
const tb = resolveMonitorTemperature(b.detail, {
|
||
ignoreRunway: KOREA_RUNWAY_MONITOR_KEYS.has(b.key),
|
||
}).value;
|
||
if (ta == null && tb == null) return 0;
|
||
if (ta == null) return 1;
|
||
if (tb == null) return -1;
|
||
return tb - ta;
|
||
});
|
||
}, [details]);
|
||
|
||
/* Summary counts for the header */
|
||
const loadedCount = useMemo(
|
||
() => MONITOR_KEYS.filter((k) => details[k] != null).length,
|
||
[details],
|
||
);
|
||
const totalCount = MONITOR_KEYS.length;
|
||
const allLoaded = loadedCount === totalCount;
|
||
|
||
const toggleNotify = () => {
|
||
const next = !notify;
|
||
setNotify(next);
|
||
localStorage.setItem("monitor_notify", next ? "on" : "off");
|
||
if (next && typeof Notification !== "undefined" && Notification.permission === "default") {
|
||
Notification.requestPermission();
|
||
}
|
||
};
|
||
|
||
/* Audio alert when current temp exceeds today's observed high by ≥ 0.3 °C */
|
||
useEffect(() => {
|
||
if (!notify) return;
|
||
const today = new Date().toDateString();
|
||
let alerted: Record<string, unknown> = {};
|
||
try { alerted = JSON.parse(localStorage.getItem("monitor_alerted_highs") || "{}"); } catch {}
|
||
if (alerted._day !== today) alerted = { _day: today };
|
||
|
||
for (const { key, detail } of sorted) {
|
||
const { source, value: cur } = resolveMonitorTemperature(detail, {
|
||
ignoreRunway: KOREA_RUNWAY_MONITOR_KEYS.has(key),
|
||
});
|
||
// Skip runway cities: runway surface temp ≠ air temp
|
||
if (source === "amos_runway_median" || source === "amos_runway") continue;
|
||
const max = resolveMaxSoFar(detail, key);
|
||
if (cur != null && max != null && cur >= max + 0.3) {
|
||
// Key: city + rounded temp, so we only beep once per 0.1°C step
|
||
const id = `${key}|${(Math.round(cur * 10) / 10).toFixed(1)}`;
|
||
if (!alerted[id]) {
|
||
alerted[id] = true;
|
||
localStorage.setItem("monitor_alerted_highs", JSON.stringify(alerted));
|
||
playNewHighBeep();
|
||
}
|
||
}
|
||
}
|
||
}, [sorted, notify]);
|
||
|
||
/* ── Render ── */
|
||
return (
|
||
<div className="monitor-panel">
|
||
{/* Header */}
|
||
<div className="monitor-header">
|
||
<div>
|
||
<h2 className="monitor-title">
|
||
{t("🔥 Market Monitor", "🔥 市场监控", lang)}
|
||
</h2>
|
||
{!allLoaded && (
|
||
<p className="monitor-load-progress">
|
||
{isEn
|
||
? `Loading ${loadedCount} / ${totalCount} cities…`
|
||
: `正在加载 ${loadedCount} / ${totalCount} 个城市…`}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<div className="monitor-controls">
|
||
{fetchingKeys.size > 0 && (
|
||
<span className="monitor-syncing-badge">
|
||
<span className="monitor-loading-dot" />
|
||
{isEn ? `Syncing ${fetchingKeys.size}` : `同步中 ${fetchingKeys.size}`}
|
||
</span>
|
||
)}
|
||
<button
|
||
className={`monitor-notify-btn${notify ? "" : " muted"}`}
|
||
onClick={toggleNotify}
|
||
title={notify
|
||
? t("Disable new-high alert", "关闭新高提醒", lang)
|
||
: t("Enable new-high alert", "开启新高提醒", lang)}
|
||
>
|
||
{notify ? "🔔" : "🔕"}
|
||
</button>
|
||
{lastRefreshed && (
|
||
<span className="monitor-last-refreshed" title={isEn ? "Last data refresh" : "上次数据刷新"}>
|
||
{isEn ? `↻ ${lastRefreshed}` : `↻ ${lastRefreshed}`}
|
||
</span>
|
||
)}
|
||
<span className="monitor-time">{time}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Freshness legend */}
|
||
<div className="monitor-legend">
|
||
<span className="monitor-legend-item">
|
||
<span className="monitor-freshness-dot fresh" />
|
||
{t("< 20 min", "< 20 分", lang)}
|
||
</span>
|
||
<span className="monitor-legend-item">
|
||
<span className="monitor-freshness-dot aging" />
|
||
{t("20–45 min", "20–45 分", lang)}
|
||
</span>
|
||
<span className="monitor-legend-item">
|
||
<span className="monitor-freshness-dot stale" />
|
||
{t("> 45 min", "> 45 分", lang)}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Card grid — progressive: show skeleton only for cities not yet loaded */}
|
||
<div className="monitor-grid">
|
||
{sorted.map(({ key, detail }) => {
|
||
const isRefreshing = fetchingKeys.has(key);
|
||
|
||
/* City not yet loaded at all → skeleton */
|
||
if (!detail) {
|
||
return <SkeletonCard key={key} label={key} />;
|
||
}
|
||
|
||
const ac = detail.airport_current;
|
||
const tempInfo = resolveMonitorTemperature(detail, {
|
||
ignoreRunway: KOREA_RUNWAY_MONITOR_KEYS.has(key),
|
||
});
|
||
const cur = tempInfo.value;
|
||
const curSource = tempInfo.source;
|
||
const isRunwayTemp =
|
||
curSource === "amos_runway_median" ||
|
||
curSource === "amos_runway" ||
|
||
curSource === "amsc_awos_runway_max" ||
|
||
curSource === "amsc_awos_runway";
|
||
const max = resolveMaxSoFar(detail, key); // HKO cities fall back to current.max_so_far
|
||
const mtt = ac?.max_temp_time ?? detail.current?.max_temp_time ?? null;
|
||
const freshnessInfo = getObservationFreshness(detail);
|
||
const obs =
|
||
freshnessInfo?.observed_at_local ??
|
||
ac?.obs_time ??
|
||
detail.current?.obs_time ??
|
||
detail.local_time ??
|
||
"";
|
||
const age =
|
||
freshnessInfo?.age_sec != null
|
||
? Math.round(freshnessInfo.age_sec / 60)
|
||
: ac?.obs_age_min ?? null;
|
||
const freshness = getMonitorFreshnessLevel(freshnessInfo, age);
|
||
const tempSymbol = detail.temp_symbol || "°C"; // °F for US cities
|
||
// Runway surface temp vs air temp comparison is meaningless
|
||
const newHigh = !isRunwayTemp && cur != null && max != null && cur >= max + 0.3;
|
||
const warm = !newHigh && !isRunwayTemp && cur != null && cur >= 30;
|
||
const tr = trendClass(detail, key);
|
||
const rwPairs = detail.amos?.runway_obs?.runway_pairs ?? [];
|
||
const rwTemps = detail.amos?.runway_obs?.temperatures ?? [];
|
||
const showRunwayRows = !KOREA_RUNWAY_MONITOR_KEYS.has(key);
|
||
const isFlashing = flashingKeys.has(key);
|
||
|
||
return (
|
||
<div
|
||
key={key}
|
||
className={[
|
||
"monitor-card",
|
||
newHigh ? "new-high" : "",
|
||
isRefreshing ? "refreshing" : "",
|
||
onCityClick ? "clickable" : "",
|
||
].filter(Boolean).join(" ")}
|
||
role={onCityClick ? "button" : undefined}
|
||
tabIndex={onCityClick ? 0 : undefined}
|
||
onClick={onCityClick ? () => onCityClick(key) : undefined}
|
||
onKeyDown={onCityClick ? (e) => { if (e.key === "Enter" || e.key === " ") onCityClick(key); } : undefined}
|
||
title={onCityClick ? (isEn ? `Open ${detail.display_name || key} decision card` : `打开 ${detail.display_name || key} 决策卡`) : undefined}
|
||
>
|
||
{/* Refresh progress bar */}
|
||
{isRefreshing && <div className="monitor-refresh-bar" />}
|
||
|
||
{/* Card header */}
|
||
<div className={`monitor-card-head${isFlashing ? " flashed" : ""}`}>
|
||
<span className="monitor-city-name">{detail.display_name || key}</span>
|
||
<span className="monitor-airport-name">/ {airportLabel(key, isEn)}</span>
|
||
<FreshnessDot
|
||
level={freshness}
|
||
title={freshnessDotTitle(freshness, age, isEn, freshnessInfo)}
|
||
/>
|
||
{newHigh && (
|
||
<span className="monitor-new-high-badge">
|
||
{t("◆ New High", "◆新高", lang)}
|
||
</span>
|
||
)}
|
||
<span className="monitor-obs-time">{obs}</span>
|
||
</div>
|
||
|
||
{/* Temperature — runway cities skip the large value (runway surface ≠ air temp) */}
|
||
<div className="monitor-temp-display">
|
||
{isRunwayTemp ? (
|
||
<span className="monitor-temp-runway">
|
||
{t("Runway Temp", "跑道温度", lang)}
|
||
</span>
|
||
) : cur != null ? (
|
||
<>
|
||
<span className={`monitor-temp-value${newHigh ? " new-high" : warm ? " warm" : ""}${isFlashing ? " flashed" : ""}`}>
|
||
{Number.isInteger(cur) ? cur.toFixed(0) : cur.toFixed(1)}
|
||
</span>
|
||
<span className="monitor-temp-unit">{tempSymbol}</span>
|
||
</>
|
||
) : (
|
||
<span className="monitor-temp-missing">--</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* Stats */}
|
||
<div className="monitor-stats">
|
||
<div className="monitor-high-row">
|
||
<span className="monitor-stat-label">{t("Today's High", "今日实测高温", lang)}</span>
|
||
{max != null ? (
|
||
<>
|
||
<span className="monitor-high-value">{Number.isInteger(max) ? max.toFixed(0) : max.toFixed(1)}{tempSymbol}</span>
|
||
{mtt && <span className="monitor-high-time">{mtt}</span>}
|
||
</>
|
||
) : (
|
||
<span className="monitor-stat-missing">--</span>
|
||
)}
|
||
<span className={`monitor-trend ${tr}`}>{trendSymbol(tr)}</span>
|
||
</div>
|
||
<div className="monitor-obs-row">
|
||
<span className="monitor-stat-label">
|
||
{resolveSourceLabel(detail, key, isEn)}
|
||
</span>
|
||
<span className={`monitor-obs-age ${freshness}`}>
|
||
{age != null ? (
|
||
age < 60
|
||
? (isEn ? `${age} min ago` : `${age} 分钟未更新`)
|
||
: (isEn
|
||
? `⚠ last ${obs || "?"}`
|
||
: `⚠ 最后报文 ${obs || "--"}`)
|
||
) : (
|
||
<span className="monitor-stat-missing">--</span>
|
||
)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Runway temps */}
|
||
{showRunwayRows && rwPairs.length > 0 && rwTemps.length > 0 && (
|
||
<>
|
||
<div className="monitor-divider" />
|
||
{rwPairs.map((p, i) => {
|
||
const temp = rwTemps[i]?.[0];
|
||
if (temp == null) return null;
|
||
return (
|
||
<div key={i} className="monitor-rw-row">
|
||
<span className="monitor-rw-label">{p[0]}/{p[1]}</span>
|
||
<span className="monitor-rw-temp">{temp.toFixed(1)}°C</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|