Дмитрий Соловьев
51fd8a446b
Нативные input type=time/datetime-local рендерят время по локали браузера/ОС (AM/PM) и игнорируют атрибут lang в Chrome — поэтому lang=ru-RU не помогал. Заменено на собственные контролы (components/timeFields.tsx): - Time24Field — текстовый ввод ЧЧ:ММ[:СС] с валидацией, детерминированный 24ч; - DateTime24Field — нативный календарь для даты + Time24Field для времени. Подключено в окне маршрута редактора и во всех datetime-local фильтрах (Планы, заявки на карте, создание/фильтр заявок).
105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
import type { TguActiveTab } from "../../model/timelineTypes";
|
||
import { DateTime24Field } from "../../components/timeFields";
|
||
|
||
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;
|
||
};
|
||
|
||
export function TguToolbar({
|
||
fromValue,
|
||
toValue,
|
||
loading,
|
||
activeTab,
|
||
error,
|
||
onTabChange,
|
||
onFromChange,
|
||
onToChange,
|
||
onApply,
|
||
onQuickRange
|
||
}: 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")}
|
||
>
|
||
Карта
|
||
</button>
|
||
<button
|
||
className={activeTab === "editor" ? "is-active" : ""}
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={activeTab === "editor"}
|
||
onClick={() => onTabChange("editor")}
|
||
>
|
||
Редактор
|
||
</button>
|
||
<button
|
||
className={activeTab === "requests" ? "is-active" : ""}
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={activeTab === "requests"}
|
||
onClick={() => onTabChange("requests")}
|
||
>
|
||
Заявки
|
||
</button>
|
||
</div>
|
||
|
||
<label className="tgu-field">
|
||
<span>С</span>
|
||
<DateTime24Field value={fromValue} onChange={onFromChange} />
|
||
</label>
|
||
<label className="tgu-field">
|
||
<span>По</span>
|
||
<DateTime24Field value={toValue} onChange={onToChange} />
|
||
</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>
|
||
</div>
|
||
{error && <div className="tgu-alert tgu-alert--danger">{error}</div>}
|
||
</header>
|
||
);
|
||
}
|