marks filters + circle distance fix

2024-04-08 18:27:48 +05:00
parent 59e872e714
commit f48b8fa998
22 changed files with 127 additions and 199 deletions
@@ -5,10 +5,8 @@ interface DistanceCircleProps {
 const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
  return (
    <svg
-      className="z-50 transition-transform duration-300 ease-in-out"
-      style={{ transform: `scale(${(selectedRange * 0.75) / 800})` }}
-      width="1600"
-      height="1600"
+      className="transition-[width] duration-300 ease-in-out"
+      width={(1600 * selectedRange) / 850}
      viewBox="0 0 1600 1600"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
@@ -20,7 +18,7 @@ const DistanceCircle = ({ selectedRange }: DistanceCircleProps) => {
        fill="url(#paint0_radial_193_12559)"
        fillOpacity="0.6"
        stroke="white"
-        strokeWidth={(3 * 800) / selectedRange}
+        strokeWidth={(3 * 850) / selectedRange}
      />
      <defs>
        <radialGradient
@@ -1,61 +1,39 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { environments, transports } from "../../consts/infrastructure";
 import InputRange from "./InputRange";
-
-interface IFilter {
-  infrastructureId: string;
-  distanceStage: number;
-}
-
-const data: IFilter[] = [
-  { infrastructureId: "1", distanceStage: 1 },
-  { infrastructureId: "1", distanceStage: 2 },
-  { infrastructureId: "2", distanceStage: 3 },
-  { infrastructureId: "2", distanceStage: 4 },
-  { infrastructureId: "2", distanceStage: 5 },
-  { infrastructureId: "3", distanceStage: 6 },
-  { infrastructureId: "3", distanceStage: 7 },
-  { infrastructureId: "3", distanceStage: 8 },
-  { infrastructureId: "4", distanceStage: 9 },
-  { infrastructureId: "4", distanceStage: 10 },
-  { infrastructureId: "5", distanceStage: 11 },
-  { infrastructureId: "5", distanceStage: 12 },
-  { infrastructureId: "5", distanceStage: 13 },
-  { infrastructureId: "6", distanceStage: 14 },
-  { infrastructureId: "6", distanceStage: 1 },
-  { infrastructureId: "7", distanceStage: 1 },
-];
+import { Mark } from "../../types/Mark";

 interface IInfrastructureFiltersProps {
  setSelectedRange: React.Dispatch<React.SetStateAction<number>>;
+  setFilteredMarks: React.Dispatch<React.SetStateAction<Mark[]>>;
  selectedRange: number;
+  marks: Mark[];
 }

 const InfrastructureFilters = ({
  setSelectedRange,
+  setFilteredMarks,
  selectedRange,
+  marks,
 }: IInfrastructureFiltersProps) => {
  const [filter, setFilter] = useState("");
  function handleOnFilterClick(
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ): void {
-    const infrastructureId = event.currentTarget.dataset.set;
-    if (!infrastructureId) return;
+    const infrastructureFilter = event.currentTarget.dataset.set;
+    if (!infrastructureFilter) return;

-    setFilter(infrastructureId);
+    const filteredMarks = marks.filter(
+      (mark) => mark.icon === infrastructureFilter
+    );
+    setFilteredMarks(filteredMarks);
+    setFilter(infrastructureFilter);
  }

  const handleOnInputRangeChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => setSelectedRange(Number(event.target.value));

-  useEffect(() => {
-    const _distanceRange = (selectedRange - 150) / 50;
-    const filteredData = data.filter((d) => d.infrastructureId === filter && d.distanceStage === _distanceRange);
-
-    console.log("filteredData", filteredData);
-  }, [filter]);
-
  return (
    <>
      <div>
@@ -64,11 +42,11 @@ const InfrastructureFilters = ({
        <div className="flex flex-col gap-2 mb-8 border-b border-[#9595A2] pb-8">
          {environments.map((env) => (
            <button
-              data-set={env.id}
+              data-set={env.type}
              onClick={handleOnFilterClick}
              key={env.id}
              className={`text-white w-fit ${
-                filter !== env.id
+                filter !== env.type
                  ? "opacity-60 border-b-2 border-b-transparent"
                  : "border-b-2 border-b-[#0079C2]"
              } flex gap-2 font-medium text-sm px-[2px] py-2 transition-all duration-300 ease-in-out`}
@@ -82,11 +60,11 @@ const InfrastructureFilters = ({
          <h3 className="text-[18px] mb-5">Транспорт:</h3>
          {transports.map((trans) => (
            <button
-              data-set={trans.id}
+              data-set={trans.type}
              onClick={handleOnFilterClick}
              key={trans.id}
              className={`text-white w-fit ${
-                filter !== trans.id
+                filter !== trans.type
                  ? "opacity-60 border-b-2 border-b-transparent"
                  : "border-b-2 border-b-[#0079C2]"
              } flex gap-2 font-medium text-sm px-[2px] py-2 transition-all duration-300 ease-in-out`}
@@ -1,20 +1,17 @@
+import { Mark } from "../types/Mark";
+import MarkFoodIcon from "./icons/marks/MarkFoodIcon";
 import MarkShopIcon from "./icons/marks/MarkShopIcon";

-interface Mark {
-  id: string;
-  icon: string;
-  x: number;
-  y: number;
-}
-
 interface MarksContainerProps {
  marks: Mark[];
+  filteredMarks: Mark[];
  markWidth?: number;
  markHeigth?: number;
 }

 function MarksContainer({
  marks,
+  filteredMarks,
  markWidth = 64,
  markHeigth = 64,
 }: MarksContainerProps) {
@@ -29,11 +26,17 @@ function MarksContainer({
    >
      {marks.map((mark) => {
        let icon;
+        const isFiltered = filteredMarks.find(
+          (filteredMark) => filteredMark.id === mark.id
+        );

        switch (mark.icon) {
          case "shop":
            icon = <MarkShopIcon />;
            break;
+          case "food":
+            icon = <MarkFoodIcon />;
+            break;

          default:
            break;
@@ -41,6 +44,9 @@ function MarksContainer({

        return (
          <svg
+            className={`transition-opacity duration-300 ease-in-out ${
+              isFiltered ? "opacity-0" : "opacity-100"
+            }`}
            x={mark.x}
            y={mark.y}
            width={markWidth}
@@ -0,0 +1,24 @@
+function MarkFoodIcon() {
+  return (
+    <svg
+      width="64"
+      height="65"
+      viewBox="0 0 64 65"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M43.8371 46.5041V37.6141M43.8371 37.6141V18.0561C42.0591 16.8708 36.7251 24.8125 36.7251 37.6141H43.8371Z"
+        stroke="white"
+        strokeWidth="2.2225"
+        strokeLinecap="square"
+      />
+      <path
+        d="M24.9457 46.5043V47.6156H27.1682V46.5043H24.9457ZM27.1682 18.9453C27.1682 18.3316 26.6706 17.8341 26.0569 17.8341C25.4432 17.8341 24.9457 18.3316 24.9457 18.9453H27.1682ZM32.5022 18.9453C32.5022 18.3316 32.0046 17.8341 31.3909 17.8341C30.7772 17.8341 30.2797 18.3316 30.2797 18.9453H32.5022ZM21.8342 18.9453C21.8342 18.3316 21.3366 17.8341 20.7229 17.8341C20.1092 17.8341 19.6117 18.3316 19.6117 18.9453H21.8342ZM27.1682 46.5043V28.7243H24.9457V46.5043H27.1682ZM27.1682 28.7243V18.9453H24.9457V28.7243H27.1682ZM26.0569 29.8356H28.7239V27.6131H26.0569V29.8356ZM28.7239 28.7243C28.7239 29.8356 28.7259 29.8356 28.7279 29.8356C28.7286 29.8356 28.7306 29.8355 28.732 29.8355C28.7348 29.8355 28.7376 29.8355 28.7404 29.8354C28.7461 29.8354 28.752 29.8352 28.7582 29.8351C28.7704 29.8347 28.7834 29.8341 28.7972 29.8333C28.8247 29.8317 28.8553 29.829 28.8887 29.825C28.9555 29.8168 29.0333 29.8029 29.12 29.7802C29.2949 29.7344 29.4998 29.6543 29.7201 29.5197C30.1651 29.2478 30.6239 28.784 31.033 28.0341C31.8328 26.5676 32.5022 23.8995 32.5022 18.9453H30.2797C30.2797 23.7702 29.6155 25.9915 29.0818 26.9698C28.8241 27.4423 28.6162 27.5897 28.5612 27.6233C28.5314 27.6415 28.528 27.6378 28.557 27.6302C28.5708 27.6266 28.5913 27.6223 28.619 27.6189C28.6329 27.6172 28.6485 27.6157 28.6659 27.6147C28.6747 27.6142 28.6839 27.6138 28.6935 27.6135C28.6983 27.6134 28.7033 27.6132 28.7083 27.6132C28.7109 27.6131 28.7134 27.6131 28.716 27.6131C28.7173 27.6131 28.7193 27.6131 28.7199 27.6131C28.7219 27.6131 28.7239 27.6131 28.7239 28.7243ZM26.0569 27.6131H23.3899V29.8356H26.0569V27.6131ZM23.3899 28.7243C23.3899 27.6131 23.3919 27.6131 23.3939 27.6131C23.3945 27.6131 23.3965 27.6131 23.3978 27.6131C23.4004 27.6131 23.4029 27.6131 23.4055 27.6132C23.4105 27.6132 23.4155 27.6134 23.4203 27.6135C23.4299 27.6138 23.4391 27.6142 23.4479 27.6147C23.4653 27.6157 23.4809 27.6172 23.4948 27.6189C23.5225 27.6223 23.543 27.6266 23.5568 27.6302C23.5858 27.6378 23.5824 27.6415 23.5526 27.6233C23.4976 27.5897 23.2897 27.4423 23.032 26.9698C22.4983 25.9915 21.8342 23.7702 21.8342 18.9453H19.6117C19.6117 23.8995 20.281 26.5676 21.0808 28.0341C21.4899 28.784 21.9487 29.2478 22.3937 29.5197C22.614 29.6543 22.8189 29.7344 22.9938 29.7802C23.0805 29.8029 23.1583 29.8168 23.2251 29.825C23.2585 29.829 23.2891 29.8317 23.3166 29.8333C23.3304 29.8341 23.3434 29.8347 23.3556 29.8351C23.3618 29.8352 23.3677 29.8354 23.3734 29.8354C23.3762 29.8355 23.379 29.8355 23.3818 29.8355C23.3832 29.8355 23.3852 29.8356 23.3859 29.8356C23.3879 29.8356 23.3899 29.8356 23.3899 28.7243ZM23.3899 29.8356C23.3899 29.8356 23.3899 28.7243 23.3899 27.6131C23.3899 27.6131 23.3899 27.6131 23.3899 28.7243C23.3899 29.8356 23.3899 29.8356 23.3899 29.8356C23.3899 28.7243 23.3899 27.6131 23.3899 27.6131V29.8356ZM28.7239 27.6131C28.7239 27.6131 28.7239 28.7243 28.7239 29.8356C28.7239 29.8356 28.7239 29.8356 28.7239 28.7243C28.7239 27.6131 28.7239 27.6131 28.7239 27.6131C28.7239 28.7243 28.7239 29.8356 28.7239 29.8356V27.6131Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export default MarkFoodIcon;
@@ -3,8 +3,8 @@ function MarkShopIcon() {
    <path
      d="M26.4442 25.1668H23.7775C22.3047 25.1668 21.1108 26.3607 21.1108 27.8334V42.0557C21.1108 43.5284 22.3047 44.7223 23.7775 44.7223H39.7775C41.2503 44.7223 42.4442 43.5284 42.4442 42.0557V27.8334C42.4442 26.3607 41.2503 25.1668 39.7775 25.1668H37.1108M26.4442 25.1668V29.6112M26.4442 25.1668H37.1108M26.4442 25.1668V23.389C26.4442 22.6886 26.5821 21.9951 26.8501 21.348C27.1182 20.7009 27.511 20.113 28.0063 19.6178C28.5015 19.1225 29.0895 18.7297 29.7365 18.4616C30.3836 18.1936 31.0771 18.0557 31.7775 18.0557C32.4779 18.0557 33.1714 18.1936 33.8185 18.4616C34.4656 18.7297 35.0535 19.1225 35.5487 19.6178C36.044 20.113 36.4368 20.7009 36.7049 21.348C36.9729 21.9951 37.1108 22.6886 37.1108 23.389V25.1668M37.1108 25.1668V29.6112"
      stroke="white"
-      stroke-width="2.96296"
-      stroke-linecap="square"
+      strokeWidth="2.96296"
+      strokeLinecap="square"
    />
  );
 }
@@ -1,23 +1,23 @@
-import BusIcon from "../icons/BusIcon";
-import EducationIcon from "../icons/EducationIcon";
-import HealthyIcon from "../icons/HealthyIcon";
-import MallIcon from "../icons/MallIcon";
-import RestourauntIcon from "../icons/RestourantIcon";
-import SportIcon from "../icons/SportIcon";
-import TramIcon from "../icons/TramIcon";
+import BusIcon from "../components/icons/BusIcon";
+import EducationIcon from "../components/icons/EducationIcon";
+import HealthyIcon from "../components/icons/HealthyIcon";
+import MallIcon from "../components/icons/MallIcon";
+import RestourauntIcon from "../components/icons/RestourantIcon";
+import SportIcon from "../components/icons/SportIcon";
+import TramIcon from "../components/icons/TramIcon";
 import { IInfrastructure } from "../types/Infrastructure";

 export const environments: IInfrastructure[] = [
-  { id: "1", icon: <MallIcon />, label: "Торговые центры" },
-  { id: "2", icon: <RestourauntIcon />, label: "Рестораны" },
-  { id: "3", icon: <HealthyIcon />, label: "Здоровье" },
-  { id: "4", icon: <EducationIcon />, label: "Образование" },
-  { id: "5", icon: <SportIcon />, label: "Спорт" },
+  { id: "1", icon: <MallIcon />, label: "Торговые центры", type: "shop" },
+  { id: "2", icon: <RestourauntIcon />, label: "Рестораны", type: "food" },
+  { id: "3", icon: <HealthyIcon />, label: "Здоровье", type: "heathy" },
+  { id: "4", icon: <EducationIcon />, label: "Образование", type: "education" },
+  { id: "5", icon: <SportIcon />, label: "Спорт", type: "sport" },
 ];

 export const transports: IInfrastructure[] = [
-  { id: "6", icon: <BusIcon />, label: "Автобус" },
-  { id: "7", icon: <TramIcon />, label: "Трамвай" },
+  { id: "6", icon: <BusIcon />, label: "Автобус", type: "bus" },
+  { id: "7", icon: <TramIcon />, label: "Трамвай", type: "tram" },
 ];

 export const rangeStart = 200;
@@ -2,7 +2,6 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import VirtualTourPage from "./pages/VirtualTourPage.tsx";
-import InfrastructurePage from "./pages/InfrastructurePage.tsx";
 import MainPage from "./pages/MainPage.tsx";
 import Infra2Page from "./pages/Infra2Page.tsx";

@@ -15,10 +14,6 @@ const router = createBrowserRouter([
    path: "/virtual-tour",
    element: <VirtualTourPage />,
  },
-  {
-    path: "/infrastructure",
-    element: <InfrastructurePage />,
-  },
  {
    path: "/infra2",
    element: <Infra2Page />,
@@ -18,9 +18,21 @@
    "icon": "shop"
  },
  {
-    "id": "shop_4",
-    "x": 300,
-    "y": 500,
-    "icon": "shop"
+    "id": "food_1",
+    "x": 390,
+    "y": 590,
+    "icon": "food"
+  },
+  {
+    "id": "food_2",
+    "x": 590,
+    "y": 990,
+    "icon": "food"
+  },
+  {
+    "id": "food_3",
+    "x": 1190,
+    "y": 990,
+    "icon": "food"
  }
 ]
@@ -1,22 +1,20 @@
 import { useEffect, useState } from "react";
 import MarksContainer from "../components/MarksContainer";
 import _marks from "./../marks.json";
-
-interface Mark {
-  id: string;
-  icon: string;
-  x: number;
-  y: number;
-  width?: number;
-  heigth?: number;
-}
+import { Mark } from "../types/Mark";
+import DistanceCircle from "../components/DistanceCircle";
+import Button from "../components/Button";
+import InfrastructureFilters from "../components/InfrastructurePage/InfrastructureFilters";
+import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
+import CrossIcon from "../components/icons/CrossIcon";

 const marks = _marks as Mark[];

 function Infra2Page() {
+  const [selectedRange, setSelectedRange] = useState<number>(800);
  const [width, setWidth] = useState<number>();
-  // const [heigth, setHeigth] = useState<number>();
  const [top, setTop] = useState<number>();
+  const [filteredMarks, setFilteredMarks] = useState(marks);

  function handleResize() {
    setWidth(window.innerWidth);
@@ -38,11 +36,28 @@ function Infra2Page() {
        <img
          width={`${width}px`}
          height={`${width}px`}
-          src="/images/Infra/NKS_Infra_Orto_Box.png"
+          src="/images/Infra/InfraOrto.jpg"
          alt=""
          className=""
        />
-        <MarksContainer marks={marks} />
+        <MarksContainer marks={marks} filteredMarks={filteredMarks} />
+        <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center overflow-clip">
+          <DistanceCircle selectedRange={selectedRange} />
+        </div>
+      </div>
+      <div className="absolute h-full top-0 left-0 z-[99999999] w-[260px] bg-[#002347] bg-opacity-90 select-none px-6 py-5 flex flex-col justify-between gap-8">
+        <div className="flex flex-col gap-3">
+          <div className="flex justify-end">
+            <CrossIcon />
+          </div>
+          <InfrastructureFilters
+            setFilteredMarks={setFilteredMarks}
+            setSelectedRange={setSelectedRange}
+            marks={marks}
+            selectedRange={selectedRange}
+          />
+        </div>
+        <Button text="Генплан" icon={<ArrowLeftIcon />} widthFull />
      </div>
    </div>
  );
@@ -1,111 +0,0 @@
-import { useEffect, useState } from "react";
-import ImageMarker from "react-image-marker";
-import Button from "../components/Button";
-import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
-import CrossIcon from "../icons/CrossIcon";
-import InfrastructureFilters from "../components/InfrastructurePage/InfrastructureFilters";
-import Mark from "../components/Mark";
-import DistanceCircle from "../components/DistanceCircle";
-
-const markers = [
-  {
-    top: 40,
-    left: 40,
-  },
-];
-
-function InfrastructurePage() {
-  const [selectedRange, setSelectedRange] = useState<number>(800);
-  const [width, setWidth] = useState<number>();
-  const [top, setTop] = useState<number>();
-
-  function handleResize() {
-    setWidth(window.innerWidth);
-    setTop(window.innerWidth / 2 - window.innerHeight / 2);
-  }
-
-  useEffect(() => {
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  return (
-    <div className="h-screen overflow-hidden">
-      {/* <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center overflow-clip"> */}
-      {/*  */}
-      {/* <Marks /> */}
-      {/* </div> */}
-      <div className="absolute h-full top-0 left-0 z-[99999999] w-[260px] bg-[#002347] bg-opacity-90 select-none px-6 py-5 flex flex-col justify-between gap-8">
-        <div className="flex flex-col gap-3">
-          <div className="flex justify-end">
-            <CrossIcon />
-          </div>
-          <InfrastructureFilters
-            setSelectedRange={setSelectedRange}
-            selectedRange={selectedRange}
-          />
-        </div>
-        <Button text="Генплан" icon={<ArrowLeftIcon />} widthFull />
-      </div>
-      <div
-        className="absolute left-0"
-        style={{ width: `${width}px`, height: `${width}px`, top: `-${top}px` }}
-      >
-        {/* <ImageMarker
-          src="/images/Infra/NKS_Infra_Orto_Box.png"
-          markers={markers}
-          markerComponent={Mark}
-        /> */}
-        <img
-          width={`${width}px`}
-          height={`${width}px`}
-          src="/images/Infra/NKS_Infra_Orto_Box.png"
-          alt=""
-          className=""
-        />
-        <div className="absolute top-0 left-0 w-full h-full">
-          <Mark x={260} y={160} />
-        </div>
-        <div className="absolute top-0">
-          <DistanceCircle selectedRange={selectedRange} />
-        </div>
-      </div>
-      {/* <div>
-        <svg
-          className={`absolute object-cover h-full w-full top-0 left-0 select-none pointer-events-none opacity-100`}
-          width="3840"
-          height="2160"
-          viewBox="0 0 3840 2160"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <svg x="2338" y="1275">
-            <rect width="36" height="36" rx="18" fill="white" />
-            <rect x="2" y="2" width="32" height="32" rx="16" fill="#002347" />
-            <path
-              d="M15 14H13.5C12.6716 14 12 14.6716 12 15.5V23.5C12 24.3284 12.6716 25 13.5 25H22.5C23.3284 25 24 24.3284 24 23.5V15.5C24 14.6716 23.3284 14 22.5 14H21M15 14V16.5M15 14H21M15 14V13C15 12.606 15.0776 12.2159 15.2284 11.8519C15.3791 11.488 15.6001 11.1573 15.8787 10.8787C16.1573 10.6001 16.488 10.3791 16.8519 10.2284C17.2159 10.0776 17.606 10 18 10C18.394 10 18.7841 10.0776 19.1481 10.2284C19.512 10.3791 19.8427 10.6001 20.1213 10.8787C20.3999 11.1573 20.6209 11.488 20.7716 11.8519C20.9224 12.2159 21 12.606 21 13V14M21 14V16.5"
-              stroke="white"
-              strokeWidth="1.66667"
-              strokeLinecap="square"
-            />
-            <g filter="url(#filter0_d_23_3580)">
-              <rect x="16" y="36" width="2" height="52" fill="white" />
-            </g>
-            <g filter="url(#filter1_d_23_3580)">
-              <circle cx="17" cy="90" r="3" fill="white" />
-            </g>
-          </svg>
-        </svg>
-      </div>
-
-      <img
-        src={`/images/maps/Frame.svg`}
-        alt=""
-        className={`absolute object-cover h-full w-full top-0 left-0 select-none pointer-events-none opacity-100`}
-      /> */}
-    </div>
-  );
-}
-
-export default InfrastructurePage;
@@ -2,6 +2,7 @@ interface IInfrastructure {
  id: string;
  icon: React.ReactNode;
  label: string;
+  type: string;
 }

 export type { IInfrastructure };
@@ -0,0 +1,10 @@
+interface Mark {
+  id: string;
+  icon: string;
+  x: number;
+  y: number;
+  width?: number;
+  heigth?: number;
+}
+
+export type { Mark };