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 {
descriptionFloor: IDesctiptionFloor | null;
floorApartments: IAparmentRes[];
isLeft: boolean;
}
const FloorDescription = ({
descriptionFloor,
floorApartments,
isLeft,
}: FloorDescriptionProps) => {
const { isSidebar } = useWingSidebar();
return (
<>
<div
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"
? "opacity-100"
: "opacity-100"
isSidebar ? "opacity-0" : "opacity-100"
}`}
>
<div className="relative">
@@ -101,7 +101,11 @@ const FloorDescription = ({
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</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>
<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>
</>
client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
+8 -1
View File
@@ -8,12 +8,14 @@ interface MobileFloorDescriptionProps {
descriptionFloor: IDesctiptionFloor | null;
floorApartments: IAparmentRes[];
isLeft: boolean;
onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}
const MobileFloorDescription = ({
descriptionFloor,
floorApartments,
isLeft,
onClick,
}: MobileFloorDescriptionProps) => {
return (
<>
@@ -104,6 +106,7 @@ const MobileFloorDescription = ({
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
</div>
<Button
onClick={onClick}
buttonType="cta"
className="justify-center"
text="Explore"
@@ -111,7 +114,11 @@ const MobileFloorDescription = ({
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 -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>
</>
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
+74 -79
View File
@@ -26,6 +26,8 @@ import WingSignatures from "./WingSignatures";
import { isMobile } from "react-device-detect";
import FloorsHighlighting from "./FloorsHighlighting";
import MobileFloorDescription from "./MobileFloorDescription";
import WingFloorModal from "../../modals/mobile/WingFloorModal";
import MobileSkygardenDescription from "./MobileSkygardenDescription";
const skyGardenFloor = 22;
@@ -55,9 +57,6 @@ const SequenceWing = () => {
);
const [isLeft, setIsLeft] = useState(false);
const [isDescriptionFloorMobile, setIsDescriptionFloorMobile] =
useState(false);
const {
apartmentTypeCheckboxes,
switchers,
@@ -99,16 +98,17 @@ const SequenceWing = () => {
const handleOnFloorClick = () => {
if (!currentHoveredFloor && !currentHoveredApartments) return;
setSelectedApartments(currentHoveredApartments);
setCurrentFloor(currentHoveredFloor);
if (!isMobile) {
setSelectedApartments(currentHoveredApartments);
const screenWidth = window.innerWidth;
const isMobile = screenWidth <= mobileWidht;
if (isMobile) return;
// <640
setIsFloorSidebar(true);
setIsSkygardenSidebar(false);
setIsSidebar(true);
} else {
setIsDescriptionFloorMobile(true);
// setModal(<WingFloorModal />);
}
};
const handleOnSkygardenClick = () => {
@@ -125,34 +125,39 @@ const SequenceWing = () => {
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
) => {
const screenWidth = window.innerWidth;
const _isLeft = e.clientX > screenWidth / 2;
setIsLeft(_isLeft);
// <640
if (screenWidth <= mobileWidht) return;
// const _top = screenHeight / 16;
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 {
// 640-1072
if (screenWidth > mobileWidht) {
setMousePos([e.clientX - 354, e.clientY + top - 25]);
// <640
} else {
setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
const x = _isLeft ? e.clientX + left - 800 : e.clientX - 385 + left;
setMousePos([x, e.clientY + top - 25]);
}
}
};
const handleOnMouseDown = (
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
) => {
const isFloorClicked = Boolean(e.target.dataset.id);
if (!isFloorClicked) return;
const screenWidth = window.innerWidth;
if (screenWidth > laptopWidth) {
setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
} else {
// 640-1072
if (screenWidth > mobileWidht) {
setMousePos([e.clientX - 444 + left, e.clientY + Math.abs(top) + 30]);
const _isLeft = e.clientX > screenWidth / 2;
setIsLeft(_isLeft);
if (screenWidth > mobileWidht) return;
// <640
} else {
setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
}
}
const x = _isLeft ? e.clientX - 724 + left : e.clientX - 444 + left;
setMousePos([x, e.clientY + Math.abs(top) + 20]);
};
// function handleOnMouseDown(e: MouseEvent | any) {
@@ -205,41 +210,27 @@ const SequenceWing = () => {
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
) => {
e.stopPropagation();
if (!currentHoveredFloor) return;
// setModal(
// <WingFloorModal
// currentFloor={currentHoveredFloor}
// floorApartments={currentHoveredApartments}
// />
// );
setIsDescriptionFloorMobile(false);
// if (!currentHoveredFloor) return;
setModal(
<WingFloorModal
currentFloor={currentHoveredFloor}
floorApartments={currentHoveredApartments}
/>
);
};
// function handleResize() {
// const screenWidth = window.innerWidth;
// const screenHeight = window.innerHeight;
// // >1072
// if (screenWidth > laptopWidth) {
// setWidth(screenWidth);
// setTop(screenWidth / 2 - screenHeight / 2);
// setLeft(0);
// } else {
// // 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);
// }
// }
const handleOnExploreSkygardenClick = (
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
) => {
e.stopPropagation();
// if (!currentHoveredFloor) return;
setModal(
<WingFloorModal
currentFloor={currentHoveredFloor}
floorApartments={currentHoveredApartments}
/>
);
};
useEffect(() => {
handleResize();
@@ -313,18 +304,18 @@ const SequenceWing = () => {
sortList,
]);
// useEffect(() => {
// if (isLoading) {
// setModal(<LoaderModal />);
// } else {
// setModal(null);
// }
// }, [isLoading, setModal]);
useEffect(() => {
if (isLoading) {
setModal(<LoaderModal />);
} else {
setModal(null);
}
}, [isLoading, setModal]);
return (
<div className="absolute left-0 overflow-hidden h-screen w-screen select-none">
<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%"}` }}
>
<FloorSidebar
@@ -334,7 +325,7 @@ const SequenceWing = () => {
/>
</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%"}` }}
>
<SkygardenSidebar onMouseEnter={handleOnWingWrapperMouseLeave} />
@@ -352,7 +343,7 @@ const SequenceWing = () => {
}}
>
<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
? "opacity-100"
: "opacity-0"
@@ -366,7 +357,7 @@ const SequenceWing = () => {
}`,
}}
>
<SkygardenDescription />
<SkygardenDescription isLeft={isLeft} />
</div>
<div
@@ -387,12 +378,13 @@ const SequenceWing = () => {
}}
>
<FloorDescription
isLeft={isLeft}
descriptionFloor={currentHoveredFloor}
floorApartments={currentHoveredApartments}
/>
</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 &&
isWrapperHovered
@@ -411,22 +403,25 @@ const SequenceWing = () => {
floorApartments={currentHoveredApartments}
/>
</div>
{/* <div
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out ${
isDescriptionFloorMobile ? "opacity-100" : "opacity-0"
<div
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={{
top: `${mousePos[1]}px`,
top: mousePos[1],
left: `${mousePos[0]}px`,
// top: `${mousePos[1] + 140}px`,
// left: `${mousePos[0] + 366}px`,
}}
>
<MobileFloorDescription
descriptionFloor={currentHoveredFloor}
floorApartments={currentHoveredApartments}
<MobileSkygardenDescription
onClick={handleOnExploreSkygardenClick}
isLeft={isLeft}
/>
</div> */}
</div>
<img
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 (
<div className=" p-6">
<div
@@ -26,7 +30,11 @@ const SkygardenDescription = () => {
<p className="text-s text-[#0D1922] text-nowrap">14 amenties</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>
<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>
client/src/components/masterplanPage/map/Map.tsx
-5
View File
@@ -30,11 +30,6 @@ const Map = () => {
animationType: "easeOutQuart",
animationTime: 500,
}}
velocityAnimation={{
sensitivity: 100,
animationTime: 100,
animationType: "easeOut",
}}
>
<ZoomControlls />
<TransformComponent
client/src/components/masterplanPage/map/Marker.tsx
+48 -13
View File
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
const Marker = (props: MarkerComponentProps) => {
const { setHoveredMarker, hoveredMarker } = useMarker();
const [markerScale, setMarkerScale] = useState(1);
const [markerScale, setMarkerScale] = useState(0.5);
const navigate = useNavigate();
const currentMarker = markers.find(
(marker) => marker.itemNumber === props.itemNumber
@@ -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"
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-[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
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,15 +99,16 @@ 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 ${
className={`flex items-end absolute w-[108px] top-[22px] left-[76px] transition-all duration-300 ease-in-out ${
currentMarker?.isPopupLeft ? "hidden" : "block"
} ${
hoveredMarker &&
@@ -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/mobile/WingFloorModal.tsx
+11 -1
View File
@@ -2,8 +2,18 @@ import { useSwipeable } from "react-swipeable";
import useModal from "../../../store/useModal";
import { useEffect, useState } from "react";
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 [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 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";
client/src/consts/markers.ts
+13 -7
View File
@@ -2,25 +2,31 @@ import { Marker } from "../types/marker";
const markers: Marker[] = [
{
top: 38.2,
left: 54,
top: 33.5,
left: 51.5,
itemNumber: 0,
popup: "/images/markers/popups/1.svg",
isPopupLeft: true,
isDisabled: true,
imgSrc: "/images/markers/2.png",
},
{
top: 39.5,
left: 56,
top: 35.5,
left: 53,
itemNumber: 1,
popup: "/images/markers/popups/1.svg",
isPopupLeft: false,
isDisabled: false,
imgSrc: "/images/markers/1.png",
},
{
top: 73,
left: 22.5,
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/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 };
server/.env
+2 -2
View File
@@ -1,2 +1,2 @@
PORT=4003
REFRESH_TOKEN=1000.da3146d49fa8a399f0c635e74954ff9c.e010dbb1bb605d7e1aa5bf7fc0521f8b
PORT=4113
REFRESH_TOKEN=1000.ca08e1e4dc5fe081e2bd7fdbd0adf5e6.68b8da640d7322a889f10eddbcf5ee6b