diff --git a/client/.env.development b/client/.env.development index e50944b..2837c03 100644 --- a/client/.env.development +++ b/client/.env.development @@ -1 +1 @@ -VITE_SERVER_API=http://localhost:4002 \ No newline at end of file +VITE_SERVER_API=http://192.168.1.120:4002 \ No newline at end of file diff --git a/client/src/components/complexWingPage/FloorSidebar/EastWingFloorLayout.tsx b/client/src/components/complexWingPage/FloorSidebar/EastWingFloorLayout.tsx index 16811ee..db8597b 100644 --- a/client/src/components/complexWingPage/FloorSidebar/EastWingFloorLayout.tsx +++ b/client/src/components/complexWingPage/FloorSidebar/EastWingFloorLayout.tsx @@ -1269,7 +1269,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1282,7 +1282,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1295,7 +1295,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1308,7 +1308,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1321,7 +1321,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1334,7 +1334,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1347,7 +1347,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1360,7 +1360,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1373,7 +1373,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1386,7 +1386,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1399,7 +1399,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1412,7 +1412,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1425,7 +1425,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1438,7 +1438,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1451,7 +1451,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1464,7 +1464,7 @@ function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} diff --git a/client/src/components/complexWingPage/FloorSidebar/FloorPlanSidebar.tsx b/client/src/components/complexWingPage/FloorSidebar/FloorPlanSidebar.tsx new file mode 100644 index 0000000..8f61fba --- /dev/null +++ b/client/src/components/complexWingPage/FloorSidebar/FloorPlanSidebar.tsx @@ -0,0 +1,156 @@ +import React, { useState } from "react"; +import IUnit from "../../../types/IUnit"; +import Button3 from "../../Button3"; +import CloseIcon from "../../icons/CloseIcon"; +import EastWingFloorLayout from "./EastWingFloorLayout"; +import UnitPopup from "./UnitPopup"; +import WestWingBottomFloorLayout from "./WestWingBottomFloorLayout"; +import WestWingFloorLayout from "./WestWingFloorLayout"; +import api from "../../../utils/api"; +import useModal from "../../../store/useModal"; +import UnitModal from "../../modals/UnitModal"; +import { isMobile } from "react-device-detect"; + +interface Props { + floor: number; + wing: string; + onClose: () => void; +} + +function FloorPlanSidebar({ floor, wing, onClose }: Props) { + const { setModal } = useModal(); + const [hoveredUnit, setHoveredUnit] = useState(); + const [showPopup, setShowPopup] = useState(false); + const [mousePos, setMousePos] = useState<[number, number]>([0, 0]); + const [type, setType] = useState(null); + + function handleMouseEnter(e: React.MouseEvent) { + const unitNumber = e.currentTarget.dataset.number; + const type = e.currentTarget.dataset.type; + + if (!unitNumber || !type) return; + + getUnit(unitNumber); + setType(type); + setShowPopup(true); + setHoveredUnit(hoveredUnit); + } + + function handleMouseLeave() { + setShowPopup(false); + setHoveredUnit(undefined); + } + + function handleMouseMove(e: React.MouseEvent) { + const x = e.clientX - e.currentTarget.getBoundingClientRect().left; + const y = e.clientY - e.currentTarget.getBoundingClientRect().top; + + console.log(x, y); + + setMousePos([x, y]); + } + + function handleClick() { + console.log("hoveredUnit", hoveredUnit); + console.log("type", type); + + if (!hoveredUnit || !type) return; + + setModal(); + } + + async function getUnit(unitNumber: string) { + try { + const result: IUnit[] = await api + .get(`units?unitNo=${wing[0]}-${floor}${unitNumber.padStart(2, "0")}`) + .json(); + + setHoveredUnit(result[0]); + } catch (error) { + alert((error as Error).message); + } + } + + return ( +
+
+
+

+ {floor} floor +

+

{wing} Wing

+
+ } + onlyIcon + onClick={onClose} + /> +
+
+
+
+
+
+

Studio Flex

+
+
+
+

Studio²

+
+
+
+

1 Bedroom²

+
+
+
+

2 Bedroom²

