add quarter inspectors layer

components/Layers/Filters.config.tsx

@@ -7,6 +7,7 @@ import { OknFilter } from 'components/Layers/OKN/Filter/Okn/OknFilter';
 import { LinesFilter } from 'components/Layers/Lines/Filter/LinesFilter';
 import { DTPFilter } from 'components/Layers/DTP/Filter/DTPFilter';
 import { SOURCES_BY_TYPE } from 'constants/sources';
+import { QuarterFilter } from 'components/Layers/Quarter/Filter/QuarterFilter';
 import { FilterConfig, FilterType } from '../../types/Filters.types';
 
 // @ts-ignore
@@ -52,4 +53,9 @@ export const FILTERS_CONFIG: FilterConfig = {
         component: <LinesFilter />,
         isVerified: true,
     },
+    [FilterType.Quarter]: {
+        title: 'Квартальные',
+        component: <QuarterFilter />,
+        isVerified: true,
+    },
 };

components/Layers/Quarter/CardContent/CardContent.module.css

@@ -0,0 +1,21 @@
+.popup {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+    padding: 16px 8px 16px 16px;
+}
+
+.mainLink {
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+}
+
+.description {
+    margin-top: 8px;
+    position: relative;
+    svg {
+        position: relative;
+        top: 2px;
+        left: 2px;
+    }
+}

components/Layers/Quarter/CardContent/CardContent.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Section } from 'components/UI/Card/components/Section/Section';
+import { Info } from 'components/UI/Card/components/Info/Info';
+import { QuarterObject } from 'components/Layers/Quarter/quarterObject';
+import { Link } from 'components/UI/Card/components/Link/Link';
+import { Header } from 'components/UI/Card/components/Header/Header';
+import linkStyles from 'components/UI/Card/components/Link/Link.module.css';
+import { EditObjectButtonLink } from 'components/UI/EditObjectButtonLink/EditObjectButtonLink';
+import sectionStyles from 'components/UI/Card/components/Section/Section.module.css';
+import { Sources } from 'components/UI/Card/components/Sources/Sources';
+import { Icon } from 'components/UI/Icons';
+import { IconType } from 'components/UI/Icons/Icons.types';
+import styles from './CardContent.module.css';
+
+type QuarterCardContentProps = {
+    placemark?: QuarterObject;
+};
+
+export function QuarterCardContent({ placemark }: QuarterCardContentProps) {
+    if (!placemark) return null;
+
+    return (
+        <div className={styles.popup}>
+            <Header title={placemark.quarterTitle} />
+
+            <div className={styles.description}>
+                <Link className={linkStyles.link_size_l} href={placemark.url}>
+                    Посмотреть телефон и почту квартального
+                    <Icon type={IconType.External} />
+                </Link>
+            </div>
+
+            <Section>
+                <Info
+                    nameColor="#9baac3"
+                    infos={[
+                        {
+                            name: 'Район',
+                            text: placemark.districtTitle,
+                        },
+                        {
+                            name: 'Границы квартала',
+                            text: placemark.quarterDescription,
+                        },
+                    ]}
+                />
+            </Section>
+
+            <Section>
+                <Sources sources={['ekb']} />
+            </Section>
+            <Section>
+                <div className={sectionStyles.block_inline}>
+                    <EditObjectButtonLink
+                        text="Дополнить или поправить"
+                        address={placemark?.quarterTitle}
+                    />
+                </div>
+            </Section>
+        </div>
+    );
+}

components/Layers/Quarter/Filter/QuarterFilter.module.css

