Function ConfigPanel

web/src/tracker/components/ConfigPanel.tsx:38–188

({
  config,
  conn,
}: {
  config: TrackerConfig;
  conn: TrackerConnection;
})

}

export function ConfigPanel({
  config,
  conn,
}: {
  config: TrackerConfig;
  conn: TrackerConnection;
}) {
  const [ipDraft, setIpDraft] = useState<string | null>(null);
  return (
    <div className="cfg">
      <div className="cfg-group">
        <div className="cfg-title">camera</div>
        <div className="segmented">
          {(["sim", "visca"] as const).map((d) => (
            <button key={d} className={`segment ${config.driver === d ? "active" : ""}`}
              onClick={() => conn.send({ type: "patchTracker", patch: { driver: d } })}>
              {d}
            </button>
          ))}
        </div>
        <label className="cfg-num">
          <span>ip</span>
          <input
            type="text"
            value={ipDraft ?? config.cameraIp}
            onChange={(e) => setIpDraft(e.target.value)}
            onBlur={() => {
              if (ipDraft && ipDraft !== config.cameraIp) {
                conn.send({ type: "patchTracker", patch: { cameraIp: ipDraft } });
              }
              setIpDraft(null);
            }}
          />
        </label>
      </div>

      <div className="cfg-group">
        <div className="cfg-title">site (camera position)</div>
        <Num label="lat" value={config.site.lat} step={0.0001}
          onCommit={(v) => conn.send({ type: "patchTracker", patch: { site: { lat: v } } })} />
        <Num label="lon" value={config.site.lon} step={0.0001}
          onCommit={(v) => conn.send({ type: "patchTracker", patch: { site: { lon: v } } })} />
        <Num label="alt m" value={config.site.altM} step={1}
          onCommit={(v) => conn.send({ type: "patchTracker", patch: { site: { altM: v } } })} />
      </div>

      <div className="cfg-group">
        <div className="cfg-title">targeting</div>
        <Num label="min el°" value={config.target.minElevationDeg} step={1}
          onCommit={(v) => conn.send({ type: "patchTracker", patch: { target: { minElevationDeg: v } } })} />
        <Num label="max mi" value={config.target.maxRangeMi} step={1}
          onCommit={(v) => conn.send({ type: "patchTracker", patch: { target: { maxRangeMi: v } } })} />
        <Num label="dwell s" value={config.target.hysteresisSec} step={1}
          onCommit={(v) => conn.send({ type: "patchTracker", patch: { target: { hysteresisSec: v } } })} />
      </div>

      <div className="cfg-group">
        <div className="cfg-title">pursuit</div>