diff --git a/src/components/FloorPlanDubaiMarina39_40.tsx b/src/components/FloorPlanDubaiMarina39_40.tsx index 7999607..65ef0c4 100644 --- a/src/components/FloorPlanDubaiMarina39_40.tsx +++ b/src/components/FloorPlanDubaiMarina39_40.tsx @@ -23,17 +23,17 @@ function FloorPlanDubaiMarinaUnit({ selectedUnit, }: { unit: Unit; - floor: number; + floor: string | null; d: string; textTransform: string; formattedUnitType: string; - selectedUnit: string | null; - onSelect: (unitNumber: string | null) => void; + selectedUnit: Unit | null; + onSelect: (unit: Unit | null) => void; }) { const { setPopup, setSide, setPosition, popup } = usePopupStore(); - function handleClick(unitNumber: string) { - window.open(`/complex/dubai-marina/${unitNumber}`, "_blank"); + function handleClick(unit: Unit) { + window.open(`/complex/dubai-marina/${unit.unitNo}`, "_blank"); } function handleMouseEnter() { @@ -96,17 +96,17 @@ function FloorPlanDubaiMarinaUnit({ !isMobile && handleClick(unit.unitNo)} + onClick={() => !isMobile && handleClick(unit)} onMouseEnter={!isMobile ? handleMouseEnter : undefined} onMouseLeave={() => !isMobile && setPopup(null)} onTouchStart={(e) => { - onSelect(unit.unitNo); + onSelect(unit); setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY }); handleMouseEnter(); }} className={clsx( "fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors", - selectedUnit === unit.unitNo && "!fill-[#00BED7]/40" + selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/40" )} d={d} /> @@ -119,7 +119,7 @@ function FloorPlanDubaiMarina39_41({ unitsOnFloor, ...props }: FloorPlanDubaiMarinaProps & React.SVGProps) { - const [selectedUnit, setSelectedUnit] = useState(null); + const [selectedUnit, setSelectedUnit] = useState(null); // const ref = useClickAway(() => setSelectedUnit(null)); @@ -148,7 +148,7 @@ function FloorPlanDubaiMarina39_41({ dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType } unit={unit} - floor={Number(selectedFloor!)} + floor={selectedFloor} d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d} textTransform={`translate(${dubaiMarinaMasks .get(unit.unitNo.slice(-2))! diff --git a/src/components/FloorPlanDubaiMarina41_42.tsx b/src/components/FloorPlanDubaiMarina41_42.tsx index 23aee78..599314d 100644 --- a/src/components/FloorPlanDubaiMarina41_42.tsx +++ b/src/components/FloorPlanDubaiMarina41_42.tsx @@ -23,17 +23,17 @@ function FloorPlanDubaiMarinaUnit({ selectedUnit, }: { unit: Unit; - floor: number; + floor: string | null; d: string; textTransform: string; formattedUnitType: string; - selectedUnit: string | null; - onSelect: (unitNumber: string | null) => void; + selectedUnit: Unit | null; + onSelect: (unit: Unit | null) => void; }) { const { setPopup, setSide, setPosition, popup } = usePopupStore(); - function handleClick(unitNumber: string) { - window.open(`/complex/dubai-marina/${unitNumber}`, "_blank"); + function handleClick(unit: Unit) { + window.open(`/complex/dubai-marina/${unit.unitNo}`, "_blank"); } function handleMouseEnter() { @@ -96,17 +96,17 @@ function FloorPlanDubaiMarinaUnit({ !isMobile && handleClick(unit.unitNo)} + onClick={() => !isMobile && handleClick(unit)} onMouseEnter={!isMobile ? handleMouseEnter : undefined} onMouseLeave={() => !isMobile && setPopup(null)} onTouchStart={(e) => { - onSelect(unit.unitNo); + onSelect(unit); setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY }); handleMouseEnter(); }} className={clsx( "fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors", - selectedUnit === unit.unitNo && "!fill-[#00BED7]/40" + selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/40" )} d={d} /> @@ -119,7 +119,7 @@ function FloorPlanDubaiMarina41_42({ unitsOnFloor, ...props }: FloorPlanDubaiMarinaProps & React.SVGProps) { - const [selectedUnit, setSelectedUnit] = useState(null); + const [selectedUnit, setSelectedUnit] = useState(null); // const ref = useClickAway(() => setSelectedUnit(null)); @@ -148,7 +148,7 @@ function FloorPlanDubaiMarina41_42({ dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType } unit={unit} - floor={Number(selectedFloor!)} + floor={selectedFloor} d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d} textTransform={`translate(${dubaiMarinaMasks .get(unit.unitNo.slice(-2))! diff --git a/src/components/FloorPlanDubaiMarina7_38.tsx b/src/components/FloorPlanDubaiMarina7_38.tsx index 300d73d..d208420 100644 --- a/src/components/FloorPlanDubaiMarina7_38.tsx +++ b/src/components/FloorPlanDubaiMarina7_38.tsx @@ -18,7 +18,7 @@ function FloorPlanDubaiMarina7_38({ unitsOnFloor, ...props }: FloorPlanDubaiMarinaProps & React.SVGProps) { - const [selectedUnit, setSelectedUnit] = useState(null); + const [selectedUnit, setSelectedUnit] = useState(null); // const ref = useClickAway(() => setSelectedUnit(null)); @@ -47,7 +47,7 @@ function FloorPlanDubaiMarina7_38({ dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType } unit={unit} - floor={Number(selectedFloor!)} + floor={selectedFloor} d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d} textTransform={`translate(${dubaiMarinaMasks .get(unit.unitNo.slice(-2))! @@ -73,17 +73,17 @@ export function FloorPlanDubaiMarina7_38Unit({ selectedUnit, }: { unit: Unit; - floor: number; + floor: string | null; d: string; textTransform: string; formattedUnitType: string; - selectedUnit: string | null; - onSelect: (unitNumber: string | null) => void; + selectedUnit: Unit | null; + onSelect: (unit: Unit | null) => void; }) { const { setPopup, setSide, setPosition, popup } = usePopupStore(); - function handleClick(unitNumber: string) { - window.open(`/complex/dubai-marina/${unitNumber}`, "_blank"); + function handleClick(unit: Unit) { + window.open(`/complex/dubai-marina/${unit.unitNo}`, "_blank"); } function handleMouseEnter() { @@ -146,17 +146,17 @@ export function FloorPlanDubaiMarina7_38Unit({ !isMobile && handleClick(unit.unitNo)} + onClick={() => !isMobile && handleClick(unit)} onMouseEnter={!isMobile ? handleMouseEnter : undefined} onMouseLeave={() => !isMobile && setPopup(null)} onTouchStart={(e) => { - onSelect(unit.unitNo); + onSelect(unit); setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY }); handleMouseEnter(); }} className={clsx( "fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors", - selectedUnit === unit.unitNo && "!fill-[#00BED7]/40" + selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/40" )} d={d} /> diff --git a/src/components/FloorPlanDubaiMarina7_38Comb.tsx b/src/components/FloorPlanDubaiMarina7_38Comb.tsx index 6cae308..b5e12ef 100644 --- a/src/components/FloorPlanDubaiMarina7_38Comb.tsx +++ b/src/components/FloorPlanDubaiMarina7_38Comb.tsx @@ -3,7 +3,7 @@ import { Unit } from "../types/IUnit"; import { usePopupStore } from "../stores/usePopupStore"; import UnitPopup from "./UnitPopup"; import { isMobile } from "react-device-detect"; -import { useEffect, useState } from "react"; +import { useState } from "react"; import clsx from "clsx"; import { dubaiMarinaMasks } from "../data/floor-plan-masks/dubai-marina_7-38_comb"; import { FloorPlanDubaiMarina7_38Unit } from "./FloorPlanDubaiMarina7_38"; @@ -14,14 +14,18 @@ import { filterDuplicateUnits } from "../utils/filterDuplicateUnits"; interface FloorPlanDubaiMarinaCombProps { selectedFloor: string | null; unitsOnFloor: Unit[]; + chosenUnit?: Unit; } function FloorPlanDubaiMarina7_38Comb({ selectedFloor, unitsOnFloor, + chosenUnit, ...props }: FloorPlanDubaiMarinaCombProps & React.SVGProps) { - const [selectedUnit, setSelectedUnit] = useState(null); + const [selectedUnit, setSelectedUnit] = useState( + chosenUnit || null + ); // const ref = useClickAway(() => setSelectedUnit(null)); @@ -82,7 +86,7 @@ function FloorPlanDubaiMarina7_38Comb({ onSelect={setSelectedUnit} formattedUnitType={maskData.formattedUnitType} unit={unit} - floor={Number(selectedFloor!)} + floor={selectedFloor} d={maskData.d} textTransform={`translate(${maskData.textTransform.join(" ")})`} /> @@ -93,7 +97,7 @@ function FloorPlanDubaiMarina7_38Comb({ onSelect={setSelectedUnit} formattedUnitType={maskData.formattedUnitType} unit={unit} - floor={Number(selectedFloor!)} + floor={selectedFloor} d={maskData.d} textTransform={`translate(${maskData.textTransform.join(" ")})`} /> @@ -114,18 +118,18 @@ function FloorPlanDubaiMarina7_38CombUnit({ onSelect, selectedUnit, }: { - unit: Unit; - floor: number; d: string; textTransform: string; + floor: string | null; + unit: Unit; formattedUnitType: string; - selectedUnit: string | null; - onSelect: (unitNumber: string | null) => void; + selectedUnit: Unit | null; + onSelect: (unit: Unit | null) => void; }) { - const { setPopup, setSide, setPosition, popup } = usePopupStore(); + const { setPopup, setSide, setPosition } = usePopupStore(); - function handleClick(unitNumber: string) { - window.open(`/complex/dubai-marina/${unitNumber}`, "_blank"); + function handleClick(unit: Unit) { + window.open(`/complex/dubai-marina/${unit.unitNo}`, "_blank"); } function handleMouseEnter() { @@ -163,9 +167,9 @@ function FloorPlanDubaiMarina7_38CombUnit({ // ); // }, [selectedUnit, setPopup, setSide, unit]); - useEffect(() => { - if (!popup) onSelect(null); - }, [onSelect, popup]); + // useEffect(() => { + // if (!popup) onSelect(null); + // }, [onSelect, popup]); // const ref = useClickAway( // () => !!selectedUnit && setPopup(null) @@ -188,17 +192,17 @@ function FloorPlanDubaiMarina7_38CombUnit({ !isMobile && handleClick(unit.unitNo)} + onClick={() => !isMobile && handleClick(unit)} onMouseEnter={!isMobile ? handleMouseEnter : undefined} onMouseLeave={() => !isMobile && setPopup(null)} onTouchStart={(e) => { - onSelect(unit.unitNo); + onSelect(unit); setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY }); handleMouseEnter(); }} className={clsx( "fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors", - selectedUnit === unit.unitNo && "!fill-[#00BED7]/40" + selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/40" )} d={d} /> diff --git a/src/components/FloorPlanMarasiDriveEast.tsx b/src/components/FloorPlanMarasiDriveEast.tsx index 2761f25..2654a74 100644 --- a/src/components/FloorPlanMarasiDriveEast.tsx +++ b/src/components/FloorPlanMarasiDriveEast.tsx @@ -9,13 +9,21 @@ import clsx from "clsx"; interface FloorPlanMarasiDriveEastProps { selectedFloor: string | null; unitsOnFloor: Unit[]; + chosenUnit?: Unit; } function FloorPlanMarasiDriveEast({ selectedFloor, unitsOnFloor, + chosenUnit, }: FloorPlanMarasiDriveEastProps & React.SVGProps) { - const [selectedUnit, setSelectedUnit] = useState(null); + const [selectedUnit, setSelectedUnit] = useState( + chosenUnit || null + ); + + useEffect(() => { + console.log("selectedUnit 1", selectedUnit); + }, [selectedUnit, chosenUnit]); return ( void; + selectedUnit: Unit | null; + onSelect: (unit: Unit | null) => void; }) { - function handleClick(unitNumber: string) { - window.open(`/complex/marasi-drive/${unitNumber}`, "_blank"); + function handleClick(unit: Unit) { + window.open(`/complex/marasi-drive/${unit.unitNo}`, "_blank"); } - const { setPopup, setSide, setPosition, popup } = usePopupStore(); + const { setPopup, setSide, setPosition } = usePopupStore(); function handleMouseEnter() { if (floor === null) return; @@ -1227,9 +1235,13 @@ function MarasiDriveEastFloorPlanUnit({ ); } + // useEffect(() => { + // if (!popup) onSelect(null); + // }, [onSelect, popup]); + useEffect(() => { - if (!popup) onSelect(null); - }, [onSelect, popup]); + console.log("selectedUnit 2", selectedUnit); + }, [selectedUnit]); return ( @@ -1250,18 +1262,18 @@ function MarasiDriveEastFloorPlanUnit({ !isMobile && handleClick(unit.unitNo)} + onClick={() => !isMobile && handleClick(unit)} onMouseEnter={!isMobile ? handleMouseEnter : undefined} onMouseLeave={() => !isMobile && setPopup(null)} onTouchStart={(e) => { - onSelect(unit.unitNo); + onSelect(unit); setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY }); handleMouseEnter(); }} d={d} className={clsx( "fill-transparent hover:fill-[#00BED7]/20 transition-all cursor-pointer", - selectedUnit === unit.unitNo && "!fill-[#00BED7]/20" + selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/20" )} /> diff --git a/src/components/FloorPlanMarasiDriveWestLower.tsx b/src/components/FloorPlanMarasiDriveWestLower.tsx index bb38e96..3c21ef8 100644 --- a/src/components/FloorPlanMarasiDriveWestLower.tsx +++ b/src/components/FloorPlanMarasiDriveWestLower.tsx @@ -10,13 +10,17 @@ import { useEffect, useState } from "react"; interface FloorPlanMarasiDriveEastProps { selectedFloor: string | null; unitsOnFloor: Unit[]; + chosenUnit?: Unit; } function FloorPlanMarasiDriveEast({ selectedFloor, unitsOnFloor, + chosenUnit, }: FloorPlanMarasiDriveEastProps & React.SVGProps) { - const [selectedUnit, setSelectedUnit] = useState(null); + const [selectedUnit, setSelectedUnit] = useState( + chosenUnit || null + ); return ( diff --git a/src/components/OnFloorMask.tsx b/src/components/OnFloorMask.tsx new file mode 100644 index 0000000..eab0987 --- /dev/null +++ b/src/components/OnFloorMask.tsx @@ -0,0 +1,36 @@ +import { Unit } from "../types/IUnit"; +import FloorPlanMarasiDriveEast from "./FloorPlanMarasiDriveEast"; +import FloorPlanMarasiDriveWestLower from "./FloorPlanMarasiDriveWestLower"; +import FloorPlanMarasiDriveWestUpper from "./FloorPlanMarasiDriveWestUpper"; + +function OnFloorMask({ unit }: { unit: Unit }) { + if (unit.project === "Rove Home Marasi Drive") { + if (unit.wing === "East") { + return ( + + ); + } else if (unit.wing === "West") { + if (unit.floor >= 5 && unit.floor <= 21) { + return ( + + ); + } else if (unit.floor >= 24 && unit.floor <= 31) { + return ( + + ); + } + } + } +} + +export default OnFloorMask; diff --git a/src/components/UnitSlider.tsx b/src/components/UnitSlider.tsx index d3e8ecb..c8e9068 100644 --- a/src/components/UnitSlider.tsx +++ b/src/components/UnitSlider.tsx @@ -7,13 +7,16 @@ import ChevronLeftIcon from "./icons/ChevronLeftIcon"; import ChevronRightIcon from "./icons/ChevronRightIcon"; import { useSwipeable } from "react-swipeable"; import clsx from "clsx"; +import { Unit } from "../types/IUnit"; +import OnFloorMask from "./OnFloorMask"; interface UnitSliderProps { unitTypeVariant: string; complexName: string; + unit?: Unit; } // костыль: в Мараси 2 bedroom b ЕДИНСТВЕННАЯ НЕ ЗЕРКАЛЬНАЯ ХАТА среди всех -function UnitSlider({ unitTypeVariant, complexName }: UnitSliderProps) { +function UnitSlider({ unitTypeVariant, complexName, unit }: UnitSliderProps) { const [hasSide, setHasSide] = useState(false); const [selectedSide, setSelectedSide] = useState<"left" | "right">(); @@ -48,6 +51,12 @@ function UnitSlider({ unitTypeVariant, complexName }: UnitSliderProps) { trackMouse: true, }); + useEffect(() => { + if (unit) { + console.log("unit", unit); + } + }, [unit]); + return (
+
+ {unit && ( + + + + )} +
{!hasSide && @@ -263,6 +279,7 @@ function UnitSlider({ unitTypeVariant, complexName }: UnitSliderProps) { Layout )} + + {unit && ( + + )} {Array.from({ length: isLoft ? 3 : 2 }).map((_, index) => (
{ - console.log(unitNumber); - }, [unitNumber]); - - return ( - - {paths.map((path) => ( - - ))} - - ); -} - -export default DubaiMarinaOnFloorMask7_38Comb; diff --git a/src/pages/UnitPage.tsx b/src/pages/UnitPage.tsx index 97cfed1..f2eb9c4 100644 --- a/src/pages/UnitPage.tsx +++ b/src/pages/UnitPage.tsx @@ -103,6 +103,7 @@ function UnitPage() { : getUnitTypeVariantDubaiMarina(unit.unitNo, selectedFloor) } complexName={params.complexName!} + unit={unit} />