Skip to content

Commit

Permalink
Correção do BUG do Firefox e espaçamento dos CARDS no mapa
Browse files Browse the repository at this point in the history 
- Correção do BUG no Firefox de ordenação da lista de ativos e clique nos estabelecimento.
- Verificação e correção de erro de CSS e espaçamento dos cards dento dos pop-ups do mapa.
- Novos debugs criados e já comentados
  • Loading branch information
@ewaldsc
ewaldsc committed Jan 15, 2024
1 parent 5c04fdc commit a87ac9f
Show file tree
Hide file tree
Showing 3 changed files with 1,252 additions and 19 deletions.
8 changes: 6 additions & 2 deletions assets/css/mapaloja.style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,11 +121,15 @@ button.mapboxgl-ctrl-geocoder--button {
.mapboxgl-popup-content {
font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
text-align: center;
padding: 5;
padding: 5px 7px 5px 7px;
/* width: 250px; */
width: 250px;
color: #386650;
}
}

div.mapboxgl-popup-content img{
padding: 10px 0 5px 0;
}

.mapboxgl-popup-close-button {
display: none;
Expand Down
65 changes: 48 additions & 17 deletions js/mapaloja.app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ function loadCard(currentFeature) {
// description = '<a href="'+config.baseURL+'/redes/?img='+imagem+'.jpg"> <img src="../media/images/' + imagem + '.jpg" class="w-100"> </a> <br /> Produtos:<br />' + e.features[0].properties.Produtos;

//teste para exibir Região como texto abaixo da imagem
description += '<br /> Região:<br />' + regiao;
description += 'Região:<br />' + regiao;

//teste para exibir lista de produtos em formato de lista abaixo da imagem
// description += '<br /> Produtos:<br /> <ul>';
Expand Down Expand Up @@ -125,7 +125,7 @@ function createPopup(currentFeature) {
let links = sellLinks(currentFeature);
new mapboxgl.Popup({ closeOnClick: true, autoPan: true, anchor: 'bottom' })
.setLngLat(currentFeature.geometry.coordinates)
.setHTML('<h3>' + currentFeature.properties[config.popupInfo] + '</h3> <br />' + conteudoPopup + '<br />' + links)
.setHTML('<h3>' + currentFeature.properties[config.popupInfo] + '</h3>' + conteudoPopup + '<br />' + links)
.addTo(map);
}

Expand All @@ -135,7 +135,7 @@ function buildLocationList(locationData) {
const listings = document.getElementById('listings');
listings.innerHTML = '';
//debug
//console.log(locationData.features);
// console.log(locationData.features);
//debug
if(locationData.features.length == 0){
listings.innerHTML = '<p class="txt-bold">Nenhum resultado encontrado.</p>';
Expand Down Expand Up @@ -271,11 +271,11 @@ function filtroProdutos(){
//const value = e.target.value.trim().toLowerCase();

let dataCinthia = data;
//console.log(dataCinthia);
// console.log(dataCinthia);

const produtosCinthia = dataCinthia.features.map(feature => [feature.properties.Produtos, feature.properties.Nome, feature.properties.id]);

//console.dir(produtosCinthia);
console.dir(produtosCinthia);


// Alerta com lista de locais que possuem o produto filtrado
Expand Down Expand Up @@ -348,15 +348,16 @@ function filtroProdutos(){

filteredGeojson.features = [];
filteredGeojson.features = filteredProductsGeojson.features;
// console.log("antes do atualizaMapaLista do filtroProdutos");

atualizaMapaLista(filteredGeojson);
// ativosDepois(filteredGeojson);
// map.getSource('locationData').setData(filteredGeojson);
// ativosAntes(filteredGeojson);
// buildLocationList(filteredGeojson);
// console.log("depois do atualizaMapaLista do filtroProdutos");


//console.log(filteredGeojson);
// console.log(filteredGeojson);


}
Expand All @@ -376,7 +377,8 @@ function buildDropDownList(title, listItems) {
const filterTitle = document.createElement('h3');
filterTitle.innerText = title;
//filterTitle.classList.add('py12', 'txt-bold');
filterTitle.classList.add('pb6', 'txt-bold');
// filterTitle.classList.add('pb6', 'txt-bold');
filterTitle.classList.add('pb6');
mainDiv.appendChild(filterTitle);

const selectContainer = document.createElement('div');
Expand Down Expand Up @@ -665,48 +667,75 @@ function applyFilters() {
// }
// return 0; // a must be equal to b
// });
// console.log("antes do atualizaMapaLista do applyFilters");

atualizaMapaLista(filteredGeojson);
// ativosDepois(filteredGeojson);
// map.getSource('locationData').setData(filteredGeojson);
// ativosAntes(filteredGeojson);
// buildLocationList(filteredGeojson);

// console.log("depois do atualizaMapaLista do applyFilters");
filtroProdutos();

});
}

function ativosAntes(locationGeojson){
// console.log("ativosAntes");
locationGeojson.features.sort((a, b) => {
if (a.properties.AtivoTeste === 'Sim' && b.properties.AtivoTeste === '') {
if (a.properties.AtivoTeste === 'Sim' && b.properties.AtivoTeste !== 'Sim') {
return -1;
} else if (a.properties.AtivoTeste !== 'Sim' && b.properties.AtivoTeste === 'Sim') {
return 1;
} else {
return 0; // dois iguais
}
return 0; // dois iguais
});
// // exibe a posição i no array properties[i] dos ativos no console
// for (let i = 0; i < locationGeojson.features.length; i++) {
// if (locationGeojson.features[i].properties.AtivoTeste === 'Sim') {
// console.log(i);
// }
// }
}

function ativosDepois(locationGeojson){
// console.log("ativosDepois");
locationGeojson.features.sort((a, b) => {
if (a.properties.AtivoTeste === '' && b.properties.AtivoTeste === 'Sim') {
if (a.properties.AtivoTeste !== 'Sim' && b.properties.AtivoTeste === 'Sim') {
return -1;
} else if (a.properties.AtivoTeste === 'Sim' && b.properties.AtivoTeste !== 'Sim') {
return 1;
} else {
return 0; // dois iguais
}
return 0; // dois iguais
});
// // exibe a posição i no array properties[i] dos ativos no console
// for (let i = 0; i < locationGeojson.features.length; i++) {
// if (locationGeojson.features[i].properties.AtivoTeste === 'Sim') {
// console.log(i);
// }
// }

}

//função que garante que os ícones ativos sejam renderizados por último no mapa e em primeiro na lista
function atualizaMapaLista(locationGeojson){
// console.log("atualizaMapaLista inicio");
// console.log(locationGeojson);
ativosDepois(locationGeojson);

map.getSource('locationData').setData(locationGeojson);
// console.log("atualizaMapaLista depois do map.setdata");
ativosAntes(locationGeojson);
buildLocationList(locationGeojson);
// console.log("atualizaMapaLista fim - após buildLocationList");
}

// função que remove o spinner após o carregamento de todos os ícones, é chamada no final de "map.on('load'..."
function removeSpinner() {
//debug
//console.log('removeSpinner()');
// console.log('removeSpinner()');
//debug
const spinnerEl = document.getElementById('spinner');
const backgroundEl = document.getElementById('loading-background');
Expand Down Expand Up @@ -745,10 +774,12 @@ function removeFilters() {

var inputProdutos = document.getElementById('produtos');
inputProdutos.value = '';
// console.log("antes do atualizaMapaLista do removeFilters");

atualizaMapaLista(geojsonData);
// map.getSource('locationData').setData(geojsonData);
// buildLocationList(geojsonData);
// console.log("depois do atualizaMapaLista do removeFilters");
}

function removeFiltersButton() {
Expand Down Expand Up @@ -829,7 +860,7 @@ function sortByDistance(selectedPoint) {

geocoder.on('result', (ev) => {
const searchResult = ev.result.geometry;
//console.log(searchResult);
// console.log(searchResult);
removePopups();
sortByDistance(searchResult);
});
Expand All @@ -844,9 +875,9 @@ map.on('load', () => {
map.addControl(navCtrl, 'top-left');

// csv2geojson - following the Sheet Mapper tutorial https://www.mapbox.com/impact-tools/sheet-mapper
//console.log('loaded');
// console.log('loaded');
$(document).ready(() => {
//console.log('ready');
// console.log('ready');
$.ajax({
type: 'GET',
url: config.CSV,
Expand Down
Loading

0 comments on commit a87ac9f

Please sign in to comment.