feat: Fixed path for routes

src/pages/Route/RouteEditPage/index.tsx

@@ -0,0 +1,225 @@
+import {
+  Button,
+  Paper,
+  TextField,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  Typography,
+  Box,
+} from "@mui/material";
+
+import { observer } from "mobx-react-lite";
+import { ArrowLeft, Save } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+import { carrierStore } from "../../../shared/store/CarrierStore";
+import { articlesStore } from "../../../shared/store/ArticlesStore";
+import { routeStore } from "../../../shared/store/RouteStore";
+import { toast } from "react-toastify";
+
+export const RouteEditPage = observer(() => {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const { editRouteData } = routeStore;
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await routeStore.getRoute(Number(id));
+      routeStore.setEditRouteData(response);
+      carrierStore.getCarriers();
+      articlesStore.getArticleList();
+    };
+    fetchData();
+  }, [id]);
+
+  const handleSave = async () => {
+    setIsLoading(true);
+    await routeStore.editRoute(Number(id));
+    toast.success("Маршрут успешно сохранен");
+    setIsLoading(false);
+  };
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <div className="flex justify-between items-center">
+        <button
+          className="flex items-center gap-2"
+          onClick={() => navigate(-1)}
+        >
+          <ArrowLeft size={20} />
+          Маршруты / Редактировать
+        </button>
+      </div>
+      <Typography variant="h5" fontWeight={700}>
+        Редактировать маршрут
+      </Typography>
+      <Box className="flex flex-col gap-6 w-full">
+        <FormControl fullWidth required>
+          <InputLabel>Выберите перевозчика</InputLabel>
+          <Select
+            value={editRouteData.carrier_id}
+            label="Выберите перевозчика"
+            onChange={(e) =>
+              routeStore.setEditRouteData({
+                carrier_id: Number(e.target.value),
+                carrier:
+                  carrierStore.carriers.data.find(
+                    (c) => c.id === Number(e.target.value)
+                  )?.full_name || "",
+              })
+            }
+            disabled={carrierStore.carriers.data.length === 0}
+          >
+            <MenuItem value="">Не выбрано</MenuItem>
+            {carrierStore.carriers.data.map(
+              (c: (typeof carrierStore.carriers.data)[number]) => (
+                <MenuItem key={c.id} value={c.id}>
+                  {c.full_name}
+                </MenuItem>
+              )
+            )}
+          </Select>
+        </FormControl>
+        <TextField
+          className="w-full"
+          label="Номер маршрута"
+          required
+          value={editRouteData.route_number || ""}
+          onChange={(e) =>
+            routeStore.setEditRouteData({
+              route_number: e.target.value,
+            })
+          }
+        />
+        <TextField
+          className="w-full"
+          label="Координаты маршрута"
+          multiline
+          minRows={3}
+          value={editRouteData.path.map((p) => p.join(" ")).join("\n") || ""}
+          onChange={(e) =>
+            routeStore.setEditRouteData({
+              path: e.target.value
+                .split("\n")
+                .map((line) => line.split(" ").map(Number)),
+            })
+          }
+        />
+        <TextField
+          className="w-full"
+          label="Номер маршрута в Говорящем Городе"
+          required
+          value={editRouteData.route_sys_number || ""}
+          onChange={(e) =>
+            routeStore.setEditRouteData({
+              route_sys_number: e.target.value,
+            })
+          }
+        />
+        <FormControl fullWidth required>
+          <InputLabel>Обращение губернатора</InputLabel>
+          <Select
+            value={editRouteData.governor_appeal || ""}
+            label="Обращение губернатора"
+            onChange={(e) =>
+              routeStore.setEditRouteData({
+                governor_appeal: Number(e.target.value),
+              })
+            }
+            disabled={articlesStore.articleList.ru.data.length === 0}
+          >
+            <MenuItem value="">Не выбрано</MenuItem>
+            {articlesStore.articleList.ru.data.map(
+              (a: (typeof articlesStore.articleList.ru.data)[number]) => (
+                <MenuItem key={a.id} value={a.id}>
+                  {a.heading}
+                </MenuItem>
+              )
+            )}
+          </Select>
+        </FormControl>
+        <FormControl fullWidth required>
+          <InputLabel>Прямой/обратный маршрут</InputLabel>
+          <Select
+            value={editRouteData.route_direction ? "forward" : "backward"}
+            label="Прямой/обратный маршрут"
+            onChange={(e) =>
+              routeStore.setEditRouteData({
+                route_direction: e.target.value === "forward",
+              })
+            }
+          >
+            <MenuItem value="forward">Прямой</MenuItem>
+            <MenuItem value="backward">Обратный</MenuItem>
+          </Select>
+        </FormControl>
+        <TextField
+          className="w-full"
+          label="Масштаб (мин)"
+          value={editRouteData.scale_min || ""}
+          onChange={(e) =>
+            routeStore.setEditRouteData({
+              scale_min: Number(e.target.value),
+            })
+          }
+        />
+        <TextField
+          className="w-full"
+          label="Масштаб (макс)"
+          value={editRouteData.scale_max || ""}
+          onChange={(e) =>
+            routeStore.setEditRouteData({
+              scale_max: Number(e.target.value),
+            })
+          }
+        />
+        <TextField
+          className="w-full"
+          label="Поворот"
+          value={editRouteData.rotate || ""}
+          onChange={(e) =>
+            routeStore.setEditRouteData({
+              rotate: Number(e.target.value),
+            })
+          }
+        />
+        <TextField
+          className="w-full"
+          label="Центр. широта"
+          value={editRouteData.center_latitude || ""}
+          onChange={(e) =>
+            routeStore.setEditRouteData({
+              center_latitude: Number(e.target.value),
+            })
+          }
+        />
+        <TextField
+          className="w-full"
+          label="Центр. долгота"
+          value={editRouteData.center_longitude || ""}
+          onChange={(e) =>
+            routeStore.setEditRouteData({
+              center_longitude: Number(e.target.value),
+            })
+          }
+        />
+      </Box>
+      <div className="flex w-full justify-end">
+        <Button
+          variant="contained"
+          color="primary"
+          className="w-min flex gap-2 items-center"
+          startIcon={<Save size={20} />}
+          onClick={handleSave}
+          disabled={isLoading}
+        >
+          Сохранить
+        </Button>
+      </div>
+    </Paper>
+  );
+});

