zojgame/IRTH-Touch
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fixes

Browse Source
This commit is contained in:
zojgame
2024-07-08 18:23:29 +05:00
parent 53267e7cb3
commit 24b8cd848c
38 changed files with 276 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/.env
+4 -1
View File
@@ -1,3 +1,6 @@
# VITE_SERVER_API=https://irth.graff.tech/api # VITE_SERVER_API=https://irth.graff.tech/api
VITE_SERVER_API=http://192.168.1.158:4002
VITE_SERVER_API=http://194.26.138.94:4002
# VITE_SERVER_API=http://192.168.1.56:4003
# VITE_SERVER_API=http://194.26.138.94:4002 # VITE_SERVER_API=http://194.26.138.94:4002
client/index.html
+3 -1
View File
@@ -3,8 +3,10 @@
<head> <head>
<script src="https://static.zohocdn.com/zohocrm/v6.0/sdk/2.0.0/zohocrmsdk-6-0.js"></script> <script src="https://static.zohocdn.com/zohocrm/v6.0/sdk/2.0.0/zohocrmsdk-6-0.js"></script>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>IRTH</title> <title>IRTH</title>
</head> </head>
<body> <body>
client/public/images/compass.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 75 KiB

client/public/images/markers/2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

client/public/images/markers/3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

client/public/images/masterplan/help/1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 176 KiB

After

Width:  |  Height:  |  Size: 1.4 MiB

