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

map fix

Browse Source
This commit is contained in:
zojgame
2024-07-10 17:38:15 +05:00
parent af5c7c10f4
commit 3786f92c5b
13 changed files with 280 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/public/images/markers/2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

client/src/components/complexWingPage/FloorDescription.tsx
+8 -4
View File
@@ -5,20 +5,20 @@ import { IDesctiptionFloor } from "../../types/descriptionFloor";
interface FloorDescriptionProps { interface FloorDescriptionProps {
descriptionFloor: IDesctiptionFloor | null; descriptionFloor: IDesctiptionFloor | null;
floorApartments: IAparmentRes[]; floorApartments: IAparmentRes[];
isLeft: boolean;
} }
const FloorDescription = ({ const FloorDescription = ({
descriptionFloor, descriptionFloor,
floorApartments, floorApartments,
isLeft,
}: FloorDescriptionProps) => { }: FloorDescriptionProps) => {
const { isSidebar } = useWingSidebar(); const { isSidebar } = useWingSidebar();
return ( return (
<> <>
<div <div
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[364px] absolute left-[414px] transition-opacity duration-300 desc-shadow ${ className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[364px] absolute left-[414px] transition-opacity duration-300 desc-shadow ${
isSidebar && descriptionFloor?.wing === "West Wing" isSidebar ? "opacity-0" : "opacity-100"
? "opacity-100"
: "opacity-100"
}`} }`}
> >
<div className="relative"> <div className="relative">
@@ -101,7 +101,11 @@ const FloorDescription = ({
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p> <p className="text-s text-[#0D1922] text-nowrap">Unvailiable</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 absolute top-0 ${
!isLeft ? "-left-[35px] -rotate-90" : "-right-[35px] rotate-90"
} `}
></div>
</div> </div>
</div> </div>
</> </>
client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
+8 -1
View File
@@ -8,12 +8,14 @@ interface MobileFloorDescriptionProps {
descriptionFloor: IDesctiptionFloor | null; descriptionFloor: IDesctiptionFloor | null;
floorApartments: IAparmentRes[]; floorApartments: IAparmentRes[];
isLeft: boolean; isLeft: boolean;
onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
} }
const MobileFloorDescription = ({ const MobileFloorDescription = ({
descriptionFloor, descriptionFloor,
floorApartments, floorApartments,
isLeft, isLeft,
onClick,
}: MobileFloorDescriptionProps) => { }: MobileFloorDescriptionProps) => {
return ( return (
<> <>
@@ -104,6 +106,7 @@ const MobileFloorDescription = ({
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p> <p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
</div> </div>
<Button <Button
onClick={onClick}
buttonType="cta" buttonType="cta"
className="justify-center" className="justify-center"
text="Explore" text="Explore"
@@ -111,7 +114,11 @@ const MobileFloorDescription = ({
iconPos="right" iconPos="right"
/> />
</div> </div>
<div className="w-0 h-0 border-t-0 border-r-[6px] border-b-[14px] border-l-[6px] border-transparent border-b-white absolute -top-[35px] left-[0px]"></div> <div
className={`w-0 h-0 border-t-0 border-r-[6px] border-b-[14px] border-l-[6px] border-transparent border-b-white absolute ${
isLeft ? "right-[0px]" : "left-[0px]"
} -top-[35px] `}
></div>
</div> </div>
</div> </div>
</> </>
client/src/components/complexWingPage/SequenceWing/MobileSkygardenDescription.tsx
+72
View File
@@ -0,0 +1,72 @@
import Button from "../../Button";
import CrossIcon from "../../icons/CrossIcon";
import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
interface MobileSkygardenDescriptionProps {
onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
isLeft: boolean;
}
const MobileSkygardenDescription = ({
onClick,
isLeft,
}: MobileSkygardenDescriptionProps) => {
return (
<>
<div
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[344px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-fit`}
>
<div className="relative">
<div className="flex justify-between border-b pb-4">
<div className="flex flex-col items-start justify-start">
<p
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out text-subheadline-s`}
>
Sky Garden
</p>
</div>
<Button buttonType="tertiary" icon={<CrossIcon />} />
</div>
<div className="flex flex-col gap-4 pt-4">
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="p-1 flex justify-center items-center">8</p>
</div>
<p className="text-s text-[#73787C] w-full">Indoor</p>
</div>
<p className="text-s text-[#0D1922] text-nowrap">3 amenties</p>
</div>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="h-full w-full flex justify-center items-center">
8
</p>
</div>
<p className="text-s text-[#73787C]">Studio</p>
</div>
<p className="text-s text-[#0D1922] text-nowrap">14 amenties</p>
</div>
<Button
onClick={onClick}
buttonType="cta"
className="justify-center"
text="Explore"
icon={<RightArrowSliderIcon />}
iconPos="right"
/>
</div>
<div
className={`w-0 h-0 border-t-0 border-r-[6px] border-b-[14px] border-l-[6px] border-transparent border-b-white absolute ${
isLeft ? "right-[0px]" : "left-[0px]"
} -top-[35px] `}
></div>
</div>
</div>
</>
);
};
export default MobileSkygardenDescription;
client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
+78 -83
View File
@@ -26,6 +26,8 @@ import WingSignatures from "./WingSignatures";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
import FloorsHighlighting from "./FloorsHighlighting"; import FloorsHighlighting from "./FloorsHighlighting";
import MobileFloorDescription from "./MobileFloorDescription"; import MobileFloorDescription from "./MobileFloorDescription";
import WingFloorModal from "../../modals/mobile/WingFloorModal";
import MobileSkygardenDescription from "./MobileSkygardenDescription";
const skyGardenFloor = 22; const skyGardenFloor = 22;
@@ -55,9 +57,6 @@ const SequenceWing = () => {
); );
const [isLeft, setIsLeft] = useState(false); const [isLeft, setIsLeft] = useState(false);
const [isDescriptionFloorMobile, setIsDescriptionFloorMobile] =
useState(false);
const { const {
apartmentTypeCheckboxes, apartmentTypeCheckboxes,
switchers, switchers,
@@ -99,16 +98,17 @@ const SequenceWing = () => {
const handleOnFloorClick = () => { const handleOnFloorClick = () => {
if (!currentHoveredFloor && !currentHoveredApartments) return; if (!currentHoveredFloor && !currentHoveredApartments) return;
setSelectedApartments(currentHoveredApartments);
setCurrentFloor(currentHoveredFloor); setCurrentFloor(currentHoveredFloor);
if (!isMobile) { setSelectedApartments(currentHoveredApartments);
setIsFloorSidebar(true);
setIsSkygardenSidebar(false); const screenWidth = window.innerWidth;
setIsSidebar(true);
} else { const isMobile = screenWidth <= mobileWidht;
setIsDescriptionFloorMobile(true); if (isMobile) return;
// setModal(<WingFloorModal />); // <640
} setIsFloorSidebar(true);
setIsSkygardenSidebar(false);
setIsSidebar(true);
}; };
const handleOnSkygardenClick = () => { const handleOnSkygardenClick = () => {
@@ -125,34 +125,39 @@ const SequenceWing = () => {
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
) => { ) => {
const screenWidth = window.innerWidth; const screenWidth = window.innerWidth;
const _isLeft = e.clientX > screenWidth / 2;
setIsLeft(_isLeft);
// <640
if (screenWidth <= mobileWidht) return;
// const _top = screenHeight / 16; // const _top = screenHeight / 16;
if (screenWidth > laptopWidth) { if (screenWidth > laptopWidth) {
setMousePos([e.clientX - 384, e.clientY + top - 25]); const x = _isLeft ? e.clientX - 795 : e.clientX - 384;
setMousePos([x, e.clientY + top - 25]);
} else { } else {
// 640-1072 // 640-1072
if (screenWidth > mobileWidht) { if (screenWidth > mobileWidht) {
setMousePos([e.clientX - 354, e.clientY + top - 25]); const x = _isLeft ? e.clientX + left - 800 : e.clientX - 385 + left;
// <640 setMousePos([x, e.clientY + top - 25]);
} else {
setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
} }
} }
}; };
const handleOnMouseDown = ( const handleOnMouseDown = (
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
) => { ) => {
const isFloorClicked = Boolean(e.target.dataset.id);
if (!isFloorClicked) return;
const screenWidth = window.innerWidth; const screenWidth = window.innerWidth;
if (screenWidth > laptopWidth) { const _isLeft = e.clientX > screenWidth / 2;
setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]); setIsLeft(_isLeft);
} else {
// 640-1072 if (screenWidth > mobileWidht) return;
if (screenWidth > mobileWidht) { // <640
setMousePos([e.clientX - 444 + left, e.clientY + Math.abs(top) + 30]);
// <640 const x = _isLeft ? e.clientX - 724 + left : e.clientX - 444 + left;
} else {
setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]); setMousePos([x, e.clientY + Math.abs(top) + 20]);
}
}
}; };
// function handleOnMouseDown(e: MouseEvent | any) { // function handleOnMouseDown(e: MouseEvent | any) {
@@ -205,41 +210,27 @@ const SequenceWing = () => {
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
) => { ) => {
e.stopPropagation(); e.stopPropagation();
if (!currentHoveredFloor) return; // if (!currentHoveredFloor) return;
// setModal( setModal(
// <WingFloorModal <WingFloorModal
// currentFloor={currentHoveredFloor} currentFloor={currentHoveredFloor}
// floorApartments={currentHoveredApartments} floorApartments={currentHoveredApartments}
// /> />
// ); );
setIsDescriptionFloorMobile(false);
}; };
// function handleResize() { const handleOnExploreSkygardenClick = (
// const screenWidth = window.innerWidth; e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
// const screenHeight = window.innerHeight; ) => {
// // >1072 e.stopPropagation();
// if (screenWidth > laptopWidth) { // if (!currentHoveredFloor) return;
// setWidth(screenWidth); setModal(
// setTop(screenWidth / 2 - screenHeight / 2); <WingFloorModal
// setLeft(0); currentFloor={currentHoveredFloor}
// } else { floorApartments={currentHoveredApartments}
// // 640-1072 />
// if (screenWidth > mobileWidht) { );
// const _top = screenHeight / 4; };
// setTop(_top);
// // <640
// } else {
// const _top = screenHeight / 2.5;
// setTop(_top);
// }
// const _left = laptopWidth - screenWidth;
// const _width = screenWidth + _left * 2;
// setWidth(_width);
// setLeft(_left);
// }
// }
useEffect(() => { useEffect(() => {
handleResize(); handleResize();
@@ -313,18 +304,18 @@ const SequenceWing = () => {
sortList, sortList,
]); ]);
// useEffect(() => { useEffect(() => {
// if (isLoading) { if (isLoading) {
// setModal(<LoaderModal />); setModal(<LoaderModal />);
// } else { } else {
// setModal(null); setModal(null);
// } }
// }, [isLoading, setModal]); }, [isLoading, setModal]);
return ( return (
<div className="absolute left-0 overflow-hidden h-screen w-screen select-none"> <div className="absolute left-0 overflow-hidden h-screen w-screen select-none">
<div <div
className=" absolute h-[calc(100vh-56px)] right-0 w-1/2 duration-300 transition-all " className=" absolute h-[calc(100vh-56px)] right-0 w-1/2 duration-300 transition-all sm:block hidden"
style={{ right: `${isFloorSidebar ? "0" : "-50%"}` }} style={{ right: `${isFloorSidebar ? "0" : "-50%"}` }}
> >
<FloorSidebar <FloorSidebar
@@ -334,7 +325,7 @@ const SequenceWing = () => {
/> />
</div> </div>
<div <div
className=" absolute h-[calc(100vh-56px)] right-0 w-1/2 duration-300 transition-all" className=" absolute h-[calc(100vh-56px)] right-0 w-1/2 duration-300 transition-all sm:block hidden"
style={{ right: `${isSkygardenSidebar ? "0" : "-50%"}` }} style={{ right: `${isSkygardenSidebar ? "0" : "-50%"}` }}
> >
<SkygardenSidebar onMouseEnter={handleOnWingWrapperMouseLeave} /> <SkygardenSidebar onMouseEnter={handleOnWingWrapperMouseLeave} />
@@ -352,7 +343,7 @@ const SequenceWing = () => {
}} }}
> >
<div <div
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out lg:flex hidden ${ className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out sm:flex hidden ${
currentHoveredFloor?.floor === skyGardenFloor && isWrapperHovered currentHoveredFloor?.floor === skyGardenFloor && isWrapperHovered
? "opacity-100" ? "opacity-100"
: "opacity-0" : "opacity-0"
@@ -366,7 +357,7 @@ const SequenceWing = () => {
}`, }`,
}} }}
> >
<SkygardenDescription /> <SkygardenDescription isLeft={isLeft} />
</div> </div>
<div <div
@@ -387,12 +378,13 @@ const SequenceWing = () => {
}} }}
> >
<FloorDescription <FloorDescription
isLeft={isLeft}
descriptionFloor={currentHoveredFloor} descriptionFloor={currentHoveredFloor}
floorApartments={currentHoveredApartments} floorApartments={currentHoveredApartments}
/> />
</div> </div>
<div <div
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out lg:hidden flex ${ className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out sm:hidden flex ${
currentHoveredFloor?.floor !== skyGardenFloor && currentHoveredFloor?.floor !== skyGardenFloor &&
currentHoveredFloor && currentHoveredFloor &&
isWrapperHovered isWrapperHovered
@@ -411,22 +403,25 @@ const SequenceWing = () => {
floorApartments={currentHoveredApartments} floorApartments={currentHoveredApartments}
/> />
</div> </div>
{/* <div
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out ${ <div
isDescriptionFloorMobile ? "opacity-100" : "opacity-0" className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out sm:hidden flex ${
currentHoveredFloor?.floor === skyGardenFloor &&
currentHoveredFloor &&
isWrapperHovered
? "opacity-100"
: "opacity-0"
}`} }`}
style={{ style={{
top: `${mousePos[1]}px`, top: mousePos[1],
left: `${mousePos[0]}px`, left: `${mousePos[0]}px`,
// top: `${mousePos[1] + 140}px`,
// left: `${mousePos[0] + 366}px`,
}} }}
> >
<MobileFloorDescription <MobileSkygardenDescription
descriptionFloor={currentHoveredFloor} onClick={handleOnExploreSkygardenClick}
floorApartments={currentHoveredApartments} isLeft={isLeft}
/> />
</div> */} </div>
<img <img
width={`${width}px`} width={`${width}px`}
client/src/components/complexWingPage/SkygardenDescription.tsx
+10 -2
View File
@@ -1,4 +1,8 @@
const SkygardenDescription = () => { interface ISkygardenDescriptionProps {
isLeft: boolean;
}
const SkygardenDescription = ({ isLeft }: ISkygardenDescriptionProps) => {
return ( return (
<div className=" p-6"> <div className=" p-6">
<div <div
@@ -26,7 +30,11 @@ const SkygardenDescription = () => {
<p className="text-s text-[#0D1922] text-nowrap">14 amenties</p> <p className="text-s text-[#0D1922] text-nowrap">14 amenties</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 absolute top-0 ${
isLeft ? "-right-[35px] rotate-90" : "-left-[35px] -rotate-90"
}`}
></div>
</div> </div>
</div> </div>
</div> </div>
client/src/components/masterplanPage/map/Map.tsx
-5
View File
@@ -30,11 +30,6 @@ const Map = () => {
animationType: "easeOutQuart", animationType: "easeOutQuart",
animationTime: 500, animationTime: 500,
}} }}
velocityAnimation={{
sensitivity: 100,
animationTime: 100,
animationType: "easeOut",
}}
> >
<ZoomControlls /> <ZoomControlls />
<TransformComponent <TransformComponent
client/src/components/masterplanPage/map/Marker.tsx
+75 -40
View File
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
const Marker = (props: MarkerComponentProps) => { const Marker = (props: MarkerComponentProps) => {
const { setHoveredMarker, hoveredMarker } = useMarker(); const { setHoveredMarker, hoveredMarker } = useMarker();
const [markerScale, setMarkerScale] = useState(1); const [markerScale, setMarkerScale] = useState(0.5);
const navigate = useNavigate(); const navigate = useNavigate();
const currentMarker = markers.find( const currentMarker = markers.find(
(marker) => marker.itemNumber === props.itemNumber (marker) => marker.itemNumber === props.itemNumber
@@ -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);
}; };
@@ -34,31 +35,58 @@ const Marker = (props: MarkerComponentProps) => {
return ( return (
<div <div
className="relative transition-transform " className="relative transition-transform"
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-[64px] 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-[76px] 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/mobile/WingFloorModal.tsx
+11 -1
View File
@@ -2,8 +2,18 @@ import { useSwipeable } from "react-swipeable";
import useModal from "../../../store/useModal"; import useModal from "../../../store/useModal";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import MinusIcon from "../../icons/MinusIcon"; import MinusIcon from "../../icons/MinusIcon";
import { IDesctiptionFloor } from "../../../types/descriptionFloor";
import { IAparmentRes } from "../../../types/apartmentsRes";
const WingFloorModal = () => { interface WingFloorModalProps {
currentFloor: IDesctiptionFloor | null;
floorApartments: IAparmentRes[];
}
const WingFloorModal = ({
currentFloor,
floorApartments,
}: WingFloorModalProps) => {
const { setModal } = useModal(); const { setModal } = useModal();
const [isAnimate, setIsAnimate] = useState(false); const [isAnimate, setIsAnimate] = useState(false);
client/src/components/searchPage/LayoutOptions.tsx
+1 -4
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";
client/src/consts/markers.ts
+13 -7
View File
@@ -2,25 +2,31 @@ import { Marker } from "../types/marker";
const markers: Marker[] = [ const markers: Marker[] = [
{ {
top: 38.2, top: 33.5,
left: 54, left: 51.5,
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: 39.5, top: 35.5,
left: 56, left: 53,
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: 73, top: 69,
left: 22.5, 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/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 };
server/.env
+2 -2
View File
@@ -1,2 +1,2 @@
PORT=4003 PORT=4113
REFRESH_TOKEN=1000.da3146d49fa8a399f0c635e74954ff9c.e010dbb1bb605d7e1aa5bf7fc0521f8b REFRESH_TOKEN=1000.ca08e1e4dc5fe081e2bd7fdbd0adf5e6.68b8da640d7322a889f10eddbcf5ee6b