7 |
33 | `;
34 |
--------------------------------------------------------------------------------
/copy_modules.js:
--------------------------------------------------------------------------------
1 | var chalk = require('chalk')
2 | var mkdirp = require('mkdirp')
3 | var copydir = require('copy-dir')
4 | var copyFile = require('cpx')
5 |
6 | var folderFA = 'src/components/App/sass/font-awesome'
7 | var folderLeaflet = 'src/components/App/sass/leaflet'
8 | var folderLeafletImages = 'src/components/App/sass/leaflet/images'
9 |
10 | console.log(chalk.blue('Copying Modules...'))
11 |
12 | try {
13 | mkdirp(folderFA)
14 | copydir.sync('node_modules/font-awesome', folderFA)
15 |
16 | mkdirp(folderLeaflet)
17 | copyFile.copySync('node_modules/leaflet/dist/leaflet.css', folderLeaflet)
18 |
19 | mkdirp(folderLeafletImages)
20 | copydir.sync('node_modules/leaflet/dist/images', folderLeafletImages)
21 |
22 | console.log(chalk.green('Job done, moving on'))
23 | } catch (e) {
24 | console.log(chalk.red('An error occured: \n' + e))
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/Loading/Loading.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Loading = ({ layers, showLoader, downloadLoader }) => {
4 |
5 | let loadingClass = 'module-loading'
6 | {/*if (!showLoader && showLoader !== undefined) {
7 | loadingClass += ' hidden'
8 | }
9 |
10 | if (downloadLoader && downloadLoader === true) {
11 | loadingClass = 'module-loading'
12 | }*/}
13 |
14 | return (
15 |
10 |
14 | 
19 |
20 |
21 |
26 |
29 | Comece por aqui.
30 |
31 |
32 |
16 |
22 | )
23 | }
24 |
25 | export default Loading
26 |
--------------------------------------------------------------------------------
/src/components/DataTable/data-table.scss:
--------------------------------------------------------------------------------
1 | .data-table {
2 |
3 | %data-table--cell {
4 | padding: 10px 5px;
5 | }
6 |
7 | &-container {
8 | overflow: auto;
9 | max-height: 500px;
10 | }
11 |
12 | &--header {
13 | border-bottom: $data-table-header-border-size solid $data-table-header-border-color;
14 | border-top: $data-table-header-border-size solid $data-table-header-border-color;
15 | color: $data-table-header-text-color;
16 | font-size: 12px;
17 | font-weight: normal;
18 | @extend %data-table--cell;
19 | }
20 |
21 | &--body {
22 | color: $data-table-body-text-color;
23 | font-size: 10px;
24 | @extend %data-table--cell;
25 | }
26 |
27 | &--row:nth-child(even) .data-table--body{
28 | background-color: $data-table-row-bacgkround-color;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/Modal/Contents/About.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const About = () => {
4 |
5 | return (
6 |
17 |
18 | Este site está sendo descontinuado por favor acesse nosso no site aqui :{" "} 19 | HUB Gestão do Território 20 |
21 | 18 | Este site está sendo descontinuado por favor acesse nosso no site aqui :{" "} 19 | HUB Gestão do Território 20 |
7 |
11 | )
12 | }
13 |
14 | export default About
15 |
--------------------------------------------------------------------------------
/tests/LayerStyleItem/__snapshots__/LayerStyleItem.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`LayerStyleItem component renders correctly with no data 1`] = `
4 |
8 | `;
9 |
10 | exports[`LayerStyleItem component renders correctly with real data 1`] = `
11 | O inLoco 2.0 é uma plataforma de mapas interativos criada pelo Ministério Público do Estado do Rio de Janeiro, permitindo ao usuário visualizar e sobrepor dados geográficos de diversos assuntos, realizar buscas e dispor de diversas informações.
8 |Em caso de dúvidas na utilização do sistema, mande um email para mpemmapas.cadg@mprj.mp.br.
9 |Este sistema é software livre e seu código está disponibilizado no GitHub. Contribuições são bem-vindas! :)
10 |
10 |
19 | )
20 | }
21 |
22 | export default Header
23 |
--------------------------------------------------------------------------------
/tests/SidebarLeft/__snapshots__/SidebarLeft.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`SidebarLeft component renders correctly with no data 1`] = `
4 |
11 |
12 | })
13 |
14 |
15 |
16 | Comece por aqui.
17 |
18 |
13 |
14 | -
11 | {
12 | // Checks if baseMaps already exists in state
13 | baseMaps
14 | ? baseMaps.map((baseMap, index) => {
15 | return (
16 |
-
17 | handleChangeActiveBaseMap(baseMap)}>
18 |
19 | 20 | {baseMap.subtitle} 21 |
22 | )
23 | })
24 | : ''
25 | }
26 |
24 |
25 |
26 |
27 |
28 | )
29 | })
30 |
31 | export default SidebarLeft
32 |
--------------------------------------------------------------------------------
/README-DEPLOY-MPRJ.md:
--------------------------------------------------------------------------------
1 | # How to deploy
2 |
3 | This file describes the steps to deploy a new version of InLoco into MPRJ servers.
4 |
5 | 1. Run `npm run build`
6 | 1. Rename `static/js.bundle.js` to `static/js.bundle.[YYYYMMDD].js`
7 | 1. Rename `static/vendor.bundle.js` to `static/vendor.bundle.[YYYYMMDD].js`
8 | 1. Edit `static/index.html` and change the js paths to include `[YYYYMMDD]`
9 | 1. Move the contents of the `static` directory to a new folder. Name it `inloco`.
10 | 1. Zip that folder, so you'll have a file `inloco.zip`.
11 | 1. Copy that file to `X:\[Homologacao\Estatico|Produção]`
12 | 1. Open a GLPI (or ask someone to do it).
13 |
14 | ## GLPI
15 |
16 | 1. Open http://p-glpidti01.pgj.rj.gov.br and log in with your MPRJ account
17 | 1. Assistência > Chamados
18 | 1. Click on `+`
19 | 1. Fill the fields:
20 | - Categoria: *Deploy Homologação / Produção* (open one GLPI for each one)
21 | - Ator: *mpemmapas.cadg
22 | - Elementos associados: *MP em Mapas* (always)
23 | - Título: *Deploy Homologação / Produção Estático InLoco*
24 | - Descrição: The path X:\...
25 | - Prioridade: *Média* or higher if needed
26 | - *Don't* attach the zip file.
27 | 1. After the GLPI is done, open it and approve or refuse it.
28 |
--------------------------------------------------------------------------------
/src/components/Api/ScaAPI.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 |
3 | const ScaAPI = {
4 | /**
5 | * Call sca api and log user on system
6 | * @param callback function to call when process is completed
7 | */
8 | logInUser(callback, username, password) {
9 | axios
10 | .post(`/mpmapas/api/authentication?password=${password}&username=${username}`)
11 | .then((response) => {
12 | callback(response)
13 | })
14 | .catch((error) => {
15 | callback(error.response)
16 | })
17 | },
18 | logOutUser(callback) {
19 | axios
20 | .get(`/mpmapas/api/logout`)
21 | .then((response) => {
22 | console.log('Logout response',response);
23 | })
24 | .catch((error) => {
25 | console.log('Logout error',error);
26 | })
27 | },
28 | authenticate(callback) {
29 | axios
30 | .get(`/mpmapas/api/authenticate`)
31 | .then((response) => {
32 | callback(response)
33 | })
34 | .catch( (error) => {
35 | callback(error.response)
36 | })
37 | }
38 | }
39 |
40 | export default ScaAPI
41 |
--------------------------------------------------------------------------------
/tests/Tooltip/__snapshots__/Tooltip.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Tooltip component renders correctly with no data 1`] = `
4 |
35 | {text}
36 |
37 | )
38 | })
39 |
40 | export default Tooltip
41 |
--------------------------------------------------------------------------------
/src/components/ToolbarMenu/toolbarMenu.scss:
--------------------------------------------------------------------------------
1 | .toolbar-item {
2 | position: relative;
3 | }
4 |
5 | .toolbar-menu {
6 | margin-top: 15px;
7 | min-width: 190px;
8 | background-color: $toolbar-menu-background-color;
9 | border-radius: 5px;
10 | padding: 15px 0;
11 | position: absolute;
12 | right: 0;
13 | color: $toolbar-menu-color;
14 | font-family: sans-serif;
15 | box-shadow: 0 2px 7px 0 $toolbar-menu-shadow;
16 | opacity: 1;
17 | transition: opacity ease .15s;
18 |
19 | &.map {
20 | margin-top: -100px;
21 | padding: 15px 10px;
22 | }
23 |
24 | &.hidden {
25 | opacity: 0;
26 | transition: opacity ease .3s;
27 | }
28 | }
29 |
30 | .fa-close{
31 | float:right;
32 | }
33 |
34 | %toolbar-dinlineb {
35 | display: inline-block;
36 | }
37 |
38 | .toolbar-inputshare {
39 | border: none;
40 | width: 290px;
41 | padding: 0 15px;
42 |
43 | button {
44 | @extend %toolbar-dinlineb;
45 | padding: 7px 12px;
46 | font-size: 14px;
47 | color: $toolbar-inputshare-button-color;
48 | background-color: $toolbar-inputshare-button-background-color;
49 | border-radius: 5px 0 0 5px;
50 | border: none;
51 | cursor: pointer;
52 |
53 | &:hover {
54 | background-color: $toolbar-inputshare-button-hover-background-color;
55 | }
56 |
57 | &:active {
58 | background-color: $toolbar-inputshare-button-active-background-color;
59 | }
60 | }
61 | }
62 |
63 |
--------------------------------------------------------------------------------
/src/components/Toolbar/toolbar.scss:
--------------------------------------------------------------------------------
1 | .platform-toolbar {
2 | top: 15px;
3 | right: 15px;
4 | width: 350px;
5 | height: 53px;
6 | padding: 10px 15px;
7 | position: absolute;
8 | z-index: 1000;
9 |
10 | &.sidebar-left-opened {
11 | right: $layer-content-width + 15px;
12 | }
13 | }
14 |
15 | .map-toolbar {
16 | bottom: 30px;
17 | right: 50px;
18 | width: 150px;
19 | height: 53px;
20 | padding: 10px 15px;
21 | position: absolute;
22 | z-index: 1000;
23 |
24 | &.sidebar-left-opened {
25 | right: $layer-content-width + 50px;
26 | }
27 | }
28 |
29 | .toolbar-item {
30 | cursor: pointer;
31 | background-color: $toolbar-item-background-color;
32 | color: white;
33 | width: 30px;
34 | height: 30px;
35 | border-radius: 50%;
36 | margin-left: 10px;
37 | padding-top: 6px;
38 | text-align: center;
39 | float: right;
40 | border: solid 1px #002e56;
41 | box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.72);
42 | transition: background-color ease .15s;
43 |
44 | .tooltip {
45 | display: none;
46 | }
47 |
48 | &:hover {
49 | background-color: $toolbar-item-hover-background-color;
50 |
51 | .tooltip {
52 | display: block;
53 | }
54 | }
55 |
56 | &.active {
57 | background-color: $toolbar-item-active-background-color;
58 | z-index: 1;
59 |
60 | &:hover {
61 | .tooltip {
62 | display: none;
63 | }
64 | }
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/src/components/Modal/Contents/LayerFilter.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import DataTable from '../../DataTable/DataTable.js'
3 |
4 | const LayerFilter = ({isFilterEmptyResult, isLoadingFilter, layers, modalLayerFilterName, onLayerFilterSearch}) => {
5 | const handleFilter = e => {
6 | e.preventDefault()
7 | onLayerFilterSearch(modalLayerFilterName, e.target.elements.parameterKey.value, e.target.elements.parameterValue.value.toLocaleLowerCase())
8 | }
9 |
10 | const filteredLayers = layers.filter(l => l.name === modalLayerFilterName)
11 | if (filteredLayers.length === 0) {
12 | return Erro ao carregar parâmetros.
13 | } 14 | const filteredLayer = filteredLayers[0] 15 | 16 | return ( 17 |
18 |
30 | : null}
31 |
32 | )
33 | }
34 |
35 | export default LayerFilter
36 |
--------------------------------------------------------------------------------
/src/components/SearchLayer/SearchLayer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const SearchLayer = ({onSearchClick, onKeyUpSearch, onBtnCleanSearch, searchString}) => {
4 | let input
5 | var searchIconClass = 'search-layer--icon fa fa-'
6 | var onIconClick = null
7 | if (searchString !== undefined && searchString.length === 0) {
8 | searchIconClass += 'search'
9 | } else {
10 | searchIconClass += 'close'
11 | onIconClick = () => {
12 | input.value = ''
13 | onBtnCleanSearch()
14 | }
15 | }
16 |
17 | const preventSubmit = (e) => {
18 | e.preventDefault()
19 | }
20 |
21 | const inputField = node => {
22 | input = node
23 | if (node) {
24 | node.focus()
25 | }
26 | }
27 |
28 | const inputOnKeyUp = () => {
29 | onKeyUpSearch(input.value)
30 | }
31 |
32 | const inputOnClick = () => {
33 | onSearchClick()
34 | }
35 |
36 | return (
37 |
51 | )
52 | }
53 |
54 | export default SearchLayer
55 |
--------------------------------------------------------------------------------
/src/components/Modal/Contents/Login.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Login = ({ loginError, loginStatus, onLoginClick }) => {
4 | let userNameInput;
5 | let passwordInput;
6 |
7 | const handleKeyPress = (target) => {
8 | if(target.charCode === 13){
9 | console.log('Enter clicked!!!')
10 | let data = {
11 | "username": userNameInput.value,
12 | "password": btoa(passwordInput.value),
13 | }
14 | onLoginClick(data)
15 | }
16 | }
17 | const handleLoginClick = () => {
18 | let data = {
19 | "username": userNameInput.value,
20 | "password": btoa(passwordInput.value),
21 | }
22 | onLoginClick(data)
23 | }
24 |
25 | return (
26 | Selecione um parâmetro, digite um valor e clique em Filtrar:
19 | 26 | {isLoadingFilter ?Aguarde, carregando dados...
: null} 27 | {isFilterEmptyResult ?Não foram encontrados dados para o valor buscado.
: null} 28 | {filteredLayer.filteredData ? 29 |
54 |
72 | )
73 | }
74 |
75 | export default DropTarget("layerSubtitle", subtitleTarget, collect)(LayerSubtitleSpace)
76 |
--------------------------------------------------------------------------------
/src/actions/ToolbarActions.js:
--------------------------------------------------------------------------------
1 | export const addGooglePlacesLatLong = latLong => {
2 | return {
3 | type: 'ADD_GOOGLE_PLACES_LAT_LONG',
4 | latLong,
5 | }
6 | }
7 |
8 | export const addPlaceLayer = item => {
9 | return {
10 | type: 'ADD_PLACE_LAYER',
11 | item,
12 | }
13 | }
14 |
15 | export const addTutelaLayer = item => {
16 | return {
17 | type: 'ADD_TUTELA_LAYER',
18 | item,
19 | }
20 | }
21 |
22 | export const changeActiveBaseMap = (baseMap) => {
23 | return {
24 | type: 'CHANGE_ACTIVE_BASE_MAP',
25 | baseMap,
26 | }
27 | }
28 |
29 | export const changeActiveToolbar = item => {
30 | return {
31 | type: 'CHANGE_ACTIVE_TOOLBAR',
32 | item,
33 | }
34 | }
35 |
36 | export const changeContour = item => {
37 | return {
38 | type: 'CHANGE_CONTOUR',
39 | item,
40 | }
41 | }
42 |
43 | export const changeGlobalFilterType = filterName => {
44 | return {
45 | type: 'CHANGE_GLOBAL_FILTER_TYPE',
46 | filterName,
47 | }
48 | }
49 |
50 | export const changeOpacity = item => {
51 | return {
52 | type: 'CHANGE_OPACITY',
53 | item,
54 | }
55 | }
56 |
57 | export const clearPlaceTutelaLayer = () => {
58 | return {
59 | type: 'CLEAR_PLACE_TUTELA_LAYER',
60 | }
61 | }
62 |
63 | export const searchPlaces = item => {
64 | return {
65 | type: 'SEARCH_PLACES',
66 | item,
67 | }
68 | }
69 |
70 | export const searchTutela = item => {
71 | return {
72 | type: 'SEARCH_TUTELA',
73 | item,
74 | }
75 | }
76 |
77 | export const togglePlace = item => {
78 | return {
79 | type: 'TOGGLE_PLACE',
80 | item,
81 | }
82 | }
83 |
84 | export const toggleTutela = item => {
85 | return {
86 | type: 'TOGGLE_TUTELA',
87 | item,
88 | }
89 | }
90 |
91 | export const activateDownloadLoader = () => {
92 | return {
93 | type: 'ACTIVATE_DOWNLOAD_LOADER',
94 | }
95 | }
96 |
97 | export const deactivateDownloadLoader = () => {
98 | return {
99 | type: 'DEACTIVATE_DOWNLOAD_LOADER',
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/src/components/Modal/Contents/News.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const News = ({onCloseModal}) => {
4 |
5 | return (
6 |
7 | Bem-vindo a plataforma de mapas interativos do inLoco 2.0! A nova plataforma é moderna e intuitiva e permite ao usuário visualizar e sobrepor dados geográficos de diversos assuntos, realizar buscas e dispor de diversas informações. Além das consultas de sempre, essa ferramenta traz de forma acessível novas funcionalidades e está disponível para uso no seu dia a dia:
8 |
37 | )
38 | }
39 |
40 | export default News
41 |
--------------------------------------------------------------------------------
/src/components/Sinalid/sinalid.scss:
--------------------------------------------------------------------------------
1 | .module-sinalid {
2 | h4 {
3 | font-weight: normal;
4 | margin-bottom: 10px;
5 | }
6 |
7 | .msg-sembase {
8 | font: 30px 'robotomedium';
9 | color: #606062;
10 | text-align: center;
11 | }
12 |
13 | .sinalid-wrap {
14 | padding-top: 20px;
15 | padding-bottom: 20px;
16 | margin-left: auto;
17 | margin-right: auto;
18 | }
19 |
20 | .sinalid-loader {
21 | display: block;
22 | margin-top: 150px;
23 | margin-right: auto;
24 | margin-left: auto;
25 | width: 64px;
26 | height: 64px;
27 | }
28 |
29 | .sinalid-wrap-header {
30 | margin-bottom: 20px;
31 | }
32 |
33 | .sinalid-infodp {
34 | margin-bottom: 30px;
35 | }
36 |
37 | .info-policestation-name {
38 | font-size: 22px;
39 | color: #757575;
40 | }
41 |
42 | .info-policestation-address {
43 | font-size: 16px;
44 | color: #757575;
45 | }
46 |
47 | .info-policestation-address span { margin-right: 5px; }
48 |
49 |
50 |
51 | .sinalid-logo { margin-bottom: 30px;}
52 | .sinalid-card {
53 | position: relative;
54 | margin-bottom: 25px;
55 | min-height: 140px;
56 | overflow: hidden;
57 | background-color: #ffffff;
58 | box-shadow: 0px 0px 9px 3px rgba(000,000,000, 0.20);
59 | }
60 |
61 | /* Conteudo card */
62 |
63 | .sinalid-card--photo {
64 | position: absolute;
65 | top: -2px;
66 | width: 112px;
67 | height: 145px;
68 | }
69 |
70 | .sinalid-card--content {
71 | display: inline-block;
72 | padding: 12px;
73 | margin-left: 112px;
74 | }
75 |
76 | .card-content-header {
77 | margin-bottom: 10px;
78 | padding-bottom: 8px;
79 | border-bottom: solid 1px #d2d1d1;
80 | }
81 |
82 | .content-title {
83 | font: 18px 'robotomedium', 'Arial', 'sans-serif';
84 | color: #757575;
85 | }
86 |
87 | .content-title .icon-sinalid { font-size: 24px; }
88 | .content-date { font: 12px 'robotolight', 'Arial', 'sans-serif'; }
89 |
90 | .content-date span {
91 | font-family: 'robotomedium', 'Arial', 'sans-serif';
92 | color: #1d9c8f;
93 | }
94 |
95 | .card-content-text { font-size: 12px;}
96 | }
97 |
--------------------------------------------------------------------------------
/src/components/GooglePlaces/GooglePlaces.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 |
3 | export default class GooglePlaces extends Component {
4 | constructor(props) {
5 | super(props)
6 | }
7 |
8 | preventSubmit(e) {
9 | e.preventDefault()
10 | }
11 |
12 | onPlacesChanged(searchBox) {
13 | var places = searchBox.getPlaces()
14 | var viewport = places[0].geometry.viewport
15 |
16 | var nelat = viewport.getNorthEast().lat()
17 | var nelng = viewport.getNorthEast().lng()
18 | var swlat = viewport.getSouthWest().lat()
19 | var swlng = viewport.getSouthWest().lng()
20 |
21 | return [
22 | [
23 | nelat, nelng
24 | ],
25 | [
26 | swlat, swlng
27 | ]
28 | ]
29 | }
30 |
31 | componentDidMount() {
32 | const { onAddGooglePlacesLatLong } = this.props
33 | const onPlacesChanged = this.onPlacesChanged
34 |
35 | const defaultBounds = new google.maps.LatLngBounds(
36 | new google.maps.LatLng(-23.3926, -44.8935),
37 | new google.maps.LatLng(-20.7916, -40.7384)
38 | )
39 |
40 | let input = document.getElementById("GooglePlacesSearch")
41 | let searchBox = new google.maps.places.SearchBox(input, {
42 | bounds: defaultBounds
43 | })
44 |
45 | // Listen for the event fired when the user selects a prediction and retrieve
46 | // more details for that place.
47 | searchBox.addListener('places_changed', function() {
48 | onAddGooglePlacesLatLong(onPlacesChanged(this))
49 | })
50 | }
51 |
52 | render() {
53 | return (
54 |
72 | )
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/src/components/PolygonData/PolygonData.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Charts from '../Charts/Charts.js'
3 |
4 | const PolygonData = ({ polygonData }) => {
5 |
6 | let populacao = polygonData.filter(l => l.category === "População")[0]
7 |
8 | let columns = []
9 | let keys = Object.keys(populacao.piramide_total)
10 |
11 | for (let i = 0; i < keys.length; i++) {
12 | let key = keys[i];
13 | let splittedKey = key.split('_')
14 | columns.push(
15 | [splittedKey[1]+'-'+splittedKey[2], key]
16 | )
17 |
18 | }
19 |
20 | let chartObject = {
21 | "charts": [
22 | {
23 | columns,
24 | "entity": "População",
25 | "title": "Pirâmide Etária",
26 | "type": "piramide"
27 | }
28 | ],
29 | "features": [
30 | {
31 | "properties": Object.assign({}, populacao.piramide_total)
32 | }
33 | ],
34 | }
35 |
36 | return (
37 | -
9 |
- 10 | Desenho livre – É uma ferramenta rápida e fácil que permite que você desenhe ou demarque um ponto de interesse ou áreas relevantes no mapa. 11 | 12 |
- 13 | Busca por polígono ou área – Facilita a busca de uma área fechada em determinada região e a descreve com varias informações num raio de distância definido no mapa. 14 | 15 | 16 |
- 17 | Busca de endereço – É um serviço que permite buscar um endereço ou um ponto de interesse, através de uma busca textual. 18 | 19 | 20 |
- 21 | Mudar a camada de fundo – É possível alterar o estilo de plano de fundo do mapa oferecendo imagens por satélite, terrenos ou logradouros do Estado do Rio de Janeiro. 22 | 23 | 24 |
- 25 | Google Street View – A nova ferramenta agora está integrada ao Street View, que é um recurso do Google. Ela disponibiliza vistas panorâmicas de 360° e permite que os usuários vejam partes de algumas regiões ao nível do chão/solo. 26 | 27 |
32 |
35 |
36 |
38 |
66 | )
67 | }
68 |
69 | export default PolygonData
70 |
--------------------------------------------------------------------------------
/src/components/Menu/MenuContainer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Menu from './Menu'
3 | import { connect } from 'react-redux'
4 | import { toggleLayer, toggleMenu, untoggleAll, showDescription, hideDescription, updateScrollTop } from '../../actions/actions.js'
5 |
6 | const getVisibleMenuElements = (menuItems) => {
7 | let hasOneVisibleMenuItem = false
8 | for (let menuItem of menuItems) {
9 | if (menuItem.selected) {
10 | hasOneVisibleMenuItem = true
11 | }
12 | }
13 |
14 | if (!hasOneVisibleMenuItem) {
15 | return menuItems
16 | }
17 |
18 | return menuItems.filter(menuItem => menuItem.selected)
19 | }
20 |
21 | const getVisibleLayers = (layers) => {
22 | let hasOneVisibleLayer = false
23 | for (let layer of layers) {
24 | if (layer.match) {
25 | hasOneVisibleLayer = true
26 | }
27 | }
28 |
29 | if (!hasOneVisibleLayer) {
30 | return layers
31 | }
32 |
33 | return layers.filter(layer => layer.match)
34 | }
35 |
36 | const mapStateToProps = (state, ownProps) => {
37 | return {
38 | menuItems: Array.isArray(state.menuItems) ? state.menuItems : [],
39 | layers: Array.isArray(state.layers) ? state.layers : [],
40 | currentLevel: state.currentLevel,
41 | sidebarLeftWidth: ownProps.sidebarLeftWidth,
42 | sidebarLeftHeight: ownProps.sidebarLeftHeight,
43 | }
44 | }
45 |
46 | const mapDispatchToProps = (dispatch) => {
47 | return {
48 | onLayerClick: (item) => {
49 | dispatch(toggleLayer(item))
50 | },
51 | onMenuItemClick: (item) => {
52 | dispatch(toggleMenu(item))
53 | },
54 | onUntoggleAllClick: () => {
55 | dispatch(untoggleAll())
56 | },
57 | onMouseOver: (e,
58 | layer,
59 | sidebarLeftWidth,
60 | parentHeight,
61 | top,
62 | bottom,
63 | ) => {
64 | if (layer) {
65 | dispatch(showDescription(
66 | layer,
67 | sidebarLeftWidth,
68 | e.clientY,
69 | ))
70 | }
71 | },
72 | onMouseOut: (layer) => {
73 | if (layer) {
74 | dispatch(hideDescription(layer))
75 | }
76 | },
77 | onScroll: (scrollTop) => {
78 | dispatch(updateScrollTop(scrollTop))
79 | },
80 | };
81 | };
82 |
83 | const MenuContainer = connect(
84 | mapStateToProps,
85 | mapDispatchToProps
86 | )(Menu)
87 |
88 | export default MenuContainer
89 |
--------------------------------------------------------------------------------
/src/components/Modal/Modal.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import About from './Contents/About.js'
3 | import LayerFilter from './Contents/LayerFilter.js'
4 | import Login from './Contents/Login.js'
5 | import News from './Contents/News.js'
6 | import Table from './Contents/Table.js'
7 |
8 | const Modal = ({
9 | isFilterEmptyResult,
10 | isLoadingFilter,
11 | lastClickData,
12 | layers,
13 | loginError,
14 | loginStatus,
15 | modalLayerFilterName,
16 | newsModal,
17 | showAbout,
18 | showLayerFilterModal,
19 | showLogin,
20 | showModal,
21 | onChangeActiveTab,
22 | onCloseModal,
23 | onGetModalData,
24 | onLayerFilterSearch,
25 | onLoginClick,
26 | onPaginate,
27 | }) => {
28 |
29 | function handleCloseModal() {
30 | return onCloseModal()
31 | }
32 |
33 | let ContentComponent =
34 |
39 |
43 | 40 | Dados do polígono 41 |
42 |
44 |
45 |
46 | {
47 | polygonData.map( (l, index) => {
48 | let title = l.category
49 | let value = l.items.length
50 | if(l.category === "População"){
51 | value = l.populacao_total
52 | }
53 | return (
54 |
63 |
64 |
65 | | {title} | 56 |{value} | 57 |
83 |
84 |
90 |
91 | )
92 | }
93 |
94 | export default Modal
95 |
--------------------------------------------------------------------------------
/src/components/LayerStylesCarousel/layerStylesCarousel.scss:
--------------------------------------------------------------------------------
1 | .layer-styles-carousel {
2 | position: relative;
3 | margin-bottom: 10px;
4 |
5 | &::selection {
6 | background: none;
7 | }
8 |
9 | &--arrow {
10 | z-index: 2;
11 | position: absolute;
12 | top: 33%;
13 | padding: 7px;
14 | width: 25px;
15 | height: 25px;
16 | font-size: 12px;
17 | text-align: center;
18 | color: $layer-button-carousel-text-color;
19 | border-radius: 50%;
20 | background-color: $layer-button-carousel-bg-color;
21 | cursor: pointer;
22 | transition: ease background-color .3s, color .3s;
23 |
24 | &.remove {
25 | display: none;
26 | }
27 |
28 | &:hover,
29 | &:focus {
30 | transition-duration: .15s, .15s;
31 | color: $layer-button-carousel-text-color-hover;
32 | background-color: $layer-button-carousel-bg-color-hover;
33 | }
34 |
35 | &:active {
36 | opacity: .5;
37 | }
38 |
39 | &.fa-chevron-left:before { margin-left: -3px; }
40 | &.fa-chevron-right:before { margin-right: -2px; }
41 | }
42 | .layer-styles-carousel--arrow:last-child{ right: 16px; }
43 |
44 | &--list-container {
45 | display: inline-block;
46 | margin-top: 10px;
47 | margin-left: 2px;
48 | overflow: hidden;
49 | width: 328px;
50 | }
51 |
52 | &--list {
53 | height: 39px;
54 | position: relative;
55 | transition-duration: .2s;
56 | }
57 |
58 | &--list-item {
59 | display: inline-block;
60 | height: 39px;
61 | margin-left: 2px;
62 | border: 1px solid rgba(0,0,0,0); // every item has a 1px transparent border
63 | transition:
64 | background-color ease .3s,
65 | opacity ease .3s;
66 |
67 | &:first-child {
68 | margin-left: 0;
69 | }
70 |
71 | &:hover,
72 | &:active,
73 | &.selected {
74 | background-color: $layer-styles-list-item-selected-background;
75 | transition:
76 | background-color ease .15s,
77 | opacity ease .15s;
78 |
79 | .layer-styles-carousel--image {
80 | opacity: .5;
81 | }
82 |
83 | }
84 | &:active {
85 | background-color: $layer-styles-list-item-active-background-color
86 | }
87 |
88 | }
89 |
90 | &--image {
91 | border: 1px solid $layer-list-secondary-text-color;
92 | cursor: pointer;
93 | height: 37px;
94 | width: 60px;
95 |
96 | &:hover {
97 | border: 1px solid $layer-list-area-title-color;
98 | }
99 |
100 | &::selection {
101 | background: none;
102 | }
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/src/components/Menu/menuReducer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Creates menu array
3 | * @param {Object[]} layers Array of layers
4 | * @returns {Object[]} Menu array with categories data, including layers IDs
5 | */
6 | const menuReducer = (layers) => {
7 | const menu = []
8 |
9 | layers.forEach(layer => {
10 | if (layer.menu2) {
11 | // creates menu item if it doesn't exists
12 | const menuAlreadyExists = menu.some(menuItem => (layer.menu2[0] && menuItem.id === layer.menu2[0]))
13 | const subMenuAlreadyExists = menu.some(menuItem => (layer.menu2[1] && menuItem.id === layer.menu2[1]))
14 |
15 | // creates menu item if it doesn't exists
16 | if (!menuAlreadyExists && layer.menu2[0].trim()) {
17 | // create menu item
18 | menu.push({
19 | display: true,
20 | id: layer.menu2[0],
21 | title: layer.menu2[0],
22 | layers: [],
23 | idMenu: menu.length,
24 | isSubMenu: false,
25 | submenus: [],
26 | });
27 | }
28 |
29 | // new submenu
30 | if (!subMenuAlreadyExists && layer.menu2[1] && layer.menu2[1].trim()) {
31 | // create submenu
32 | const thisSubmenuId = menu.length
33 |
34 | menu.push({
35 | display: true,
36 | id: layer.menu2[1],
37 | title: layer.menu2[1],
38 | layers: [],
39 | idMenu: thisSubmenuId,
40 | isSubMenu: true,
41 | submenus: [],
42 | })
43 |
44 | // include my submenu id to father menu submenus array
45 | menu.forEach((menuItem) => {
46 | // find my father
47 | if (menuItem.id === layer.menu2[0]) {
48 | // add to submenus array
49 | menuItem.submenus.push(thisSubmenuId)
50 | }
51 | })
52 | }
53 |
54 | // then add the layer ID to an array of its menu item
55 | menu.forEach((menuItem) => {
56 | // make sure it has no submenu
57 | if (layer.menu2.length === 1 && menuItem.id === layer.menu2[0]) {
58 | // add layer to this menu layers array
59 | menuItem.layers.push(layer.key)
60 | }
61 |
62 | // then add the layer ID to an array of its menu item
63 | if (layer.menu2.length === 2 && menuItem.id === layer.menu2[1]) {
64 | // add layer to this submenu layers array
65 | menuItem.layers.push(layer.key)
66 | }
67 |
68 | })
69 | }
70 | })
71 |
72 | // finally, sort menu categories in A-Z
73 | menu.sort((a, b) => {
74 | if (a.title < b.title) {
75 | return -1
76 | }
77 | if (a.title > b.title) {
78 | return 1
79 | }
80 | return 0
81 | })
82 |
83 | return menu
84 | }
85 |
86 | export default menuReducer
87 |
--------------------------------------------------------------------------------
/src/components/LayerStylesCarousel/LayerStylesCarousel.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import LayerStyleItem from './LayerStyleItem'
3 |
4 | const LayerStylesCarousel = ({ layer, onArrowLeftClick, onArrowRightClick, onStyleClick }) => {
5 |
6 | const STYLE_WIDTH = 66
7 |
8 | let selectedLayerId
9 |
10 | let leftArrowClassName = 'layer-styles-carousel--arrow fa fa-chevron-left'
11 | let rightArrowClassName = 'layer-styles-carousel--arrow fa fa-chevron-right'
12 |
13 | let layerStylesLength = 0
14 | let layerStylesPositionCounter = 0
15 |
16 | if (layer) {
17 | if (layer.styles && layer.styles.length < 6) {
18 | leftArrowClassName += ' remove'
19 | rightArrowClassName += ' remove'
20 | } else {
21 | if (!layer.stylesPositionCounter) {
22 | leftArrowClassName += ' hidden'
23 | } else if (layer.stylesPositionCounter === layer.styles.length - 5) {
24 | rightArrowClassName += ' hidden'
25 | }
26 | }
27 |
28 | if (layer.styles) {
29 | layerStylesLength = layer.styles.length * STYLE_WIDTH
30 | }
31 | if (layer.stylesPositionCounter) {
32 | layerStylesPositionCounter = layer.stylesPositionCounter
33 | }
34 | }
35 |
36 | let carouselListStyle = {
37 | width: layerStylesLength + 'px',
38 | marginLeft: -(layerStylesPositionCounter * STYLE_WIDTH) + 'px',
39 | }
40 |
41 | function arrowLeftClick() {
42 | return onArrowLeftClick(layer)
43 | }
44 |
45 | function arrowRightClick() {
46 | return onArrowRightClick(layer)
47 | }
48 |
49 | if (layer.stylesOrdered) {
50 | layer.styles.sort((a, b) => {
51 | if (a.title > b.title) {
52 | return 1
53 | }
54 | if (a.title < b.title) {
55 | return -1
56 | }
57 | return 0
58 | }).reverse()
59 | }
60 |
61 | return (
62 | 85 | {modalTitle} 86 | 87 |
88 | {ContentComponent} 89 |
63 |
64 |
85 | )
86 | }
87 |
88 | export default LayerStylesCarousel
89 |
--------------------------------------------------------------------------------
/src/components/Modal/ModalContainer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Modal from './Modal'
3 | import { connect } from 'react-redux'
4 | import {
5 | changeActiveTab,
6 | closeModal,
7 | getModalData,
8 | layerFilterLoaded,
9 | layerFilterLoading,
10 | loginUser,
11 | paginate,
12 | populateApp,
13 | } from '../../actions/actions.js'
14 | import GeoAPI from '../Api/GeoAPI.js'
15 | import ScaAPI from '../Api/ScaAPI.js'
16 |
17 | const mapStateToProps = state => {
18 | return {
19 | isFilterEmptyResult: state.isFilterEmptyResult,
20 | isLoadingFilter: state.isLoadingFilter,
21 | lastClickData: state.lastClickData,
22 | layers: state.layers,
23 | loginStatus: state.loginStatus,
24 | loginError: state.loginError,
25 | modalLayerFilterName: state.modalLayerFilterName,
26 | newsModal: state.newsModal,
27 | showAbout: state.showAbout,
28 | showLayerFilterModal: state.showLayerFilterModal,
29 | showLogin: state.showLogin,
30 | showModal: state.showModal,
31 | }
32 | }
33 |
34 | const mapDispatchToProps = dispatch => {
35 | const onAjaxDataFetched = layerData => {
36 | dispatch(getModalData(layerData))
37 | }
38 |
39 | const onGetModalData = (layer, lastClickData) => {
40 | const MAX_ITEMS_TO_LOAD = 9999
41 |
42 | let url = GeoAPI.createUrl({
43 | layer: layer,
44 | clickData: lastClickData,
45 | featureCount: MAX_ITEMS_TO_LOAD
46 | })
47 | GeoAPI.getLayerData(onAjaxDataFetched, url)
48 | }
49 |
50 | const populateCallback = xmlData => {
51 | dispatch(populateApp(xmlData, location.hash))
52 | }
53 |
54 | const loginCallback = data => {
55 | dispatch(loginUser(data))
56 | GeoAPI.getContent(populateCallback)
57 | }
58 |
59 | const authenticate = ({username, password}) => {
60 | ScaAPI.logInUser(loginCallback, username, password)
61 | }
62 |
63 | const authenticateLogout = () => {
64 | ScaAPI.logOutUser(loginCallback)
65 | }
66 |
67 | const onLayerFilterSearchLoaded = data => {
68 | dispatch(layerFilterLoaded(data))
69 | }
70 |
71 | return {
72 | /**
73 | * Fetch data from server to get content
74 | * of the selected tab
75 | */
76 | onChangeActiveTab: (layer, lastClickData) => {
77 | dispatch(changeActiveTab(layer))
78 | var selectedLayer = layer
79 | // Call AJAX
80 | onGetModalData(selectedLayer, lastClickData)
81 | },
82 | onCloseModal: () => {
83 | dispatch(closeModal())
84 | },
85 | onLayerFilterSearch: (layerName, parameterKey, parameterValue) => {
86 | dispatch(layerFilterLoading(layerName, parameterKey, parameterValue))
87 | GeoAPI.getLayerFilteredData(layerName, parameterKey, parameterValue, onLayerFilterSearchLoaded)
88 | },
89 | onLoginClick: data => {
90 | authenticate(data)
91 | },
92 | onPaginate: (layer, page) => {
93 | dispatch(paginate(layer, page))
94 | },
95 | }
96 | }
97 |
98 | const ModalContainer = connect(
99 | mapStateToProps,
100 | mapDispatchToProps
101 | )(Modal)
102 |
103 | export default ModalContainer
104 |
--------------------------------------------------------------------------------
/src/components/Toolbar/ToolbarContainer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Toolbar from './Toolbar'
3 | import { connect } from 'react-redux'
4 | import {
5 | addPlaceLayer,
6 | addTutelaLayer,
7 | changeActiveBaseMap,
8 | changeActiveToolbar,
9 | changeContour,
10 | changeGlobalFilterType,
11 | changeOpacity,
12 | clearPlaceTutelaLayer,
13 | searchPlaces,
14 | searchTutela,
15 | togglePlace,
16 | toggleTutela,
17 | activateDownloadLoader,
18 | deactivateDownloadLoader,
19 | } from '../../actions/ToolbarActions'
20 | import {
21 | populateApp,
22 | } from '../../actions/actions.js'
23 | import ScaAPI from '../Api/ScaAPI.js'
24 | import GeoAPI from '../Api/GeoAPI.js'
25 |
26 | const mapStateToProps = (state, ownProps) => {
27 | return {
28 | baseMaps: state.baseMaps,
29 | globalFilterType: state.globalFilterType,
30 | layers: state.layers,
31 | loginStatus: state.loginStatus,
32 | mapProperties: state.mapProperties,
33 | places: state.places,
34 | showSidebarRight: state.showSidebarRight,
35 | toolbarActive: state.toolbarActive,
36 | tutela: state.tutela,
37 | ownProps,
38 | }
39 | }
40 |
41 | const mapDispatchToProps = dispatch => {
42 | const populateCallback = xmlData => {
43 | dispatch(populateApp(xmlData, location.hash))
44 | }
45 | const logoutCallback = data => {
46 | ScaAPI.logOutUser()
47 | GeoAPI.getContent(populateCallback)
48 | }
49 | return {
50 | onChangeActiveBaseMap: baseMap => {
51 | dispatch(changeActiveBaseMap(baseMap))
52 | },
53 | onClearPlaceTutelaLayer: () => {
54 | dispatch(clearPlaceTutelaLayer())
55 | },
56 | onContourChange: item => {
57 | dispatch(changeContour(item))
58 | },
59 | onGlobalFilterTypeChange: item => {
60 | dispatch(changeGlobalFilterType(item))
61 | },
62 | onKeyUpSearchPlaces: item => {
63 | dispatch(searchPlaces(item))
64 | },
65 | onKeyUpSearchTutela: item => {
66 | dispatch(searchTutela(item))
67 | },
68 | onOpacityChange: item => {
69 | dispatch(changeOpacity(item))
70 | },
71 | onPlaceClick: item => {
72 | dispatch(togglePlace(item))
73 | dispatch(addPlaceLayer(item))
74 | },
75 | onToolbarItemClick: item => {
76 | // wait a little bit for search component open
77 | window.setTimeout(() => {
78 | document.getElementById('searchField').focus()
79 | }, 100)
80 | dispatch(changeActiveToolbar(item))
81 | if (item === 'logout') {
82 | logoutCallback()
83 | }
84 | },
85 | onTutelaClick: item => {
86 | dispatch(toggleTutela(item))
87 | dispatch(addTutelaLayer(item))
88 | },
89 | onDownloadClick: () => {
90 | dispatch(activateDownloadLoader())
91 | },
92 | onDownloadEnd: () => {
93 | dispatch(deactivateDownloadLoader())
94 | }
95 | }
96 | }
97 |
98 | const ToolbarContainer = connect(
99 | mapStateToProps,
100 | mapDispatchToProps
101 | )(Toolbar)
102 |
103 | export default ToolbarContainer
104 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | Our development objectives and open issues are all public on [GitHub issues](https://github.com/MinisterioPublicoRJ/inloco/issues). Pull requests are welcome!
4 |
5 | Optionally, you can install [ZenHub](https://github.com/marketplace/zenhub) plugin (available on Chrome and Firefox) to see development plan board, see issues already in progress etc.
6 |
7 | ## Running
8 | The development build (`npm start`) will also start docs build (esdoc). This docs build will compile all components docs and show a webpage. To access it just:
9 | 1. `$ npm start`
10 | 1. Access url `http://localhost:3000/`
11 |
12 | Docs
13 | 1. Access url `http://localhost:3000/esdoc/`
14 |
15 | Other options are:
16 |
17 | ### Production mode
18 |
19 | ```
20 | $ npm run prod
21 | ```
22 |
23 | ### Production build (without running server)
24 |
25 | ```
26 | $ npm run build
27 | ```
28 |
29 | ### Run tests
30 |
31 | ```
32 | $ npm install -g jest
33 | $ npm run test
34 | ```
35 | If you get error with jest, try running `jest --no-cache`
36 |
37 | ### Running on mock mode
38 | This mode does not call the geoserver, instead it simulates geoserver calls.
39 |
40 | ```
41 | $ npm run mock
42 | ```
43 |
44 | ## Testing
45 | The tests environment was made using [jest](https://facebook.github.io/jest/) and [enzyme](https://github.com/airbnb/enzyme). At first, we're doing the following test types:
46 | 1. Component rendering with [Snapshot test](https://facebook.github.io/jest/docs/snapshot-testing.html). Example:
47 |
48 | ```javascript
49 | import React from 'react';
50 | import App from '../../src/components/App/App.js';
51 | import renderer from 'react-test-renderer';
52 |
53 | it('component renders correctly', () => {
54 | const app = shallow(
65 |
83 |
84 | -
66 | {
67 | layer && layer.styles ?
68 | layer.styles.map((style, indexStyle) => {
69 | return (
70 |
106 |
109 |
110 | );
111 | }
112 | }
113 | ```
114 |
--------------------------------------------------------------------------------
/src/components/App/reducers/geoServerXmlStyleReducer.js:
--------------------------------------------------------------------------------
1 | // styles constants
2 | const WORKSPACE = __WORKSPACE__
3 | const ENDPOINT = __API__
4 | const ICON_SIZE = { x: 27, y: 20 }
5 | const THUMB_SIZE = { x: 225, y: 150 }
6 | const TOOLTIP_SIZE = 750
7 | const PROJECTION = 'EPSG:3857'
8 | const ICON_THUMB_URL = './resources/img/plataforma/icones/'
9 |
10 | /**
11 | * Returns bounding box for a given layer
12 | * @param xmlNode XML node with a GeoServer layer
13 | * @return {String} bounding box string: minX,minY,maxX,maxY
14 | */
15 | export const parseBoundingBox = (xmlNode) => {
16 | let boundingBox = xmlNode.getElementsByTagName('BoundingBox')[0]
17 |
18 | let minX = boundingBox.attributes.minx.value
19 | let minY = boundingBox.attributes.miny.value
20 | let maxX = boundingBox.attributes.maxx.value
21 | let maxY = boundingBox.attributes.maxy.value
22 |
23 | return `${minX},${minY},${maxX},${maxY}`
24 | }
25 |
26 | /**
27 | * Returns styles array
28 | * @param xmlNode XML node with a GeoServer layer
29 | * @param layer object with parsed layer data
30 | * @return {Object[]} Styles array
31 | */
32 | export const parseStyle = (xmlNode, layer) => {
33 | let styles = []
34 | const styleCollection = xmlNode.getElementsByTagName('Style')
35 |
36 | for (let i=0, l=styleCollection.length; iHello World
107 | 108 |109 |
${styleTitle}` 58 | 59 | let styleObj = { 60 | 'id' : i, 61 | 'title' : styleTitle, 62 | 'name' : styleName, 63 | 'description' : styleAbstract, 64 | 'icon' : iconURL, // icon generated by GeoServer dynamically 65 | 'icon_2' : iconURL_2, // cached icon 66 | 'thumb' : thumbURL, // thumb generated by GeoServer dynamically 67 | 'thumb_2' : thumbURL_2, // cached thumb 68 | 'tooltip' : tooltip, 69 | } 70 | 71 | styles.push(styleObj) 72 | } 73 | 74 | return styles 75 | } 76 | -------------------------------------------------------------------------------- /tests/test_generator.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | 3 | var tests = []; 4 | 5 | var test = { 6 | className: "", 7 | imports: "" 8 | } 9 | 10 | var dataConfig; 11 | 12 | var dir = "/Users/rafael.tavares/projects-mp/github/inLoco-2.0/src/components"; 13 | 14 | function readConfigFile(){ 15 | fs.readFile('/Users/rafael.tavares/projects-mp/github/inLoco-2.0/tests/tests-boilerplate.json', 'utf8', function (err,data) { 16 | if (err) { 17 | return console.log(err); 18 | } 19 | dataConfig = JSON.parse(data); 20 | dive(dir, dataConfig); 21 | }); 22 | } 23 | 24 | 25 | 26 | var dive = function (dir, dataConfig) { 27 | fs.readdir(dir, function (err, list) { 28 | // Return the error if something went wrong 29 | if (err) 30 | return err; 31 | 32 | // For every file in the list 33 | list.forEach(function (file) { 34 | // Full path of that file 35 | var path = dir + "/" + file; 36 | var extension = file.split(".")[1]; 37 | if(extension === "js"){ 38 | read(path, dataConfig); 39 | } 40 | // Get the file's stats 41 | fs.stat(path, function (err, stat) { 42 | // If the file is a directory 43 | if (stat && stat.isDirectory()) 44 | // Dive into the directory 45 | dive(path, dataConfig); 46 | // else 47 | // Call the action 48 | // action(null, path); 49 | }); 50 | }); 51 | }); 52 | }; 53 | 54 | function read(pathToFile, dataConfig){ 55 | fs.readFile(pathToFile, 'utf8', function (err,data) { 56 | if (err) { 57 | return console.log(err); 58 | } 59 | data = data.split(" "); 60 | for (var index = 0; index < data.length; index++) { 61 | var element = data[index]; 62 | if (element === "class"){ 63 | var className = data[index+1]; 64 | test = { 65 | "className": "", 66 | "imports": `import ${className} from "../../src/components/${className}/${className}.js"\n` 67 | }; 68 | test.className = className; 69 | tests.push(test); 70 | } 71 | } 72 | //console.log(test); 73 | writeTest(test, dataConfig); 74 | }); 75 | } 76 | readConfigFile(); 77 | 78 | function writeTest(test, dataConfig){ 79 | for (var index = 0; index < dataConfig.imports.length; index++) { 80 | var what = dataConfig.imports[index].what; 81 | var where = dataConfig.imports[index].where; 82 | test.imports += "import "+ what + " from " + where + "\n"; 83 | } 84 | for (var index = 0; index < dataConfig.tests.length; index++) { 85 | var element = dataConfig.tests[index]; 86 | if (element.name === "snapshot"){ 87 | var varName = test.className.charAt(0).toLowerCase() + test.className.slice(1); 88 | element.testString = 89 | `it('component renders correctly', () => { 90 | const ${varName} = shallow(<${test.className}/>); 91 | expect(${varName}).toMatchSnapshot(); 92 | })\n`; 93 | test.testString = element.testString; 94 | } 95 | } 96 | console.log(test); 97 | //writeTest(test); 98 | fs.writeFile(`/Users/rafael.tavares/projects-mp/github/inLoco-2.0/tests/auto/${test.className}.test.js`, test.imports + test.testString, { flag: "wx" }, function(err) { 99 | if(err) { 100 | return console.log(err); 101 | } 102 | }); 103 | } 104 | -------------------------------------------------------------------------------- /src/components/ShareUrl/ShareUrl.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ClipboardButton from 'react-clipboard.js' 3 | 4 | /** 5 | * Filters layers using the `selected` property 6 | * @param {Object[]} layers - layers array 7 | * @returns {Object[]} - returns all layers that are selected 8 | */ 9 | const selectedLayers = (layers) => { 10 | if (!Array.isArray(layers)) { 11 | return [] 12 | } 13 | return layers.filter(layer => layer.selected) 14 | } 15 | 16 | /** 17 | * Truncate coordinate values to given precision, without rounding. 18 | * For instance, -23.1234567890 => -23.123456 when decimals = 6. 19 | * Note that it wont create zeroes on the end, so -23.45 => -23.45 when decimals = 6. 20 | * @param {number} number a number to be truncated 21 | * @param {number} decimals desired decimals on truncated number 22 | * @return {string} the truncated number as string. 23 | */ 24 | const truncateValue = (number, decimals) => { 25 | let re = new RegExp('^-?\\d+(?:\.\\d{0,' + (decimals || -1) + '})?') 26 | return number.toString().match(re)[0] 27 | } 28 | 29 | /** 30 | * Creates a share URL with current map view and active layers 31 | * @param {Object} mapProperties object with map properties 32 | * @param {Object} mapProperties.currentCoordinates object with the current view lat/lon and zoom level 33 | * @param {number} mapProperties.currentCoordinates.lat current view latitude 34 | * @param {number} mapProperties.currentCoordinates.lng current view longitude 35 | * @param {number} mapProperties.currentCoordinates.zoom current view zoom 36 | * @param {Object[]} activeLayers array with active layers 37 | * @return {string} JSX string 38 | */ 39 | const ShareUrl = ({mapProperties, layers, orderByLayerOrder, onToolbarItemClick}) => { 40 | if (!mapProperties || !mapProperties.currentCoordinates) { 41 | return null 42 | } 43 | let lat = truncateValue(mapProperties.currentCoordinates.lat, 6) 44 | let lng = truncateValue(mapProperties.currentCoordinates.lng, 6) 45 | let zoom = mapProperties.currentCoordinates.zoom 46 | let basemap = mapProperties.currentMap.name 47 | 48 | // drop current value if needed 49 | let baseUrl = location.href.split('#')[0] 50 | 51 | let url = `${baseUrl}#lat=${lat}&lng=${lng}&zoom=${zoom}&basemap=${basemap}` 52 | 53 | let activeLayers = orderByLayerOrder(selectedLayers(layers)).map(l => { 54 | // ex: plataforma_educ_escolas:educ_escolas_publicas 55 | let layerString = `${l.id}:${l.styles[l.selectedLayerStyleId].name.replace('plataforma:', '')}` 56 | if (l.filterKey && l.filterValue) { 57 | // ex: plataforma_educ_escolas:educ_escolas_publicas(Escola|maria) 58 | layerString += `(${l.filterKey}|${l.filterValue})` 59 | } 60 | return layerString 61 | }).join(',') 62 | 63 | if (activeLayers) { 64 | url += `&layers=${activeLayers}` 65 | } 66 | 67 | if (mapProperties.placeToCenter) { 68 | if (mapProperties.placeToCenter.cd_craai) { 69 | url += `&craai=${mapProperties.placeToCenter.cd_craai}` 70 | } 71 | if (mapProperties.placeToCenter.cd_municipio) { 72 | url += `&municipio=${mapProperties.placeToCenter.cd_municipio}` 73 | } 74 | if (mapProperties.placeToCenter.cd_bairro) { 75 | url += `&bairro=${mapProperties.placeToCenter.cd_bairro}` 76 | } 77 | if (mapProperties.placeToCenter.tipo === 'ORGAO') { 78 | url += `&orgao=${mapProperties.placeToCenter.id}` 79 | } 80 | } 81 | 82 | return ( 83 | 86 | ) 87 | } 88 | 89 | export default ShareUrl 90 | -------------------------------------------------------------------------------- /src/components/SidebarRight/SidebarRight.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import LayerSubtitleSpace from '../LayerSubtitle/LayerSubtitleSpace.js' 3 | import PolygonData from '../PolygonData/PolygonData.js' 4 | import HTML5Backend from 'react-dnd-html5-backend' 5 | import { DragDropContext } from 'react-dnd' 6 | 7 | const SidebarRight = ({ 8 | layers, 9 | showSidebarRight, 10 | onLayerClick, 11 | orderByLayerOrder, 12 | lastClickData, 13 | polygonData, 14 | onClearLayerFilter, 15 | onIconMouseOut, 16 | onIconMouseOver, 17 | onLayerDown, 18 | onLayerDrop, 19 | onLayerFilterSearch, 20 | onLayerRemove, 21 | onLayerUp, 22 | onLoadParams, 23 | onOpenLayerFilterModal, 24 | onOpenModal, 25 | onRemoveAllLayers, 26 | onSidebarRightHideClick, 27 | }) => { 28 | if (!orderByLayerOrder) { 29 | orderByLayerOrder = () => { return layers } 30 | } 31 | 32 | // define base class of element 33 | var cssClass = 'sidebar-right allow-transition-sidebar-right' 34 | // if showSidebarRight is false, add class to hide the element 35 | if (!showSidebarRight) { 36 | cssClass += ' hide-sidebar-right' 37 | } 38 | return ( 39 |
40 |
88 |
89 | )
90 | }
91 | // need to wrap the top most component of your application
92 | // to make children draggable with DragDropContext (set up React DnD).
93 | export default DragDropContext(HTML5Backend)(SidebarRight)
94 |
--------------------------------------------------------------------------------
/src/components/ToolbarMenu/ToolbarMenu.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import BaseMapList from '../BaseMapList/BaseMapList'
3 | import ExportList from '../ExportList/ExportList'
4 | import GlobalFilter from '../GlobalFilter/GlobalFilter'
5 | import GooglePlacesContainer from '../GooglePlaces/GooglePlacesContainer'
6 | import ShareUrl from '../ShareUrl/ShareUrl'
7 |
8 | /**
9 | * Creates a toolbar menu (one for each toolbar item)
10 | * @param {object} p An object with parameters
11 | * @return {string} JSX string
12 | */
13 | const ToolbarMenu = ({
14 | active,
15 | baseMaps,
16 | globalFilterType,
17 | item,
18 | mapProperties,
19 | layers,
20 | places,
21 | tutela,
22 | type,
23 | onChangeActiveBaseMap,
24 | onClearPlaceTutelaLayer,
25 | onContourChange,
26 | onGlobalFilterTypeChange,
27 | onKeyUpSearchPlaces,
28 | onKeyUpSearchTutela,
29 | onOpacityChange,
30 | onPlaceClick,
31 | onToolbarItemClick,
32 | onTutelaClick,
33 | onDownloadClick,
34 | onDownloadEnd,
35 | orderByLayerOrder,
36 | }) => {
37 | let className = 'toolbar-menu'
38 |
39 | if (type === 'map') {
40 | className += ' map'
41 | }
42 |
43 | if (
44 | (!active || active !== item.name) ||
45 | item.name === 'draw' ||
46 | item.name === 'polygonRequest' ||
47 | item.name === 'help' ||
48 | item.name === 'about'
49 | ) {
50 | className += ' hidden'
51 | }
52 |
53 | return (
54 |
55 | {
56 | item.name === 'download'
57 | ?
109 | )
110 | }
111 |
112 | export default ToolbarMenu
113 |
--------------------------------------------------------------------------------
/tests/Menu/Menu.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Menu from '../../src/components/Menu/Menu.js';
3 |
4 | it('Menu component renders correctly with no data', () => {
5 | const component = shallow();
6 | expect(component).toMatchSnapshot();
7 | });
8 |
9 | it('Menu component renders correctly with real data', () => {
10 | let mock = {
11 | "sidebarLeftWidth":37.859375,
12 | "sidebarLeftHeight":85.046875,
13 | "menuItems":[
14 | {
15 | "display":true,
16 | "id":"Assistência Social",
17 | "title":"Assistência Social",
18 | "layers":[1],
19 | "idMenu":1,
20 | "isSubMenu":false,
21 | "submenus":[],
22 | "selected":false,
23 | "match":true
24 | }
25 | ],
26 | "layers":[
27 | {
28 | "id":"plataforma_acterj_conselho_tutelar",
29 | "name":"acterj_conselho_tutelar",
30 | "title":"Conselho Tutelar",
31 | "workspace":"plataforma",
32 | "display":true,
33 | "restricted":false,
34 | "layerName":"plataforma:acterj_conselho_tutelar",
35 | "description":"Fontes: Associação dos Conselheiros Tutelares (ACTERJ). Contato: acterj@gmail.com/ http://www.acterj.org.br/ Ano:2016.",
36 | "bbox":"-44.71388499999997,-23.223640999999986,-41.045743999999964,-20.96493900000002",
37 | "caops":["infancia","cidadania","educacao"],
38 | "menu":"assistencia",
39 | "menu2":["Assistência Social"],
40 | "key":0,
41 | "styles":[
42 | {
43 | "id":0,
44 | "title":"Conselho Tutelar",
45 | "name":"plataforma:conselho_tutelar",
46 | "description":"Conselhos Tutelares registrados na ACTERJ e CEDCA",
47 | "icon":"/geoserver/plataforma/wms?service=WMS&version=1.1.0&request=GetMap&bbox=-44.71388499999997,-23.223640999999986,-41.045743999999964,-20.96493900000002&width=27&height=20&ssrs=EPSG:3857&format=image%2Fpng&layers=plataforma:acterj_conselho_tutelar&singleTile=true&styles=plataforma:conselho_tutelar",
48 | "icon_2":"./resources/img/plataforma/icones/plataforma_acterj_conselho_tutelar-plataforma_conselho_tutelar_27_20.png","thumb":"/geoserver/plataforma/wms?service=WMS&version=1.1.0&request=GetMap&bbox=-44.71388499999997,-23.223640999999986,-41.045743999999964,-20.96493900000002&width=225&height=150&ssrs=EPSG:3857&format=image%2Fpng&layers=plataforma:acterj_conselho_tutelar&singleTile=true&styles=plataforma:conselho_tutelar",
49 | "thumb_2":"./resources/img/plataforma/icones/plataforma_acterj_conselho_tutelar-plataforma_conselho_tutelar_225_150.png","tooltip":"![](\"./resources/img/plataforma/icones/plataforma_acterj_conselho_tutelar-plataforma_conselho_tutelar_225_150.png\")
Conselho TutelarConselho Tutelar" 50 | } 51 | ], 52 | "selected":false, 53 | "match":true, 54 | "showDescription":false, 55 | "selectedLayerStyleId":0 56 | } 57 | ], 58 | "currentLevel":0 59 | } 60 | 61 | const component = shallow(