Merge branch 'feature/import_status' into 'dev'

import status, start ml button fix

See merge request spatial/postamates_frontend!62

src/Map/LastMLRun.jsx

@@ -1,19 +1,30 @@
 import { startML, useLastMLRun } from "../api.js";
 import { Button, Popover, Spin, Tooltip } from "antd";
 import { InfoCircleOutlined, LoadingOutlined } from "@ant-design/icons";
-import { useMemo } from "react";
+import { useEffect, useState } from "react";
 
 const TASK_STATUSES = {
   finished: "Перерасчет ML завершен"
 }
 export function LastMLRun() {
   const { data } = useLastMLRun();
-  const hasFinishedUpdate = useMemo(() => {
+  const [isUpdating, setIsUpdating] = useState(false);
-    return data?.task_status === TASK_STATUSES.finished
+
+  useEffect(() => {
+    setIsUpdating(data?.task_status !== TASK_STATUSES.finished);
   }, [data]);
 
+  const startUpdating = async () => {
+    setIsUpdating(true);
+    try {
+      await startML();
+    } catch (e) {
+      setIsUpdating(false);
+    }
+  }
+
   const lastMLRunRender = () => {
-    if (hasFinishedUpdate) return (
+    if (!isUpdating) return (
       <>
         <div className="text-xs text-grey z-10 bg-white-background rounded-xl px-2 py-0.5 space-y-3">
           Последнее обновление системы
@@ -21,7 +32,7 @@ export function LastMLRun() {
         <div className="text-xs text-grey z-10 bg-white-background rounded-xl px-2 py-0.5 space-y-3">
           {new Date(data?.last_time).toLocaleString('ru-RU')}
         </div>
-        <Button type="text" className="flex items-center p-2 text-[#C50000] hover:text-[#C50000] text-xs" onClick={() => startML()}>
+        <Button type="text" className="flex items-center p-2 text-[#C50000] hover:text-[#C50000] text-xs" onClick={() => startUpdating()}>
           Обновить систему
         </Button>
       </>
@@ -45,7 +56,7 @@ export function LastMLRun() {
     >
       <Tooltip title="Инфо">
         <Button className="absolute bottom-[64px] right-[20px] flex items-center justify-center p-3">
-          {hasFinishedUpdate
+          {!isUpdating
             ? <InfoCircleOutlined className="w-4 h-4" />
             :  <Spin indicator={<LoadingOutlined style={{ fontSize: 16, color: "#000000" }} spin />} />
           }

src/api.js

@@ -101,6 +101,14 @@ export const importPoints = async (id) => {
   return data;
 };
 
+export const getImportStatus = async () => {
+  const { data } = await api.get(
+    `/api/pre_placement_points/import_status/`
+  );
+
+  return data;
+};
+
 export const useGetTotalInitialPointsCount = () => {
   const dbTable = useDbTableName();
   const { updateCounter } = useUpdateLayerCounter();

src/modules/ImportMode/PointsFileUploadModal.jsx

@@ -1,6 +1,6 @@
 import { Button, Modal, Spin } from "antd";
 import { useState } from "react";
-import { importPoints } from "../../api.js";
+import { getImportStatus, importPoints } from "../../api.js";
 import { LoadingStage } from "./LoadingStage.jsx";
 import { ReportStage } from "./ReportStage.jsx";
 import {
@@ -16,17 +16,25 @@ export const PointsFileUploadModal = ({onClose, isOpened}) => {
   const [isImporting, setIsImporting] = useState(false);
   const [isReportStage, setIsReportStage] = useState(false);
   const [isError, setIsError] = useState(false);
+  const [importStatus, setImportStatus] = useState("Импортируем точки...")
   const { toggleUpdateCounter } = useUpdateLayerCounter();
 
   const onImportPoints = async () => {
     setIsImporting(true);
     try {
-      const { message } = await importPoints(fileId);
+      await importPoints(fileId);
-      setReport(message);
+      const myInterval = setInterval(async () => {
+        const response = await getImportStatus();
+        setImportStatus(response.task_status);
+        if (response.task_status === "Перерасчет ML завершен") {
+          setReport(response.data);
+          setIsImporting(false);
+          clearInterval(myInterval);
+        }
+      }, 2000);
       toggleUpdateCounter();
     } catch (e) {
       setIsError(true);
-    } finally {
       setIsImporting(false);
     }
   }
@@ -87,7 +95,7 @@ export const PointsFileUploadModal = ({onClose, isOpened}) => {
     if (isImporting) return (
       <div className="flex flex-col justify-center gap-2 items-center">
         <Spin indicator={<LoadingOutlined style={{ fontSize: 64 }} spin />} />
-        Импортируем точки...
+        {importStatus}
       </div>
     );
     if (isReportStage) return <ReportStage report={report} />;