+
+
+
+ 0 units +
+
+
+ + {wing === "West" ? ( + floor <= 21 ? ( + + ) : ( + + ) + ) : ( + + )} + + + {!isMobile && ( + + )} +
+
+
+ ); +} + +export default FloorPlanSidebar; diff --git a/client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx b/client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx index ae4e157..efa4ad2 100644 --- a/client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx +++ b/client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx @@ -45,6 +45,7 @@ function FloorSidebar({ currentFloor }: Props) { function handleMouseMove(e: React.MouseEvent) { const x = e.clientX - e.currentTarget.getBoundingClientRect().left; const y = e.clientY - e.currentTarget.getBoundingClientRect().top; + setMousePos([x, y]); } @@ -91,23 +92,23 @@ function FloorSidebar({ currentFloor }: Props) {
-
+

Studio Flex

-
+

Studio

-
+

1 Bedroom

-
+

1 Bedroom

-
+

2 Bedroom

@@ -116,7 +117,7 @@ function FloorSidebar({ currentFloor }: Props) { {floorApartments.length} units
*/}
- + {currentFloor?.wing === "West Wing" ? ( currentFloor && currentFloor.floor <= 21 ? (
diff --git a/client/src/components/complexWingPage/FloorSidebar/UnitPopup.tsx b/client/src/components/complexWingPage/FloorSidebar/UnitPopup.tsx index 618aa38..1078e87 100644 --- a/client/src/components/complexWingPage/FloorSidebar/UnitPopup.tsx +++ b/client/src/components/complexWingPage/FloorSidebar/UnitPopup.tsx @@ -5,15 +5,15 @@ import unitTypes from "../../../data/unitTypes.json"; interface Props { unit: IUnit | undefined; type: string | null; - isShowPopup: boolean; + show: boolean; mousePos: [number, number]; } -function UnitPopup({ unit, type, isShowPopup, mousePos }: Props) { +function UnitPopup({ unit, type, show, mousePos }: Props) { return (
@@ -23,7 +23,7 @@ function UnitPopup({ unit, type, isShowPopup, mousePos }: Props) {

{unit.unitName}, {unit.totalArea} Sqft

-
+

{unit.unitNo[0] === "E" ? "East" : "West"} Wing

Floor {unit.floor}

diff --git a/client/src/pages/Test2Page.tsx b/client/src/pages/Test2Page.tsx index b8a60a9..dfc0c77 100644 --- a/client/src/pages/Test2Page.tsx +++ b/client/src/pages/Test2Page.tsx @@ -11,6 +11,8 @@ import { useNavigate } from "react-router-dom"; import ArrowRightIcon from "../components/icons/ArrowRightIcon"; import FloorItem from "../components/Test/FloorItem"; import { isMobile } from "react-device-detect"; +import FloorPlanSidebar from "../components/complexWingPage/FloorSidebar/FloorPlanSidebar"; +import useModal from "../store/useModal"; const floors = [ "5", @@ -41,10 +43,10 @@ const floors = [ ]; function Test2Page() { + const { modal } = useModal(); const ref = useRef(null); const [imageWidth, setImageWidth] = useState(0); const [imageHeight, setImageHeight] = useState(0); - // const [offsetTop, setOffsetTop] = useState(0); const [scaled, setScaled] = useState(false); const [selectedWing, setSelectedWing] = useState(); const [mousePos, setMousePos] = useState<[number, number]>([0, 0]); @@ -55,7 +57,7 @@ function Test2Page() { const [hoveredWing, setHoveredWing] = useState(); const [selectedIndex] = useState(0); const [selectedFloor, setSelectedFloor] = useState(); - // const rootRef = useRef(null);\ + // const [showFloorPlanSidebar, setShowFloorPlanSidebar] = useState(false); function handleResize() { if (window.innerHeight > window.innerWidth) { @@ -85,6 +87,7 @@ function Test2Page() { } function handleClick(e: React.MouseEvent) { + setSelectedWing(e.currentTarget.dataset["wing"]); setSelectedFloor(e.currentTarget.dataset["floor"]); } @@ -98,6 +101,11 @@ function Test2Page() { // setSelectedIndex((prev) => prev + 1); // } + function handleLoadedData() { + setImageWidth(ref.current!.naturalWidth); + setImageHeight(ref.current!.naturalHeight); + } + useEffect(() => { handleResize(); @@ -108,26 +116,19 @@ function Test2Page() { }; }, []); - useEffect(() => { - if (!ref.current) return; - - setImageWidth(ref.current.naturalWidth); - setImageHeight(ref.current.naturalHeight); - }, [ref.current]); - useEffect(() => { setHoveredFloor(floors[selectedIndex]); }, [selectedIndex]); return (
-

0 units

+

0 units

{selectedFloorPath?.dataset["name"] !== "Sky Garden" ? ( @@ -215,7 +216,7 @@ function Test2Page() {
-
+
} @@ -244,78 +245,78 @@ function Test2Page() { ref={ref} src="/images/sequenceWing.jpg" alt="" - className="w-full h-full object-cover" + className="object-cover w-full h-full" + onLoad={() => handleLoadedData()} /> - - - {!isMobile ? ( - paths.map((path, index) => ( - + {!isMobile ? ( + paths.map((path, index) => ( + + )) + ) : ( + <> + + {paths + .filter((path) => path["data-wing"] === selectedWing) + .map((path, index) => ( + + ))} + + + setSelectedWing("East")} /> - )) - ) : ( - <> - - {paths - .filter((path) => path["data-wing"] === selectedWing) - .map((path, index) => ( - - ))} - - - setSelectedWing("East")} - /> - setSelectedWing("West")} - /> - - - )} - + setSelectedWing("West")} + /> + + + )}
@@ -325,7 +326,7 @@ function Test2Page() { selectedWing ? "opacity-100" : "opacity-0 pointer-events-none" }`} > -
+
-
+
} @@ -372,7 +373,7 @@ function Test2Page() { } - className="w-full flex-row-reverse" + className="flex-row-reverse w-full" onClick={() => setSelectedFloor(hoveredFloor)} > Explore @@ -381,20 +382,26 @@ function Test2Page() {
- + {(state) => (
-
- setSelectedFloor(undefined)}> - Close - -

{selectedFloor}

-
+ setSelectedFloor(undefined)} + />
)} + + {modal}
); } diff --git a/client/src/store/useModal.tsx b/client/src/store/useModal.tsx index d27e458..f0bbbaf 100644 --- a/client/src/store/useModal.tsx +++ b/client/src/store/useModal.tsx @@ -7,7 +7,7 @@ interface ModalStore { const useModal = create((set) => ({ modal: null, - setModal: (modal) => set(() => ({ modal: modal })), + setModal: (modal) => set({ modal }), })); export default useModal;