._.
This commit is contained in:
parent
68f4836935
commit
f167ad20e0
@ -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>
|
||||
|
||||
35
src/components/MapView.jsx
Normal file
35
src/components/MapView.jsx
Normal file
@ -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='© <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;
|
||||
@ -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>
|
||||
|
||||
@ -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='© <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;
|
||||
|
||||
74
src/pages/Map.jsx
Normal file
74
src/pages/Map.jsx
Normal file
@ -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;
|
||||
Loading…
x
Reference in New Issue
Block a user