From 6ea8045d469336926dcbdd5ed0edd577c6b71ad1 Mon Sep 17 00:00:00 2001 From: inmake Date: Mon, 6 May 2024 13:31:29 +0500 Subject: [PATCH] upd --- src/components/Tower1FloorPlan.tsx | 1149 ++--------------- src/components/Tower1FloorSelection.tsx | 1081 ++++++++++++++++ src/components/Tower2FloorPlan.tsx | 1113 ---------------- src/components/Tower2FloorSelection.tsx | 1113 ++++++++++++++++ src/components/icons/marks/MarkApartArea1.tsx | 85 ++ src/pages/Tower1Page.tsx | 4 +- src/pages/Tower1SelectPage.tsx | 252 ++-- src/pages/Tower2Page.tsx | 4 +- 8 files changed, 2458 insertions(+), 2343 deletions(-) create mode 100644 src/components/Tower1FloorSelection.tsx create mode 100644 src/components/Tower2FloorSelection.tsx create mode 100644 src/components/icons/marks/MarkApartArea1.tsx diff --git a/src/components/Tower1FloorPlan.tsx b/src/components/Tower1FloorPlan.tsx index 4f696f1..4b81c9a 100644 --- a/src/components/Tower1FloorPlan.tsx +++ b/src/components/Tower1FloorPlan.tsx @@ -1,1078 +1,119 @@ interface Props { x: number; y: number; - onClick: (floor: number) => void; } -const SVGComponent = ({ x, y, onClick }: Props) => ( +const SVGComponent = ({ x, y }: Props) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - onClick(27)}> - + + + + + + + + + + - - - + - - {"27 этаж"} - - - - - onClick(26)}> - - - - - - {"26 этаж"} - - - - - onClick(25)}> - - - - - - {"25 этаж"} - - - - - onClick(24)}> - - - - - - {"24 этаж"} - - - - - onClick(23)}> - - - - - - {"23 этаж"} - - - - - onClick(22)}> - - - - - - {"22 этаж"} - - - - - onClick(21)}> - - - - - - {"21 этаж"} - - - - - onClick(20)}> - - - - - - {"20 этаж"} - - - - - onClick(19)}> - - - - onClick(18)}> - - - - - - {"18 этаж"} - - - - - onClick(17)}> - - - - - - {"17 этаж"} - - - - - onClick(16)}> - - - - - - {"16 этаж"} - - - - - onClick(15)}> - - - - - - {"15 этаж"} - - - - - onClick(14)}> - - - - - - {"14 этаж"} - - - - - onClick(13)}> - - - - - - {"13 этаж"} - - - - - onClick(12)}> - - - - - - {"12 этаж"} - - - - - onClick(11)}> - - - - - - {"11 этаж"} - - - - - onClick(10)}> - - - - - - {"10 этаж"} - - - - - onClick(9)}> - - - - - - {"9 этаж"} - - - - - onClick(8)}> - - - - - - {"8 этаж"} - - - - - onClick(7)}> - - - - - - {"7 этаж"} - - - - - onClick(6)}> - - - - - - {"6 этаж"} - - diff --git a/src/components/Tower1FloorSelection.tsx b/src/components/Tower1FloorSelection.tsx new file mode 100644 index 0000000..4f696f1 --- /dev/null +++ b/src/components/Tower1FloorSelection.tsx @@ -0,0 +1,1081 @@ +interface Props { + x: number; + y: number; + onClick: (floor: number) => void; +} + +const SVGComponent = ({ x, y, onClick }: Props) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + onClick(27)}> + + + + + + {"27 этаж"} + + + + + onClick(26)}> + + + + + + {"26 этаж"} + + + + + onClick(25)}> + + + + + + {"25 этаж"} + + + + + onClick(24)}> + + + + + + {"24 этаж"} + + + + + onClick(23)}> + + + + + + {"23 этаж"} + + + + + onClick(22)}> + + + + + + {"22 этаж"} + + + + + onClick(21)}> + + + + + + {"21 этаж"} + + + + + onClick(20)}> + + + + + + {"20 этаж"} + + + + + onClick(19)}> + + + + onClick(18)}> + + + + + + {"18 этаж"} + + + + + onClick(17)}> + + + + + + {"17 этаж"} + + + + + onClick(16)}> + + + + + + {"16 этаж"} + + + + + onClick(15)}> + + + + + + {"15 этаж"} + + + + + onClick(14)}> + + + + + + {"14 этаж"} + + + + + onClick(13)}> + + + + + + {"13 этаж"} + + + + + onClick(12)}> + + + + + + {"12 этаж"} + + + + + onClick(11)}> + + + + + + {"11 этаж"} + + + + + onClick(10)}> + + + + + + {"10 этаж"} + + + + + onClick(9)}> + + + + + + {"9 этаж"} + + + + + onClick(8)}> + + + + + + {"8 этаж"} + + + + + onClick(7)}> + + + + + + {"7 этаж"} + + + + + onClick(6)}> + + + + + + {"6 этаж"} + + + + + + +); +export default SVGComponent; diff --git a/src/components/Tower2FloorPlan.tsx b/src/components/Tower2FloorPlan.tsx index 615d814..e69de29 100644 --- a/src/components/Tower2FloorPlan.tsx +++ b/src/components/Tower2FloorPlan.tsx @@ -1,1113 +0,0 @@ -interface Props { - x: number; - y: number; - onClick: (floor: number) => void; -} - -const SVGComponent = ({ x, y, onClick }: Props) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - onClick(28)}> - - - - - - {"28 этаж"} - - - - - onClick(27)}> - - - - - - {"27 этаж"} - - - - - onClick(26)}> - - - - - - {"26 этаж"} - - - - - onClick(25)}> - - - - - - {"25 этаж"} - - - - - onClick(24)}> - - - - onClick(23)}> - - - - - - {"23 этаж"} - - - - - onClick(22)}> - - - - - - {"22 этаж"} - - - - - onClick(21)}> - - - - - - {"21 этаж"} - - - - - onClick(20)}> - - - - - - {"20 этаж"} - - - - - onClick(19)}> - - - - - - {"19 этаж"} - - - - - onClick(18)}> - - - - - - {"18 этаж"} - - - - - onClick(17)}> - - - - - - {"17 этаж"} - - - - - onClick(16)}> - - - - - - {"16 этаж"} - - - - - onClick(15)}> - - - - - - {"15 этаж"} - - - - - onClick(14)}> - - - - - - {"14 этаж"} - - - - - onClick(13)}> - - - - - - {"13 этаж"} - - - - - onClick(12)}> - - - - - - {"12 этаж"} - - - - - onClick(11)}> - - - - - - {"11 этаж"} - - - - - onClick(10)}> - - - - - - {"10 этаж"} - - - - - onClick(9)}> - - - - - - {"9 этаж"} - - - - - onClick(8)}> - - - - - - {"8 этаж"} - - - - - onClick(7)}> - - - - - - {"7 этаж"} - - - - - onClick(6)}> - - - - - - {"6 этаж"} - - - - - - -); -export default SVGComponent; diff --git a/src/components/Tower2FloorSelection.tsx b/src/components/Tower2FloorSelection.tsx new file mode 100644 index 0000000..615d814 --- /dev/null +++ b/src/components/Tower2FloorSelection.tsx @@ -0,0 +1,1113 @@ +interface Props { + x: number; + y: number; + onClick: (floor: number) => void; +} + +const SVGComponent = ({ x, y, onClick }: Props) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + onClick(28)}> + + + + + + {"28 этаж"} + + + + + onClick(27)}> + + + + + + {"27 этаж"} + + + + + onClick(26)}> + + + + + + {"26 этаж"} + + + + + onClick(25)}> + + + + + + {"25 этаж"} + + + + + onClick(24)}> + + + + onClick(23)}> + + + + + + {"23 этаж"} + + + + + onClick(22)}> + + + + + + {"22 этаж"} + + + + + onClick(21)}> + + + + + + {"21 этаж"} + + + + + onClick(20)}> + + + + + + {"20 этаж"} + + + + + onClick(19)}> + + + + + + {"19 этаж"} + + + + + onClick(18)}> + + + + + + {"18 этаж"} + + + + + onClick(17)}> + + + + + + {"17 этаж"} + + + + + onClick(16)}> + + + + + + {"16 этаж"} + + + + + onClick(15)}> + + + + + + {"15 этаж"} + + + + + onClick(14)}> + + + + + + {"14 этаж"} + + + + + onClick(13)}> + + + + + + {"13 этаж"} + + + + + onClick(12)}> + + + + + + {"12 этаж"} + + + + + onClick(11)}> + + + + + + {"11 этаж"} + + + + + onClick(10)}> + + + + + + {"10 этаж"} + + + + + onClick(9)}> + + + + + + {"9 этаж"} + + + + + onClick(8)}> + + + + + + {"8 этаж"} + + + + + onClick(7)}> + + + + + + {"7 этаж"} + + + + + onClick(6)}> + + + + + + {"6 этаж"} + + + + + + +); +export default SVGComponent; diff --git a/src/components/icons/marks/MarkApartArea1.tsx b/src/components/icons/marks/MarkApartArea1.tsx new file mode 100644 index 0000000..492e884 --- /dev/null +++ b/src/components/icons/marks/MarkApartArea1.tsx @@ -0,0 +1,85 @@ +interface Props { + x: number; + y: number; + onClick?: () => void; + onMouseEnter?: () => void; + onMouseLeave?: () => void; +} + +function MarkApartArea1({ x, y, onClick, onMouseEnter, onMouseLeave }: Props) { + return ( + + + + + + + {"116.8 м²"} + + + + + + {"3К"} + + + + + ); +} + +export default MarkApartArea1; diff --git a/src/pages/Tower1Page.tsx b/src/pages/Tower1Page.tsx index 498adf1..c125bb6 100644 --- a/src/pages/Tower1Page.tsx +++ b/src/pages/Tower1Page.tsx @@ -3,7 +3,7 @@ import { useEffect, useState } from "react"; import ArrowLeftIcon from "../components/icons/ArrowLeftIcon"; import Button from "../components/Button"; import { Transition } from "react-transition-group"; -import Tower1FloorPlan from "../components/Tower1FloorPlan"; +import Tower1FloorSelection from "../components/Tower1FloorSelection"; function Tower1Page() { const [width, setWidth] = useState(); @@ -50,7 +50,7 @@ function Tower1Page() { xmlns="http://www.w3.org/2000/svg" className="absolute z-50 top-0 left-0 w-full h-full" > - console.log("floor", floor)} diff --git a/src/pages/Tower1SelectPage.tsx b/src/pages/Tower1SelectPage.tsx index d311bc0..c6a4e60 100644 --- a/src/pages/Tower1SelectPage.tsx +++ b/src/pages/Tower1SelectPage.tsx @@ -1,113 +1,38 @@ import { useNavigate } from "react-router-dom"; -import { Mark } from "../types/Mark"; import { useEffect, useState } from "react"; import ArrowLeftIcon from "../components/icons/ArrowLeftIcon"; import Button from "../components/Button"; import { Transition } from "react-transition-group"; import MarkLockIcon from "../components/icons/marks/MarkLockIcon"; -import MarkApartIcon from "../components/icons/marks/MarkApartIcon"; - -const marks: Mark[] = [ - { - id: "1", - label: "Просмотр квартиры", - icon: "walk", - x: 1040, - y: 710, - url: "1", - type: "apart", - text: "3К", - text2: "116.8 м2", - }, - { - id: "2", - label: "Недоступно", - icon: "lock", - x: 835, - y: 710, - type: "lock", - }, - { - id: "3", - label: "Недоступно", - icon: "lock", - x: 750, - y: 850, - type: "lock", - }, - { - id: "4", - label: "Недоступно", - icon: "lock", - x: 1115, - y: 850, - type: "lock", - }, - { - id: "5", - label: "Недоступно", - icon: "lock", - x: 720, - y: 970, - type: "lock", - }, - { - id: "6", - label: "Недоступно", - icon: "lock", - x: 1150, - y: 970, - type: "lock", - }, - { - id: "7", - label: "Недоступно", - icon: "lock", - x: 650, - y: 1155, - type: "lock", - }, - { - id: "8", - label: "Недоступно", - icon: "lock", - x: 835, - y: 1190, - type: "lock", - }, - { - id: "9", - label: "Недоступно", - icon: "lock", - x: 1035, - y: 1190, - type: "lock", - }, - { - id: "10", - label: "Недоступно", - icon: "lock", - x: 1220, - y: 1155, - type: "lock", - }, -]; +import MarkApartArea2 from "../components/icons/marks/MarkApartArea2"; +import MarkApartArea1 from "../components/icons/marks/MarkApartArea1"; +import Tower1FloorPlan from "../components/Tower1FloorPlan"; function Tower1SelectPage() { - const [width, setWidth] = useState(); - const [top, setTop] = useState(); + const [width, setWidth] = useState(0); + const [top, setTop] = useState(0); const [isLoaded, setIsLoaded] = useState(false); const navigate = useNavigate(); + const [selectedArea, setSelectedArea] = useState(null); + const [mousePos, setMousePos] = useState<[number, number]>([0, 0]); function handleResize() { setWidth(window.innerWidth); setTop(window.innerWidth / 2 - window.innerHeight / 2); } + function handleMouseMove(e: MouseEvent) { + setMousePos([e.clientX, e.clientY]); + } + useEffect(() => { handleResize(); window.addEventListener("resize", handleResize); - return () => window.removeEventListener("resize", handleResize); + window.addEventListener("mousemove", handleMouseMove); + return () => { + window.removeEventListener("resize", handleResize); + window.removeEventListener("mousemove", handleMouseMove); + }; }, []); function handleOnImageLoad() { @@ -115,97 +40,80 @@ function Tower1SelectPage() { } return ( -
-
+
+
+ + + + + +
- - - - navigate("1")} - onMouseEnter={() => setSelectedArea(1)} - onMouseLeave={() => setSelectedArea(null)} - /> - - - - - - - - - - - -
-

- 3-комнатные апартаменты -

-

- Площадь - 116.8 м² +

+ 2-комнатные апартаменты +

+

+ Площадь + 116.8 м² +

+
+
+

Стоимость

+

+ {/* {(7500600).toLocaleString("ru")} руб. */}- руб.

-
-
-

Стоимость

-

- {/* {(7500600).toLocaleString("ru")} руб. */}- руб. -

-
-
-
+
+
+
- - {(state) => ( -
- {/*

+ + {(state) => ( +
+ {/*

Загрузка...

*/} -
- )} - -

+
+ )} +
); } diff --git a/src/pages/Tower2Page.tsx b/src/pages/Tower2Page.tsx index a267176..c7cfa23 100644 --- a/src/pages/Tower2Page.tsx +++ b/src/pages/Tower2Page.tsx @@ -4,7 +4,7 @@ import { useEffect, useState } from "react"; import ArrowLeftIcon from "../components/icons/ArrowLeftIcon"; import Button from "../components/Button"; import { Transition } from "react-transition-group"; -import Tower2FloorPlan from "../components/Tower2FloorPlan"; +import Tower2FloorSelection from "../components/Tower2FloorSelection"; function Tower2Page() { const [width, setWidth] = useState(); @@ -51,7 +51,7 @@ function Tower2Page() { xmlns="http://www.w3.org/2000/svg" className="absolute z-50 top-0 left-0 w-full h-full" > - console.log("floor", floor)}