diff --git a/public/images/Infra/InfraOrto.jpg b/public/images/Infra/InfraOrto.jpg new file mode 100644 index 0000000..4983ba2 Binary files /dev/null and b/public/images/Infra/InfraOrto.jpg differ diff --git a/src/components/DistanceCircle.tsx b/src/components/DistanceCircle.tsx index 97f6776..a0facb1 100644 --- a/src/components/DistanceCircle.tsx +++ b/src/components/DistanceCircle.tsx @@ -5,37 +5,47 @@ interface DistanceCircleProps { const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => { return ( - - - - - - - - + + + + + + + + + + ); }; diff --git a/src/components/InfrastructurePage/InfrastructureFilters.tsx b/src/components/InfrastructurePage/InfrastructureFilters.tsx index 4b0c37f..edc5704 100644 --- a/src/components/InfrastructurePage/InfrastructureFilters.tsx +++ b/src/components/InfrastructurePage/InfrastructureFilters.tsx @@ -1,48 +1,29 @@ import { useEffect, useState } from "react"; import { environments, transports } from "../../consts/infrastructure"; import InputRange from "./InputRange"; +import { Mark } from "../../types/Mark"; -interface IFilter { - infrastructureId: string; - distanceStage: number; -} - -const data: IFilter[] = [ - { infrastructureId: "1", distanceStage: 1 }, - { infrastructureId: "1", distanceStage: 2 }, - { infrastructureId: "2", distanceStage: 3 }, - { infrastructureId: "2", distanceStage: 4 }, - { infrastructureId: "2", distanceStage: 5 }, - { infrastructureId: "3", distanceStage: 6 }, - { infrastructureId: "3", distanceStage: 7 }, - { infrastructureId: "3", distanceStage: 8 }, - { infrastructureId: "4", distanceStage: 9 }, - { infrastructureId: "4", distanceStage: 10 }, - { infrastructureId: "5", distanceStage: 11 }, - { infrastructureId: "5", distanceStage: 12 }, - { infrastructureId: "5", distanceStage: 13 }, - { infrastructureId: "6", distanceStage: 14 }, - { infrastructureId: "6", distanceStage: 1 }, - { infrastructureId: "7", distanceStage: 1 }, -]; - -interface IInfrastructureFiltersProps { +interface InfrastructureFiltersProps { setSelectedRange: React.Dispatch>; + setFilteredMarks: React.Dispatch>; selectedRange: number; + marks: Mark[]; } const InfrastructureFilters = ({ setSelectedRange, + setFilteredMarks, selectedRange, -}: IInfrastructureFiltersProps) => { + marks, +}: InfrastructureFiltersProps) => { const [filter, setFilter] = useState(""); function handleOnFilterClick( event: React.MouseEvent ): void { - const infrastructureId = event.currentTarget.dataset.set; - if (!infrastructureId) return; + const infrastructureFilter = event.currentTarget.dataset.set; + if (!infrastructureFilter) return; - setFilter(infrastructureId); + setFilter(infrastructureFilter); } const handleOnInputRangeChange = ( @@ -50,11 +31,13 @@ const InfrastructureFilters = ({ ) => setSelectedRange(Number(event.target.value)); useEffect(() => { - const _distanceRange = (selectedRange - 150) / 50; - const filteredData = data.filter((d) => d.infrastructureId === filter && d.distanceStage === _distanceRange); + const filteredMarks = marks.filter( + (mark) => mark.icon === filter && mark.distance <= selectedRange + ); + console.log("filteredMarks", filteredMarks); - console.log("filteredData", filteredData); - }, [filter]); + setFilteredMarks(filteredMarks); + }, [selectedRange, filter, marks, setFilteredMarks]); return ( <> @@ -64,11 +47,11 @@ const InfrastructureFilters = ({
{environments.map((env) => (
); diff --git a/src/pages/InfrastructurePage.tsx b/src/pages/InfrastructurePage.tsx deleted file mode 100644 index b96fe0c..0000000 --- a/src/pages/InfrastructurePage.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import { useEffect, useState } from "react"; -import ImageMarker from "react-image-marker"; -import Button from "../components/Button"; -import ArrowLeftIcon from "../components/icons/ArrowLeftIcon"; -import CrossIcon from "../icons/CrossIcon"; -import InfrastructureFilters from "../components/InfrastructurePage/InfrastructureFilters"; -import Mark from "../components/Mark"; -import DistanceCircle from "../components/DistanceCircle"; - -const markers = [ - { - top: 40, - left: 40, - }, -]; - -function InfrastructurePage() { - const [selectedRange, setSelectedRange] = useState(800); - const [width, setWidth] = useState(); - const [top, setTop] = useState(); - - function handleResize() { - setWidth(window.innerWidth); - setTop(window.innerWidth / 2 - window.innerHeight / 2); - } - - useEffect(() => { - handleResize(); - window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); - }, []); - - return ( -
- {/*
*/} - {/* */} - {/* */} - {/*
*/} -
-
-
- -
- -
-
-
- {/* */} - -
- -
-
- -
-
- {/*
- - - - - - - - - - - - - -
- - */} -
- ); -} - -export default InfrastructurePage; diff --git a/src/types/Infrastructure.ts b/src/types/Infrastructure.ts index af4ad55..8221fbd 100644 --- a/src/types/Infrastructure.ts +++ b/src/types/Infrastructure.ts @@ -2,6 +2,7 @@ interface IInfrastructure { id: string; icon: React.ReactNode; label: string; + type: string; } export type { IInfrastructure }; diff --git a/src/types/Mark.ts b/src/types/Mark.ts new file mode 100644 index 0000000..2c80786 --- /dev/null +++ b/src/types/Mark.ts @@ -0,0 +1,12 @@ +interface Mark { + id: string; + label: string; + icon: string; + distance: number; + x: number; + y: number; + width?: number; + heigth?: number; +} + +export type { Mark };