client/src/api/urls.ts
+1 -1
View File
@@ -1,4 +1,4 @@
// const serverApi = "http://192.168.56.1:3000"; // const serverApi = "http://192.168.56.1:4003";
const serverApi = import.meta.env.VITE_SERVER_API; const serverApi = import.meta.env.VITE_SERVER_API;
const apartmentsApi = `${serverApi}/apartments`; const apartmentsApi = `${serverApi}/apartments`;
client/src/components/ApartmentSidebar.tsx
+1 -1
View File
@@ -97,7 +97,7 @@ const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
</div> </div>
</div> </div>
<p className="pt-6 font-semibold text-subheadline-s text-[#00BED7] mt-auto"> <p className="pt-6 font-semibold text-subheadline-s text-[#00BED7] mt-auto">
Unvailiable Unavailable
</p> </p>
</div> </div>
<div className="rounded-2xl bg-white flex flex-col p-6 gap-4 flex-1 lg:flex-none justify-between"> <div className="rounded-2xl bg-white flex flex-col p-6 gap-4 flex-1 lg:flex-none justify-between">
client/src/components/companyPage/OurValues/Slider.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ const Slider = () => {
if (!imageRef.current?.src) return; if (!imageRef.current?.src) return;
const width = imageRef.current.width; const width = imageRef.current.width;
setImageWidth(width); setImageWidth(width);
}, [imageRef.current, window.innerWidth]); }, [imageRef.current, window.innerWidth, imageRef?.current?.width]);
useLayoutEffect(() => { useLayoutEffect(() => {
const gapOffset = 45; const gapOffset = 45;
client/src/components/complexPage/ComplexTopPanel.tsx
+1 -1
View File
@@ -95,7 +95,7 @@ const ComplexTopPanel = () => {
<Button <Button
icon={<InfoIcon />} icon={<InfoIcon />}
buttonType="primary" buttonType="primary"
text="About Complex" text="About Project"
onClick={handleOnAboutComplexClick} onClick={handleOnAboutComplexClick}
/> />
</div> </div>
client/src/components/complexWingPage/FloorDescription.tsx
+4 -4
View File
@@ -51,7 +51,7 @@ const FloorDescription = ({
</div> </div>
<p className="text-s text-[#73787C] w-full">Studio Flex</p> <p className="text-s text-[#73787C] w-full">Studio Flex</p>
</div> </div>
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p> <p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
</div> </div>
<div className="flex items-center justify-between gap-8"> <div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
@@ -66,7 +66,7 @@ const FloorDescription = ({
</div> </div>
<p className="text-s text-[#73787C]">Studio</p> <p className="text-s text-[#73787C]">Studio</p>
</div> </div>
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p> <p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
</div> </div>
<div className="flex items-center justify-between gap-8"> <div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
@@ -81,7 +81,7 @@ const FloorDescription = ({
</div> </div>
<p className="text-s text-[#73787C]">1 Bedroom</p> <p className="text-s text-[#73787C]">1 Bedroom</p>
</div> </div>
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p> <p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
</div> </div>
<div className="flex items-center justify-between gap-8"> <div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
@@ -98,7 +98,7 @@ const FloorDescription = ({
2 Bedroom, Type A 2 Bedroom, Type A
</p> </p>
</div> </div>
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p> <p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
</div> </div>
</div> </div>
<div className="w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white -rotate-90 absolute top-0 -left-[35px]"></div> <div className="w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white -rotate-90 absolute top-0 -left-[35px]"></div>
client/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx
+1 -1
View File
@@ -51,7 +51,7 @@ const ApartmentDescription = ({
</div> </div>
<div className="flex justify-between items-center pt-4 gap-14"> <div className="flex justify-between items-center pt-4 gap-14">
<p className="font-semibold text-[#00BED7] text-subheadline-s"> <p className="font-semibold text-[#00BED7] text-subheadline-s">
Unvailiable Unavailable
</p> </p>
{/* <p className="font-semibold text-[#00BED7] text-subheadline-s"> {/* <p className="font-semibold text-[#00BED7] text-subheadline-s">
AED 1,668,888 AED 1,668,888
client/src/components/complexWingPage/MobileApartmentDescription.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ const MobileApartmentDescription = ({
</div> </div>
<div className="flex justify-between items-center pt-4 gap-14 pb-4"> <div className="flex justify-between items-center pt-4 gap-14 pb-4">
<p className="font-semibold text-[#00BED7] text-subheadline-s"> <p className="font-semibold text-[#00BED7] text-subheadline-s">
Unvailiable Unavailable
</p> </p>
{/* <p className="font-semibold text-[#00BED7] text-subheadline-s"> {/* <p className="font-semibold text-[#00BED7] text-subheadline-s">
AED 1,668,888 AED 1,668,888
client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
+11 -5
View File
@@ -7,12 +7,14 @@ import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
interface MobileFloorDescriptionProps { interface MobileFloorDescriptionProps {
descriptionFloor: IDesctiptionFloor | null; descriptionFloor: IDesctiptionFloor | null;
floorApartments: IAparmentRes[]; floorApartments: IAparmentRes[];
isLeft: boolean;
onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void; onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
} }
const MobileFloorDescription = ({ const MobileFloorDescription = ({
descriptionFloor, descriptionFloor,
floorApartments, floorApartments,
isLeft,
onClick, onClick,
}: MobileFloorDescriptionProps) => { }: MobileFloorDescriptionProps) => {
return ( return (
@@ -57,7 +59,7 @@ const MobileFloorDescription = ({
</p> </p>
</div> </div>
<p className="text-[33.6px] text-[#0D1922] text-nowrap"> <p className="text-[33.6px] text-[#0D1922] text-nowrap">
Unvailiable Unavailable
</p> </p>
</div> </div>
<div className="flex items-center justify-between gap-8"> <div className="flex items-center justify-between gap-8">
@@ -74,7 +76,7 @@ const MobileFloorDescription = ({
<p className="text-[33.6px] text-[#73787C]">Studio</p> <p className="text-[33.6px] text-[#73787C]">Studio</p>
</div> </div>
<p className="text-[33.6px] text-[#0D1922] text-nowrap"> <p className="text-[33.6px] text-[#0D1922] text-nowrap">
Unvailiable Unavailable
</p> </p>
</div> </div>
<div className="flex items-center justify-between gap-8"> <div className="flex items-center justify-between gap-8">
@@ -91,7 +93,7 @@ const MobileFloorDescription = ({
<p className="text-[33.6px] text-[#73787C]">1 Bedroom</p> <p className="text-[33.6px] text-[#73787C]">1 Bedroom</p>
</div> </div>
<p className="text-[33.6px] text-[#0D1922] text-nowrap"> <p className="text-[33.6px] text-[#0D1922] text-nowrap">
Unvailiable Unavailable
</p> </p>
</div> </div>
<div className="flex items-center justify-between gap-8"> <div className="flex items-center justify-between gap-8">
@@ -110,7 +112,7 @@ const MobileFloorDescription = ({
</p> </p>
</div> </div>
<p className="text-[33.6px] text-[#0D1922] text-nowrap"> <p className="text-[33.6px] text-[#0D1922] text-nowrap">
Unvailiable Unavailable
</p> </p>
</div> </div>
<Button <Button
@@ -122,7 +124,11 @@ const MobileFloorDescription = ({
iconPos="right" iconPos="right"
/> />
</div> </div>
<div className="w-0 h-0 border-t-0 border-r-[14px] border-b-[33px] border-l-[14px] border-transparent border-b-white absolute -top-[98px] z-[99999] left-[0px]"></div> <div
className={`${
isLeft ? "-top-[98px] right-[24px]" : "-top-[98px] left-[0px]"
} w-0 h-0 border-t-0 border-r-[14px] border-b-[33px] border-l-[14px] border-transparent border-b-white absolute z-[99999] `}
></div>
</div> </div>
</div> </div>
</> </>
client/src/components/complexWingPage/SequenceWing/MobileSkygardenDescription.tsx
+7 -1
View File
@@ -4,10 +4,12 @@ import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
interface MobileSkygardenDescriptionProps { interface MobileSkygardenDescriptionProps {
onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void; onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
isLeft: boolean;
} }
const MobileSkygardenDescription = ({ const MobileSkygardenDescription = ({
onClick, onClick,
isLeft,
}: MobileSkygardenDescriptionProps) => { }: MobileSkygardenDescriptionProps) => {
return ( return (
<> <>
@@ -61,7 +63,11 @@ const MobileSkygardenDescription = ({
onClick={onClick} onClick={onClick}
/> />
</div> </div>
<div className="w-0 h-0 border-t-0 border-r-[14px] border-b-[33px] border-l-[14px] border-transparent border-b-white absolute -top-[89px] left-[0px]"></div> <div
className={`${
isLeft ? "-top-[89px] right-[24px]" : "-top-[89px] left-0"
} w-0 h-0 border-t-0 border-r-[14px] border-b-[33px] border-l-[14px] border-transparent border-b-white absolute `}
></div>
</div> </div>
</div> </div>
</> </>
client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
+11 -3
View File
@@ -26,7 +26,7 @@ const SequenceWing = () => {
const [width, setWidth] = useState<number>(0); const [width, setWidth] = useState<number>(0);
const [top, setTop] = useState<number>(0); const [top, setTop] = useState<number>(0);
const [left, setLeft] = useState<number>(0); const [left, setLeft] = useState<number>(0);
// const { isSidebar, setIsSidebar } = useWingSidebar(); const [isLeft, setIsLeft] = useState(false);
const [mousePos, setMousePos] = useState<[number, number]>([0, 0]); const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
const [currentHoveredFloor, setHoverCurrentFloor] = const [currentHoveredFloor, setHoverCurrentFloor] =
useState<null | IDesctiptionFloor>(null); useState<null | IDesctiptionFloor>(null);
@@ -113,11 +113,15 @@ const SequenceWing = () => {
function handleOnMouseDown(e: MouseEvent | any) { function handleOnMouseDown(e: MouseEvent | any) {
const isFloorClicked = Boolean(e.target.dataset.id); const isFloorClicked = Boolean(e.target.dataset.id);
if (isFloorClicked) { if (isFloorClicked) {
const _isLeft = e.clientX > 1400;
setIsLeft(_isLeft);
const descPosX = _isLeft ? e.clientX + 524 : e.clientX + 1184;
// detect mouse pos // detect mouse pos
const screenWidth = window.innerWidth; const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight; const screenHeight = window.innerHeight;
const _top = screenWidth / 2 - screenHeight / 2; const _top = screenWidth / 2 - screenHeight / 2;
setMousePos([e.clientX + 1184, e.clientY + Math.abs(_top) + 50]); setMousePos([descPosX, e.clientY + Math.abs(_top) + 50]);
//detect currentFloor, current sidebar and apartment on floor //detect currentFloor, current sidebar and apartment on floor
if (!currentHoveredFloor && !currentHoveredApartments) return; if (!currentHoveredFloor && !currentHoveredApartments) return;
@@ -298,7 +302,10 @@ const SequenceWing = () => {
left: `${mousePos[0]}px`, left: `${mousePos[0]}px`,
}} }}
> >
<MobileSkygardenDescription onClick={handleOnExploreSkygardenClick} /> <MobileSkygardenDescription
isLeft={isLeft}
onClick={handleOnExploreSkygardenClick}
/>
</div> </div>
<div <div
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out ${ className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out ${
@@ -310,6 +317,7 @@ const SequenceWing = () => {
}} }}
> >
<MobileFloorDescription <MobileFloorDescription
isLeft={isLeft}
onClick={handleOnExploreFloorClick} onClick={handleOnExploreFloorClick}
descriptionFloor={currentHoveredFloor} descriptionFloor={currentHoveredFloor}
floorApartments={currentHoveredApartments} floorApartments={currentHoveredApartments}
client/src/components/masterplanPage/map/Map.tsx
+35
View File
@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import ImageMarker, { MarkerComponentProps } from "react-image-marker"; import ImageMarker, { MarkerComponentProps } from "react-image-marker";
// import { isMobile } from "react-device-detect"; // import { isMobile } from "react-device-detect";
@@ -5,6 +6,7 @@ import Marker from "./Marker";
import { markers } from "../../../consts/markers"; import { markers } from "../../../consts/markers";
import useMarker from "../../../store/useMarker"; import useMarker from "../../../store/useMarker";
import ZoomControlls from "./ZoomControlls"; import ZoomControlls from "./ZoomControlls";
import { useEffect } from "react";
const Map = () => { const Map = () => {
const { hoveredMarker } = useMarker(); const { hoveredMarker } = useMarker();
@@ -17,6 +19,39 @@ const Map = () => {
}; };
}); });
useEffect(() => {
const handleOnGestureStart = (e: any) => {
e.preventDefault();
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
document.body.style.zoom = 0.99;
};
const handleOnGestureChange = (e: any) => {
e.preventDefault();
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
document.body.style.zoom = 0.99;
};
const handleOnGestureEnd = (e: any) => {
e.preventDefault();
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
document.body.style.zoom = 1;
};
document.addEventListener("gesturestart", handleOnGestureStart);
document.addEventListener("gesturechange", handleOnGestureChange);
document.addEventListener("gestureend", handleOnGestureEnd);
return () => {
document.removeEventListener("gesturestart", handleOnGestureStart);
document.removeEventListener("gesturechange", handleOnGestureChange);
document.removeEventListener("gestureend", handleOnGestureEnd);
};
}, []);
return ( return (
<div className="relative"> <div className="relative">
<TransformWrapper <TransformWrapper
client/src/components/masterplanPage/map/Marker.tsx
+73 -38
View File
@@ -23,6 +23,7 @@ const Marker = (props: MarkerComponentProps) => {
}; };
const handleOnClick = () => { const handleOnClick = () => {
if (!currentMarker || currentMarker?.isDisabled) return;
navigate(`../masterplan/${currentMarker?.itemNumber}`); navigate(`../masterplan/${currentMarker?.itemNumber}`);
setHoveredMarker(null); setHoveredMarker(null);
}; };
@@ -37,28 +38,55 @@ const Marker = (props: MarkerComponentProps) => {
className="relative transition-transform zoom-280" className="relative transition-transform zoom-280"
style={{ transform: `scale(${markerScale})` }} style={{ transform: `scale(${markerScale})` }}
> >
<div {!currentMarker?.isDisabled ? (
className={`flex items-end absolute w-[108px] top-[22px] right-[72px] transition-all duration-300 ease-in-out ${ <div
hoveredMarker && className={`flex items-end absolute w-[108px] top-[22px] right-[72px] transition-all duration-300 ease-in-out ${
hoveredMarker.itemNumber !== currentMarker?.itemNumber hoveredMarker &&
? "brightness-[.7]" hoveredMarker.itemNumber !== currentMarker?.itemNumber
: "" ? "brightness-[.7]"
} ${currentMarker?.isPopupLeft ? "block" : "hidden"}`} : ""
> } ${currentMarker?.isPopupLeft ? "block" : "hidden"}`}
<div className={`flex items-center py-2 `}> >
<div className={`bg-white px-2 py-1 rounded-lg `}> <div className={`flex items-center py-[8px] `}>
{currentMarker && ( <div className={`bg-white px-[8px] py-[4px] rounded-[8px] `}>
<img src={currentMarker.popup} alt="1" width={108} height={54} /> {currentMarker && (
)} <img
</div> src={currentMarker.popup}
<div className="relative w-[5.5px] h-2"> alt="1"
<div className="w-0 h-0 border-y-4 border-l-8 border-r-0 border-transparent border-l-[#fff] absolute top-0 -left-[2.5px]" /> width={108}
height={54}
/>
)}
</div>
<div className="relative w-[5.5px] h-[8px]">
<div className="w-0 h-0 border-y-4 border-l-8 border-r-0 border-transparent border-l-[#fff] absolute top-0 -left-[2.5px]" />
</div>
</div> </div>
</div> </div>
</div> ) : (
<div
className={`flex items-end absolute w-[130px] top-[40px] right-[60px] transition-all duration-300 ease-in-out ${
hoveredMarker &&
hoveredMarker.itemNumber !== currentMarker?.itemNumber
? "brightness-[.7]"
: ""
} ${currentMarker?.isPopupLeft ? "block" : "hidden"}`}
>
<div className={`flex items-center py-[8px] `}>
<div
className={`bg-white px-[8px] py-[4px] rounded-[8px] text-[16px] font-semibold`}
>
Coming Soon
</div>
<div className="relative w-[5.5px] h-[8px]">
<div className="w-0 h-0 border-y-4 border-l-8 border-r-0 border-transparent border-l-[#fff] absolute top-0 -left-[2.5px]" />
</div>
</div>
</div>
)}
<div <div
onClick={handleOnClick} onClick={handleOnClick}
className={`flex gap-1 transition-all duration-300 ease-in-out cursor-pointer ${ className={`flex gap-[4px] transition-all duration-300 ease-in-out cursor-pointer ${
hoveredMarker && hoveredMarker &&
hoveredMarker.itemNumber !== currentMarker?.itemNumber hoveredMarker.itemNumber !== currentMarker?.itemNumber
? "brightness-[.7]" ? "brightness-[.7]"
@@ -71,34 +99,41 @@ const Marker = (props: MarkerComponentProps) => {
> >
<img <img
id="marker" id="marker"
src="/images/markers/1.png" src={currentMarker?.imgSrc}
alt="1" alt="1"
width={72} width={72}
height={98} height={98}
/> />
</div> </div>
</div> </div>
<div {!currentMarker?.isDisabled && (
className={`flex items-end absolute w-[108px] top-[22px] left-[72px] transition-all duration-300 ease-in-out ${ <div
currentMarker?.isPopupLeft ? "hidden" : "block" className={`flex items-end absolute w-[108px] top-[22px] left-[72px] transition-all duration-300 ease-in-out ${
} ${ currentMarker?.isPopupLeft ? "hidden" : "block"
hoveredMarker && } ${
hoveredMarker.itemNumber !== currentMarker?.itemNumber hoveredMarker &&
? "brightness-[.7]" hoveredMarker.itemNumber !== currentMarker?.itemNumber
: "" ? "brightness-[.7]"
}`} : ""
> }`}
<div className={`flex items-center py-2`}> >
<div className="relative w-[5.5px] h-2"> <div className={`flex items-center py-[8px]`}>
<div className="w-0 h-0 border-y-4 border-r-8 border-l-0 border-transparent border-r-[#fff] absolute top-0 -right-[2.5px]" /> <div className="relative w-[5.5px] h-[8px]">
</div> <div className="w-0 h-0 border-y-[4px] border-r-[8px] border-l-0 border-transparent border-r-[#fff] absolute top-0 -right-[2.5px]" />
<div className={`bg-white px-2 py-1 rounded-lg`}> </div>
{currentMarker && ( <div className={`bg-white px-[8px] py-[4px] rounded-[8px]`}>
<img src={currentMarker.popup} alt="1" width={108} height={54} /> {currentMarker && (
)} <img
src={currentMarker.popup}
alt="1"
width={108}
height={54}
/>
)}
</div>
</div> </div>
</div> </div>
</div> )}
</div> </div>
); );
}; };
client/src/components/modals/AboutComplexModal.tsx
+1 -1
View File
@@ -186,7 +186,7 @@ const AboutComplexModal = ({
</div> </div>
<div className="rounded-2xl bg-white flex flex-col p-6 gap-4 flex-1 lg:flex-none justify-between"> <div className="rounded-2xl bg-white flex flex-col p-6 gap-4 flex-1 lg:flex-none justify-between">
<p className="text-[#00BED7] font-semibold text-subheadline-s leading-7"> <p className="text-[#00BED7] font-semibold text-subheadline-s leading-7">
Unvailiable Unavailable
{/* AED {formatNumber(1668888, ",", 3, 1)} */} {/* AED {formatNumber(1668888, ",", 3, 1)} */}
</p> </p>
<div className="flex gap-2"> <div className="flex gap-2">
client/src/components/modals/LoaderModal.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
const LoaderModal = () => { const LoaderModal = () => {
return ( return (
<div className="absolute z-[99999] top-0 left-0 w-screen bg-[#F3F3F2] h-screen flex justify-center items-center"> <div className="absolute z-[99999] top-0 left-0 w-screen bg-[#F3F3F2] h-screen flex justify-center items-center">
<div className="animate-spin"> <div className="animate-spin zoom-280">
<img src="/images/loader.png" alt="" /> <img src="/images/loader.png" alt="" />
</div> </div>
</div> </div>
client/src/components/modals/MasterplanFilters.tsx
+17 -12
View File
@@ -3,15 +3,17 @@ import Button from "../Button";
import CrossIcon from "../icons/CrossIcon"; import CrossIcon from "../icons/CrossIcon";
import ResetIcon from "../icons/ResetIcon"; import ResetIcon from "../icons/ResetIcon";
import Checkbox from "../Checkbox"; import Checkbox from "../Checkbox";
import Switch from "../Switch"; // import Switch from "../Switch";
import MultiRangeSlider from "../MultiRangeSlider"; import MultiRangeSlider from "../MultiRangeSlider";
import { import {
initialAparmentTypeCheckboxes, initialAparmentTypeCheckboxes,
initialSliders, initialSliders,
initialSwitchers, initialSwitchers,
initialViewCheckboxes, initialViewCheckboxes,
pageInitial,
} from "../../consts/initialMasterplanFilters"; } from "../../consts/initialMasterplanFilters";
import useMasterplanFilters from "../../store/useMasterplanFilters"; import useMasterplanFilters from "../../store/useMasterplanFilters";
import { perPageInitial } from "../../consts/initialMasterplanFilters";
const MasterplanFilters = () => { const MasterplanFilters = () => {
const { setModal } = useModal(); const { setModal } = useModal();
@@ -22,8 +24,9 @@ const MasterplanFilters = () => {
setViewCheckboxes, setViewCheckboxes,
multirangeSliders, multirangeSliders,
setMultirangeSliders, setMultirangeSliders,
switchers,
setSwitchers, setSwitchers,
setPage,
setPerPage,
} = useMasterplanFilters(); } = useMasterplanFilters();
const handleOnCloseClick = () => setModal(null); const handleOnCloseClick = () => setModal(null);
@@ -67,22 +70,24 @@ const MasterplanFilters = () => {
setMultirangeSliders(updatedSliders); setMultirangeSliders(updatedSliders);
}; };
const handleOnSwitcherClick = (switcherId: string) => { // const handleOnSwitcherClick = (switcherId: string) => {
const updatedSwitchers = switchers.map((switcher) => { // const updatedSwitchers = switchers.map((switcher) => {
if (switcherId !== switcher.id) return switcher; // if (switcherId !== switcher.id) return switcher;
const { isSwitched } = switcher; // const { isSwitched } = switcher;
return { ...switcher, isSwitched: !isSwitched }; // return { ...switcher, isSwitched: !isSwitched };
}); // });
setSwitchers(updatedSwitchers); // setSwitchers(updatedSwitchers);
}; // };
const handleOnResetClick = () => { const handleOnResetClick = () => {
setApartmentTypeCheckboxes(initialAparmentTypeCheckboxes); setApartmentTypeCheckboxes(initialAparmentTypeCheckboxes);
setViewCheckboxes(initialViewCheckboxes); setViewCheckboxes(initialViewCheckboxes);
setMultirangeSliders(initialSliders); setMultirangeSliders(initialSliders);
setSwitchers(initialSwitchers); setSwitchers(initialSwitchers);
setPage(pageInitial);
setPerPage(perPageInitial);
}; };
return ( return (
@@ -124,14 +129,14 @@ const MasterplanFilters = () => {
</div> </div>
))} ))}
<div className="flex flex-col gap-2"> {/* <div className="flex flex-col gap-2">
{switchers.map((switcher) => ( {switchers.map((switcher) => (
<div key={switcher.id} className="flex justify-between w-full"> <div key={switcher.id} className="flex justify-between w-full">
<p className="text-s text-[#73787C]">{switcher.title}</p> <p className="text-s text-[#73787C]">{switcher.title}</p>
<Switch switcher={switcher} onClick={handleOnSwitcherClick} /> <Switch switcher={switcher} onClick={handleOnSwitcherClick} />
</div> </div>
))} ))}
</div> </div> */}
</div> </div>
<div className="flex flex-col pt-6 w-full"> <div className="flex flex-col pt-6 w-full">
<p className="text-[#0D1922] text-s pb-4">View</p> <p className="text-[#0D1922] text-s pb-4">View</p>
client/src/components/modals/SendEnquryModal.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ const SendEnquiryModal = () => {
1 bedroom, 609 Sqft{" "} 1 bedroom, 609 Sqft{" "}
</p> </p>
<p className="text-subheadline-s font-semibold text-[#0D192266]"> <p className="text-subheadline-s font-semibold text-[#0D192266]">
Unvailiable Unavailable
</p> </p>
{/* <p className="text-subheadline-s font-semibold text-[#0D192266]"> {/* <p className="text-subheadline-s font-semibold text-[#0D192266]">
AED {formatNumber(1668888, ",", 3, 1)} AED {formatNumber(1668888, ",", 3, 1)}
client/src/components/modals/mobile/MasterplanFiltersModal.tsx
+12 -12
View File
@@ -5,7 +5,7 @@ import CrossIcon from "../../icons/CrossIcon";
import { MobileModalWrapperContext } from "./MobileModalWrapper"; import { MobileModalWrapperContext } from "./MobileModalWrapper";
import Checkbox from "../../Checkbox"; import Checkbox from "../../Checkbox";
import MultiRangeSlider from "../../MultiRangeSlider"; import MultiRangeSlider from "../../MultiRangeSlider";
import Switch from "../../Switch"; // import Switch from "../../Switch";
import ResetIcon from "../../icons/ResetIcon"; import ResetIcon from "../../icons/ResetIcon";
import { useSwipeable } from "react-swipeable"; import { useSwipeable } from "react-swipeable";
import { import {
@@ -61,16 +61,16 @@ const MasterplanFiltersModal = () => {
setLocalApartmentTypeCheckboxes(updatedCheckboxes); setLocalApartmentTypeCheckboxes(updatedCheckboxes);
}; };
const handleOnSwitcherClick = (switcherId: string) => { // const handleOnSwitcherClick = (switcherId: string) => {
const updatedSwitchers = localSwitchers.map((switcher) => { // const updatedSwitchers = localSwitchers.map((switcher) => {
if (switcherId !== switcher.id) return switcher; // if (switcherId !== switcher.id) return switcher;
const { isSwitched } = switcher; // const { isSwitched } = switcher;
return { ...switcher, isSwitched: !isSwitched }; // return { ...switcher, isSwitched: !isSwitched };
}); // });
setLocalSwitchers(updatedSwitchers); // setLocalSwitchers(updatedSwitchers);
}; // };
const handleOnSliderValueChange = ( const handleOnSliderValueChange = (
sliderId: string, sliderId: string,
@@ -147,7 +147,7 @@ const MasterplanFiltersModal = () => {
</div> </div>
<div className="grid grid-cols-2 gap-[67.5px] border-b-[2.8px] pb-[135px] pt-[67.5px]"> <div className="grid grid-cols-2 gap-[67.5px] border-b-[2.8px] pb-[135px] pt-[67.5px]">
{localMultirangeSliders.map((slider) => ( {localMultirangeSliders.map((slider) => (
<div className="flex flex-col gap-[33.75px]"> <div className="flex flex-col gap-[33.75px]" key={slider.id}>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<p className="text-[#0D1922] text-[40px]">{slider.title}</p> <p className="text-[#0D1922] text-[40px]">{slider.title}</p>
<p className="text-[#73787C] text-[40px]">{slider.unit}</p> <p className="text-[#73787C] text-[40px]">{slider.unit}</p>
@@ -158,14 +158,14 @@ const MasterplanFiltersModal = () => {
/> />
</div> </div>
))} ))}
<div className="flex flex-col gap-[22.5px] pt-[67.5px]"> {/* <div className="flex flex-col gap-[22.5px] pt-[67.5px]">
{localSwitchers.map((switcher) => ( {localSwitchers.map((switcher) => (
<div key={switcher.id} className="flex justify-between w-full"> <div key={switcher.id} className="flex justify-between w-full">
<p className="text-[40px] text-[#73787C]">{switcher.title}</p> <p className="text-[40px] text-[#73787C]">{switcher.title}</p>
<Switch switcher={switcher} onClick={handleOnSwitcherClick} /> <Switch switcher={switcher} onClick={handleOnSwitcherClick} />
</div> </div>
))} ))}
</div> </div> */}
</div> </div>
<div className="flex flex-col w-full pb-[135px] border-b-[2.8px]"> <div className="flex flex-col w-full pb-[135px] border-b-[2.8px]">
<p className="text-[#0D1922] text-[40px] pb-[45px]">Views</p> <p className="text-[#0D1922] text-[40px] pb-[45px]">Views</p>
client/src/components/modals/mobile/MobileHelpModal.tsx
+17 -15
View File
@@ -2,7 +2,13 @@ import { useSwipeable } from "react-swipeable";
import Button from "../../Button"; import Button from "../../Button";
import CrossIcon from "../../icons/CrossIcon"; import CrossIcon from "../../icons/CrossIcon";
import { ISlider } from "../../../types/slide"; import { ISlider } from "../../../types/slide";
import { useState, useRef, useLayoutEffect, useContext } from "react"; import {
useState,
useRef,
useLayoutEffect,
useContext,
useEffect,
} from "react";
import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon"; import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon";
import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon"; import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
import { MobileModalWrapperContext } from "./MobileModalWrapper"; import { MobileModalWrapperContext } from "./MobileModalWrapper";
@@ -38,9 +44,9 @@ const tipsSlides: ISlider[] = [
const MobileHelpModal = () => { const MobileHelpModal = () => {
const [imageWidth] = useState(0); const [imageWidth] = useState(0);
const imageRef = useRef<HTMLImageElement>(null); const imageRef = useRef<HTMLImageElement>(null);
const { setIsAnimate } = useContext(MobileModalWrapperContext);
const [selectedImageIndex, setSelectedImageIndex] = useState(-1); const [selectedImageIndex, setSelectedImageIndex] = useState(-1);
const [rightImageOffset, setRightImageOffset] = useState(""); const [rightImageOffset, setRightImageOffset] = useState("");
const { setIsAnimate } = useContext(MobileModalWrapperContext);
const { setModal } = useModal(); const { setModal } = useModal();
const handlers = useSwipeable({ const handlers = useSwipeable({
@@ -48,6 +54,7 @@ const MobileHelpModal = () => {
onSwipedLeft: next, onSwipedLeft: next,
onSwipedRight: prev, onSwipedRight: prev,
}); });
const handleOnCloseClick = () => { const handleOnCloseClick = () => {
if (setIsAnimate) { if (setIsAnimate) {
setIsAnimate(false); setIsAnimate(false);
@@ -62,7 +69,7 @@ const MobileHelpModal = () => {
const lastIndex = tipsSlides.length - 2; const lastIndex = tipsSlides.length - 2;
if (selectedImageIndex === lastIndex) return; if (selectedImageIndex === lastIndex) return;
setSelectedImageIndex((prev) => prev + 1); // setSelectedImageIndex((prev) => prev + 1);
} }
function prev() { function prev() {
@@ -70,20 +77,15 @@ const MobileHelpModal = () => {
setSelectedImageIndex((prev) => prev - 1); setSelectedImageIndex((prev) => prev - 1);
} }
useLayoutEffect(() => { // useLayoutEffect(() => {
const gapOffset = 45; // const gapOffset = 45;
const _rightImageOffset = `${ // const _rightImageOffset = `${
(selectedImageIndex + 1) * (imageWidth + gapOffset) // (selectedImageIndex + 1) * (imageWidth + gapOffset)
}px`; // }px`;
setRightImageOffset(_rightImageOffset); // setRightImageOffset(_rightImageOffset);
}, [ // }, [imageWidth, selectedImageIndex, imageRef?.current?.width]);
imageWidth,
selectedImageIndex,
window.innerWidth,
imageRef.current?.width,
]);
return ( return (
<div <div
client/src/components/modals/mobile/SearchFiltersModal.tsx
+19 -14
View File
@@ -1,4 +1,5 @@
import { useContext } from "react"; import { useContext } from "react";
import { useSwipeable } from "react-swipeable";
import useModal from "../../../store/useModal"; import useModal from "../../../store/useModal";
import Button from "../../Button"; import Button from "../../Button";
import CrossIcon from "../../icons/CrossIcon"; import CrossIcon from "../../icons/CrossIcon";
@@ -6,15 +7,16 @@ import { MobileModalWrapperContext } from "./MobileModalWrapper";
import useSearchFilters from "../../../store/useSearchFilters"; import useSearchFilters from "../../../store/useSearchFilters";
import Checkbox from "../../Checkbox"; import Checkbox from "../../Checkbox";
import MultiRangeSlider from "../../MultiRangeSlider"; import MultiRangeSlider from "../../MultiRangeSlider";
import Switch from "../../Switch"; // import Switch from "../../Switch";
import ResetIcon from "../../icons/ResetIcon"; import ResetIcon from "../../icons/ResetIcon";
import { useSwipeable } from "react-swipeable";
import { import {
initialAparmentTypeCheckboxes, initialAparmentTypeCheckboxes,
initialSliders, initialSliders,
initialSwitchers, initialSwitchers,
initialViewCheckboxes, initialViewCheckboxes,
initialRoveHomeCheckboxes, initialRoveHomeCheckboxes,
perPageInitial,
pageInitial,
} from "../../../consts/initialMasterplanFilters"; } from "../../../consts/initialMasterplanFilters";
const SearchFiltersModal = () => { const SearchFiltersModal = () => {
@@ -26,7 +28,6 @@ const SearchFiltersModal = () => {
const { const {
multirangeSliders, multirangeSliders,
setMultirangeSliders, setMultirangeSliders,
switchers,
setSwitchers, setSwitchers,
apartmentTypeCheckboxes, apartmentTypeCheckboxes,
setApartmentTypeCheckboxes, setApartmentTypeCheckboxes,
@@ -34,6 +35,8 @@ const SearchFiltersModal = () => {
setRoveHomeTypeCheckboxes, setRoveHomeTypeCheckboxes,
setViewCheckboxes, setViewCheckboxes,
viewCheckboxes, viewCheckboxes,
setPage,
setPerPage,
} = useSearchFilters(); } = useSearchFilters();
const handlers = useSwipeable({ const handlers = useSwipeable({
onSwipedDown: () => handleOnCrossClick(), onSwipedDown: () => handleOnCrossClick(),
@@ -82,16 +85,16 @@ const SearchFiltersModal = () => {
setRoveHomeTypeCheckboxes(updatedCheckboxes); setRoveHomeTypeCheckboxes(updatedCheckboxes);
}; };
const handleOnSwitcherClick = (switcherId: string) => { // const handleOnSwitcherClick = (switcherId: string) => {
const updatedSwitchers = switchers.map((switcher) => { // const updatedSwitchers = switchers.map((switcher) => {
if (switcherId !== switcher.id) return switcher; // if (switcherId !== switcher.id) return switcher;
const { isSwitched } = switcher; // const { isSwitched } = switcher;
return { ...switcher, isSwitched: !isSwitched }; // return { ...switcher, isSwitched: !isSwitched };
}); // });
setSwitchers(updatedSwitchers); // setSwitchers(updatedSwitchers);
}; // };
const handleOnSliderValueChange = ( const handleOnSliderValueChange = (
sliderId: string, sliderId: string,
@@ -122,6 +125,8 @@ const SearchFiltersModal = () => {
setApartmentTypeCheckboxes(initialAparmentTypeCheckboxes); setApartmentTypeCheckboxes(initialAparmentTypeCheckboxes);
setRoveHomeTypeCheckboxes(initialRoveHomeCheckboxes); setRoveHomeTypeCheckboxes(initialRoveHomeCheckboxes);
setSwitchers(initialSwitchers); setSwitchers(initialSwitchers);
setPage(pageInitial);
setPerPage(perPageInitial);
}; };
return ( return (
@@ -169,7 +174,7 @@ const SearchFiltersModal = () => {
</div> </div>
<div className="grid grid-cols-2 gap-6 border-b pb-12"> <div className="grid grid-cols-2 gap-6 border-b pb-12">
{multirangeSliders.map((slider) => ( {multirangeSliders.map((slider) => (
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3" key={slider.id}>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<p className="text-[#0D1922] text-m font-semibold "> <p className="text-[#0D1922] text-m font-semibold ">
{slider.title} {slider.title}
@@ -184,14 +189,14 @@ const SearchFiltersModal = () => {
/> />
</div> </div>
))} ))}
<div className="flex flex-col gap-2 pt-6"> {/* <div className="flex flex-col gap-2 pt-6">
{switchers.map((switcher) => ( {switchers.map((switcher) => (
<div key={switcher.id} className="flex justify-between w-full"> <div key={switcher.id} className="flex justify-between w-full">
<p className="text-s text-[#73787C]">{switcher.title}</p> <p className="text-s text-[#73787C]">{switcher.title}</p>
<Switch switcher={switcher} onClick={handleOnSwitcherClick} /> <Switch switcher={switcher} onClick={handleOnSwitcherClick} />
</div> </div>
))} ))}
</div> </div> */}
</div> </div>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
{viewCheckboxes.map((checkbox) => ( {viewCheckboxes.map((checkbox) => (
client/src/components/modals/mobile/SendEnquiryMobileModal.tsx
+1 -1
View File
@@ -82,7 +82,7 @@ const SendEnquiryMobileModal = () => {
</div> </div>
</div> </div>
<p className="text-[#00BED7] font-semibold text-subheadline-s pt-6"> <p className="text-[#00BED7] font-semibold text-subheadline-s pt-6">
Unvailiable Unavailable
</p> </p>
</div> </div>
</div> </div>
client/src/components/searchPage/LayoutOptions.tsx
+4 -5
View File
@@ -12,10 +12,7 @@ import { updateAccessToken } from "../../api/updateAccessToken";
import useApartments from "../../store/useApartments"; import useApartments from "../../store/useApartments";
import useSearchFilters from "../../store/useSearchFilters"; import useSearchFilters from "../../store/useSearchFilters";
import { useDebounce } from "@uidotdev/usehooks"; import { useDebounce } from "@uidotdev/usehooks";
import { import { perPageInitial } from "../../consts/initialMasterplanFilters";
perPageInitial,
pageInitial,
} from "../../consts/initialMasterplanFilters";
import { getFilteredApartments } from "../../calc/getFilteredApartments"; import { getFilteredApartments } from "../../calc/getFilteredApartments";
import SearchLoader from "./SearchLoader"; import SearchLoader from "./SearchLoader";
@@ -37,6 +34,7 @@ const LayoutOptions = () => {
setPerPage, setPerPage,
perPage, perPage,
} = useSearchFilters(); } = useSearchFilters();
const debouncedSliders = useDebounce(multirangeSliders, 300); const debouncedSliders = useDebounce(multirangeSliders, 300);
const handleOnSortClick = (sortId: string) => { const handleOnSortClick = (sortId: string) => {
@@ -75,7 +73,7 @@ const LayoutOptions = () => {
switchers, switchers,
viewCheckboxes, viewCheckboxes,
sortList, sortList,
pageInitial, page,
perPage perPage
); );
@@ -117,6 +115,7 @@ const LayoutOptions = () => {
viewCheckboxes, viewCheckboxes,
sortList, sortList,
perPage, perPage,
page,
]); ]);
return ( return (
client/src/components/virtualTour/LabelMarker.tsx
+8 -1
View File
@@ -12,7 +12,14 @@ const LabelMarker = ({ sphereLink, apartment }: LaberlMarkerProps) => {
return ( return (
<> <>
{ {
<Html position={sphereLink.labelPosition} center className="zoom-280"> <Html
position={[
sphereLink.labelPosition[0],
sphereLink.labelPosition[1],
sphereLink.labelPosition[2],
]}
center
>
{sphereLink.type === "default" && ( {sphereLink.type === "default" && (
<WalkHereMarker sphereLink={sphereLink} apartment={apartment} /> <WalkHereMarker sphereLink={sphereLink} apartment={apartment} />
)} )}
client/src/components/virtualTour/VideoMarker.tsx
+4 -3
View File
@@ -16,15 +16,16 @@ const VideoMarker = ({ sphereLink }: VideoMarkerProps) => {
}; };
return ( return (
<div className="relative"> <div className="relative zoom-280">
<div <div
style={{ zoom: 1.25 }}
className="bg-white w-9 h-9 rounded-full text-[#00BED7] flex items-center justify-center cursor-pointer peer" className="bg-white w-9 h-9 rounded-full text-[#00BED7] flex items-center justify-center cursor-pointer peer"
onClick={handleOnClick} onClick={handleOnClick}
> >
<VideoIcon /> <VideoIcon />
</div> </div>
<div className="absolute -left-[66px] bottom-11 w-[168px] rounded-lg flex flex-col p-1 gap-1 items-center opacity-0 peer-hover:opacity-100 duration-300 ease-in-out transition-opacity"> <div className="absolute -left-[66px] bottom-[44px] w-[168px] rounded-lg flex flex-col p-1 gap-1 items-center opacity-100 duration-300 ease-in-out transition-opacity">
<div className="text-white font-semibold bg-[#0D192266] py-1 px-2 rounded-lg capitalize"> <div className="text-white font-semibold bg-[#0D192266] py-[4px] px-[8px] rounded-[8px] capitalize">
{sphereLink.videoTitle} {sphereLink.videoTitle}
</div> </div>
</div> </div>
client/src/components/virtualTour/VirtualTourSidebar.tsx
+1 -1
View File
@@ -183,7 +183,7 @@ const VirtualTourSidebar = ({
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<h2 className="text-subheadline-s font-semibold text-[#00BED7] pt-4"> <h2 className="text-subheadline-s font-semibold text-[#00BED7] pt-4">
Unvailiable Unavailable
</h2> </h2>
<div className="flex gap-2 pt-4 "> <div className="flex gap-2 pt-4 ">
<Button <Button
client/src/components/virtualTour/VirtualTourWrapper.tsx
+12 -14
View File
@@ -1,5 +1,5 @@
import { OrbitControls, Html } from "@react-three/drei"; import { OrbitControls } from "@react-three/drei";
import { Fragment, Suspense, useEffect, useRef } from "react"; import { Fragment, useEffect, useRef } from "react";
import { OrbitControls as OrbitControlsImpl } from "three-stdlib"; import { OrbitControls as OrbitControlsImpl } from "three-stdlib";
import useCompass from "../../store/useCompass"; import useCompass from "../../store/useCompass";
import SphereTour from "./SphereTour"; import SphereTour from "./SphereTour";
@@ -30,13 +30,7 @@ const VirtualTourWrapper = ({ appartment }: VirtualTourWrapperProps) => {
}, [appartment.spheres, setSelectedSphere]); }, [appartment.spheres, setSelectedSphere]);
return ( return (
<Suspense <>
fallback={
<Html>
<div>Loading</div>
</Html>
}
>
{appartment.spheres.map((sphere) => { {appartment.spheres.map((sphere) => {
const isLabelContains = const isLabelContains =
selectedSphere && sphere.id === selectedSphere.id; selectedSphere && sphere.id === selectedSphere.id;
@@ -53,7 +47,9 @@ const VirtualTourWrapper = ({ appartment }: VirtualTourWrapperProps) => {
))} ))}
<SphereTour <SphereTour
sphere={sphere} sphere={sphere}
selectedSphere={selectedSphere || appartment.spheres[0]} selectedSphere={
selectedSphere ? selectedSphere : appartment.spheres[0]
}
/> />
</Fragment> </Fragment>
); );
@@ -64,12 +60,14 @@ const VirtualTourWrapper = ({ appartment }: VirtualTourWrapperProps) => {
enableZoom={false} enableZoom={false}
rotateSpeed={0.5} rotateSpeed={0.5}
reverseOrbit reverseOrbit
// onStart={(e) => console.log("e", e)}
// onChange={(e) => console.log("e", e?.target)}
onChange={handleOnRotating} onChange={handleOnRotating}
target={appartment.spheres[0].position} target={[
appartment.spheres[0].position[0],
appartment.spheres[0].position[1],
appartment.spheres[0].position[2],
]}
/> />
</Suspense> </>
); );
}; };
client/src/components/virtualTour/WalkHereMarker.tsx
+2 -1
View File
@@ -23,8 +23,9 @@ const WalkHereMarker = ({ sphereLink, apartment }: WalkHereMarkerProps) => {
}; };
return ( return (
<div className="relative"> <div className="relative" style={{ zoom: 1.4 }}>
<div <div
style={{ zoom: 1.25 }}
className="bg-white w-9 h-9 rounded-full text-[#00BED7] flex items-center justify-center cursor-pointer peer" className="bg-white w-9 h-9 rounded-full text-[#00BED7] flex items-center justify-center cursor-pointer peer"
onClick={handleOnClick} onClick={handleOnClick}
> >
client/src/consts/markers.ts
+7 -1
View File
@@ -7,6 +7,8 @@ const markers: Marker[] = [
itemNumber: 0, itemNumber: 0,
popup: "/images/markers/popups/1.svg", popup: "/images/markers/popups/1.svg",
isPopupLeft: true, isPopupLeft: true,
isDisabled: true,
imgSrc: "/images/markers/2.png",
}, },
{ {
top: 35.5, top: 35.5,
@@ -14,13 +16,17 @@ const markers: Marker[] = [
itemNumber: 1, itemNumber: 1,
popup: "/images/markers/popups/1.svg", popup: "/images/markers/popups/1.svg",
isPopupLeft: false, isPopupLeft: false,
isDisabled: false,
imgSrc: "/images/markers/1.png",
}, },
{ {
top: 69, top: 69,
left: 20.0, left: 20.0,
itemNumber: 2, itemNumber: 2,
popup: "/images/markers/popups/1.svg", popup: "/images/markers/popups/1.svg",
isPopupLeft: false, isPopupLeft: true,
isDisabled: true,
imgSrc: "/images/markers/2.png",
}, },
]; ];
client/src/data/appartments.json
+1 -1
View File
@@ -57,7 +57,7 @@
"id": "studio-1_video-1", "id": "studio-1_video-1",
"type": "video", "type": "video",
"video": "/videos/studio_flex_bed.mp4", "video": "/videos/studio_flex_bed.mp4",
"videoTitle": "Cloud Bed", "videoTitle": "Show Cloud Bed",
"labelPosition": [-5, 0, 36.11] "labelPosition": [-5, 0, 36.11]
} }
] ]
client/src/pages/AboutComplex.tsx
+4 -4
View File
@@ -285,7 +285,7 @@ const AboutComplex = () => {
</div> </div>
<div> <div>
<p className="text-s text-[#0D1922]">341 Sqft</p> <p className="text-s text-[#0D1922]">341 Sqft</p>
<p className="font-bold text-m text-[#00BED7]">Unvailiable</p> <p className="font-bold text-m text-[#00BED7]">Unavailable</p>
</div> </div>
</div> </div>
<img <img
@@ -309,7 +309,7 @@ const AboutComplex = () => {
</div> </div>
<div> <div>
<p className="text-s text-[#0D1922]">390 Sqft</p> <p className="text-s text-[#0D1922]">390 Sqft</p>
<p className="font-bold text-m text-[#00BED7]">Unvailiable</p> <p className="font-bold text-m text-[#00BED7]">Unavailable</p>
{/* AED 1,138,888 */} {/* AED 1,138,888 */}
</div> </div>
</div> </div>
@@ -337,7 +337,7 @@ const AboutComplex = () => {
</div> </div>
<div> <div>
<p className="text-s text-[#0D1922]">609 Sqft</p> <p className="text-s text-[#0D1922]">609 Sqft</p>
<p className="font-bold text-m text-[#00BED7]">Unvailiable</p> <p className="font-bold text-m text-[#00BED7]">Unavailable</p>
</div> </div>
</div> </div>
<img <img
@@ -364,7 +364,7 @@ const AboutComplex = () => {
</div> </div>
<div> <div>
<p className="text-s text-[#0D1922]">891 Sqft</p> <p className="text-s text-[#0D1922]">891 Sqft</p>
<p className="font-bold text-m text-[#00BED7]">Unvailiable</p> <p className="font-bold text-m text-[#00BED7]">Unavailable</p>
{/* AED 2,408,888 */} {/* AED 2,408,888 */}
</div> </div>
</div> </div>
client/src/pages/Search.tsx
-1
View File
@@ -6,7 +6,6 @@ const Search = () => {
return ( return (
<div className="overflow-scroll h-screen w-screen pt-14 select-none"> <div className="overflow-scroll h-screen w-screen pt-14 select-none">
<div className="flex"> <div className="flex">
{/* <SidebarFilters /> */}
<LayoutOptions /> <LayoutOptions />
</div> </div>
<Footer /> <Footer />
client/src/pages/VirtualTour.tsx
+8 -1
View File
@@ -12,6 +12,7 @@ import { updateAccessToken } from "../api/updateAccessToken";
import { IAparmentRes } from "../types/apartmentsRes"; import { IAparmentRes } from "../types/apartmentsRes";
import useModal from "../store/useModal"; import useModal from "../store/useModal";
import LoaderModal from "../components/modals/LoaderModal"; import LoaderModal from "../components/modals/LoaderModal";
import { useProgress } from "@react-three/drei";
const appartments = _appartment as IAppartmentComplex[]; const appartments = _appartment as IAppartmentComplex[];
const defaultApartment = appartments[0]; const defaultApartment = appartments[0];
@@ -26,6 +27,7 @@ const VirtualTour = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const { appartmentTypeId } = useParams(); const { appartmentTypeId } = useParams();
const { setModal } = useModal(); const { setModal } = useModal();
const { progress } = useProgress();
useEffect(() => { useEffect(() => {
setIsLoading(true); setIsLoading(true);
@@ -100,11 +102,16 @@ const VirtualTour = () => {
appartmentSphere={currentAppartmentSphere} appartmentSphere={currentAppartmentSphere}
apartment={currentApartment} apartment={currentApartment}
/> />
<Canvas camera={{ fov: 90 }}> <Canvas
camera={{ fov: 90 }}
style={{ width: "1733px", height: "2560px", zoom: 1.5 }}
// style={{ width: "2160px", height: "3840px" }}
>
{currentAppartmentSphere && ( {currentAppartmentSphere && (
<VirtualTourWrapper appartment={currentAppartmentSphere} /> <VirtualTourWrapper appartment={currentAppartmentSphere} />
)} )}
</Canvas> </Canvas>
{progress !== 100 && <LoaderModal />}
<ButtomPanelCompassVirtualTour /> <ButtomPanelCompassVirtualTour />
</div> </div>
); );
client/src/types/marker.ts
+2
View File
@@ -3,6 +3,8 @@ import { MarkerComponentProps } from "react-image-marker";
type Marker = MarkerComponentProps & { type Marker = MarkerComponentProps & {
popup: string; popup: string;
isPopupLeft: boolean; isPopupLeft: boolean;
imgSrc: string;
isDisabled: boolean;
}; };
export type { Marker }; export type { Marker };