@@ -0,0 +1,22 @@
+.wrapper {
+    font-size: 16px;
+    line-height: 21px;
+
+    p {
+        margin: 16px 0 0 0;
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
+    ul {
+        list-style-type: '— ';
+        margin: 0;
+        padding: 0;
+        padding-left: 16px;
+    }
+
+    li {
+        padding: 0;
+    }
+}

components/Layers/Quarter/Filter/QuarterFilter.tsx

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { setFilter } from 'state/features/dataLayers';
+import { FilterType } from 'types/Filters.types';
+import { Link } from 'components/UI/Card/components/Link/Link';
+import styles from './QuarterFilter.module.css';
+
+export function QuarterFilter() {
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        dispatch(
+            setFilter({
+                activeFilter: FilterType.Quarter,
+                activeFilterParams: {},
+            }),
+        );
+    });
+
+    return (
+        <div className={styles.wrapper}>
+            <p>
+                Квартальный — это человек, который следит за&nbsp;порядком на придомовых
+                территориях, детских площадках, парковках, мусорках, объектах торговли и&nbsp;т. д.
+            </p>
+            <p>На что можно пожаловаться квартальному:</p>
+            <ul>
+                <li>общие вопросы благоустройства;</li>
+                <li>незаконная торговля, парковки и постройки;</li>
+                <li>вывески и незаконная реклама;</li>
+                <li>самовольные ограничения;</li>
+                <li>сломанные детские площадки.</li>
+            </ul>
+            <p>
+                <Link
+                    href="https://екатеринбург.рф/справка/квартальные/"
+                    text="Подробнее о квартальных"
+                />
+            </p>
+        </div>
+    );
+}

components/Layers/Quarter/quarter.ts

@@ -0,0 +1,10 @@
+import quarterObjects from 'public/quarter_inspectors.json';
+import { QuarterObject } from './quarterObject';
+
+export const quarter = {
+    getObject(quarterTitle: string): Promise<QuarterObject> {
+        return Promise.resolve(
+            quarterObjects.features.find((f) => f.properties.quarterTitle === decodeURI(quarterTitle)).properties as unknown as QuarterObject,
+        );
+    },
+};

components/Layers/Quarter/quarterObject.ts

@@ -0,0 +1,6 @@
+export interface QuarterObject {
+    districtTitle: string;
+    quarterTitle: string;
+    quarterDescription: string;
+    url: string;
+}

components/Layers/config.ts

@@ -5,6 +5,8 @@ import { okn } from 'components/Layers/OKN/okn';
 
 import { lines } from 'components/Layers/Lines/lines';
 import { LinesCardContent } from 'components/Layers/Lines/CardContent/CardContent';
+import { QuarterCardContent } from 'components/Layers/Quarter/CardContent/CardContent';
+import { quarter } from 'components/Layers/Quarter/quarter';
 import { DesignCodeCardContent } from './DesignCode/CardContent/CardContent';
 import { DTPCardContent } from './DTP/CardContent/CardContent';
 import { HousesCardContent } from './Houses/CardContent/CardContent';
@@ -39,4 +41,8 @@ export const MODEL_CONFIG = {
         cardContent: LinesCardContent,
         requests: { oneItemRequest: lines.getObject },
     },
+    [MapItemType.Quarter]: {
+        cardContent: QuarterCardContent,
+        requests: { oneItemRequest: quarter.getObject },
+    },
 } as const;

components/Map/Map.tsx

@@ -11,6 +11,7 @@ import { OknSource } from './layers/OknSource';
 import { DtpSource } from './layers/DtpSource';
 import { LinesSource } from './layers/LinesSource';
 import { DesignCodeSource } from './layers/DesignCodeSource';
+import { QuarterSource } from './layers/QuarterSource';
 import { MapContext } from './providers/MapProvider';
 
 import 'maplibre-gl/dist/maplibre-gl.css';
@@ -23,6 +24,7 @@ function MapLayers() {
             <DtpSource />
             <LinesSource />
             <DesignCodeSource />
+            <QuarterSource />
         </>
     );
 }

