pos fix start
This commit is contained in:
+2
-1
@@ -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
|
||||
|
||||
@@ -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 (
|
||||
|
||||
Reference in New Issue
Block a user