| import type { FlyInstanceData } from "./useFlyLayout"; |
| import type { ConnectionState, LiveFlyState } from "./useLiveFlyState"; |
|
|
| export const FLY_ICON = "\u{1FAB0}"; |
|
|
| export const CONNECTION_COLOR: Record<ConnectionState, string> = { |
| ONLINE: "#4ade80", |
| OFFLINE: "#5a5d6b", |
| CONNECTION_BROKEN: "#f87171", |
| UNKNOWN: "#5a5d6b", |
| }; |
|
|
| interface FlyRowProps { |
| fly: FlyInstanceData; |
| isSelected: boolean; |
| live: Pick<LiveFlyState, "driving" | "operatingMode" | "batteryPercent" | "connectionState"> | undefined; |
| onClick: () => void; |
| } |
|
|
| export default function FlyRow({ fly, isSelected, live, onClick }: FlyRowProps) { |
| return ( |
| <button |
| type="button" |
| aria-pressed={isSelected} |
| onClick={onClick} |
| style={{ |
| display: "flex", |
| alignItems: "center", |
| width: "100%", |
| textAlign: "left", |
| padding: "10px 16px", |
| cursor: "pointer", |
| background: isSelected ? "#8e56fc33" : "transparent", |
| border: "none", |
| borderLeft: isSelected ? "3px solid #8e56fc" : "3px solid transparent", |
| color: "inherit", |
| font: "inherit", |
| fontSize: 14, |
| }} |
| > |
| <span aria-hidden="true" style={{ marginRight: 8 }}> |
| {FLY_ICON} |
| </span> |
| <span>Fly {fly.index + 1}</span> |
| {live && ( |
| <span style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 6 }}> |
| {live.driving && ( |
| <span style={{ fontSize: 10, color: "#8b8d99" }}>{live.operatingMode === "AUTOMATIC" ? "driving" : "manual"}</span> |
| )} |
| {/* Battery is a real, meaningful value even with no backend |
| connected (practice mode) -- it starts at 100 and moves via |
| the Enter-key feed action -- so it must NOT be gated behind |
| connectionState, unlike the driving-text/connection-dot below |
| which only mean anything once a backend has said something. */} |
| <span style={{ fontSize: 10, color: "#8b8d99" }}>{Math.round(live.batteryPercent)}%</span> |
| {live.connectionState !== "UNKNOWN" && ( |
| <span |
| aria-hidden="true" |
| title={live.connectionState} |
| style={{ |
| width: 7, |
| height: 7, |
| borderRadius: "50%", |
| background: CONNECTION_COLOR[live.connectionState], |
| flexShrink: 0, |
| }} |
| /> |
| )} |
| </span> |
| )} |
| </button> |
| ); |
| } |
|
|
