From 137037a17e37bc58fc48464fc3b8363bd1674e9a Mon Sep 17 00:00:00 2001
From: Platon Yasev <yasevplaton@gmail.com>
Date: Sun, 19 Feb 2023 20:20:15 +0300
Subject: [PATCH] Get points layer from new source

---
 src/Map/MapComponent.jsx        |   5 +-
 src/Map/Points.jsx              | 109 ++++++++++----------------------
 src/Map/Popup.jsx               |  25 ++------
 src/Map/layers-config.js        |  31 ++++-----
 src/modules/Sidebar/Sidebar.jsx |   6 +-
 5 files changed, 62 insertions(+), 114 deletions(-)

diff --git a/src/Map/MapComponent.jsx b/src/Map/MapComponent.jsx
index 69a1f1e..135f6a7 100644
--- a/src/Map/MapComponent.jsx
+++ b/src/Map/MapComponent.jsx
@@ -5,7 +5,6 @@ import { Sidebar } from "../modules/Sidebar/Sidebar";
 import { Layers } from "./Layers";
 import { MapPopup } from "./Popup";
 import { Basemap } from "./Basemap";
-import { Legend } from "../modules/Sidebar/Legend";
 import { SignOut } from "../SignOut";
 import debounce from "lodash.debounce";
 
@@ -87,7 +86,7 @@ export const MapComponent = () => {
         }}
         dragRotate={false}
         ref={mapRef}
-        interactiveLayerIds={["point3", "point4", "point5"]}
+        interactiveLayerIds={["points"]}
         onClick={handleClick}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
