pos fix start

This commit is contained in:
2024-07-09 18:36:08 +05:00
parent da79d499b2
commit af5c7c10f4
6 changed files with 189 additions and 40 deletions
+2 -1
View File
@@ -1,3 +1,4 @@
# VITE_SERVER_API=https://irth.graff.tech/api
VITE_SERVER_API=http://192.168.1.158:4003
# VITE_SERVER_API=http://192.168.1.158:4003
VITE_SERVER_API=http://194.26.138.94:4002
# VITE_SERVER_API=http://194.26.138.94:4002
+2 -1
View File
@@ -1,5 +1,6 @@
// const serverApi = "http://192.168.56.1:3000";
const serverApi = import.meta.env.VITE_SERVER_API;
const serverApi = "http://194.26.138.94:4002";
// const serverApi = import.meta.env.VITE_SERVER_API;
const apartmentsApi = `${serverApi}/apartments`;
@@ -138,19 +138,20 @@ function SequenceSlider({ path }: SequenceSliderProps) {
setLeft(0);
} else {
if (screenWidth > mobileWidht) {
const _top = screenHeight / 4;
const _top = screenHeight / 16;
setTop(_top);
} else {
const _top = screenHeight / 2.5;
const _top = screenHeight / 5.5;
setTop(_top);
}
const _left = laptopWidth - screenWidth;
const _width = screenWidth + _left * 2;
const _left = (laptopWidth - screenWidth) * 1.1;
const _width = screenWidth + _left * 1.9;
setWidth(_width);
setLeft(_left);
}
}
function handleOnSequenceClick(): void {
navigate("./wing");
}
@@ -7,11 +7,13 @@ import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
interface MobileFloorDescriptionProps {
descriptionFloor: IDesctiptionFloor | null;
floorApartments: IAparmentRes[];
isLeft: boolean;
}
const MobileFloorDescription = ({
descriptionFloor,
floorApartments,
isLeft,
}: MobileFloorDescriptionProps) => {
return (
<>
@@ -1,3 +1,4 @@
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { MouseEvent, useEffect, useState } from "react";
import FloorDescription from "../FloorDescription";
@@ -52,6 +53,7 @@ const SequenceWing = () => {
const [selectedApartments, setSelectedApartments] = useState<IAparmentRes[]>(
[]
);
const [isLeft, setIsLeft] = useState(false);
const [isDescriptionFloorMobile, setIsDescriptionFloorMobile] =
useState(false);
@@ -122,57 +124,123 @@ const SequenceWing = () => {
const handleMouseMove = (
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
) => {
setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
};
function handleOnMouseDown(e: MouseEvent | any) {
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
// >1072
// const _top = screenHeight / 16;
if (screenWidth > laptopWidth) {
const _top = screenWidth / 2 - screenHeight / 2;
setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]);
setMousePos([e.clientX - 384, e.clientY + top - 25]);
} else {
// 640-1072
if (screenWidth > mobileWidht) {
const _top = screenHeight / 4;
const _left = laptopWidth - screenWidth;
setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]);
setMousePos([e.clientX - 354, e.clientY + top - 25]);
// <640
} else {
const _top = screenHeight / 2.5;
const _left = laptopWidth - screenWidth;
setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]);
setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
}
}
}
};
const handleOnMouseDown = (
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
) => {
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]);
// <640
} else {
setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
}
}
};
// function handleOnMouseDown(e: MouseEvent | any) {
// const screenWidth = window.innerWidth;
// const screenHeight = window.innerHeight;
// // >1072
// if (screenWidth > laptopWidth) {
// const _top = screenWidth / 2 - screenHeight / 2;
// setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]);
// } else {
// // 640-1072
// if (screenWidth > mobileWidht) {
// const _top = screenHeight / 4;
// const _left = laptopWidth - screenWidth;
// setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]);
// // setMousePos([e.clientX - 444 + _left, e.clientY + Math.abs(_top) + 30]);
// // <640
// } else {
// const _top = screenHeight / 2.5;
// const _left = laptopWidth - screenWidth;
// setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]);
// }
// }
// }
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;
const _top = screenHeight / 16;
setTop(_top);
// <640
} else {
const _top = screenHeight / 2.5;
const _top = screenHeight / 5.5;
setTop(_top);
}
const _left = laptopWidth - screenWidth;
const _width = screenWidth + _left * 2;
const _left = (laptopWidth - screenWidth) * 1.1;
const _width = screenWidth + _left * 1.9;
setWidth(_width);
setLeft(_left);
}
}
const handleOnExploreFloorClick = (
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
) => {
e.stopPropagation();
if (!currentHoveredFloor) return;
// setModal(
// <WingFloorModal
// currentFloor={currentHoveredFloor}
// floorApartments={currentHoveredApartments}
// />
// );
setIsDescriptionFloorMobile(false);
};
// 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);
// }
// }
useEffect(() => {
handleResize();
window.addEventListener("resize", handleResize);
@@ -245,16 +313,16 @@ 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 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 "
style={{ right: `${isFloorSidebar ? "0" : "-50%"}` }}
@@ -302,7 +370,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 &&
currentHoveredFloor &&
isWrapperHovered
@@ -323,8 +391,27 @@ const SequenceWing = () => {
floorApartments={currentHoveredApartments}
/>
</div>
{/* */}
<div
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out lg:hidden flex ${
currentHoveredFloor?.floor !== skyGardenFloor &&
currentHoveredFloor &&
isWrapperHovered
? "opacity-100"
: "opacity-0"
}`}
style={{
top: mousePos[1],
left: `${mousePos[0]}px`,
}}
>
<MobileFloorDescription
isLeft={isLeft}
onClick={handleOnExploreFloorClick}
descriptionFloor={currentHoveredFloor}
floorApartments={currentHoveredApartments}
/>
</div>
{/* <div
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out ${
isDescriptionFloorMobile ? "opacity-100" : "opacity-0"
}`}
@@ -339,7 +426,7 @@ const SequenceWing = () => {
descriptionFloor={currentHoveredFloor}
floorApartments={currentHoveredApartments}
/>
</div>
</div> */}
<img
width={`${width}px`}
@@ -63,6 +63,62 @@ const LayoutOptions = () => {
setPerPage(_perPage);
}
// useEffect(() => {
// const localStorageToken = `${localStorage.getItem("ACCESS_TOKEN")}`;
// const getApartments = (token: string) =>
// getFilteredApartments(
// token,
// setApartments,
// roveHomeTypeCheckboxes,
// apartmentTypeCheckboxes,
// debouncedSliders,
// switchers,
// viewCheckboxes,
// sortList,
// pageInitial,
// perPage
// );
// setIsLoading(true);
// getApartments(localStorageToken)
// .then(() => {
// setIsLoading(false);
// })
// .catch((error) => {
// const errorStatus = error.response.status;
// if (errorStatus === 401) {
// updateAccessToken()
// .then((token) => {
// if (token) {
// getApartments(token).then(() => {
// setIsLoading(false);
// });
// }
// })
// .catch((error) => {
// setIsLoading(false);
// console.log("first2");
// console.error("error", error);
// });
// } else {
// setIsLoading(false);
// console.log("first");
// console.error("error", error);
// }
// });
// }, [
// setApartments,
// roveHomeTypeCheckboxes,
// apartmentTypeCheckboxes,
// debouncedSliders,
// switchers,
// viewCheckboxes,
// sortList,
// perPage,
// ]);
useEffect(() => {
const localStorageToken = `${localStorage.getItem("ACCESS_TOKEN")}`;
const getApartments = (token: string) =>
@@ -75,7 +131,7 @@ const LayoutOptions = () => {
switchers,
viewCheckboxes,
sortList,
pageInitial,
page,
perPage
);
@@ -117,6 +173,7 @@ const LayoutOptions = () => {
viewCheckboxes,
sortList,
perPage,
page,
]);
return (