._.

src/AppRouter.jsx

@@ -19,8 +19,8 @@ const RoutesComponent = () => (
       <Route path="/cities" element={<Cities />} />
       <Route path="/federal_districts" element={<FederalDistricts />} />
       <Route path="/roles" element={<Roles />} />
-      <Route path="/statuses" element={<Statuses />} />{" "}
-      <Route path="/trucks" element={<Trucks />} />{" "}
+      <Route path="/statuses" element={<Statuses />} />
+      <Route path="/trucks" element={<Trucks />} />
       <Route path="/users" element={<Users />} />
     </Route>
   </Routes>

src/components/MapView.jsx

@@ -0,0 +1,35 @@
+import {
+  MapContainer,
+  TileLayer,
+  Marker,
+  Popup,
+  Polyline,
+} from "react-leaflet";
+
+const MapView = ({ startCoords, endCoords, route }) => {
+  return (
+    <MapContainer
+      center={[55.7558, 37.6173]}
+      zoom={5}
+      style={{ height: "400px", width: "100%" }}
+    >
+      <TileLayer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      />
+      {startCoords && (
+        <Marker position={[startCoords.lat, startCoords.lng]}>
+          <Popup>Пункт отправления</Popup>
+        </Marker>
+      )}
+      {endCoords && (
+        <Marker position={[endCoords.lat, endCoords.lng]}>
+          <Popup>Пункт назначения</Popup>
+        </Marker>
+      )}
+      {route.length > 0 && <Polyline positions={route} color="blue" />}
+    </MapContainer>
+  );
+};
+
+export default MapView;

src/pages/Accessories.jsx

@@ -58,6 +58,7 @@ const Accessories = () => {
 
     if (
       !newAccessory.name ||
+      !newAccessory.count ||
       !newAccessory.volume ||
       !newAccessory.weight ||
       !newAccessory.period ||
@@ -84,6 +85,7 @@ const Accessories = () => {
     setNewAccessory({
       name: accessory.name,
       volume: accessory.volume,
+      count: accessory.count,
       weight: accessory.weight,
       period: accessory.period,
       city_id: accessory.city_id,
@@ -104,6 +106,7 @@ const Accessories = () => {
   const resetForm = () => {
     setNewAccessory({
       name: "",
+      count: "",
       volume: "",
       weight: "",
       period: "",
@@ -141,6 +144,18 @@ const Accessories = () => {
             onChange={handleInputChange}
           />
         </div>
+        <div className="form-group">
+          <label htmlFor="accessoryVolume">Количество</label>
+          <input
+            type="number"
+            className="form-control"
+            id="accessoryCount"
+            name="count"
+            placeholder="Введите количество"
+            value={newAccessory.count}
+            onChange={handleInputChange}
+          />
+        </div>
         <div className="form-group">
           <label htmlFor="accessoryVolume">Объем</label>
           <input
@@ -223,6 +238,7 @@ const Accessories = () => {
         <thead>
           <tr>
             <th>Название</th>
+            <th>Количество</th>
             <th>Объем</th>
             <th>Вес</th>
             <th>Период</th>
@@ -234,6 +250,7 @@ const Accessories = () => {
           {accessories.map((accessory) => (
             <tr key={accessory.id}>
               <td>{accessory.name}</td>
+              <td>{accessory.count}</td>
               <td>{accessory.volume}</td>
               <td>{accessory.weight}</td>
               <td>{accessory.period}</td>

src/pages/Home.jsx

@@ -1,106 +1,3 @@
-import React, { useState, useEffect } from "react";
-import {
-  MapContainer,
-  TileLayer,
-  Marker,
-  Popup,
-  Polyline,
-} from "react-leaflet";
-import polyline from "@mapbox/polyline";
-
-const MapView = ({ startCoords, endCoords, route }) => {
-  return (
-    <MapContainer
-      center={[55.7558, 37.6173]}
-      zoom={5}
-      style={{ height: "400px", width: "100%" }}
-    >
-      <TileLayer
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-      />
-      {startCoords && (
-        <Marker position={[startCoords.lat, startCoords.lng]}>
-          <Popup>Пункт отправления</Popup>
-        </Marker>
-      )}
-      {endCoords && (
-        <Marker position={[endCoords.lat, endCoords.lng]}>
-          <Popup>Пункт назначения</Popup>
-        </Marker>
-      )}
-      {route.length > 0 && <Polyline positions={route} color="blue" />}
-    </MapContainer>
-  );
-};
-
-const Home = () => {
-  const [startPoint, setStartPoint] = useState("");
-  const [endPoint, setEndPoint] = useState("");
-  const [startCoords, setStartCoords] = useState(null);
-  const [endCoords, setEndCoords] = useState(null);
-  const [route, setRoute] = useState([]);
-
-  const handleStartChange = (e) => {
-    setStartPoint(e.target.value);
-  };
-
-  const handleEndChange = (e) => {
-    setEndPoint(e.target.value);
-  };
-
-  const handleSearch = () => {
-    // Замените на реальный геокодер для получения координат на основе адресов
-    const start = { lat: 55.7558, lng: 37.6173 }; // Москва
-    const end = { lat: 59.9343, lng: 30.3351 }; // Санкт-Петербург
-    setStartCoords(start);
-    setEndCoords(end);
-  };
-
-  useEffect(() => {
-    if (startCoords && endCoords) {
-      const routeUrl = `https://router.project-osrm.org/route/v1/driving/${startCoords.lng},${startCoords.lat};${endCoords.lng},${endCoords.lat}?overview=full`;
-      console.log(routeUrl);
-      fetch(routeUrl)
-        .then((response) => response.json())
-        .then((data) => {
-          if (
-            data.routes &&
-            data.routes.length > 0 &&
-            data.routes[0].geometry
-          ) {
-            const geometry = data.routes[0].geometry;
-            const coordinates = polyline.decode(geometry);
-            setRoute(coordinates);
-          } else {
-            console.error("No valid routes found in response:", data);
-          }
-        })
-        .catch((error) => {
-          console.error("Error fetching route:", error);
-        });
-    }
-  }, [startCoords, endCoords]);
-
-  return (
-    <div>
-      <h1>Построить маршрут</h1>
-      <input
-        type="text"
-        value={startPoint}
-        onChange={handleStartChange}
-        placeholder="Пункт отправления"
-      />
-      <input
-        type="text"
-        value={endPoint}
-        onChange={handleEndChange}
-        placeholder="Пункт назначения"
-      />
-      <button onClick={handleSearch}>Построить маршрут</button>
-      <MapView startCoords={startCoords} endCoords={endCoords} route={route} />
-    </div>
-  );
-};
+const Home = () => {};
 
 export default Home;

src/pages/Map.jsx

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from "react";
+import { MapView } from "../components/MapView";
+import polyline from "@mapbox/polyline";
+
+const Home = () => {
+  const [startPoint, setStartPoint] = useState("");
+  const [endPoint, setEndPoint] = useState("");
+  const [startCoords, setStartCoords] = useState(null);
+  const [endCoords, setEndCoords] = useState(null);
+  const [route, setRoute] = useState([]);
+
+  const handleStartChange = (e) => {
+    setStartPoint(e.target.value);
+  };
+
+  const handleEndChange = (e) => {
+    setEndPoint(e.target.value);
+  };
+
+  const handleSearch = () => {
+    // Замените на реальный геокодер для получения координат на основе адресов
+    const start = { lat: 55.7558, lng: 37.6173 }; // Москва
+    const end = { lat: 59.9343, lng: 30.3351 }; // Санкт-Петербург
+    setStartCoords(start);
+    setEndCoords(end);
+  };
+
+  useEffect(() => {
+    if (startCoords && endCoords) {
+      const routeUrl = `https://router.project-osrm.org/route/v1/driving/${startCoords.lng},${startCoords.lat};${endCoords.lng},${endCoords.lat}?overview=full`;
+      console.log(routeUrl);
+      fetch(routeUrl)
+        .then((response) => response.json())
+        .then((data) => {
+          if (
+            data.routes &&
+            data.routes.length > 0 &&
+            data.routes[0].geometry
+          ) {
+            const geometry = data.routes[0].geometry;
+            const coordinates = polyline.decode(geometry);
+            setRoute(coordinates);
+          } else {
+            console.error("No valid routes found in response:", data);
+          }
+        })
+        .catch((error) => {
+          console.error("Error fetching route:", error);
+        });
+    }
+  }, [startCoords, endCoords]);
+
+  return (
+    <div>
+      <h1>Построить маршрут</h1>
+      <input
+        type="text"
+        value={startPoint}
+        onChange={handleStartChange}
+        placeholder="Пункт отправления"
+      />
+      <input
+        type="text"
+        value={endPoint}
+        onChange={handleEndChange}
+        placeholder="Пункт назначения"
+      />
+      <button onClick={handleSearch}>Построить маршрут</button>
+      <MapView startCoords={startCoords} endCoords={endCoords} route={route} />
+    </div>
+  );
+};
+
+export default Home;