diff --git a/front/src/components/LocationMarker.jsx b/front/src/components/LocationMarker.jsx new file mode 100644 index 0000000..d60f39c --- /dev/null +++ b/front/src/components/LocationMarker.jsx @@ -0,0 +1,27 @@ +import { Marker, Popup, useMapEvents } from "react-leaflet" + +const LocationMarker = ({ address, position, setPosition }) => { + + const map = useMapEvents({ + dragend: () => { + setPosition(map.getCenter()) + }, + zoomend: () => { + setPosition(map.getCenter()) + }, + resize: () => { + setPosition(map.getCenter()) + } + }) + + return ( + + + {address} + {position.lat.toFixed(4)}, {position.lng.toFixed(4)} + + + ) +} + +export default LocationMarker \ No newline at end of file diff --git a/front/src/components/TrashboxMarkers.jsx b/front/src/components/TrashboxMarkers.jsx new file mode 100644 index 0000000..5838d8f --- /dev/null +++ b/front/src/components/TrashboxMarkers.jsx @@ -0,0 +1,26 @@ +import { Marker, Popup } from "react-leaflet" + +const TrashboxMarkers = ({ trashboxes, selectTrashbox }) => { + return ( + <>{trashboxes.map((trashbox, index) => ( + + +

{trashbox.Address}

+

Тип мусора: <> + {trashbox.Categories.map((category, j) => + + selectTrashbox({ index, category })}> + {category} + + {(j < trashbox.Categories.length - 1) ? ', ' : ''} + + )} +

+

{trashbox.Lat.toFixed(4)}, {trashbox.Lng.toFixed(4)}

+ + + ))} + ) +} + +export default TrashboxMarkers \ No newline at end of file diff --git a/front/src/hooks/api/useAddAnnouncement.js b/front/src/hooks/api/useAddAnnouncement.js new file mode 100644 index 0000000..8217ead --- /dev/null +++ b/front/src/hooks/api/useAddAnnouncement.js @@ -0,0 +1,31 @@ +import { useState } from "react" +import { API_URL } from "../../config" + +const useAddAnnouncement = () => { + const [status, setStatus] = useState("Опубликовать") + + const doAdd = async (formData) => { + setStatus(true) + try { + const res = await fetch(API_URL + "/announcement", { + method: 'PUT', + body: formData, + }) + + const data = await res.json() + + if (!data.Answer) { + throw new Error("Не удалось опубликовать объявление") + } + setStatus("Опубликовано") + + } catch (err) { + setStatus(err.message ?? err) + setTimeout(() => setStatus("Опубликовать"), 10000) + } + } + + return {doAdd, status} +} + +export default useAddAnnouncement \ No newline at end of file diff --git a/front/src/hooks/api/useTrashboxes.js b/front/src/hooks/api/useTrashboxes.js new file mode 100644 index 0000000..3451a22 --- /dev/null +++ b/front/src/hooks/api/useTrashboxes.js @@ -0,0 +1,12 @@ +import { API_URL } from "../../config" +import useFetch from "./useFetch" + +const useTrashboxes = (position) => { + return useFetch( + API_URL + "/trashbox?" + new URLSearchParams({ lat: position.lat, lng: position.lng }), + undefined, + [] + ) +} + +export default useTrashboxes \ No newline at end of file diff --git a/front/src/pages/AddPage.jsx b/front/src/pages/AddPage.jsx index cc17530..90528ee 100644 --- a/front/src/pages/AddPage.jsx +++ b/front/src/pages/AddPage.jsx @@ -1,8 +1,199 @@ +import { useEffect, useState } from "react" +import { Form, Button, Card } from "react-bootstrap" +import { MapContainer, TileLayer } from 'react-leaflet' + +import { categoryNames } from "../assets/category" +import { latLng } from "leaflet" +import { metros } from "../assets/metro" +import LocationMarker from "../components/LocationMarker" +import TrashboxMarkers from "../components/TrashboxMarkers" +import { useAddAnnouncement, useTrashboxes } from "../hooks/api" + function AddPage() { + const [addressPosition, setAddressPosition] = useState(latLng(59.972, 30.3227)) + const [address, setAddress] = useState('') - // TODO + const { data: trashboxes, trashboxes_loading, trashboxes_error } = useTrashboxes(addressPosition) + const [selectedTrashbox, setSelectedTrashbox] = useState({ index: -1, category: '' }) - return <> + useEffect(() => { + (async () => { + try { + const res = await fetch(location.protocol + "//nominatim.openstreetmap.org/search?format=json&q=" + address) + + const fetchData = await res.json() + + console.log("f", fetchData) + + } catch (err) { + console.error(err) + } + })() + }, [address]) + + useEffect(() => { + (async () => { + try { + const res = await fetch(location.protocol + "//nominatim.openstreetmap.org/reverse?format=json&accept-language=ru&lat=" + addressPosition.lat + "&lon=" + addressPosition.lng) + + const fetchData = await res.json() + + setAddress(fetchData.display_name) + + } catch (err) { + console.error(err) + } + })() + }, [addressPosition]) + + const {doAdd, status} = useAddAnnouncement() + + const handleSubmit = (event) => { + event.preventDefault() + event.stopPropagation() + + const formData = new FormData(event.target) + + formData.append("latitude", addressPosition.lat) + formData.append("longtitude", addressPosition.lng) + formData.append("address", address) + formData.set("bestBy", new Date(formData.get("bestBy")).getTime()) + + doAdd(formData) + } + + return ( + + +
+ + Заголовок объявления + + + + + Категория + + + {Array.from(categoryNames).map( + ([category, categoryName]) => + + )} + + + + + Срок годности + + + + + Адрес выдачи +
+ + + + +
+

Адрес: {address}

+ + + + Описание + + + + + Иллюстрация (фото или видео) + + + + + Станция метро + + + + {Object.entries(metros).map( + ([branch, stations]) => + stations.map(metro => + + ) + )} + + + + + Пункт сбора мусора +
+ {trashboxes_loading + ? ( +
+

Загрузка

+
+ ) : ( + trashboxes_error ? ( +

{trashboxes_error}

+ ) : ( + + + + + ) + ) + } +
+ {selectedTrashbox.index > -1 ? ( +

Выбран пункт сбора мусора на { + trashboxes[selectedTrashbox.index].Address + } с категорией {selectedTrashbox.category}

+ ) : ( +

Выберите пунк сбора мусора и категорию

+ )} + + + +
+ + + ) } export default AddPage