diff --git a/public/images/Infra/NKS.png b/public/images/Infra/NKS.png new file mode 100644 index 0000000..1176a47 Binary files /dev/null and b/public/images/Infra/NKS.png differ diff --git a/src/components/InfrastructurePage/InfrastructureFilters.tsx b/src/components/InfrastructurePage/InfrastructureFilters.tsx new file mode 100644 index 0000000..ffa9f93 --- /dev/null +++ b/src/components/InfrastructurePage/InfrastructureFilters.tsx @@ -0,0 +1,87 @@ +import { useEffect, useState } from "react"; +import { environments, transports } from "../../consts/infrastructure"; + +interface IFilter { + filterId: string; +} + +const data: IFilter[] = [ + { filterId: "1" }, + { filterId: "1" }, + { filterId: "2" }, + { filterId: "2" }, + { filterId: "2" }, + { filterId: "3" }, + { filterId: "3" }, + { filterId: "3" }, + { filterId: "4" }, + { filterId: "4" }, + { filterId: "5" }, + { filterId: "5" }, + { filterId: "5" }, + { filterId: "6" }, + { filterId: "6" }, + { filterId: "7" }, +]; + +const InfrastructureFilters = () => { + const [filter, setFilter] = useState(""); + function handleOnFilterClick( + event: React.MouseEvent + ): void { + const filterId = event.currentTarget.dataset.set; + if (!filterId) return; + + setFilter(filterId); + } + + useEffect(() => { + const filteredData = data.filter((d) => d.filterId === filter); + + console.log("filteredData", filteredData); + }, [filter]); + + return ( +
+

Инфраструктура

+

Окружение:

+
+ {environments.map((env) => ( + + ))} +
+
+

Транспорт:

+ {transports.map((trans) => ( + + ))} +
+
+ ); +}; + +export default InfrastructureFilters; diff --git a/src/components/InfrastructurePage/InputRange.tsx b/src/components/InfrastructurePage/InputRange.tsx new file mode 100644 index 0000000..ae91b9b --- /dev/null +++ b/src/components/InfrastructurePage/InputRange.tsx @@ -0,0 +1,33 @@ +import { rangeStart, rangeEnd, rangeStep } from "../../consts/infrastructure"; + +interface IInputRangeProps { + selectedRange: number; + handleOnChange: (event: React.ChangeEvent) => void; +} + +const InputRange = ({ handleOnChange, selectedRange }: IInputRangeProps) => { + return ( +
+
+

Дистанция ходьбы:

+

минут / метров

+
+
+

+ {selectedRange} / {rangeEnd} +

+ +
+
+ ); +}; + +export default InputRange; diff --git a/src/consts/infrastructure.tsx b/src/consts/infrastructure.tsx new file mode 100644 index 0000000..e259070 --- /dev/null +++ b/src/consts/infrastructure.tsx @@ -0,0 +1,26 @@ +import BusIcon from "../icons/BusIcon"; +import EducationIcon from "../icons/EducationIcon"; +import HealthyIcon from "../icons/HealthyIcon"; +import MallIcon from "../icons/MallIcon"; +import RestourauntIcon from "../icons/RestourantIcon"; +import SportIcon from "../icons/SportIcon"; +import TramIcon from "../icons/TramIcon"; +import { IInfrastructure } from "../types/Infrastructure"; + +export const environments: IInfrastructure[] = [ + { id: "1", icon: , label: "Торговые центры" }, + { id: "2", icon: , label: "Рестораны" }, + { id: "3", icon: , label: "Здоровье" }, + { id: "4", icon: , label: "Образование" }, + { id: "5", icon: , label: "Спорт" }, +]; + +export const transports: IInfrastructure[] = [ + { id: "6", icon: , label: "Автобус" }, + { id: "7", icon: , label: "Трамвай" }, +]; + +export const rangeStart = 200; +export const rangeEnd = 850; +export const rangeStep = 50; +export const arrayLength = (rangeEnd - rangeStart) / rangeStep + 1; // 14 diff --git a/src/icons/BusIcon.tsx b/src/icons/BusIcon.tsx new file mode 100644 index 0000000..3f4c398 --- /dev/null +++ b/src/icons/BusIcon.tsx @@ -0,0 +1,24 @@ +const BusIcon = () => { + return ( + + + + + + + + ); +}; + +export default BusIcon; diff --git a/src/icons/CrossIcon.tsx b/src/icons/CrossIcon.tsx new file mode 100644 index 0000000..dcc043d --- /dev/null +++ b/src/icons/CrossIcon.tsx @@ -0,0 +1,21 @@ +const CrossIcon = () => { + return ( + + + + ); +}; + +export default CrossIcon; diff --git a/src/icons/EducationIcon.tsx b/src/icons/EducationIcon.tsx new file mode 100644 index 0000000..a6fa3cf --- /dev/null +++ b/src/icons/EducationIcon.tsx @@ -0,0 +1,27 @@ +const EducationIcon = () => { + return ( + + + + + + + + + + + ); +}; + +export default EducationIcon; diff --git a/src/icons/HealthyIcon.tsx b/src/icons/HealthyIcon.tsx new file mode 100644 index 0000000..b2494c2 --- /dev/null +++ b/src/icons/HealthyIcon.tsx @@ -0,0 +1,20 @@ +const HealthyIcon = () => { + return ( + + + + ); +}; + +export default HealthyIcon; diff --git a/src/icons/MallIcon.tsx b/src/icons/MallIcon.tsx new file mode 100644 index 0000000..41b42c0 --- /dev/null +++ b/src/icons/MallIcon.tsx @@ -0,0 +1,20 @@ +const MallIcon = () => { + return ( + + + + ); +}; + +export default MallIcon; diff --git a/src/icons/RestourantIcon.tsx b/src/icons/RestourantIcon.tsx new file mode 100644 index 0000000..f418c28 --- /dev/null +++ b/src/icons/RestourantIcon.tsx @@ -0,0 +1,24 @@ +const RestourauntIcon = () => { + return ( + + + + + ); +}; + +export default RestourauntIcon; diff --git a/src/icons/SportIcon.tsx b/src/icons/SportIcon.tsx new file mode 100644 index 0000000..283df7a --- /dev/null +++ b/src/icons/SportIcon.tsx @@ -0,0 +1,39 @@ +const SportIcon = () => { + return ( + + + + + + + + + + + + + ); +}; + +export default SportIcon; diff --git a/src/icons/TramIcon.tsx b/src/icons/TramIcon.tsx new file mode 100644 index 0000000..d4d317b --- /dev/null +++ b/src/icons/TramIcon.tsx @@ -0,0 +1,22 @@ +const TramIcon = () => { + return ( + + + + + + ); +}; + +export default TramIcon; diff --git a/src/main.tsx b/src/main.tsx index e1f8135..8cb0075 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,8 +2,7 @@ import ReactDOM from "react-dom/client"; import "./index.css"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; import VirtualTourPage from "./pages/VirtualTourPage.tsx"; -import Infra2Page from "./pages/Infra2Page.tsx"; -import MainPage from "./pages/MainPage.tsx"; +import InfrastructurePage from "./pages/InfrastructurePage.tsx"; const router = createBrowserRouter([ { @@ -15,8 +14,8 @@ const router = createBrowserRouter([ element: , }, { - path: "/infra2", - element: , + path: "/infrastructure", + element: , }, ]); diff --git a/src/pages/InfrastructurePage.tsx b/src/pages/InfrastructurePage.tsx new file mode 100644 index 0000000..8839c87 --- /dev/null +++ b/src/pages/InfrastructurePage.tsx @@ -0,0 +1,46 @@ +import { useState } from "react"; +import Button from "../components/Button"; +import ArrowLeftIcon from "../components/icons/ArrowLeftIcon"; +import CrossIcon from "../icons/CrossIcon"; +import InfrastructureFilters from "../components/InfrastructurePage/InfrastructureFilters"; +import InputRange from "../components/InfrastructurePage/InputRange"; + +function InfrastructurePage() { + const [selectedRange, setSelectedRange] = useState(800); + + const handleOnInputRangeChange = ( + event: React.ChangeEvent + ) => setSelectedRange(Number(event.target.value)); + + return ( +
+
+
+
+
+ +
+ + +
+
+ +
+ ); +} + +export default InfrastructurePage; diff --git a/src/pages/VirtualTourPage.tsx b/src/pages/VirtualTourPage.tsx index 7d9dbed..23c93d2 100644 --- a/src/pages/VirtualTourPage.tsx +++ b/src/pages/VirtualTourPage.tsx @@ -1,14 +1,14 @@ import { Canvas } from "@react-three/fiber"; import { Html, OrbitControls } from "@react-three/drei"; -import SphereTour from "../components/SphereTour"; import { Suspense, useRef, useState } from "react"; import { OrbitControls as OrbitControlsImpl } from "three-stdlib"; +import { useFullscreen } from "ahooks"; +import SphereTour from "../components/SphereTour"; import PointButton from "../components/PointButton"; import WalkIcon from "../components/icons/WalkIcon"; import Button from "../components/Button"; import ArrowLeftIcon from "../components/icons/ArrowLeftIcon"; import FullscreenIcon from "../components/icons/FullscreenIcon"; -import { useFullscreen } from "ahooks"; import WindowModeIcon from "../components/icons/WindowModeIcon"; import _images from "../images.json"; import Image from "../types/Image"; diff --git a/src/types/Infrastructure.ts b/src/types/Infrastructure.ts new file mode 100644 index 0000000..af4ad55 --- /dev/null +++ b/src/types/Infrastructure.ts @@ -0,0 +1,7 @@ +interface IInfrastructure { + id: string; + icon: React.ReactNode; + label: string; +} + +export type { IInfrastructure };