Merge branch 'feature/map_group_items' into 'dev'

map pvz and others

See merge request spatial/postamates_frontend!15

src/Map/Layers/Layers.jsx

@@ -38,14 +38,22 @@ export const Layers = () => {
       <SelectedRegion />
 
       <Source
-        id="rivals"
+        id="pvz"
         type="vector"
-        tiles={[`${BASE_URL}/martin/public.service_rivals/{z}/{x}/{y}.pbf`]}
+        tiles={[`${BASE_URL}/martin/public.service_post_and_pvz/{z}/{x}/{y}.pbf`]}
       >
         <PVZ />
+      </Source>
+
+      <Source
+        id="other"
+        type="vector"
+        tiles={[`${BASE_URL}/martin/public.service_otherobjects/{z}/{x}/{y}.pbf`]}
+      >
         <OtherPostamates />
       </Source>
 
+
       <Points />
     </>
   );

src/Map/Layers/OtherPostamates.jsx

@@ -3,8 +3,6 @@ import { otherPostamatesLayer } from "./layers-config";
 import { useLayersVisibility } from "../../stores/useLayersVisibility";
 import { LAYER_IDS } from "./constants";
 
-const typeFilter = ["==", ["get", "type"], "post"];
-
 export const OtherPostamates = () => {
   const { isVisible } = useLayersVisibility();
 
@@ -13,12 +11,11 @@ export const OtherPostamates = () => {
       <Layer
         {...otherPostamatesLayer}
         id={LAYER_IDS.other}
-        source={"rivals"}
+        source={"other"}
-        source-layer={"public.service_rivals"}
+        source-layer={"public.service_otherobjects"}
         layout={{
           visibility: isVisible[LAYER_IDS.other] ? "visible" : "none",
         }}
-        filter={typeFilter}
       />
     </>
   );

src/Map/Layers/PVZ.jsx

@@ -3,8 +3,6 @@ import { pvzPointLayer } from "./layers-config";
 import { useLayersVisibility } from "../../stores/useLayersVisibility";
 import { LAYER_IDS } from "./constants";
 
-const typeFilter = ["==", ["get", "type"], "pvz"];
-
 export const PVZ = () => {
   const { isVisible } = useLayersVisibility();
 
@@ -13,12 +11,11 @@ export const PVZ = () => {
       <Layer
         {...pvzPointLayer}
         id={LAYER_IDS.pvz}
-        source={"rivals"}
+        source={"pvz"}
-        source-layer={"public.service_rivals"}
+        source-layer={"public.service_post_and_pvz"}
         layout={{
           visibility: isVisible[LAYER_IDS.pvz] ? "visible" : "none",
         }}
-        filter={typeFilter}
       />
     </>
   );

src/Map/Legend.jsx

@@ -4,17 +4,17 @@ import {
   APPROVE_COLOR,
   CANCELLED_COLOR,
   OTHER_POSTAMATES_COLOR,
-  PENDING_COLOR,
+  PENDING_COLOR, PVZ_COLOR,
 } from "./Layers/layers-config";
 import {Logo} from "../icons/Logo.jsx";
-import {usePostamatesAndPvzGroups} from "../api.js";
+import {useOtherGroups, usePostamatesAndPvzGroups} from "../api.js";
 import {Collapse, Image} from "antd";
 import React from "react";
 
 const LegendPointItem = ({color, imageSrc, name}) => {
   return (
     <div className="flex gap-2 items-center">
-      {imageSrc && <Image src={imageSrc} width={12} height={12} preview={false}/>}
+      {imageSrc && <Image src={imageSrc} width={12} height={12} className='flex items-center' preview={false}/>}
       {color && !imageSrc && (
         <span
           className="rounded-xl w-3 h-3 inline-block"
@@ -50,7 +50,7 @@ const LegendColorRampItem = ({colors, name}) => {
   );
 };
 
-const LegendGroupItem = ({item}) => {
+const LegendGroupItem = ({item, color}) => {
   return (
     <Collapse
       bordered={false}
@@ -62,16 +62,14 @@ const LegendGroupItem = ({item}) => {
     >
       <Collapse.Panel
         key={"opened"}
-        header={<LegendPointItem name={item.name} imageSrc={item.image} color={OTHER_POSTAMATES_COLOR}/>}
+        header={<LegendPointItem name={item.name} imageSrc={item.image} color={color}/>}
-        showArrow={false}
       >
         <div className="ml-3 my-1">
           {item.groups && item.groups?.map((groupItem) => {
             return (
-              <div className="my-1">
+              <div key={groupItem.id} className="my-1">
                 <LegendPointItem
-                  key={groupItem.id}
+                  color={color}
-                  color={OTHER_POSTAMATES_COLOR}
                   imageSrc={groupItem.image}
                   name={groupItem.name}
                 />
@@ -88,6 +86,7 @@ const LegendGroupItem = ({item}) => {
 export function Legend() {
   const {mode} = useMode();
   const {data: postamatesAndPvzGroups} = usePostamatesAndPvzGroups();
+  const {data: otherGroups} = useOtherGroups();
 
   return (
     <div
@@ -130,7 +129,12 @@ export function Legend() {
 
       <div className="space-y-1">
         {postamatesAndPvzGroups && postamatesAndPvzGroups?.map((item) => {
-          return <LegendGroupItem key={item.id} item={item}/>
+          return <LegendGroupItem key={item.id} item={item} color={PVZ_COLOR}/>
+        })}
+      </div>
+      <div className="space-y-1">
+        {otherGroups && otherGroups?.map((item) => {
+          return <LegendGroupItem key={item.id} item={item} color={OTHER_POSTAMATES_COLOR}/>
         })}
       </div>
     </div>

src/api.js

@@ -149,6 +149,23 @@ export const usePostamatesAndPvzGroups = () => {
   );
 };
 
+export const getOtherGroups = async () => {
+  const { data } = await api.get(
+    `/api/other_object_groups/`
+  );
+
+  return data;
+};
+
+export const useOtherGroups = () => {
+  return useQuery(
+    ['other_groups'],
+    async () => {
+      return await getOtherGroups();
+    },
+  );
+};
+
 export const useLastMLRun = () => {
   return useQuery(
     ['last_time'],