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