diff --git a/src/Map/Layers/Layers.jsx b/src/Map/Layers/Layers.jsx index e894128..ed3396d 100644 --- a/src/Map/Layers/Layers.jsx +++ b/src/Map/Layers/Layers.jsx @@ -5,8 +5,9 @@ import { BASE_URL } from "../../api"; import { PVZ } from "./PVZ"; import { OtherPostamates } from "./OtherPostamates"; import { SelectedRegion } from "./SelectedRegion"; +import { transliterate } from "../../utils.js"; -export const Layers = ({ postGroups }) => { +export const Layers = ({ postGroups, otherGroups }) => { return ( <> { tiles={[`${BASE_URL}/martin/public.service_post_and_pvz/{z}/{x}/{y}.pbf`]} > {postGroups && postGroups.map((item) => { - return item.groups.map((itemGroup) => ); + return item.groups.map((itemGroup) => + + ); })} @@ -52,7 +59,15 @@ export const Layers = ({ postGroups }) => { type="vector" tiles={[`${BASE_URL}/martin/public.service_otherobjects/{z}/{x}/{y}.pbf`]} > - + {otherGroups && otherGroups.map((item) => { + return item.groups.map((itemGroup) => + + ); + })} diff --git a/src/Map/Layers/OtherPostamates.jsx b/src/Map/Layers/OtherPostamates.jsx index 2fc3c8a..84d2c59 100644 --- a/src/Map/Layers/OtherPostamates.jsx +++ b/src/Map/Layers/OtherPostamates.jsx @@ -1,21 +1,24 @@ import { Layer } from "react-map-gl"; -import { otherPostamatesLayer } from "./layers-config"; +import {getPointSymbolLayer} from "./layers-config"; import { useLayersVisibility } from "../../stores/useLayersVisibility"; import { LAYER_IDS } from "./constants"; -export const OtherPostamates = () => { +export const OtherPostamates = ({ id, categoryId, name }) => { const { isVisible } = useLayersVisibility(); + const filter = ["==", ["get", "group_id"], id] return ( <> ); diff --git a/src/Map/Layers/PVZ.jsx b/src/Map/Layers/PVZ.jsx index 60ebafa..08eab55 100644 --- a/src/Map/Layers/PVZ.jsx +++ b/src/Map/Layers/PVZ.jsx @@ -3,19 +3,19 @@ import { getPointSymbolLayer } from "./layers-config"; import { useLayersVisibility } from "../../stores/useLayersVisibility"; import { LAYER_IDS } from "./constants"; -export const PVZ = ({id, categoryId}) => { +export const PVZ = ({ id, categoryId, name }) => { const { isVisible } = useLayersVisibility(); const filter = ["==", ["get", "group_id"], id] return ( <> { +export const LayersControl = ({ postGroups, otherGroups }) => { return ( } + content={} trigger="click" placement={"leftBottom"} > diff --git a/src/Map/LayersControl/LayersVisibility.jsx b/src/Map/LayersControl/LayersVisibility.jsx index 41bc1e4..59eb37a 100644 --- a/src/Map/LayersControl/LayersVisibility.jsx +++ b/src/Map/LayersControl/LayersVisibility.jsx @@ -4,7 +4,7 @@ import Checkbox from "antd/es/checkbox/Checkbox"; import { MODES } from "../../config"; import { LAYER_IDS } from "../Layers/constants"; -export const LayersVisibility = ({postGroups}) => { +export const LayersVisibility = ({ postGroups, otherGroups }) => { const { toggleVisibility, isVisible } = useLayersVisibility(); const { mode } = useMode(); @@ -31,6 +31,7 @@ export const LayersVisibility = ({postGroups}) => { {postGroups && postGroups.map((item) => { return ( toggleVisibility(LAYER_IDS.pvz_category + item.id)} checked={isVisible[LAYER_IDS.pvz_category + item.id]} @@ -40,13 +41,19 @@ export const LayersVisibility = ({postGroups}) => { ); })} - toggleVisibility(LAYER_IDS.other)} - checked={isVisible[LAYER_IDS.other]} - > - Постаматы прочих сетей - + {otherGroups && otherGroups.map((item) => { + return ( + toggleVisibility(LAYER_IDS.other_category + item.id)} + checked={isVisible[LAYER_IDS.other_category + item.id]} + > + {item.name} + + ); + })} + {/*{mode === MODES.WORKING && (*/} {/* <>*/} {/* { ) } -export function Legend() { +export function Legend({ postGroups, otherGroups }) { const {mode} = useMode(); - const {data: postamatesAndPvzGroups} = usePostamatesAndPvzGroups(); - const {data: otherGroups} = useOtherGroups(); return (
- {postamatesAndPvzGroups && postamatesAndPvzGroups?.map((item) => { + {postGroups && postGroups?.map((item) => { return })}
diff --git a/src/Map/MapComponent.jsx b/src/Map/MapComponent.jsx index 7b5fad3..027b960 100644 --- a/src/Map/MapComponent.jsx +++ b/src/Map/MapComponent.jsx @@ -22,7 +22,8 @@ import { LAYER_IDS } from "./Layers/constants"; import { Header } from "./Header"; import { icons } from "../icons/icons-config"; import { LastMLRun } from "./LastMLRun"; -import { usePostamatesAndPvzGroups } from "../api.js"; +import {useOtherGroups, usePostamatesAndPvzGroups} from "../api.js"; +import {transliterate} from "../utils.js"; export const MapComponent = () => { const mapRef = useRef(null); @@ -35,28 +36,67 @@ export const MapComponent = () => { const { tableState, openTable } = useTable(); const { data: postamatesAndPvzGroups } = usePostamatesAndPvzGroups(); + const { data: otherGroups } = useOtherGroups(); + + const filteredPostamatesGroups = useMemo(() => { + if (!postamatesAndPvzGroups) return []; + return postamatesAndPvzGroups + .filter((category) => category.visible) + .map((category) => { + return { + ...category, + groups: [...category.groups.filter((group) => group.visible)], + } + }) + }, [postamatesAndPvzGroups]); + + const filteredOtherGroups = useMemo(() => { + if (!otherGroups) return []; + return otherGroups + .filter((category) => !category.visible) + .map((category) => { + return { + ...category, + groups: [...category.groups.filter((group) => group.visible)], + } + }) + }, [otherGroups]); const mapIcons = useMemo(() => { - if (!postamatesAndPvzGroups) return icons; - const res = [] - postamatesAndPvzGroups.map((item) => { - item.groups.map((groupItem) => { - res.push({name: groupItem.id, url: groupItem.image}) + const res = []; + + filteredPostamatesGroups.map((category) => { + category.groups.map((group) => { + res.push({name: transliterate(group.name + group.id), url: group.image}) }) }); + + filteredOtherGroups.map((category) => { + category.groups.map((group) => { + res.push({name: transliterate(group.name + group.id), url: group.image}) + }) + }); + return [...res, ...icons]; - }, [icons, postamatesAndPvzGroups]); + }, [icons, filteredPostamatesGroups, filteredOtherGroups]); const mapLayersIds = useMemo(() => { - if (!postamatesAndPvzGroups) return []; const res = [] - postamatesAndPvzGroups.map((item) => { + + filteredPostamatesGroups.map((item) => { item.groups.map((groupItem) => { res.push(LAYER_IDS.pvz + groupItem.id); }) }); + + filteredOtherGroups.map((item) => { + item.groups.map((groupItem) => { + res.push(LAYER_IDS.other + groupItem.id); + }) + }); + return res; - }, [postamatesAndPvzGroups]); + }, [filteredPostamatesGroups, filteredOtherGroups]); useEffect(() => { setLayersVisibility(MODE_TO_LAYER_VISIBILITY_MAPPER[mode]); @@ -158,7 +198,6 @@ export const MapComponent = () => { LAYER_IDS.filteredWorking, LAYER_IDS.cancelled, ...mapLayersIds, - LAYER_IDS.other, ]} onClick={handleClick} onMouseEnter={handleMouseEnter} @@ -192,12 +231,12 @@ export const MapComponent = () => { - + - + - +
diff --git a/src/Map/Popup/mode-popup/FeatureProperties.jsx b/src/Map/Popup/mode-popup/FeatureProperties.jsx index 3f2830c..5017dd0 100644 --- a/src/Map/Popup/mode-popup/FeatureProperties.jsx +++ b/src/Map/Popup/mode-popup/FeatureProperties.jsx @@ -15,9 +15,11 @@ export const FeatureProperties = ({ feature, dynamicStatus, postamatId }) => { const { data } = useGetRegions(); const isResidential = feature.properties.category === CATEGORIES.residential; const isWorking = feature.properties.status === STATUSES.working; + const isRivals = feature.layer?.id === LAYER_IDS.pvz || - feature.layer?.id === LAYER_IDS.other; + feature.layer?.id === LAYER_IDS.other || + feature.layer?.id.includes(LAYER_IDS.pvz); const getConfig = () => { if (isRivals) { diff --git a/src/utils.js b/src/utils.js index cc59667..b589d75 100644 --- a/src/utils.js +++ b/src/utils.js @@ -11,5 +11,13 @@ export function download(filename, data) { document.body.removeChild(downloadLink); } +var chars = {"Ё":"YO","Й":"I","Ц":"TS","У":"U","К":"K","Е":"E","Н":"N","Г":"G","Ш":"SH","Щ":"SCH","З":"Z","Х":"H","Ъ":"'","ё":"yo","й":"i","ц":"ts","у":"u","к":"k","е":"e","н":"n","г":"g","ш":"sh","щ":"sch","з":"z","х":"h","ъ":"'","Ф":"F","Ы":"I","В":"V","А":"A","П":"P","Р":"R","О":"O","Л":"L","Д":"D","Ж":"ZH","Э":"E","ф":"f","ы":"i","в":"v","а":"a","п":"p","р":"r","о":"o","л":"l","д":"d","ж":"zh","э":"e","Я":"Ya","Ч":"CH","С":"S","М":"M","И":"I","Т":"T","Ь":"'","Б":"B","Ю":"YU","я":"ya","ч":"ch","с":"s","м":"m","и":"i","т":"t","ь":"'","б":"b","ю":"yu"," ":""}; + +export function transliterate(word){ + return word.split('').map(function (char) { + return chars[char] || char; + }).join(""); +} + export const isNil = (value) => value === undefined || value === null || value === "";