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

virtual tour + marker title

Browse Source
This commit is contained in:
zojgame
2024-06-21 16:47:30 +05:00
parent 07d460ea27
commit 22e04fd927
15 changed files with 457 additions and 588 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/favoritesPage/FavoriteSlider.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ const FavoritesSlider = ({ cards }: FavoritesSliderProps) => {
}, [cardRef.current]);
return (
<div className="w-[calc(100vw - 48px)] relative ">
<div className="w-[calc(100vw - 48px)] relative">
<div
className="absolute -left-2 z-30"
style={{ top: `${buttonTopPos}px` }}
client/src/components/icons/LogoIcon.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ const LogoIcon = () => {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_227_586)">
<g clipPath="url(#clip0_227_586)">
<path
d="M10.3982 0H0L2.49306 1.87928V22.1237L0 24H10.3982L7.90218 22.1237V1.87928L10.3982 0Z"
fill="currentColor"
client/src/components/icons/SearchIcon.tsx
+3 -3
View File
@@ -10,9 +10,9 @@ const SearchIcon = () => {
<path
d="M15.8332 15.8334L12.973 12.9785M12.973 12.9785C13.9084 12.0445 14.487 10.7533 14.487 9.327C14.487 6.47707 12.1767 4.16675 9.32676 4.16675C6.47683 4.16675 4.1665 6.47707 4.1665 9.327C4.1665 12.1769 6.47683 14.4873 9.32676 14.4873C10.7504 14.4873 12.0394 13.9108 12.973 12.9785Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
client/src/components/searchPage/LayoutCard.tsx
+39 -1
View File
@@ -2,6 +2,7 @@ import { useNavigate } from "react-router-dom";
import Button from "../Button";
import HeartIcon from "../icons/Heart";
import { IAparmentRes } from "../../types/apartmentsRes";
import { useEffect, useState } from "react";
interface LayoutCardProps {
apartmentCard: IAparmentRes;
@@ -19,6 +20,7 @@ const LayoutCard = ({ apartmentCard }: LayoutCardProps) => {
const wing = unit.split("-")[0] === "E" ? "East" : "West";
const unitNumber = unit.split("-")[1];
const totalArea = `${_totalArea}`.split(".").join(",");
const [isFavorite, setIsFavorite] = useState(false);
const navigate = useNavigate();
@@ -26,6 +28,41 @@ const LayoutCard = ({ apartmentCard }: LayoutCardProps) => {
navigate(`${id}`);
};
const handleOnFavoriteClick = () => {
const favorites = localStorage.getItem("Favorites");
if (!favorites) {
setIsFavorite(true);
const updatedFavorites = JSON.stringify([apartmentCard]);
localStorage.setItem("Favorites", updatedFavorites);
} else {
const _favorites = JSON.parse(favorites) as IAparmentRes[];
if (_favorites.some((apart) => apart.id === apartmentCard.id)) {
setIsFavorite(false);
const updatedFavorites = [..._favorites].filter(
(apart) => apart.id !== apartmentCard.id
);
const convertedFavorites = JSON.stringify(updatedFavorites);
localStorage.setItem("Favorites", convertedFavorites);
} else {
setIsFavorite(true);
const updatedFavorites = [..._favorites, apartmentCard];
const convertedFavorites = JSON.stringify(updatedFavorites);
localStorage.setItem("Favorites", convertedFavorites);
}
}
};
useEffect(() => {
const favorites = localStorage.getItem("Favorites");
if (favorites) {
const _isFavorite = (JSON.parse(favorites) as IAparmentRes[]).some(
(apart) => apart.id === apartmentCard.id
);
setIsFavorite(_isFavorite);
}
}, [apartmentCard.id]);
return (
<div
className="bg-white flex flex-col p-4 rounded-2xl cursor-pointer select-none"
@@ -49,7 +86,8 @@ const LayoutCard = ({ apartmentCard }: LayoutCardProps) => {
</div>
</div>
<Button
icon={<HeartIcon isFilled={false} />}
onClick={handleOnFavoriteClick}
icon={<HeartIcon isFilled={isFavorite} />}
buttonType="favorite"
isCircleRounded
/>
client/src/components/searchPage/LayoutOptions.tsx
+7 -3
View File
@@ -1,3 +1,4 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect } from "react";
import LayoutCard from "./LayoutCard";
import SortButton from "./SortButton";
@@ -22,6 +23,7 @@ import { ISort } from "../../types/sortType";
const getFilteredApartments = async (
zohoToken: string | null,
setApartments: (apartments: IAparmentRes[]) => void,
apartments: IAparmentRes[],
roveHomeTypeCheckboxes: ICheckbox[],
apartmentTypeCheckboxes: ICheckbox[],
multirangeSliders: IMultirangeSlider[],
@@ -90,7 +92,8 @@ const getFilteredApartments = async (
perPage
).then((data) => {
const apartmentsData = (data as IApartmentsRes).apartments;
setApartments(apartmentsData);
const updatedApartments = [...apartments, ...apartmentsData];
setApartments(updatedApartments);
});
return res;
@@ -109,7 +112,6 @@ const LayoutOptions = () => {
sortList,
setSortList,
page,
setPerPage,
setPage,
perPage,
} = useSearchFilters();
@@ -134,7 +136,6 @@ const LayoutOptions = () => {
function handleOnShowMoreBtnClick(): void {
const nextPage = page + 1;
setPage(nextPage);
// setPerPage(nextPage);
}
useEffect(() => {
@@ -143,6 +144,7 @@ const LayoutOptions = () => {
getFilteredApartments(
zohoToken,
setApartments,
apartments,
roveHomeTypeCheckboxes,
apartmentTypeCheckboxes,
debouncedSliders,
@@ -152,6 +154,7 @@ const LayoutOptions = () => {
page,
perPage
).catch((error) => {
console.log("error", error);
const errorStatus = error.response.status;
if (errorStatus === 401) {
@@ -160,6 +163,7 @@ const LayoutOptions = () => {
getFilteredApartments(
token,
setApartments,
apartments,
roveHomeTypeCheckboxes,
apartmentTypeCheckboxes,
debouncedSliders,
client/src/components/searchPage/SidebarFilters.tsx
+1 -20
View File
@@ -11,25 +11,6 @@ import {
initialSwitchers,
initialRoveHomeCheckboxes,
} from "../../consts/initialMasterplanFilters";
// import { IMultirangeSlider } from "../../types/multirangeSlider";
// function updateSlider(switcherTitle: string, sliders: IMultirangeSlider[]) {
// if(switcherTitle === 'Not the first floor'){
// const updatedSlider = sliders.map((sld) => {
// if(sld.title === 'Floor'){
// const floorSlider = initialSliders.find(sld1 => sld1.title === 'Floor');
// const minValue = floorSlider?.minValue;
// const isValueEqualMinValue = sld.minValue === minValue;
// //Если значение равно минимальному значение, то уменьшаем минимальное значение
// if(isValueEqualMinValue){
// return {...sld, startValue: minValue, minValue: minValue}
// }
// return
// }
// return sld
// })
// }
// }
const SidebarFilters = () => {
const {
@@ -149,7 +130,7 @@ const SidebarFilters = () => {
</div>
<div className="flex flex-col pt-6 w-full gap-8">
{multirangeSliders.map((slider) => (
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2" key={slider.id}>
<div className="flex justify-between items-center">
<p className="text-[#0D1922] text-s ">{slider.title}</p>
<p className="text-[#73787C] text-s">{slider.unit}</p>
client/src/components/virtualTour/LabelMarker.tsx
+29 -5
View File
@@ -27,6 +27,33 @@ const LabelMarker = ({ sphereLink, apartment }: LaberlMarkerProps) => {
<>
{
<Html position={sphereLink.labelPosition} center>
<div className="relative">
<div
className="bg-white w-9 h-9 rounded-full text-[#00BED7] flex items-center justify-center cursor-pointer peer"
onClick={handleOnClick}
>
<WalkHereIcon />
</div>
<div className="absolute -left-[66px] bottom-11 w-[168px] rounded-lg flex flex-col p-1 gap-1 items-center opacity-0 peer-hover:opacity-100 duration-300 ease-in-out transition-opacity">
{/* <div className="bg-[#D9D9D9] rounded-lg w-full h-full object-contain overflow-clip">
<img
src="/images/virtual-tour/studio1/previews/preview.jpg"
alt=""
/>
</div> */}
<div className="text-white font-semibold bg-[#0D192266] py-1 px-2 rounded-lg capitalize">
{currentSphere?.roomType}
</div>
</div>
</div>
</Html>
}
</>
);
};
{
/* <Html position={sphereLink.labelPosition} center>
<div className="relative">
<div
className="bg-white w-9 h-9 rounded-full text-[#00BED7] flex items-center justify-center cursor-pointer peer"
@@ -46,10 +73,7 @@ const LabelMarker = ({ sphereLink, apartment }: LaberlMarkerProps) => {
</div>
</div>
</div>
</Html>
}
</>
);
};
</Html> */
}
export default LabelMarker;