._.

src/components/DeliveryOrdersList.jsx

@@ -1,6 +1,7 @@
-import { getDeliveryOrders } from "../api";
+import { getDeliveryOrders, updateDeliveryOrderRoute } from "../api.jsx";
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import polyline from "@mapbox/polyline";
 
 const DeliveryOrdersList = ({
   totalOrderId,
@@ -9,6 +10,7 @@ const DeliveryOrdersList = ({
 }) => {
   const [deliveryOrders, setDeliveryOrders] = useState([]);
   const [loadingDeliveryOrders, setLoadingDeliveryOrders] = useState(true);
+  const [calculatingRoutes, setCalculatingRoutes] = useState([]);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -37,28 +39,74 @@ const DeliveryOrdersList = ({
     return (minutes / 60).toFixed(2) + " час.";
   };
 
+  const calculateRoutes = async () => {
+    const ordersToCalculate = deliveryOrders.filter(
+      (order) => !order.estimated_route_time_in_minutes || !order.route
+    );
+
+    setCalculatingRoutes(ordersToCalculate.map((order) => order.id));
+
+    await Promise.all(
+      ordersToCalculate.map(async (order) => {
+        try {
+          const routeUrl = `https://router.project-osrm.org/route/v1/driving/${order.start_longitude},${order.start_latitude};${order.end_longitude},${order.end_latitude}?overview=full`;
+          const response = await fetch(routeUrl);
+          const data = await response.json();
+
+          if (data.routes && data.routes.length > 0) {
+            const duration = data.routes[0].duration;
+            const geometry = data.routes[0].geometry;
+            const decodedRoute = polyline.decode(geometry);
+
+            await updateDeliveryOrderRoute(
+              order.id,
+              duration / 60,
+              decodedRoute
+            );
+          }
+        } catch (error) {
+          console.error("Ошибка при расчете маршрута для подзаказа:", error);
+        }
+      })
+    );
+
+    fetchDeliveryOrders();
+  };
+
   return (
     <div>
       {loadingDeliveryOrders ? (
         <div className="spinner-border" role="status">
-          <span className="visually-hidden"></span>
+          <span className="visually-hidden">Загрузка...</span>
         </div>
       ) : (
-        deliveryOrders.map((order, index) => (
+        <>
-          <div
+          {calculatingRoutes.length && (
-            key={order.id}
+            <button onClick={calculateRoutes} className="btn btn-primary mb-3">
-            className="card mb-1"
+              Рассчитать все
-            onClick={() => onSubOrderClick(order.id)}
+            </button>
-          >
+          )}
-            <div className="card-body">
+          {deliveryOrders.map((order, index) => (
-              <p>Подзаказ #{index + 1}</p>
+            <div
-              <p>
+              key={order.id}
-                Время на подзаказ:{" "}
+              className="card mb-1"
-                {formatTimeInHours(order.estimated_route_time_in_minutes)}
+              onClick={() => onSubOrderClick(order.id)}
-              </p>
+            >
+              <div className="card-body">
+                <p>Подзаказ #{index + 1}</p>
+                <p>
+                  Время на подзаказ:{" "}
+                  {formatTimeInHours(order.estimated_route_time_in_minutes)}
+                </p>
+                {calculatingRoutes.includes(order.id) && (
+                  <div className="spinner-border" role="status">
+                    <span className="visually-hidden"></span>
+                  </div>
+                )}
+              </div>
             </div>
-          </div>
+          ))}
-        ))
+        </>
       )}
     </div>
   );