Skip to content

Commit

Permalink
Merge pull request #163 from prefeitura-rio/development
Browse files Browse the repository at this point in the history 
Development
  • Loading branch information
@lucastavarex
lucastavarex authored Jul 26, 2024
2 parents 23bfcee + d275a43 commit 9c0e6a4
Show file tree
Hide file tree
Showing 27 changed files with 1,470 additions and 1,008 deletions.
8 changes: 8 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"react-lazy-load-image-component": "^1.5.1",
"react-lazyload": "^3.2.1",
"react-leaflet": ">=3.1.0 <3.2.0 || ^3.2.1",
"react-leaflet-cluster": "^2.0.0",
"react-leaflet-markercluster": "^3.0.0-rc1",
"react-material-ui-carousel": "^3.4.2",
"react-onclickoutside": "^6.11.2",
Expand Down
149 changes: 89 additions & 60 deletions src/components/map/Map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import Alert from '@mui/material/Alert';
import Snackbar from '@mui/material/Snackbar';
import bairros_centros from "./centroideBairros";
import subprefeituras_centros from "./centroideSubprefeituras";
import MarkerClusterGroup from "react-leaflet-markercluster";
import MarkerClusterGroup from 'react-leaflet-cluster'
import shapeFileBairros from "./shapeFileBairros.json"
import shapeFileSubprefeituras from "./shapeFileSubprefeituras.json"
import lineStringAsfaltoLiso from "./lineStringAsfaltoLiso.json"
Expand Down Expand Up @@ -150,11 +150,11 @@ const Map = ({
style: { color: color, weight: 4 }
}).addTo(map);
};
if(gestao == null || gestao == "3" || gestao == "1_2_3"){
(programa == null || programa=="BRTs Transbrasil") && addLayer('TransBrasil', currentLayerTransBrasil, '#ED3237');
(programa == null || programa=="BRTs Transoeste") && addLayer('TransOeste', currentLayerTransOeste, '#208DCD');
(programa == null || programa=="BRTs Transcarioca") && addLayer('TransCarioca', currentLayerTransCarioca, '#ED7422');
(programa == null || programa=="BRTs Transolímpica") && addLayer('TransOlímpica', currentLayerTransOlímpica, '#1DA64D');
if (gestao == null || gestao == "3" || gestao == "1_2_3") {
(programa == null || programa == "BRTs Transbrasil") && addLayer('TransBrasil', currentLayerTransBrasil, '#ED3237');
(programa == null || programa == "BRTs Transoeste") && addLayer('TransOeste', currentLayerTransOeste, '#208DCD');
(programa == null || programa == "BRTs Transcarioca") && addLayer('TransCarioca', currentLayerTransCarioca, '#ED7422');
(programa == null || programa == "BRTs Transolímpica") && addLayer('TransOlímpica', currentLayerTransOlímpica, '#1DA64D');
}
} else {
removeLayers();
Expand Down Expand Up @@ -600,61 +600,64 @@ const Map = ({
function renderMarker(point, index) {
return (
<Marker
key={point.id + index}
position={Object.values(point.coords)}
icon={getIcon(iconMapping[point.id_programa] || (point === currentClickedPoint ? 'redicon' : 'anyIcon'), point === currentClickedPoint, point.gestao !== '3')}
eventHandlers={point.id_programa !== 'estações_alerta_rio' && point.id_programa !== 'câmeras' && point.id_programa !== 'sirenes' ? {
click: () => onMarkerClick(point),
} : {}}
>
<CustomTooltip direction="right" offset={[-8, -2]} opacity={1} sticky>
<CustomCard>
<CardActionArea>
{point.image_url && (
<CardMedia
component="img"
height="140"
image={point.image_url}
alt={point.nome}
/>
)}
<CardContent>
<Typography
gutterBottom
component="div"
style={{
fontSize: point.image_url ? '1.2rem' : '1.08rem',
display: '-webkit-box',
overflow: 'hidden',
textOverflow: 'ellipsis',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
whiteSpace: 'normal',
wordWrap: 'break-word',
lineHeight: point.image_url ? '1.2' : '1',
backgroundColor: 'transparent',
marginBottom: point.image_url ? "" : "0px",
}}
>
{point.id_programa === 'rio_em_forma' ? `Rio em Forma - ${point.nome}` : point.nome}
</Typography>
{point.id_bairro && (
<Typography variant="body2" color="text.secondary" style={{ backgroundColor: 'transparent' }}>
Bairro: {toTitleCase(point.id_bairro ?? '')}
</Typography>
)}
</CardContent>
</CardActionArea>
</CustomCard>
</CustomTooltip>
</Marker>
key={point.id + index}
position={Object.values(point.coords)}
icon={getIcon(iconMapping[point.id_programa] || (point === currentClickedPoint ? 'redicon' : 'anyIcon'), point === currentClickedPoint, point.gestao !== '3')}
eventHandlers={point.id_programa !== 'estações_alerta_rio' && point.id_programa !== 'câmeras' && point.id_programa !== 'sirenes' ? {
click: () => onMarkerClick(point),
} : {}}
>
{isDesktop() &&
<CustomTooltip direction="right" offset={[-8, -2]} opacity={1} sticky>
<CustomCard>
<CardActionArea>
{point.image_url && (
<CardMedia
component="img"
height="140"
image={point.image_url}
alt={point.nome}
/>
)}
<CardContent>
<Typography
gutterBottom
component="div"
style={{
fontSize: point.image_url ? '1.2rem' : '1.08rem',
display: '-webkit-box',
overflow: 'hidden',
textOverflow: 'ellipsis',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
whiteSpace: 'normal',
wordWrap: 'break-word',
lineHeight: point.image_url ? '1.2' : '1',
backgroundColor: 'transparent',
marginBottom: point.image_url ? "" : "0px",
}}
>
{point.id_programa === 'rio_em_forma' ? `Rio em Forma - ${point.nome}` : point.nome}
</Typography>
{point.id_bairro && (
<Typography variant="body2" color="text.secondary" style={{ backgroundColor: 'transparent' }}>
Bairro: {toTitleCase(point.id_bairro ?? '')}
</Typography>
)}
</CardContent>
</CardActionArea>
</CustomCard>
</CustomTooltip>
}
</Marker>
);
}

const resilienciaClimaticaPoints = points.filter(point => (toSnakeCase('Resiliência Climática') === point.id_tema) && (point.gestao == "3"));
const asfaltoLisoPoints = points.filter(point => toSnakeCase('Asfalto liso') === point.id_programa);
const mobilidadePoints = points.filter(point => (toSnakeCase('Mobilidade') === point.id_tema) && (toSnakeCase('Asfalto liso') !== point.id_programa));
const otherPoints = points.filter(point => (toSnakeCase('Mobilidade') !== point.id_tema) && (toSnakeCase('Asfalto liso') !== point.id_programa) && (point.gestao == "3"));
const oldPoints = points.filter(point => (toSnakeCase('Mobilidade') !== point.id_tema) && (toSnakeCase('Asfalto liso') !== point.id_programa) && (point.gestao != "3"));
const mobilidadePoints = points.filter(point => (toSnakeCase('Mobilidade') === point.id_tema) && (toSnakeCase('Asfalto liso') !== point.id_programa) && (toSnakeCase('Resiliência Climática') !== point.id_tema));
const otherPoints = points.filter(point => (toSnakeCase('Mobilidade') !== point.id_tema) && (toSnakeCase('Asfalto liso') !== point.id_programa) && (point.gestao == "3") && (toSnakeCase('Resiliência Climática') !== point.id_tema));
const oldPoints = points.filter(point => (toSnakeCase('Mobilidade') !== point.id_tema) && (toSnakeCase('Asfalto liso') !== point.id_programa) && (point.gestao != "3") && (toSnakeCase('Resiliência Climática') !== point.id_tema));

const [userLocationCoords, setUserLocationCoords] = useState(null);
const [isZoomed, setIsZoomed] = useState(false);
Expand Down Expand Up @@ -746,6 +749,7 @@ const Map = ({
/>
<MarkerClusterGroup showCoverageOnHover={false}
spiderfyDistanceMultiplier={2}
chunkedLoading
iconCreateFunction={createClusterCustomIcon}>
{otherPoints.map((point, index) => {

Expand All @@ -767,9 +771,9 @@ const Map = ({
// return renderMarker(point, index);
// }
// } else {
if (isBairroMatch && isTemaMatch && isProgramaMatch && isSubprefeituraMatch && (gestao == null || gestao == "3" || gestao == "1_2_3")) {
return renderMarker(point, index);
}
if (isBairroMatch && isTemaMatch && isProgramaMatch && isSubprefeituraMatch && (gestao == null || gestao == "3" || gestao == "1_2_3")) {
return renderMarker(point, index);
}
// }


Expand Down Expand Up @@ -835,6 +839,31 @@ const Map = ({

})}

<MarkerClusterGroup showCoverageOnHover={false}
spiderfyDistanceMultiplier={2}
iconCreateFunction={createClusterCustomIcon}>
{resilienciaClimaticaPoints.map((point, index) => {

// Verifica se o ponto corresponde ao bairro selecionado
const isBairroMatch = bairro ? toSnakeCase(bairro) === point.id_bairro : true;

// Verifica se o ponto corresponde ao subprefeitura selecionado
const isSubprefeituraMatch = subprefeitura ? toSnakeCase(subprefeitura) === point.id_subprefeitura : true;

// Verifica se o ponto corresponde ao tema selecionado
const isTemaMatch = tema ? toSnakeCase(tema) === point.id_tema : true;

const isProgramaMatch = programa ? toSnakeCase(programa) === point.id_programa : true;


// Renderiza o marcador se corresponder ao bairro e aos demais
if ((tema || bairro || subprefeitura) && isBairroMatch && isTemaMatch && isProgramaMatch && isSubprefeituraMatch && (gestao != "1_2")) {
return renderMarker(point, index);
}

})}
</MarkerClusterGroup>

{userLocation && userLocationCoords && (
<Marker
position={userLocationCoords}
Expand Down
120 changes: 65 additions & 55 deletions src/components/map/shapeFileSubprefeituras.json
View file

Large diffs are not rendered by default.

97 changes: 51 additions & 46 deletions src/components/sidebars/bairroDescription/BairroDescriptionBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,8 @@ const BairroDescriptionBar = forwardRef(
setUnderSearchBar,
loadData,
setActiveBar,
openedPopup
openedPopup,
gestao
}, ref) => {

const classes = useStyles();
Expand Down Expand Up @@ -399,50 +400,52 @@ const BairroDescriptionBar = forwardRef(
</Box>

</Paper>
<Paper
elevation={6}
className={classes.underSearch4Mobile}
>
<div className={classes.basicInfo}>
<Typography className={classes.sobreMunicipio}>Destaques</Typography>
<ul className={classes.listStyle} style={{ listStyleType: 'none', padding: 0, textAlign: "left", }}>
{isLoading ? (
<>
<Skeleton variant="text" />
<Skeleton height="15px" width="80%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="40%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="80%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="40%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
</>
) : destaquesBairro.length === 0 ? (
<Typography className={classes.subtitulo}>Nenhum destaque encontrado para este bairro.</Typography>
) : (
destaquesBairro.map((item, index) => (
<li key={index} style={{ paddingBottom: "15px" }}>
<Typography className={classes.title_li} onClick={() => handleTitleClick(item.title)}>
{item.title} <ArrowOutwardIcon sx={{ paddingLeft: "20px", marginBottom: "-5px" }} />
</Typography>
<Typography className={classes.subtituloDestaques}>{item.description}</Typography>
</li>
))
)}
</ul>
</div>
</Paper>
{gestao != "1_2" &&
<Paper
elevation={6}
className={classes.underSearch4Mobile}
>
<div className={classes.basicInfo}>
<Typography className={classes.sobreMunicipio}>Destaques</Typography>
<ul className={classes.listStyle} style={{ listStyleType: 'none', padding: 0, textAlign: "left", }}>
{isLoading ? (
<>
<Skeleton variant="text" />
<Skeleton height="15px" width="80%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="40%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="80%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
<br></br>
<Skeleton variant="text" />
<Skeleton height="15px" width="40%" />
<Skeleton height="15px" width="60%" />
<Skeleton height="15px" width="73%" />
</>
) : destaquesBairro.length === 0 ? (
<Typography className={classes.subtitulo}>Nenhum destaque encontrado para este bairro.</Typography>
) : (
destaquesBairro.map((item, index) => (
<li key={index} style={{ paddingBottom: "15px" }}>
<Typography className={classes.title_li} onClick={() => handleTitleClick(item.title)}>
{item.title} <ArrowOutwardIcon sx={{ paddingLeft: "20px", marginBottom: "-5px" }} />
</Typography>
<Typography className={classes.subtituloDestaques}>{item.description}</Typography>
</li>
))
)}
</ul>
</div>
</Paper>
}
</Stack>)
}
const [value, setValue] = useState(1);
Expand Down Expand Up @@ -556,7 +559,8 @@ const BairroDescriptionBar = forwardRef(

</Paper>
</Slide>
<Slide direction="up" timeout={1000} in={underSearchBar} mountOnEnter unmountOnExit>

<Slide direction="up" timeout={1000} in={gestao != "1_2"} mountOnEnter unmountOnExit>
<Paper
elevation={6}
className={classes.underSearch3}
Expand Down Expand Up @@ -602,6 +606,7 @@ const BairroDescriptionBar = forwardRef(
</div>
</Paper>
</Slide>

</>
)}

Expand Down
Loading

0 comments on commit 9c0e6a4

Please sign in to comment.