@@ -109,7 +108,7 @@ export const MapComponent = () => {
 
         <Sidebar />
 
-        <Legend />
+        {/*<Legend />*/}
         <SignOut />
       </Map>
     </div>
diff --git a/src/Map/Points.jsx b/src/Map/Points.jsx
index 0a52b67..35dd922 100644
--- a/src/Map/Points.jsx
+++ b/src/Map/Points.jsx
@@ -1,11 +1,9 @@
 import { Layer, Source } from "react-map-gl";
 import { pointLayer } from "./layers-config";
 import { useLayersVisibility } from "../stores/useLayersVisibility";
-import { useActiveTypes } from "../stores/useActiveTypes";
-import { useGridSize } from "../stores/useGridSize";
-import { useMemo } from "react";
 import { useRateExpression } from "./useRateExpression";
 import { useModel } from "../stores/useModel";
+import { BASE_URL } from "../api";
 
 const usePointSizeScale = () => {
   const rate = useRateExpression();
@@ -37,35 +35,35 @@ const usePointSizeScale = () => {
 };
 
 export const Points = ({ rate: rateRange }) => {
-  const { gridSize } = useGridSize();
+  // const { gridSize } = useGridSize();
   const { isVisible } = useLayersVisibility();
-  const { activeTypes } = useActiveTypes();
-
-  const rate = useRateExpression();
-  const sizeScale = usePointSizeScale();
-
-  const filter = useMemo(() => {
-    let result = [
-      "all",
-      [">=", rate, rateRange[0]],
-      ["<=", rate, rateRange[1]],
-    ];
-
-    if (activeTypes.length) {
-      result = [
-        "all",
-        ["in", ["get", "category"], ["literal", activeTypes]],
-        [">=", rate, rateRange[0]],
-        ["<=", rate, rateRange[1]],
-      ];
-    }
-
-    return result;
-  }, [rate, rateRange, activeTypes]);
+  // const { activeTypes } = useActiveTypes();
+  //
+  // const rate = useRateExpression();
+  // const sizeScale = usePointSizeScale();
+  //
+  // const filter = useMemo(() => {
+  //   let result = [
+  //     "all",
+  //     [">=", rate, rateRange[0]],
+  //     ["<=", rate, rateRange[1]],
+  //   ];
+  //
+  //   if (activeTypes.length) {
+  //     result = [
+  //       "all",
+  //       ["in", ["get", "category"], ["literal", activeTypes]],
+  //       [">=", rate, rateRange[0]],
+  //       ["<=", rate, rateRange[1]],
+  //     ];
+  //   }
+  //
+  //   return result;
+  // }, [rate, rateRange, activeTypes]);
 
   const paintConfig = {
     ...pointLayer.paint,
-    "circle-radius": sizeScale,
+    // "circle-radius": sizeScale,
   };
 
   return (
@@ -74,62 +72,19 @@ export const Points = ({ rate: rateRange }) => {
         id="point3"
         type="vector"
         tiles={[
-          "https://postamates.spatiality.website/martin/public.point3/{z}/{x}/{y}.pbf",
-        ]}
-      >
-        <Layer
-          {...pointLayer}
-          id={"point3"}
-          source={"point3"}
-          source-layer={"public.point3"}
-          layout={{
-            ...pointLayer.layout,
-            visibility:
-              isVisible.points && gridSize === "net_3" ? "visible" : "none",
-          }}
-          filter={filter}
-          paint={paintConfig}
-        />
-      </Source>
-      <Source
-        id="point4"
-        type="vector"
-        tiles={[
-          "https://postamates.spatiality.website/martin/public.point4/{z}/{x}/{y}.pbf",
-        ]}
-      >
-        <Layer
-          {...pointLayer}
-          id={"point4"}
-          source={"point4"}
-          source-layer={"public.point4"}
-          layout={{
-            ...pointLayer.layout,
-            visibility:
-              isVisible.points && gridSize === "net_4" ? "visible" : "none",
-          }}
-          filter={filter}
-          paint={paintConfig}
-        />
-      </Source>
-      <Source
-        id="point5"
-        type="vector"
-        tiles={[
-          "https://postamates.spatiality.website/martin/public.point5/{z}/{x}/{y}.pbf",
+          `${BASE_URL}/martin/public.service_placementpoint/{z}/{x}/{y}.pbf`,
         ]}
       >
         <Layer
           {...pointLayer}
-          id={"point5"}
-          source={"point5"}
-          source-layer={"public.point5"}
+          id={"points"}
+          source={"points"}
+          source-layer={"public.service_placementpoint"}
           layout={{
             ...pointLayer.layout,
-            visibility:
-              isVisible.points && gridSize === "net_5" ? "visible" : "none",
+            visibility: isVisible.points ? "visible" : "none",
           }}
-          filter={filter}
+          // filter={filter}
           paint={paintConfig}
         />
       </Source>
diff --git a/src/Map/Popup.jsx b/src/Map/Popup.jsx
index 6563dff..7e7786e 100644
--- a/src/Map/Popup.jsx
+++ b/src/Map/Popup.jsx
@@ -59,6 +59,7 @@ const gridConfig = [
 ];
 
 export const MapPopup = ({ feature, lat, lng, onClose }) => {
+  console.log(feature);
   const isPoint = feature.geometry.type === "Point";
   const config = isPoint ? pointConfig : gridConfig;
   const layout = isPoint
@@ -75,25 +76,13 @@ export const MapPopup = ({ feature, lat, lng, onClose }) => {
       closeOnClick={false}
     >
       <div>
-        {config.map((item) => {
-          const value = item.field ? feature.properties[item.field] : rate;
-
+        {Object.entries(feature.properties).map(([key, value]) => {
           return (
-            <Row className={twMerge("p-1")} key={item.field ?? "rate"}>
-              {item.field === "name" ? (
-                <Col span={24} className={"font-semibold text-center"}>
-                  {value}
-                </Col>
-              ) : (
-                <>
-                  <Col span={layout.keyCol} className={"font-semibold"}>
-                    {item.name}
-                  </Col>
-                  <Col span={layout.valueCol}>
-                    {item.formatter ? item.formatter(value) : value}
-                  </Col>
-                </>
-              )}
+            <Row className={twMerge("p-1")} key={key}>
+              <Col className={"font-semibold"} span={15}>
+                {key}
+              </Col>
+              <Col span={9}>{value}</Col>
             </Row>
           );
         })}
diff --git a/src/Map/layers-config.js b/src/Map/layers-config.js
index 44805a0..4733760 100644
--- a/src/Map/layers-config.js
+++ b/src/Map/layers-config.js
@@ -16,21 +16,22 @@ export const pointLayer = {
   type: "circle",
   layout: {},
   paint: {
-    "circle-color": [
-      "match",
-      ["get", "category"],
-      "kiosk",
-      pointColors.kiosk,
-      "mfc",
-      pointColors.mfc,
-      "library",
-      pointColors.library,
-      "dk",
-      pointColors.dk,
-      "sport",
-      pointColors.sport,
-      "black",
-    ],
+    // "circle-color": [
+    //   "match",
+    //   ["get", "category"],
+    //   "kiosk",
+    //   pointColors.kiosk,
+    //   "mfc",
+    //   pointColors.mfc,
+    //   "library",
+    //   pointColors.library,
+    //   "dk",
+    //   pointColors.dk,
+    //   "sport",
+    //   pointColors.sport,
+    //   "black",
+    // ],
+    "circle-color": "#a51eda",
     "circle-radius": 4,
     "circle-stroke-width": 0.4,
     "circle-stroke-color": "#fff",
diff --git a/src/modules/Sidebar/Sidebar.jsx b/src/modules/Sidebar/Sidebar.jsx
index 9e14c9d..bf12683 100644
--- a/src/modules/Sidebar/Sidebar.jsx
+++ b/src/modules/Sidebar/Sidebar.jsx
@@ -94,7 +94,7 @@ export const Sidebar = () => {
   };
 
   return (
-    <div className="absolute top-[20px] left-[20px] bg-white-background w-[300px] rounded-xl p-3 max-h-[calc(100vh-40px)] overflow-y-auto z-10">
+    <div className="absolute top-[20px] left-[20px] bg-white-background w-[300px] rounded-xl p-3 max-h-[calc(100%-40px)] overflow-y-auto z-10">
       <div className="space-y-5">
         <LayersVisibility />
         <RegionSelect />
@@ -107,9 +107,13 @@ export const Sidebar = () => {
             className={"mt-2"}
             onClick={handleExport}
             loading={isExporting}
+            disabled={true}
           >
             Экспорт данных
           </Button>
+          <Button type="primary" block className={"mt-2"} disabled={true}>
+            Взять в работу
+          </Button>
         </div>
       </div>
     </div>