Function Control

web/src/control/Control.tsx:32–589

()

};

export function Control() {
  const { state, conn } = useStream("control");
  const cfg = state.config;

  // Location editor (Nominatim via the server's /api/geocode).
  const [geoBusy, setGeoBusy] = useState(false);
  const [geoErr, setGeoErr] = useState<string | null>(null);

  // Airport runway import (OurAirports via the server's /api/airport).
  const [apBusy, setApBusy] = useState(false);
  const [apErr, setApErr] = useState<string | null>(null);

  // ISS pass finder (for the Sky section).
  const [tles, setTles] = useState<Tle[]>([]);
  useEffect(() => {
    let on = true;
    fetch("/api/tle")
      .then((r) => (r.ok ? r.json() : []))
      .then((t) => on && setTles(t as Tle[]))
      .catch(() => {});
    return () => {
      on = false;
    };
  }, []);
  const nextPass = useMemo(
    () => (tles.length && cfg ? nextISSPass(Date.now(), cfg.centerLat, cfg.centerLon, tles) : null),
    [tles, cfg?.centerLat, cfg?.centerLon],
  );

  if (!cfg) {
    return (
      <div className="loading">
        <div className={`dot ${state.connected ? "ok" : "bad"}`} />
        {state.connected ? "Loading config…" : "Connecting to tracker…"}
      </div>
    );
  }

  const set = (patch: Partial<Config>) => conn.patchConfig(patch);
  const setField = (k: keyof ShowFields, v: boolean) =>
    conn.patchConfig({ showFields: { ...cfg.showFields, [k]: v } });
  const statusMessage = state.status?.message ? ` · ${state.status.message}` : "";

  const changeLocation = async (q: string) => {
    if (!q.trim()) return;
    setGeoBusy(true);
    setGeoErr(null);
    try {
      const r = await fetch(`/api/geocode?q=${encodeURIComponent(q)}`);
      if (!r.ok) {
        setGeoErr(r.status === 404 ? `No match for “${q}”` : "Lookup failed");
        return;
      }
      const hit = (await r.json()) as { lat: number; lon: number; name: string };
      set({ centerLat: hit.lat, centerLon: hit.lon, locationName: hit.name });
    } catch {
      setGeoErr("Lookup failed");
    } finally {