248 lines
8.3 KiB
TypeScript
248 lines
8.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import {
|
|
AlertTriangle,
|
|
Bot,
|
|
Globe2,
|
|
Languages,
|
|
Radar,
|
|
Signal,
|
|
Waves,
|
|
} from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { CityDetailPanel } from "@/components/city-detail-panel";
|
|
import { CityList } from "@/components/city-list";
|
|
import { MapView } from "@/components/map-view";
|
|
import { getCities, getCityDetail } from "@/lib/api";
|
|
import { copy, type Locale } from "@/lib/i18n";
|
|
import type { CityDetail, CitySummary } from "@/lib/types";
|
|
|
|
export function PolyWeatherDashboard() {
|
|
const [locale, setLocale] = useState<Locale>("zh");
|
|
const [cities, setCities] = useState<CitySummary[]>([]);
|
|
const [selectedCity, setSelectedCity] = useState<string | null>(null);
|
|
const [selectedDetail, setSelectedDetail] = useState<CityDetail | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const t = copy[locale];
|
|
|
|
useEffect(() => {
|
|
let mounted = true;
|
|
(async () => {
|
|
try {
|
|
setError(null);
|
|
const data = await getCities();
|
|
if (!mounted) return;
|
|
setCities(data);
|
|
} catch (err) {
|
|
if (!mounted) return;
|
|
setError(String(err));
|
|
}
|
|
})();
|
|
return () => {
|
|
mounted = false;
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!selectedCity) return;
|
|
let mounted = true;
|
|
(async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
const detail = await getCityDetail(selectedCity);
|
|
if (!mounted) return;
|
|
setSelectedDetail(detail);
|
|
} catch (err) {
|
|
if (!mounted) return;
|
|
setError(String(err));
|
|
} finally {
|
|
if (mounted) setLoading(false);
|
|
}
|
|
})();
|
|
return () => {
|
|
mounted = false;
|
|
};
|
|
}, [selectedCity]);
|
|
|
|
const orderedCities = useMemo(() => {
|
|
const order = { high: 0, medium: 1, low: 2 };
|
|
return [...cities].sort(
|
|
(a, b) => (order[a.risk_level] ?? 99) - (order[b.risk_level] ?? 99),
|
|
);
|
|
}, [cities]);
|
|
|
|
const riskStats = useMemo(() => {
|
|
return {
|
|
high: cities.filter((c) => c.risk_level === "high").length,
|
|
medium: cities.filter((c) => c.risk_level === "medium").length,
|
|
low: cities.filter((c) => c.risk_level === "low").length,
|
|
};
|
|
}, [cities]);
|
|
|
|
async function refreshCurrentCity() {
|
|
if (!selectedCity) return;
|
|
setLoading(true);
|
|
try {
|
|
const detail = await getCityDetail(selectedCity, true);
|
|
setSelectedDetail(detail);
|
|
} catch (err) {
|
|
setError(String(err));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
function localizeError(raw: string) {
|
|
if (raw.includes("POLYWEATHER_API_BASE_URL")) {
|
|
return t.backendConfigMissing;
|
|
}
|
|
if (raw.toLowerCase().includes("failed to load cities")) {
|
|
return `${t.loadCitiesFailed}: ${raw}`;
|
|
}
|
|
if (raw.toLowerCase().includes("failed to load city detail")) {
|
|
return `${t.loadCityDetailFailed}: ${raw}`;
|
|
}
|
|
return raw;
|
|
}
|
|
|
|
return (
|
|
<main className="h-screen w-full overflow-hidden p-2 md:p-4">
|
|
<div className="grid h-full grid-cols-1 gap-3 lg:grid-cols-[290px_1fr_370px]">
|
|
<section className="min-h-0 lg:block">
|
|
<CityList
|
|
cities={orderedCities}
|
|
selectedCity={selectedCity}
|
|
onSelectCity={setSelectedCity}
|
|
locale={locale}
|
|
text={{
|
|
monitoredCities: t.monitoredCities,
|
|
high: t.high,
|
|
medium: t.medium,
|
|
low: t.low,
|
|
fahrenheit: t.fahrenheit,
|
|
celsius: t.celsius,
|
|
}}
|
|
/>
|
|
</section>
|
|
|
|
<section className="relative min-h-0">
|
|
<div className="glass fade-up absolute left-2 right-2 top-2 z-[900] rounded-2xl border border-slate-700/80 p-2.5 md:left-4 md:right-4 md:top-4 md:p-3">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<Globe2 className="h-4 w-4 shrink-0 text-cyan-300" />
|
|
<h1 className="shrink-0 text-base font-semibold uppercase tracking-[0.16em] text-cyan-100 md:text-lg">
|
|
PolyWeather
|
|
</h1>
|
|
<span className="hidden truncate text-xs text-slate-400 xl:inline">
|
|
{t.brandSubtitle}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="hidden items-center gap-2 rounded-full border border-slate-700 bg-slate-900/70 px-2 py-1 text-[11px] text-emerald-300 md:flex">
|
|
<Signal className="h-3 w-3" />
|
|
{t.live}
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
onClick={() => setLocale((v) => (v === "zh" ? "en" : "zh"))}
|
|
>
|
|
<Languages className="mr-1 h-4 w-4" />
|
|
{locale === "zh" ? "EN" : "ZH"}
|
|
</Button>
|
|
<Button size="sm" variant="secondary">
|
|
<Bot className="mr-1 h-4 w-4" />
|
|
{t.technicalGuide}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute bottom-2 left-2 right-2 z-[900] md:bottom-4 md:left-4 md:right-auto">
|
|
<div className="glass fade-up inline-flex flex-wrap items-center gap-2 rounded-xl border border-slate-700/80 p-2">
|
|
<div className="rounded-lg border border-red-900/60 bg-red-950/50 px-2.5 py-1 text-xs text-red-200">
|
|
H {riskStats.high}
|
|
</div>
|
|
<div className="rounded-lg border border-amber-900/60 bg-amber-950/50 px-2.5 py-1 text-xs text-amber-200">
|
|
M {riskStats.medium}
|
|
</div>
|
|
<div className="rounded-lg border border-emerald-900/60 bg-emerald-950/50 px-2.5 py-1 text-xs text-emerald-200">
|
|
L {riskStats.low}
|
|
</div>
|
|
<div className="hidden items-center gap-1 rounded-lg border border-cyan-900/60 bg-cyan-950/40 px-2.5 py-1 text-xs text-cyan-200 sm:flex">
|
|
<Radar className="h-3.5 w-3.5" />
|
|
{cities.length} {t.cities}
|
|
</div>
|
|
<div className="hidden items-center gap-1 rounded-lg border border-slate-700 px-2.5 py-1 text-xs text-slate-300 sm:flex">
|
|
<Waves className="h-3.5 w-3.5" />
|
|
AI + DEB
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<MapView
|
|
cities={orderedCities}
|
|
selectedCity={selectedCity}
|
|
onSelectCity={setSelectedCity}
|
|
/>
|
|
</section>
|
|
|
|
<section className="min-h-0 hidden lg:block">
|
|
<CityDetailPanel
|
|
detail={selectedDetail}
|
|
loading={loading}
|
|
onRefresh={refreshCurrentCity}
|
|
locale={locale}
|
|
text={{
|
|
cityDetail: t.cityDetail,
|
|
selectCityHint: t.selectCityHint,
|
|
refresh: t.refresh,
|
|
currentMax: t.currentMax,
|
|
cloud: t.cloud,
|
|
wind: t.wind,
|
|
topProb: t.topProb,
|
|
noProb: t.noProb,
|
|
aiSummary: t.aiSummary,
|
|
noAnalysis: t.noAnalysis,
|
|
}}
|
|
/>
|
|
</section>
|
|
|
|
<section className="min-h-0 lg:hidden">
|
|
<CityDetailPanel
|
|
detail={selectedDetail}
|
|
loading={loading}
|
|
onRefresh={refreshCurrentCity}
|
|
locale={locale}
|
|
text={{
|
|
cityDetail: t.cityDetail,
|
|
selectCityHint: t.selectCityHint,
|
|
refresh: t.refresh,
|
|
currentMax: t.currentMax,
|
|
cloud: t.cloud,
|
|
wind: t.wind,
|
|
topProb: t.topProb,
|
|
noProb: t.noProb,
|
|
aiSummary: t.aiSummary,
|
|
noAnalysis: t.noAnalysis,
|
|
}}
|
|
/>
|
|
</section>
|
|
</div>
|
|
|
|
{error ? (
|
|
<div className="pointer-events-none fixed bottom-4 left-1/2 z-[1200] -translate-x-1/2 rounded-lg border border-red-900 bg-red-950/90 px-3 py-2 text-sm text-red-100">
|
|
<div className="flex items-center gap-2">
|
|
<AlertTriangle className="h-4 w-4" />
|
|
<span>{localizeError(error)}</span>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</main>
|
|
);
|
|
}
|