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 b233ac1..782c25b 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,7 +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 InfrastructurePage from "./pages/InfrastructurePage.tsx"; const router = createBrowserRouter([ { @@ -10,8 +10,8 @@ const router = createBrowserRouter([ element: , }, { - path: "/infra2", - element: , + path: "/infrastructure", + element: , }, ]); diff --git a/src/pages/Infra2Page.tsx b/src/pages/Infra2Page.tsx deleted file mode 100644 index ac3bf49..0000000 --- a/src/pages/Infra2Page.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { useEffect, useState } from "react"; -import { Transition } from "react-transition-group"; - -const rangeStart = 200; -const rangeEnd = 850; -const rangeStep = 50; -const arrayLength = (rangeEnd - rangeStart) / rangeStep + 1; // 14 - -function Infra2Page() { - const [selectedRange, setSelectedRange] = useState(500); - const [loadedImages, setLoadedImages] = useState(0); - - function handleLoad() { - setLoadedImages((prev) => prev + 1); - } - - return ( -
- {Array.from({ length: arrayLength }).map((_, index) => { - const currentRange = rangeStart + rangeStep * index; - - return ( - handleLoad()} - /> - ); - })} - - setSelectedRange(+e.target.value)} - /> - - {arrayLength !== loadedImages && ( -
-

- Загрузка... {Math.round((100 / arrayLength) * loadedImages)} % -

-
- )} -
- ); -} - -export default Infra2Page; diff --git a/src/pages/InfrastructurePage.tsx b/src/pages/InfrastructurePage.tsx index 01f2cc3..8839c87 100644 --- a/src/pages/InfrastructurePage.tsx +++ b/src/pages/InfrastructurePage.tsx @@ -1,58 +1,46 @@ -import { useRef, useState } from "react"; +import { useState } from "react"; 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"; +import CrossIcon from "../icons/CrossIcon"; +import InfrastructureFilters from "../components/InfrastructurePage/InfrastructureFilters"; +import InputRange from "../components/InfrastructurePage/InputRange"; -const images = _images as Image[]; +function InfrastructurePage() { + const [selectedRange, setSelectedRange] = useState(800); -const InfrastructurePage = () => { - const [selectedImageId, setSelectedImageId] = useState(images[0].id); - const fullscreenRef = useRef(null); - const [isFullscreen, { toggleFullscreen }] = useFullscreen(fullscreenRef); + const handleOnInputRangeChange = ( + event: React.ChangeEvent + ) => setSelectedRange(Number(event.target.value)); return ( -
-
-
- {selectedImageId.includes("Dvor") && ( - <> -

- Внутренний -
- двор -

- - - )} - {selectedImageId.includes("Lobby_1") && ( - <> -

Лобби

- - - )} - {selectedImageId.includes("Lobby_2") && ( - <> -

Лобби

- - - )} +
+
+
+
+
+ +
+ +
- -
-
+
); -}; +} 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 };