diff --git a/client/.env b/client/.env index 68309bb..e539974 100644 --- a/client/.env +++ b/client/.env @@ -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 diff --git a/client/src/api/urls.ts b/client/src/api/urls.ts index c207bbd..ddb8774 100644 --- a/client/src/api/urls.ts +++ b/client/src/api/urls.ts @@ -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`; diff --git a/client/src/components/complexPage/SequenceSlider.tsx b/client/src/components/complexPage/SequenceSlider.tsx index 77e144a..9578e2a 100644 --- a/client/src/components/complexPage/SequenceSlider.tsx +++ b/client/src/components/complexPage/SequenceSlider.tsx @@ -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"); } diff --git a/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx b/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx index 7d48fb0..8ee7862 100644 --- a/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx +++ b/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx @@ -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 ( <> diff --git a/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx b/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx index 82247f9..0f9be83 100644 --- a/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx +++ b/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx @@ -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( [] ); + const [isLeft, setIsLeft] = useState(false); const [isDescriptionFloorMobile, setIsDescriptionFloorMobile] = useState(false); @@ -122,57 +124,123 @@ const SequenceWing = () => { const handleMouseMove = ( e: 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> | 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> | any + ) => { + e.stopPropagation(); + if (!currentHoveredFloor) return; + // setModal( + // + // ); + 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(); - } else { - setModal(null); - } - }, [isLoading, setModal]); + // useEffect(() => { + // if (isLoading) { + // setModal(); + // } else { + // setModal(null); + // } + // }, [isLoading, setModal]); return ( -
+
{
- {/* */}
+ +
+ {/*
{ descriptionFloor={currentHoveredFloor} floorApartments={currentHoveredApartments} /> -
+
*/} { 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 (