src/pages/Route/RouteListPage/index.tsx

@@ -2,7 +2,7 @@ import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { languageStore, routeStore } from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Eye, Trash2 } from "lucide-react";
+import { Eye, Map, Pencil, Trash2 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets";
 
@@ -49,15 +49,21 @@ export const RouteListPage = observer(() => {
     {
       field: "actions",
       headerName: "Действия",
-      width: 140,
+      width: 250,
       align: "center",
       headerAlign: "center",
       renderCell: (params: GridRenderCellParams) => {
         return (
           <div className="flex h-full gap-7 justify-center items-center">
-            <button onClick={() => navigate(`/route/${params.row.id}`)}>
-              <Eye size={20} className="text-green-500" />
+            <button onClick={() => navigate(`/route/${params.row.id}/edit`)}>
+              <Pencil size={20} className="text-blue-500" />
             </button>
+            <button onClick={() => navigate(`/route-preview/${params.row.id}`)}>
+              <Map size={20} className="text-purple-500" />
+            </button>
+            {/* <button onClick={() => navigate(`/route/${params.row.id}`)}>
+              <Eye size={20} className="text-green-500" />
+            </button>  */}
             <button
               onClick={() => {
                 setIsDeleteModalOpen(true);

src/pages/Route/index.ts

@@ -1,3 +1,4 @@
 export * from "./RouteListPage";
 export * from "./RouteCreatePage";
 export { RoutePreview } from "./route-preview";
+export * from "./RouteEditPage";

src/pages/Route/route-preview/index.tsx

@@ -38,18 +38,9 @@ export const RoutePreview = () => {
   return (
     <MapDataProvider>
       <TransformProvider>
-        <Stack direction="row" height="90vh" width="90vw" overflow="hidden">
-          <div
-            style={{
-              position: "absolute",
-              top: 0,
-              left: "50%",
-              transform: "translateX(-50%)",
-              zIndex: 1000,
-            }}
-          >
-            <LanguageSwitcher />
-          </div>
+        <Stack direction="row" height="100vh" width="100vw" overflow="hidden">
+          <LanguageSwitcher />
+
           <LeftSidebar />
           <Stack direction="row" flex={1} position="relative" height="100%">
             <Widgets />