inmake/IRTH-2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
inmake
2024-11-18 15:58:13 +05:00
parent 6f399c3dc7
commit 0e3154b133
5 changed files with 182 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/FloorPlan.tsx
+32 -5
View File
@@ -9,6 +9,8 @@ import useModal from "../store/useModal";
import IUnit from "../types/IUnit";
import api from "../utils/api";
import UnitModal from "./modals/UnitModal";
import { useSearchParams } from "react-router-dom";
import unitTypes from "../data/unitTypes.json";
interface Props {
wing: "east" | "west";
@@ -21,6 +23,7 @@ function FloorPlan({ wing, floor }: Props) {
const [showPopup, setShowPopup] = useState(false);
const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
const [type, setType] = useState<string | null>(null);
const [searchParams] = useSearchParams();
function handleMouseEnter(e: React.MouseEvent<SVGPathElement>) {
const unitNumber = e.currentTarget.dataset.number;
@@ -53,25 +56,49 @@ function FloorPlan({ wing, floor }: Props) {
}
async function getUnit(unitNumber: string) {
let unitNo;
if (searchParams.has("unitNo")) {
unitNo = searchParams.get("unitNo");
} else {
unitNo = `${wing[0].toUpperCase()}-${floor}${unitNumber.padStart(2, "0")}`;
}
try {
const result: IUnit[] = await api
.get(`units?unitNo=${wing[0].toUpperCase()}-${floor}${unitNumber.padStart(2, "0")}`)
.json();
const result: IUnit[] = await api.get(`units?unitNo=${unitNo}`).json();
setHoveredUnit(result[0]);
const type = unitTypes.find((unitType) => unitType.title === result[0].unitName)?.type;
if (!type || !searchParams.has("unitNo")) return;
setModal(<UnitModal unit={result[0]} type={type} />);
} catch (error) {
alert((error as Error).message);
}
}
useEffect(() => {
console.log("hoveredUnit", hoveredUnit);
if (!isMobile || !hoveredUnit || !type) return;
setModal(<UnitModal unit={hoveredUnit} type={type} />);
}, [hoveredUnit]);
async function setUnitNo() {
const unitNo = searchParams.get("unitNo");
if (!unitNo) return;
await getUnit(unitNo);
}
useEffect(() => {
if (searchParams.has("unitNo")) {
setUnitNo();
}
}, []);
return (
<div className="flex flex-col flex-1 space-y-2 max-sm:w-screen max-sm:-m-4">
<div className="flex items-center justify-end p-4 bg-white xl:justify-between rounded-2xl max-xl:hidden">
client/src/components/FloorSidebarContainer.tsx
+24
View File
@@ -1,22 +1,46 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useState } from "react";
import Button3 from "./Button3";
import CloseIcon from "./icons/CloseIcon";
import { useSearchParams } from "react-router-dom";
interface Props {
sidebarComponent: {
element: JSX.Element;
name: "Floor" | "Rooftop" | "Sky Garden" | "Podium Level" | "Ground Level";
desc?: string;
dataName: string;
} | null;
onClose: () => void;
}
function FloorSidebarContainer({ sidebarComponent, onClose }: Props) {
const [component, setComponent] = useState(sidebarComponent);
const [, setSearchParams] = useSearchParams();
useEffect(() => {
if (!sidebarComponent) return;
setComponent(sidebarComponent);
setSearchParams(
(searchParams) => {
searchParams.set("dataName", sidebarComponent.dataName);
return searchParams;
},
{ replace: true }
);
return () => {
setSearchParams(
(searchParams) => {
searchParams.delete("dataName");
return searchParams;
},
{ replace: true }
);
};
}, [sidebarComponent]);
return (
client/src/components/modals/UnitModal.tsx
+27 -4
View File
@@ -6,7 +6,7 @@ import BookingIcon from "../icons/BookingIcon";
import HeartIcon from "../icons/HeartIcon";
import VirtualTourIcon from "../icons/VirtualTourIcon";
import unitTypes from "../../data/unitTypes.json";
import { useLocation, useNavigate } from "react-router-dom";
import { useLocation, useSearchParams } from "react-router-dom";
import { useEffect } from "react";
import useFavoritesStore from "../../store/useFavoritesStore";
import HeartFilledIcon from "../icons/HeartFilledIcon";
@@ -19,8 +19,8 @@ interface Props {
}
function UnitModal({ unit, type }: Props) {
const [, setSearchParams] = useSearchParams();
const { setModal } = useModal();
const navigate = useNavigate();
const { favoriteUnits, setFavoriteUnits } = useFavoritesStore();
const location = useLocation();
@@ -190,10 +190,33 @@ function UnitModal({ unit, type }: Props) {
}
function handleClickTour() {
navigate(`/virtual-tour/${type}?unitNo=${unit.unitNo}`);
console.log("unit.unitNo", unit.unitNo);
console.log("type", type);
window.location.href = `/virtual-tour/${type}?unitNo=${unit.unitNo}`;
}
function handleClose() {
setSearchParams(
(searchParams) => {
searchParams.delete("unitNo");
return searchParams;
},
{ replace: true }
);
setModal(null);
}
useEffect(() => {
setSearchParams(
(searchParams) => {
searchParams.set("unitNo", unit.unitNo);
return searchParams;
},
{ replace: true }
);
document.body.classList.add("overflow-y-hidden");
return () => {
@@ -209,7 +232,7 @@ function UnitModal({ unit, type }: Props) {
<div className="left lg:max-w-[800px] w-full flex flex-col gap-4">
<div className="flex justify-between gap-4">
<div className="flex items-center gap-4">
<Button3 icon={<ArrowLeftIcon />} onlyIcon onClick={() => setModal(null)} />
<Button3 icon={<ArrowLeftIcon />} onlyIcon onClick={handleClose} />
<p className="text-2xl font-[#0D1922] font-semibold">
{unitTypes.find((unitType) => unitType.type === type)?.title}
</p>
client/src/data/apartments.json
+38 -38
View File
@@ -3,6 +3,25 @@
"id": "studio-flex",
"map": "/images/virtual-tour/STD-FLEX_13/map.jpg",
"spheres": [
{
"id": "studio-1_sp-06",
"sphereImage": "/images/virtual-tour/STD-FLEX_13/STD-FLEX-13_sp-6.jpg",
"roomType": "glass doors",
"position": [-14.16, 0, 24.11],
"mapPosition": [115, 55],
"links": [
{
"id": "studio-1_sp-07",
"type": "default",
"labelPosition": [-0.16, 0, 25.11]
},
{
"id": "studio-1_sp-04",
"type": "default",
"labelPosition": [-45, 0, 22.11]
}
]
},
{
"id": "studio-1_sp-01",
"sphereImage": "/images/virtual-tour/STD-FLEX_13/STD-FLEX-13_sp-1.jpg",
@@ -62,25 +81,6 @@
}
]
},
{
"id": "studio-1_sp-06",
"sphereImage": "/images/virtual-tour/STD-FLEX_13/STD-FLEX-13_sp-6.jpg",
"roomType": "glass doors",
"position": [-14.16, 0, 24.11],
"mapPosition": [115, 55],
"links": [
{
"id": "studio-1_sp-07",
"type": "default",
"labelPosition": [-0.16, 0, 25.11]
},
{
"id": "studio-1_sp-04",
"type": "default",
"labelPosition": [-45, 0, 22.11]
}
]
},
{
"id": "studio-1_sp-07",
"sphereImage": "/images/virtual-tour/STD-FLEX_13/STD-FLEX-13_sp-7.jpg",
@@ -101,6 +101,25 @@
"id": "studio-2",
"map": "/images/virtual-tour/STD-2_31/map.jpg",
"spheres": [
{
"id": "studio-2_sp-07",
"sphereImage": "/images/virtual-tour/STD-2_31/Studio2_31_sp-070000.jpg",
"roomType": "glass doors",
"position": [-14.16, 0, 24.11],
"mapPosition": [125, 70],
"links": [
{
"id": "studio-2_sp-04",
"type": "default",
"labelPosition": [-45, 0, 20.11]
},
{
"id": "studio-2_sp-08",
"type": "default",
"labelPosition": [70.16, 0, 35.11]
}
]
},
{
"id": "studio-2_sp-01",
"sphereImage": "/images/virtual-tour/STD-2_31/Studio2_31_sp-010000.jpg",
@@ -153,25 +172,6 @@
}
]
},
{
"id": "studio-2_sp-07",
"sphereImage": "/images/virtual-tour/STD-2_31/Studio2_31_sp-070000.jpg",
"roomType": "glass doors",
"position": [-14.16, 0, 24.11],
"mapPosition": [125, 70],
"links": [
{
"id": "studio-2_sp-04",
"type": "default",
"labelPosition": [-45, 0, 20.11]
},
{
"id": "studio-2_sp-08",
"type": "default",
"labelPosition": [70.16, 0, 35.11]
}
]
},
{
"id": "studio-2_sp-08",
"sphereImage": "/images/virtual-tour/STD-2_31/Studio2_31_sp-080000.jpg",
client/src/pages/ComplexWingPage.tsx
+61 -10
View File
@@ -1,12 +1,12 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import FloorPath from "../components/FloorPath";
import floorPaths from "../data/floorPaths.json";
import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
import Button3 from "../components/Button3";
import InfoIcon from "../components/icons/InfoIcon";
// import Header from "../components/Header";
import { useNavigate } from "react-router-dom";
import { useNavigate, useSearchParams } from "react-router-dom";
import { isMobile } from "react-device-detect";
import FloorPopup from "../components/FloorPopup";
@@ -34,8 +34,10 @@ function ComplexWingPage() {
element: JSX.Element;
name: "Floor" | "Rooftop" | "Sky Garden" | "Podium Level" | "Ground Level";
desc?: string;
dataName: string;
} | null>(null);
const [selectedWing, setSelectedWing] = useState<"east" | "west" | null>(null);
const [searchParams] = useSearchParams();
// function handleResize() {
// if (window.innerHeight > window.innerWidth) {
@@ -61,38 +63,43 @@ function ComplexWingPage() {
}
function handleClick(path: IPath) {
console.log("path", path);
const dataName = path["data-name"];
if (path["data-name"].includes("floor")) {
const wing = path["data-name"].split(" ")[0].toLowerCase() as "east" | "west";
const floor = path["data-name"].split(" ")[1];
if (dataName.includes("floor")) {
const wing = dataName.split(" ")[0].toLowerCase() as "east" | "west";
const floor = dataName.split(" ")[1];
setSidebarComponent({
element: <FloorPlan wing={wing} floor={floor} />,
name: "Floor",
dataName,
});
} else if (path["data-name"] === "Sky Garden") {
} else if (dataName === "Sky Garden") {
setSidebarComponent({
element: <FloorPlanSkyGarden />,
name: "Sky Garden",
desc: "22-23 floor",
dataName,
});
} else if (path["data-name"] === "Rooftop") {
} else if (dataName === "Rooftop") {
setSidebarComponent({
element: <FloorPlanRooftop />,
name: "Rooftop",
desc: "32 floor",
dataName,
});
} else if (path["data-name"] === "Podium Level") {
} else if (dataName === "Podium Level") {
setSidebarComponent({
element: <FloorPlanPodiumLevel />,
name: "Podium Level",
desc: "4 floor",
dataName,
});
} else if (path["data-name"] === "Ground Level") {
} else if (dataName === "Ground Level") {
setSidebarComponent({
element: <FloorPlanGroundLevel />,
name: "Ground Level",
dataName,
});
}
}
@@ -112,6 +119,50 @@ function ComplexWingPage() {
// };
// }, []);
useEffect(() => {
if (searchParams.has("dataName")) {
const dataName = searchParams.get("dataName");
if (dataName?.includes("floor")) {
const wing = dataName.split(" ")[0].toLowerCase() as "east" | "west";
const floor = dataName.split(" ")[1];
setSidebarComponent({
element: <FloorPlan wing={wing} floor={floor} />,
name: "Floor",
dataName,
});
} else if (dataName === "Sky Garden") {
setSidebarComponent({
element: <FloorPlanSkyGarden />,
name: "Sky Garden",
desc: "22-23 floor",
dataName,
});
} else if (dataName === "Rooftop") {
setSidebarComponent({
element: <FloorPlanRooftop />,
name: "Rooftop",
desc: "32 floor",
dataName,
});
} else if (dataName === "Podium Level") {
setSidebarComponent({
element: <FloorPlanPodiumLevel />,
name: "Podium Level",
desc: "4 floor",
dataName,
});
} else if (dataName === "Ground Level") {
setSidebarComponent({
element: <FloorPlanGroundLevel />,
name: "Ground Level",
dataName,
});
}
}
}, []);
return (
<>
{!isMobile ? (