-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #104 from ekaterinburgdev/feature/kvartalnye
Feature/kvartalnye
- Loading branch information
Showing
39 changed files
with
6,335 additions
and
18,867 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
components/Layers/Quarter/CardContent/CardContent.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| .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; | ||
| path { | ||
| fill: #000; | ||
| } | ||
| } | ||
| a { | ||
| border-radius: 8px; | ||
| font-size: 16px; | ||
| width: 100%; | ||
| text-align: center; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { QuarterObject } from 'components/Layers/Quarter/quarterObject'; | ||
| import { Button, ButtonSize, ButtonType } from 'components/UI/Button/Button'; | ||
| import { Header } from 'components/UI/Card/components/Header/Header'; | ||
| import { Info } from 'components/UI/Card/components/Info/Info'; | ||
| import { Section } from 'components/UI/Card/components/Section/Section'; | ||
| import sectionStyles from 'components/UI/Card/components/Section/Section.module.css'; | ||
| import { Sources } from 'components/UI/Card/components/Sources/Sources'; | ||
| import { EditObjectButtonLink } from 'components/UI/EditObjectButtonLink/EditObjectButtonLink'; | ||
| 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}> | ||
| {/* <a href={placemark.url} target="_blank" rel="noreferrer"> | ||
| Посмотреть телефон и почту квартального | ||
| <Icon type={IconType.External} color="#000" /> | ||
| </a> */} | ||
| <Button | ||
| size={ButtonSize.SMALL} | ||
| onClick={() => {}} | ||
| link={placemark.url} | ||
| type={ButtonType.YELLOW} | ||
| > | ||
| Посмотреть телефон и почту квартального | ||
| <Icon type={IconType.External} color="#000" /> | ||
| </Button> | ||
| </div> | ||
|
|
||
| <Section> | ||
| <Info | ||
| nameColor="#9baac3" | ||
| infos={[ | ||
| { | ||
| name: 'Район', | ||
| text: placemark.districtTitle, | ||
| }, | ||
| // { | ||
| // name: 'Границы квартала', | ||
| // text: placemark.quarterDescription, | ||
| // }, | ||
| ]} | ||
| /> | ||
| </Section> | ||
|
|
||
| <Section> | ||
| <Sources sources={['ekb_quarter']} /> | ||
| </Section> | ||
| <Section> | ||
| <div className={sectionStyles.block_inline}> | ||
| <EditObjectButtonLink | ||
| text="Дополнить или поправить" | ||
| address={placemark?.quarterTitle} | ||
| /> | ||
| </div> | ||
| </Section> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| Квартальный 🙋 — это человек, который следит за порядком на придомовых | ||
| территориях, детских площадках, парковках, мусорках, объектах торговли и т. д. | ||
| </p> | ||
| <p>На что можно пожаловаться квартальному:</p> | ||
| <ul> | ||
| <li>общие вопросы благоустройства;</li> | ||
| <li>незаконная торговля, парковки и постройки;</li> | ||
| <li>вывески и незаконная реклама;</li> | ||
| <li>самовольные ограничения;</li> | ||
| <li>сломанные детские площадки.</li> | ||
| </ul> | ||
| <p> | ||
| <Link | ||
| href="https://екатеринбург.рф/справка/квартальные/" | ||
| text="Подробнее о квартальных" | ||
| /> | ||
| </p> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import quarterObjects from 'public/quarter_inspectors.json'; | ||
| import { QuarterObject } from './quarterObject'; | ||
|
|
||
| export const quarter = { | ||
| getObject(quarterId: string): Promise<QuarterObject> { | ||
| return Promise.resolve( | ||
| quarterObjects.features.find((f) => f.properties.id === quarterId).properties as unknown as QuarterObject, | ||
| ); | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export interface QuarterObject { | ||
| districtTitle: string; | ||
| quarterTitle: string; | ||
| quarterDescription: string; | ||
| url: string; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(item?.properties?.id, 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> | ||
| ); | ||
| } |
Oops, something went wrong.