components/Map/layers/QuarterSource.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect } from 'react';
+import { FillLayer, Layer, LineLayer, Source, useMap } from 'react-map-gl';
+import { useSelector } from 'react-redux';
+import { activeFilterSelector } from 'state/features/selectors';
+import { FilterType } from 'types/Filters.types';
+import { getLayerStyle } from 'components/Map/helpers/getFeatureState';
+import { MapItemType } from 'types/map-item';
+import { usePopup } from 'components/Map/providers/usePopup';
+import useMapObjectState from '../providers/useMapObjectState';
+import { colorLuminance } from '../helpers/colorLuminance';
+
+const QUARTER_LAYER_ID = 'ekb-quarter-inspectors-layer';
+const QUARTER_SOURCE_ID = 'ekb-quarter-inspectors-source';
+
+export function QuarterSource() {
+    const ekbMap = useMap();
+    const { openPopup } = usePopup();
+    const activeFilter = useSelector(activeFilterSelector);
+
+    useMapObjectState(QUARTER_LAYER_ID);
+
+    useEffect(() => {
+        const map = ekbMap.current;
+
+        const handlePointClick = (e) => {
+            const item = e.target.queryRenderedFeatures(e.point)[0];
+
+            openPopup(decodeURI(item?.properties?.quarterTitle), MapItemType.Quarter);
+        };
+
+        map.on('click', QUARTER_LAYER_ID, handlePointClick);
+
+        return () => {
+            map.off('click', QUARTER_LAYER_ID, handlePointClick);
+        };
+    }, [ekbMap, openPopup]);
+
+    const layerStyle: FillLayer = {
+        type: 'fill',
+        id: QUARTER_LAYER_ID,
+        source: QUARTER_SOURCE_ID,
+        paint: {
+            'fill-color': getLayerStyle<string>({
+                initial: '#9AADCC',
+                hover: colorLuminance('#9AADCC', 0.2),
+                active: colorLuminance('#9AADCC', 0.4),
+            }),
+            'fill-opacity': 0.6,
+        },
+    };
+
+    const layerStrokeStyle: LineLayer = {
+        id: `${QUARTER_LAYER_ID}-outline`,
+        type: 'line',
+        source: QUARTER_SOURCE_ID,
+        paint: {
+            'line-color': '#000',
+            'line-opacity': 0.5,
+            'line-width': 1.5,
+        },
+    };
+
+    if (activeFilter !== FilterType.Quarter) {
+        return null;
+    }
+
+    return (
+        <Source type="geojson" data="./quarter_inspectors.json" id={QUARTER_SOURCE_ID} generateId>
+            <Layer {...layerStyle} />
+            <Layer {...layerStrokeStyle} />
+        </Source>
+    );
+}

components/UI/Card/components/Header/Header.types.tsx

@@ -1,5 +1,5 @@
 export type HeaderProps = {
-    coordinates: [number, number] | number[];
+    coordinates?: [number, number] | number[];
     title?: string;
     description?: string;
 };

components/UI/Card/components/Info/Info.module.css

@@ -12,6 +12,7 @@
 .info__name {
     font-size: 12px;
     line-height: 14px;
+    white-space: nowrap;
 }
 
 .info__text {
@@ -21,7 +22,6 @@
     align-items: center;
 }
 
-
 .info__text {
     gap: 12px;
 }

components/UI/Card/components/Info/Info.types.ts

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 export interface InfoProps {
     infos: {
         name?: string;
-        text?: string;
+        text?: string | ReactNode;
         content?: ReactNode;
     }[];
     nameColor?: string;

components/UI/Card/components/Link/Link.module.css

@@ -1,7 +1,23 @@
 .link {
-    color: rgb(155, 170, 195);
-    font-size: 18px;
+    color: rgba(var(--color-text-secondary), 1);
+    font-size: 14px;
     line-height: 18px;
     font-weight: 400;
-    text-decoration: underline;
-}
+    text-decoration: none;
+    border-bottom: 1px solid rgba(var(--color-text-secondary), 1);
+    &:hover,
+    &:hover path {
+        color: white;
+        fill: white;
+    }
+    &:active {
+        border-bottom-color: white;
+    }
+}
+
+.link_size_l {
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+}

components/UI/Card/components/Link/Link.tsx

@@ -1,15 +1,23 @@
 import React from 'react';
+import classNames from 'classnames';
 import styles from './Link.module.css';
 
 type TLinkProps = {
     text?: string;
+    className?: string;
     href: string;
+    children?: React.ReactNode;
 };
 
-export function Link({ href, text }: TLinkProps) {
+export function Link({ href, text, className, children }: TLinkProps) {
     return (
-        <a href={href} target="_blank" rel="noreferrer" className={styles.link}>
-            {text || href}
+        <a
+            href={href}
+            target="_blank"
+            rel="noreferrer"
+            className={classNames(styles.link, className)}
+        >
+            {text || children || href}
         </a>
     );
 }

components/UI/Card/components/Section/Section.module.css

@@ -2,4 +2,10 @@
     margin-top: 16px;
     padding-top: 16px;
     border-top: 1px solid rgba(256, 256, 256, 0.16);
-}
+}
+
+.block_inline {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}