pcp-tgu интерфейс

2026-05-29 16:09:36 +03:00
parent 913b3d7c9b
commit 9fca4d4051
34 changed files with 3163 additions and 0 deletions
@@ -0,0 +1,66 @@
+import { TguLegend } from "./TguLegend";
+
+type TguToolbarProps = {
+  fromValue: string;
+  toValue: string;
+  loading: boolean;
+  error?: string;
+  onFromChange: (value: string) => void;
+  onToChange: (value: string) => void;
+  onApply: () => void;
+  onQuickRange: (hours: number) => void;
+  onRefresh: () => void;
+};
+
+export function TguToolbar({
+  fromValue,
+  toValue,
+  loading,
+  error,
+  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>
+
+        <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>
+  );
+}