feat: support custom maintenance mode duration

2026-10-18 15:07:34 +03:00
4 changed files with 206 additions and 30 deletions
--- a/src/shared/store/VehicleStore/index.ts
+++ b/src/shared/store/VehicleStore/index.ts
@@ -1,7 +1,7 @@
 import { authInstance, languageInstance, mobxFetch } from "@shared";
 import { makeAutoObservable, runInAction } from "mobx";
 import { getVehicleSessionsApi } from "./api";
-import { Vehicle, VehicleMaintenanceSession } from "./types";
+import { Vehicle, VehicleMaintenanceSession, SetMaintenanceModeResponse } from "./types";

 export type { Vehicle, VehicleMaintenanceSession } from "./types";

@@ -218,23 +218,32 @@ class VehicleStore {
    });
  };

-  setMaintenanceMode = async (uuid: string, enabled: boolean) => {
-    const response = await authInstance.post(
+  setMaintenanceMode = async (
+    uuid: string,
+    enabled: boolean,
+    durationSeconds?: number,
+  ): Promise<SetMaintenanceModeResponse> => {
+    const response = await authInstance.post<SetMaintenanceModeResponse>(
      `/devices/${uuid}/maintenance-mode`,
      {
        enabled,
+        ...(enabled && durationSeconds !== undefined
+          ? { duration_seconds: durationSeconds }
+          : {}),
      },
    );
-    const normalizedVehicle = this.normalizeVehicleItem(response.data);
+    if (!response.data.saved) {
+      throw new Error("Maintenance mode was not saved");
+    }

    runInAction(() => {
      this.mergeVehicleInCaches({
-        ...normalizedVehicle.vehicle,
        uuid,
-        maintenance_mode_on:
-          normalizedVehicle.vehicle.maintenance_mode_on ?? enabled,
+        maintenance_mode_on: response.data.enabled,
+        maintenance_mode_duration_seconds: response.data.duration_seconds,
      });
    });
+    return response.data;
  };

  setDemoMode = async (uuid: string, enabled: boolean) => {
--- a/src/shared/store/VehicleStore/types.ts
+++ b/src/shared/store/VehicleStore/types.ts
@@ -11,6 +11,7 @@ export type Vehicle = {
    snapshot_update_blocked?: boolean;
    demo_mode_enabled?: boolean;
    maintenance_mode_on?: boolean;
+    maintenance_mode_duration_seconds?: number;
    city_id?: number;
  };
  device_status?: {
@@ -21,13 +22,24 @@ export type Vehicle = {
    last_update: string;
    is_connected: boolean;
    current_route_id?: number;
+    maintenance_mode_on?: boolean;
+    maintenance_mode_duration_seconds?: number;
  };
 };

 export type VehicleMaintenanceSession = {
-  duration_seconds: number;
-  ended_at: string;
+  duration_seconds?: number | null;
+  ended_at?: string | null;
  id: number;
  started_at: string;
  vehicle_id: number;
 };
+
+export type SetMaintenanceModeResponse = {
+  message: string;
+  enabled: boolean;
+  duration_seconds: number;
+  saved: boolean;
+  sent: boolean;
+  warning?: string;
+};
--- a/src/widgets/DevicesTable/VehicleSessionsModal.tsx
+++ b/src/widgets/DevicesTable/VehicleSessionsModal.tsx
@@ -21,7 +21,7 @@ interface VehicleSessionsModalProps {
  onClose: () => void;
 }

-const formatDateTime = (value: string) => {
+const formatDateTime = (value?: string | null) => {
  if (!value) return "-";

  const date = new Date(value);
@@ -38,8 +38,8 @@ const formatDateTime = (value: string) => {
  }).format(date);
 };

-const formatDuration = (durationSeconds: number) => {
-  if (!Number.isFinite(durationSeconds) || durationSeconds < 0) {
+const formatDuration = (durationSeconds?: number | null) => {
+  if (durationSeconds == null || !Number.isFinite(durationSeconds) || durationSeconds < 0) {
    return "-";
  }

@@ -152,10 +152,10 @@ export const VehicleSessionsModal = observer(
                            {formatDateTime(session.started_at)}
                          </TableCell>
                          <TableCell>
-                            {formatDateTime(session.ended_at)}
+                            {session.ended_at ? formatDateTime(session.ended_at) : "В процессе"}
                          </TableCell>
                          <TableCell align="right">
-                            {formatDuration(session.duration_seconds)}
+                            {session.ended_at ? formatDuration(session.duration_seconds) : "—"}
                          </TableCell>
                        </TableRow>
                      ))}
--- a/src/widgets/DevicesTable/index.tsx
+++ b/src/widgets/DevicesTable/index.tsx
@@ -34,12 +34,26 @@ import {
  Typography,
  Checkbox,
  Tooltip,
+  TextField,
+  MenuItem,
 } from "@mui/material";
 import { toast } from "react-toastify";
 import { useNavigate } from "react-router-dom";
 import { DeleteModal } from "@widgets";
 import { DeviceLogsModal } from "./DeviceLogsModal";
 import { VehicleSessionsModal } from "./VehicleSessionsModal";
+import { isAxiosError } from "axios";
+
+const maintenanceDurations = [0, 900, 1800, 3600, 7200];
+const MAX_MAINTENANCE_DURATION_SECONDS = 2_147_483_647;
+const formatMaintenanceDuration = (seconds: number) => {
+  if (seconds === 0) return "Без автоматического отключения";
+  return [
+    Math.floor(seconds / 3600) ? `${Math.floor(seconds / 3600)} ч` : "",
+    Math.floor((seconds % 3600) / 60) ? `${Math.floor((seconds % 3600) / 60)} мин` : "",
+    seconds % 60 ? `${seconds % 60} с` : "",
+  ].filter(Boolean).join(" ");
+};

 export type ConnectedDevice = string;

@@ -81,6 +95,7 @@ type RowData = {
  current_snapshot_uuid: string | null;
  snapshot_update_blocked: boolean;
  maintenance_mode_on: boolean;
+  maintenance_mode_duration_seconds: number;
  demo_mode_enabled: boolean;
  current_route_id: number | null;
 };
@@ -120,6 +135,7 @@ const transformToRows = (vehicles: Vehicle[]): RowData[] => {
      current_snapshot_uuid: vehicle.vehicle.current_snapshot_uuid ?? null,
      snapshot_update_blocked: vehicle.vehicle.snapshot_update_blocked ?? false,
      maintenance_mode_on: vehicle.vehicle.maintenance_mode_on ?? false,
+      maintenance_mode_duration_seconds: vehicle.vehicle.maintenance_mode_duration_seconds ?? 0,
      demo_mode_enabled: vehicle.vehicle.demo_mode_enabled ?? false,
      current_route_id: vehicle.device_status?.current_route_id ?? null,
    };
@@ -169,6 +185,11 @@ export const DevicesTable = observer(() => {
  );
  const [maintenanceConfirm, setMaintenanceConfirm] =
    useState<PendingModeToggle | null>(null);
+  const [maintenanceDuration, setMaintenanceDuration] = useState(0);
+  const [customMaintenanceDuration, setCustomMaintenanceDuration] = useState(false);
+  const [customMaintenanceHours, setCustomMaintenanceHours] = useState(0);
+  const [customMaintenanceMinutes, setCustomMaintenanceMinutes] = useState(0);
+  const [savedMaintenanceDuration, setSavedMaintenanceDuration] = useState(0);
  const [demoConfirm, setDemoConfirm] = useState<PendingModeToggle | null>(
    null,
  );
@@ -238,6 +259,7 @@ export const DevicesTable = observer(() => {
  }, [rows, selectedIds]);

  const applyMaintenanceMode = async (toggle: PendingModeToggle) => {
+    if (!canMaintenanceDevices) return false;
    setMaintenanceLoadingUuids((prev) => {
      const next = new Set(prev);
      next.add(toggle.deviceUuid);
@@ -245,20 +267,42 @@ export const DevicesTable = observer(() => {
    });

    try {
-      await setMaintenanceMode(toggle.deviceUuid, toggle.nextEnabled);
-      await getVehicles();
-      await getDevices();
-      toast.success(
-        toggle.nextEnabled
-          ? "Устройство отправлено на ТО"
-          : "Режим ТО отключен",
+      const result = await setMaintenanceMode(
+        toggle.deviceUuid,
+        toggle.nextEnabled,
+        toggle.nextEnabled ? maintenanceDuration : undefined,
      );
+      if (!result.sent) {
+        toast.warning(
+          result.enabled
+            ? "Настройка сохранена. Режим ТО включится после подключения устройства."
+            : "Настройка сохранена. Режим ТО отключится после подключения устройства.",
+        );
+      } else {
+        toast.success(result.enabled
+          ? `Команда включения ТО отправлена. Длительность: ${formatMaintenanceDuration(result.duration_seconds)}`
+          : "Команда отключения ТО отправлена");
+      }
+      const refresh = await Promise.allSettled([getVehicles(), getDevices()]);
+      if (refresh.some((result) => result.status === "rejected")) {
+        toast.warning("Настройка ТО сохранена, но обновить таблицу не удалось. Обновите страницу.");
+      }
+      return true;
    } catch (error) {
      console.error(
        `Error toggling maintenance mode for ${toggle.deviceUuid}:`,
        error,
      );
-      toast.error("Не удалось изменить режим ТО");
+      const status = isAxiosError(error) ? error.response?.status : undefined;
+      const messages: Record<number, string> = {
+        400: "Некорректные параметры режима ТО",
+        401: "Войдите в систему, чтобы изменить режим ТО",
+        403: "Нет права на управление режимом ТО",
+        404: "Устройство не найдено",
+        500: "Сервер не смог сохранить настройку ТО",
+      };
+      toast.error((status && messages[status]) || "Не удалось изменить режим ТО");
+      return false;
    } finally {
      setMaintenanceLoadingUuids((prev) => {
        const next = new Set(prev);
@@ -298,7 +342,12 @@ export const DevicesTable = observer(() => {
  };

  const openMaintenanceConfirm = (row: RowData) => {
-    if (!row.device_uuid) return;
+    if (!row.device_uuid || !canMaintenanceDevices || maintenanceConfirmSubmitting) return;
+    setMaintenanceDuration(row.maintenance_mode_duration_seconds);
+    setCustomMaintenanceDuration(false);
+    setCustomMaintenanceHours(Math.floor(row.maintenance_mode_duration_seconds / 3600));
+    setCustomMaintenanceMinutes(Math.floor((row.maintenance_mode_duration_seconds % 3600) / 60));
+    setSavedMaintenanceDuration(row.maintenance_mode_duration_seconds);
    setMaintenanceConfirm({
      deviceUuid: row.device_uuid,
      nextEnabled: !row.maintenance_mode_on,
@@ -316,12 +365,13 @@ export const DevicesTable = observer(() => {
  };

  const handleConfirmMaintenanceToggle = async () => {
-    if (!maintenanceConfirm) return;
+    if (!maintenanceConfirm || !canMaintenanceDevices || maintenanceConfirmSubmitting) return;

    setMaintenanceConfirmSubmitting(true);
    try {
-      await applyMaintenanceMode(maintenanceConfirm);
+      if (await applyMaintenanceMode(maintenanceConfirm)) {
        setMaintenanceConfirm(null);
+      }
    } finally {
      setMaintenanceConfirmSubmitting(false);
    }
@@ -441,9 +491,13 @@ export const DevicesTable = observer(() => {
              sx={{ display: "flex", justifyContent: "center", width: "100%" }}
              onClick={(e) => e.stopPropagation()}
            >
+              <Tooltip title={`Сохранённая длительность ТО: ${formatMaintenanceDuration(rowData.maintenance_mode_duration_seconds)}`}>
+              <span>
              <Checkbox
                checked={rowData.maintenance_mode_on}
+                inputProps={{ "aria-label": `Режим ТО: ${rowData.tail_number}` }}
                disabled={
+                  !canMaintenanceDevices ||
                  !rowData.device_uuid ||
                  isMaintenanceLoading ||
                  maintenanceConfirmSubmitting
@@ -452,6 +506,8 @@ export const DevicesTable = observer(() => {
                sx={{ p: 0 }}
                onChange={() => openMaintenanceConfirm(rowData)}
              />
+              </span>
+              </Tooltip>
            </Box>
          );
        },
@@ -694,6 +750,7 @@ export const DevicesTable = observer(() => {
      demoConfirmSubmitting,
      routes,
      canWriteDevices,
+      canMaintenanceDevices,
      isMaintenanceOnly,
    ],
  );
@@ -708,7 +765,7 @@ export const DevicesTable = observer(() => {
    }
    if (!canWriteDevices) {
      return columns.filter(
-        (c) => c.field !== "maintenance_mode_on" && c.field !== "demo_mode_enabled",
+        (c) => c.field !== "demo_mode_enabled",
      );
    }
    return columns;
@@ -732,6 +789,29 @@ export const DevicesTable = observer(() => {
    fetchData();
  }, [getDevices, getSnapshots, getVehicles, getRoutes, isMaintenanceOnly, selectedCityStore.cityVersion]);

+  useEffect(() => {
+    let refreshing = false;
+    const refreshMaintenance = async () => {
+      if (document.visibilityState !== "visible" || refreshing || maintenanceConfirmSubmitting) return;
+      refreshing = true;
+      try {
+        const results = await Promise.allSettled([getVehicles(), getDevices()]);
+        for (const result of results) {
+          if (result.status === "rejected") {
+            console.error("Failed to refresh maintenance state:", result.reason);
+          }
+        }
+      } finally {
+        refreshing = false;
+      }
+    };
+    const timer = window.setInterval(refreshMaintenance, 15_000);
+    document.addEventListener("visibilitychange", refreshMaintenance);
+    return () => {
+      window.clearInterval(timer);
+      document.removeEventListener("visibilitychange", refreshMaintenance);
+    };
+  }, [getVehicles, getDevices, maintenanceConfirmSubmitting]);

  const handleOpenSendSnapshotModal = () => {
    if (!canWriteDevices) {
@@ -1027,13 +1107,83 @@ export const DevicesTable = observer(() => {
        sx={{ width: "min(640px, 92vw)", p: 3 }}
      >
        <Box component="h2" sx={{ mb: 1, typography: "h6" }}>
-          Подтверждение режима ТО
+          {maintenanceConfirm?.nextEnabled ? "Включить режим ТО" : "Отключить режим ТО"}
        </Box>
        <Box sx={{ mb: 3 }}>
          {maintenanceConfirm?.nextEnabled
            ? `Включить режим ТО для устройства ${maintenanceConfirm.tailNumber}?`
            : `Отключить режим ТО для устройства ${maintenanceConfirm?.tailNumber}?`}
        </Box>
+        {maintenanceConfirm?.nextEnabled && (
+          <Box sx={{ mb: 3 }}>
+            <TextField
+              select
+              fullWidth
+              label="Длительность"
+              value={customMaintenanceDuration ? -1 : maintenanceDuration}
+              disabled={maintenanceConfirmSubmitting}
+              onChange={(event) => {
+                const seconds = Number(event.target.value);
+                if (seconds === -1) {
+                  setCustomMaintenanceDuration(true);
+                  return;
+                }
+                setCustomMaintenanceDuration(false);
+                setMaintenanceDuration(seconds);
+              }}
+              helperText="Автоотключение выполняется на устройстве после применения команды."
+            >
+              {maintenanceDurations.map((seconds) => (
+                <MenuItem key={seconds} value={seconds}>
+                  {formatMaintenanceDuration(seconds)}
+                </MenuItem>
+              ))}
+              {!maintenanceDurations.includes(savedMaintenanceDuration) && (
+                <MenuItem value={savedMaintenanceDuration}>
+                  {formatMaintenanceDuration(savedMaintenanceDuration)} (сохранено)
+                </MenuItem>
+              )}
+              <MenuItem value={-1}>Своё время</MenuItem>
+            </TextField>
+            {customMaintenanceDuration && (
+              <Box sx={{ display: "flex", gap: 1.5, mt: 2 }}>
+                <TextField
+                  type="number"
+                  fullWidth
+                  label="Часы"
+                  value={customMaintenanceHours}
+                  disabled={maintenanceConfirmSubmitting}
+                  inputProps={{ min: 0, max: Math.floor(MAX_MAINTENANCE_DURATION_SECONDS / 3600), step: 1 }}
+                  onChange={(event) => {
+                    const hours = Math.max(0, Math.floor(Number(event.target.value) || 0));
+                    setCustomMaintenanceHours(hours);
+                    setMaintenanceDuration(hours * 3600 + customMaintenanceMinutes * 60);
+                  }}
+                />
+                <TextField
+                  type="number"
+                  fullWidth
+                  label="Минуты"
+                  value={customMaintenanceMinutes}
+                  disabled={maintenanceConfirmSubmitting}
+                  inputProps={{ min: 0, max: 59, step: 1 }}
+                  onChange={(event) => {
+                    const minutes = Math.min(59, Math.max(0, Math.floor(Number(event.target.value) || 0)));
+                    setCustomMaintenanceMinutes(minutes);
+                    setMaintenanceDuration(customMaintenanceHours * 3600 + minutes * 60);
+                  }}
+                />
+              </Box>
+            )}
+            {customMaintenanceDuration && (maintenanceDuration < 60 || maintenanceDuration > MAX_MAINTENANCE_DURATION_SECONDS) && (
+              <Typography color="error" variant="caption" sx={{ display: "block", mt: 1 }}>
+                {maintenanceDuration < 60
+                  ? "Укажите длительность не меньше одной минуты."
+                  : "Указанная длительность превышает допустимый максимум."}
+              </Typography>
+            )}
+          </Box>
+        )}
        <Box sx={{ display: "flex", gap: 1.5 }}>
          <Button
            fullWidth
@@ -1047,10 +1197,15 @@ export const DevicesTable = observer(() => {
          <Button
            fullWidth
            variant="contained"
-            disabled={maintenanceConfirmSubmitting}
+            disabled={
+              maintenanceConfirmSubmitting ||
+              (Boolean(maintenanceConfirm?.nextEnabled) &&
+                customMaintenanceDuration &&
+                (maintenanceDuration < 60 || maintenanceDuration > MAX_MAINTENANCE_DURATION_SECONDS))
+            }
            onClick={handleConfirmMaintenanceToggle}
          >
-            Подтвердить
+            {maintenanceConfirmSubmitting ? "Сохранение…" : maintenanceConfirm?.nextEnabled ? "Включить" : "Отключить"}
          </Button>
        </Box>
      </Modal>