Дмитрий Соловьев
3d508b6be9
Switch the 2D map sidebar from single-spacecraft selection to per-spacecraft visibility toggles, add a show-all action, and update map tab labels and styles for the all-spacecraft view.
102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
import { TguLegend } from "./TguLegend";
|
||
import type { TguActiveTab } from "../../model/timelineTypes";
|
||
|
||
type TguToolbarProps = {
|
||
fromValue: string;
|
||
toValue: string;
|
||
loading: boolean;
|
||
activeTab: TguActiveTab;
|
||
error?: string;
|
||
onTabChange: (tab: TguActiveTab) => void;
|
||
onFromChange: (value: string) => void;
|
||
onToChange: (value: string) => void;
|
||
onApply: () => void;
|
||
onQuickRange: (hours: number) => void;
|
||
onRefresh: () => void;
|
||
};
|
||
|
||
export function TguToolbar({
|
||
fromValue,
|
||
toValue,
|
||
loading,
|
||
activeTab,
|
||
error,
|
||
onTabChange,
|
||
onFromChange,
|
||
onToChange,
|
||
onApply,
|
||
onQuickRange,
|
||
onRefresh
|
||
}: TguToolbarProps) {
|
||
return (
|
||
<header className="tgu-toolbar">
|
||
<div className="tgu-toolbar__row">
|
||
<div className="tgu-toolbar__brand">
|
||
<span className="tgu-toolbar__mark" aria-hidden="true" />
|
||
<div>
|
||
<div className="tgu-toolbar__title">Планирование ТГУ</div>
|
||
<div className="tgu-toolbar__subtitle">Mission Ops</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="tgu-tabs" role="tablist" aria-label="Разделы планирования ТГУ">
|
||
<button
|
||
className={activeTab === "timeline" ? "is-active" : ""}
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={activeTab === "timeline"}
|
||
onClick={() => onTabChange("timeline")}
|
||
>
|
||
Планы
|
||
</button>
|
||
<button
|
||
className={activeTab === "map" ? "is-active" : ""}
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={activeTab === "map"}
|
||
onClick={() => onTabChange("map")}
|
||
>
|
||
Карта 2D
|
||
</button>
|
||
<button
|
||
className={activeTab === "editor" ? "is-active" : ""}
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={activeTab === "editor"}
|
||
onClick={() => onTabChange("editor")}
|
||
>
|
||
Редактор
|
||
</button>
|
||
</div>
|
||
|
||
<label className="tgu-field">
|
||
<span>С</span>
|
||
<input type="datetime-local" value={fromValue} onChange={(event) => onFromChange(event.target.value)} />
|
||
</label>
|
||
<label className="tgu-field">
|
||
<span>По</span>
|
||
<input type="datetime-local" value={toValue} onChange={(event) => onToChange(event.target.value)} />
|
||
</label>
|
||
|
||
<button className="tgu-button tgu-button--primary" type="button" onClick={onApply} disabled={loading}>
|
||
Показать
|
||
</button>
|
||
<button className="tgu-button" type="button" onClick={() => onQuickRange(24)} disabled={loading}>
|
||
24ч
|
||
</button>
|
||
<button className="tgu-button" type="button" onClick={() => onQuickRange(72)} disabled={loading}>
|
||
3 суток
|
||
</button>
|
||
<button className="tgu-button" type="button" onClick={() => onQuickRange(168)} disabled={loading}>
|
||
7 суток
|
||
</button>
|
||
<button className="tgu-button" type="button" onClick={onRefresh} disabled={loading}>
|
||
{loading ? "Обновление..." : "Обновить"}
|
||
</button>
|
||
</div>
|
||
<TguLegend />
|
||
{error && <div className="tgu-alert tgu-alert--danger">{error}</div>}
|
||
</header>
|
||
);
|
||
}
|