| {accessory.name} |
+ {accessory.count} |
{accessory.volume} |
{accessory.weight} |
{accessory.period} |
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index dd2e0a1..7436445 100644
--- a/src/pages/Home.jsx
+++ b/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 (
-
-
- {startCoords && (
-
- Пункт отправления
-
- )}
- {endCoords && (
-
- Пункт назначения
-
- )}
- {route.length > 0 && }
-
- );
-};
-
-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 (
-
-
Построить маршрут
-
-
-
-
-
- );
-};
+const Home = () => {};
export default Home;
diff --git a/src/pages/Map.jsx b/src/pages/Map.jsx
new file mode 100644
index 0000000..479edce
--- /dev/null
+++ b/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 (
+
+
Построить маршрут
+
+
+
+
+
+ );
+};
+
+export default Home;