315 lines
11 KiB
TypeScript
315 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { Search, ChevronDown } from "lucide-react";
|
|
import { useMemo, useState } from "react";
|
|
import type { ScanOpportunityRow } from "@/lib/dashboard-types";
|
|
|
|
type Locale = "zh-CN" | "en-US";
|
|
|
|
type CityRegionGroup = {
|
|
key: string;
|
|
label: { en: string; zh: string };
|
|
cities: string[];
|
|
};
|
|
|
|
const CITY_REGION_GROUPS: CityRegionGroup[] = [
|
|
{
|
|
key: "eastAsia",
|
|
label: { en: "East Asia", zh: "东亚" },
|
|
cities: [
|
|
"tokyo", "seoul", "busan", "beijing", "shanghai", "chengdu",
|
|
"chongqing", "wuhan", "shenzhen", "guangzhou", "qingdao",
|
|
"hong kong", "lau fau shan", "taipei",
|
|
],
|
|
},
|
|
{
|
|
key: "southeastAsia",
|
|
label: { en: "Southeast Asia", zh: "东南亚" },
|
|
cities: ["singapore", "kuala lumpur", "jakarta", "manila"],
|
|
},
|
|
{
|
|
key: "southAsia",
|
|
label: { en: "South Asia", zh: "南亚" },
|
|
cities: ["karachi", "lucknow"],
|
|
},
|
|
{
|
|
key: "middleEast",
|
|
label: { en: "Middle East", zh: "中东" },
|
|
cities: ["tel aviv", "jeddah", "istanbul", "ankara"],
|
|
},
|
|
{
|
|
key: "europe",
|
|
label: { en: "Europe", zh: "欧洲" },
|
|
cities: [
|
|
"london", "paris", "moscow", "munich", "milan", "warsaw",
|
|
"helsinki", "amsterdam", "madrid",
|
|
],
|
|
},
|
|
{
|
|
key: "northAmerica",
|
|
label: { en: "North America", zh: "北美" },
|
|
cities: [
|
|
"new york", "los angeles", "san francisco", "denver", "austin",
|
|
"houston", "chicago", "dallas", "miami", "atlanta", "seattle",
|
|
"toronto", "mexico city", "panama city",
|
|
],
|
|
},
|
|
{
|
|
key: "southAmerica",
|
|
label: { en: "South America", zh: "南美" },
|
|
cities: ["buenos aires", "são paulo"],
|
|
},
|
|
{
|
|
key: "africa",
|
|
label: { en: "Africa", zh: "非洲" },
|
|
cities: ["cape town"],
|
|
},
|
|
{
|
|
key: "oceania",
|
|
label: { en: "Oceania", zh: "大洋洲" },
|
|
cities: ["wellington"],
|
|
},
|
|
];
|
|
|
|
const CITY_SEARCH_INDEX: Record<string, string[]> = {
|
|
"tokyo": ["东京", "東京", "RJTT", "tok", "tyo", "haneda", "羽田"],
|
|
"seoul": ["首尔", "RKSI", "sel", "seo", "incheon", "仁川"],
|
|
"busan": ["釜山", "RKPK", "pus", "bus", "gimhae", "金海"],
|
|
"beijing": ["北京", "ZBAA", "pek", "bjs", "bj", "capital", "首都"],
|
|
"shanghai": ["上海", "ZSPD", "sha", "sh", "pudong", "浦东"],
|
|
"chengdu": ["成都", "ZUUU", "ctu", "cd", "shuangliu", "双流"],
|
|
"chongqing": ["重庆", "ZUCK", "ckg", "cq", "jiangbei", "江北"],
|
|
"wuhan": ["武汉", "ZHHH", "wuh", "wh", "tianhe", "天河"],
|
|
"shenzhen": ["深圳", "ZGSZ", "szx", "sz", "baoan", "宝安"],
|
|
"guangzhou": ["广州", "ZGGG", "can", "gz", "baiyun", "白云"],
|
|
"qingdao": ["青岛", "青島", "ZSQD", "tao", "qdo", "jiaodong", "胶东"],
|
|
"hong kong": ["香港", "VHHH", "hkg", "hk", "observatory", "天文台"],
|
|
"lau fau shan": ["流浮山", "LFS", "lfs"],
|
|
"taipei": ["台北", "臺北", "RCSS", "tpe", "tp", "台湾", "臺灣"],
|
|
"singapore": ["新加坡", "WSSS", "sin", "sg", "changi", "樟宜"],
|
|
"kuala lumpur": ["吉隆坡", "WMKK", "kul", "sepang", "雪邦"],
|
|
"jakarta": ["雅加达", "雅加達", "WIHH", "jkt", "halim"],
|
|
"manila": ["马尼拉", "馬尼拉", "RPLL", "mnl", "ninoy"],
|
|
"karachi": ["卡拉奇", "OPKC", "khi", "jinnah", "真纳"],
|
|
"lucknow": ["勒克瑙", "VILK", "luc"],
|
|
"tel aviv": ["特拉维夫", "LLBG", "tlv", "ben gurion"],
|
|
"jeddah": ["吉达", "吉達", "OEJN", "jed", "king abdulaziz", "阿卜杜勒阿齐兹"],
|
|
"istanbul": ["伊斯坦布尔", "LTFM", "ist", "ltfm"],
|
|
"ankara": ["安卡拉", "LTAC", "ank", "esenboğa"],
|
|
"london": ["伦敦", "EGLC", "lon", "city airport"],
|
|
"paris": ["巴黎", "LFPB", "par", "le bourget"],
|
|
"moscow": ["莫斯科", "UUWW", "mos", "mow", "vnukovo"],
|
|
"munich": ["慕尼黑", "EDDM", "mun"],
|
|
"milan": ["米兰", "米蘭", "LIMC", "mil", "mxp", "malpensa", "马尔彭萨"],
|
|
"warsaw": ["华沙", "華沙", "EPWA", "waw", "war", "chopin", "肖邦"],
|
|
"helsinki": ["赫尔辛基", "赫爾辛基", "EFHK", "hel", "vantaa"],
|
|
"amsterdam": ["阿姆斯特丹", "EHAM", "ams", "schiphol", "史基浦"],
|
|
"madrid": ["马德里", "馬德里", "LEMD", "mad", "barajas"],
|
|
"new york": ["纽约", "KLGA", "nyc", "ny", "laguardia"],
|
|
"los angeles": ["洛杉矶", "KLAX", "la", "lax"],
|
|
"san francisco": ["旧金山", "KSFO", "sf", "sfo"],
|
|
"denver": ["丹佛", "奥罗拉", "KBKF", "aur", "buckley"],
|
|
"austin": ["奥斯汀", "KAUS", "aus"],
|
|
"houston": ["休斯顿", "KHOU", "hou", "hobby"],
|
|
"chicago": ["芝加哥", "KORD", "chi", "ohare"],
|
|
"dallas": ["达拉斯", "KDAL", "dal", "love field"],
|
|
"miami": ["迈阿密", "KMIA", "mia"],
|
|
"atlanta": ["亚特兰大", "KATL", "atl", "hartsfield"],
|
|
"seattle": ["西雅图", "KSEA", "sea", "seatac"],
|
|
"toronto": ["多伦多", "CYYZ", "tor", "pearson"],
|
|
"mexico city": ["墨西哥城", "MMMX", "cdmx"],
|
|
"panama city": ["巴拿马城", "MPMG", "pty"],
|
|
"buenos aires": ["布宜诺斯艾利斯", "SAEZ", "ba", "ezeiza"],
|
|
"são paulo": ["圣保罗", "SBGR", "sp", "guarulhos"],
|
|
"cape town": ["开普敦", "開普敦", "FACT", "cpt"],
|
|
"wellington": ["惠灵顿", "NZWN", "wel"],
|
|
};
|
|
|
|
function normalizeCityKey(name: string): string {
|
|
return String(name || "").trim().toLowerCase();
|
|
}
|
|
|
|
function matchesCitySearch(
|
|
cityKey: string,
|
|
displayName: string,
|
|
query: string,
|
|
): boolean {
|
|
const q = query.trim().toLowerCase();
|
|
if (!q) return true;
|
|
if (cityKey.includes(q)) return true;
|
|
if (displayName.toLowerCase().includes(q)) return true;
|
|
const aliases = CITY_SEARCH_INDEX[cityKey];
|
|
if (!aliases) return false;
|
|
return aliases.some((alias) => alias.toLowerCase().includes(q));
|
|
}
|
|
|
|
function pickCityRow(
|
|
rows: ScanOpportunityRow[],
|
|
cityKey: string,
|
|
): ScanOpportunityRow | null {
|
|
return (
|
|
rows.find(
|
|
(row) => normalizeCityKey(row.city) === cityKey,
|
|
) || null
|
|
);
|
|
}
|
|
|
|
export function MobileCityPicker({
|
|
isEn,
|
|
rows,
|
|
onSelectCity,
|
|
}: {
|
|
isEn: boolean;
|
|
rows: ScanOpportunityRow[];
|
|
onSelectCity: (row: ScanOpportunityRow) => void;
|
|
}) {
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [expandedRegions, setExpandedRegions] = useState<Set<string>>(
|
|
() => new Set(CITY_REGION_GROUPS.map((g) => g.key)),
|
|
);
|
|
|
|
const filteredGroups = useMemo(() => {
|
|
const q = searchQuery.trim().toLowerCase();
|
|
return CITY_REGION_GROUPS
|
|
.map((group) => {
|
|
const matched = group.cities.filter((cityKey) => {
|
|
const row = pickCityRow(rows, cityKey);
|
|
if (!row) return false;
|
|
const display =
|
|
row.city_display_name || row.display_name || cityKey;
|
|
return matchesCitySearch(cityKey, display, q);
|
|
});
|
|
return { ...group, matched };
|
|
})
|
|
.filter((group) => group.matched.length > 0);
|
|
}, [rows, searchQuery]);
|
|
|
|
const totalMatched = useMemo(
|
|
() => filteredGroups.reduce((sum, g) => sum + g.matched.length, 0),
|
|
[filteredGroups],
|
|
);
|
|
|
|
const toggleRegion = (key: string) => {
|
|
setExpandedRegions((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(key)) {
|
|
next.delete(key);
|
|
} else {
|
|
next.add(key);
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="scan-mobile-city-picker">
|
|
<div className="scan-mobile-picker-search">
|
|
<Search size={16} className="scan-mobile-picker-search-icon" />
|
|
<input
|
|
type="text"
|
|
className="scan-mobile-picker-search-input"
|
|
placeholder={
|
|
isEn
|
|
? "Search city, airport code, or Chinese name..."
|
|
: "搜索城市、机场代码或中文名..."
|
|
}
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
{searchQuery ? (
|
|
<button
|
|
type="button"
|
|
className="scan-mobile-picker-search-clear"
|
|
onClick={() => setSearchQuery("")}
|
|
>
|
|
✕
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
|
|
{searchQuery ? (
|
|
<div className="scan-mobile-picker-result-count">
|
|
{isEn
|
|
? `${totalMatched} city${totalMatched !== 1 ? "ies" : "y"} found`
|
|
: `找到 ${totalMatched} 个城市`}
|
|
</div>
|
|
) : null}
|
|
|
|
{filteredGroups.length === 0 ? (
|
|
<div className="scan-mobile-picker-empty">
|
|
{isEn ? "No cities match your search" : "没有匹配的城市"}
|
|
</div>
|
|
) : (
|
|
<div className="scan-mobile-picker-regions">
|
|
{filteredGroups.map((group) => {
|
|
const isExpanded = expandedRegions.has(group.key) || !!searchQuery;
|
|
return (
|
|
<div key={group.key} className="scan-mobile-picker-region">
|
|
<button
|
|
type="button"
|
|
className="scan-mobile-picker-region-head"
|
|
onClick={() => toggleRegion(group.key)}
|
|
>
|
|
<span>
|
|
{isEn ? group.label.en : group.label.zh}
|
|
<small>{group.matched.length}</small>
|
|
</span>
|
|
<ChevronDown
|
|
size={16}
|
|
className={isExpanded ? "expanded" : ""}
|
|
/>
|
|
</button>
|
|
{isExpanded ? (
|
|
<div className="scan-mobile-picker-region-cities">
|
|
{group.matched.map((cityKey) => {
|
|
const row = pickCityRow(rows, cityKey);
|
|
if (!row) return null;
|
|
const display =
|
|
row.city_display_name ||
|
|
row.display_name ||
|
|
cityKey;
|
|
const currentTemp =
|
|
row.current_temp ?? row.current_max_so_far ?? null;
|
|
const deb = row.deb_prediction ?? null;
|
|
const tempUnit = row.temp_symbol || "°C";
|
|
return (
|
|
<button
|
|
key={cityKey}
|
|
type="button"
|
|
className="scan-mobile-picker-city-row"
|
|
onClick={() => onSelectCity(row)}
|
|
>
|
|
<span className="scan-mobile-picker-city-name">
|
|
<b>{display}</b>
|
|
<small>
|
|
{row.airport || row.local_time || ""}
|
|
</small>
|
|
</span>
|
|
<span className="scan-mobile-picker-city-temp">
|
|
<b>
|
|
{currentTemp != null &&
|
|
Number.isFinite(Number(currentTemp))
|
|
? `${Number(currentTemp).toFixed(1)}${tempUnit}`
|
|
: "--"}
|
|
</b>
|
|
<small>
|
|
DEB{" "}
|
|
{deb != null && Number.isFinite(Number(deb))
|
|
? `${Number(deb).toFixed(1)}${tempUnit}`
|
|
: "--"}
|
|
</small>
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|