Skip to content

Commit

Permalink
irregularidades table and filterable data table
Browse files Browse the repository at this point in the history
  • Loading branch information
@miguelpeixe
miguelpeixe committed Jul 8, 2012
1 parent 43d9766 commit cf56ea1
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 42 deletions.
10 changes: 4 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,13 +119,11 @@ <h3>As opções escolhidas podem ser somadas para cruzar dados e gerar diferente
</div>
<div class="inside"></div>
</header>
<section id="data-table">
</section>
<nav id="links">
</nav>
<section id="data-table"></section>
<nav id="links"></nav>
<div class="clearfix"></div>
<section id="graphs">
</section>
<section id="irregularidades"></section>
<section id="graphs"></section>
</section>
</div>
<div class="clearfix"></div>
Expand Down
170 changes: 134 additions & 36 deletions js/site.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,9 +196,7 @@ function loadSection(section) {
}
}

var scrollSettings = {
maintainPosition: false
};
var scrollSettings = {};
var scrollPane = $('#navegue #data');
scrollPane.jScrollPane(scrollSettings);
resultsScrollApi = scrollPane.data('jsp');
Expand Down Expand Up @@ -237,6 +235,7 @@ function loadSection(section) {
$.each(categories, function(i, category) {
currentData[category] = getCategoryCurrentData(selectedFilters, category);
});
currentData.irregularidades = getIrregularidades(selectedFilters);
}

function getCategoryCurrentData(filters, category) {
Expand Down Expand Up @@ -340,6 +339,14 @@ function loadSection(section) {
}
}

// add category filter
function addFilter(category, value) {
$('select.' + category + ' option').attr('selected', false);
$('select.' + category + ' option[value="' + value + '"]').attr('selected', true);
$('select.' + category).chosen().trigger('liszt:updated').change();
return false;
}

function getIrregularidadesCount(filters) {
var data = jLinq.from(irregularidadesData);
jQuery.each(filters, function(key, value) {
Expand All @@ -348,18 +355,28 @@ function getIrregularidadesCount(filters) {
return data.count();
}

function getIrregularidades(filters) {
var data = jLinq.from(irregularidadesData);
jQuery.each(filters, function(key, value) {
data = data.starts(key, value);
});
return data.select();
}

function theMagic() {

var $resultsContainer = $('#data');
var $resultsHeader = $resultsContainer.find('header .inside');
var $dataTable = $resultsContainer.find('#data-table');
var $links = $resultsContainer.find('#links');
var $graphsContainer = $resultsContainer.find('#graphs');
var $irregularidadesContainer = $resultsContainer.find('#irregularidades');

$resultsHeader.empty();
$dataTable.empty();
$links.empty();
$graphsContainer.empty();
$irregularidadesContainer.removeClass('active').empty();

if($.isEmptyObject(selectedFilters)) {
$resultsContainer.find('.landing').show();
Expand All @@ -385,8 +402,6 @@ function theMagic() {
title = selectedFilters.tipo + ' em ' + selectedFilters.programa;
}



$resultsHeader.append('<h2>' + title + '</h2>');

if(selectedFilters.cidade && !selectedFilters.tipo && !selectedFilters.programa) {
Expand All @@ -409,19 +424,22 @@ function theMagic() {
var itemData = jLinq.from(tableData.programa).starts('programa', programa.programa).select();
$.each(itemData, function(key, value) { itemData = value });
var count = itemData.count;
if(!count) count = '--';
else totalCount = totalCount + count;
var attrs;
if(!count) {
count = '--';
attrs = false;
} else {
totalCount = totalCount + count;
attrs = 'class="filterable" onClick="addFilter(\'programa\', \'' + programa.programa + '\');"';
}
var average = Math.ceil(programa.constatacoes/32);
totalAverage = Math.ceil(totalAverage + (programa.constatacoes/32));
tableContent += '<tr><td class="n">' + count + '</td><td>' + programa.programa_desc + '</td><td class="m">' + average + '</td></tr>';
tableContent += '<tr><td class="n">' + count + '</td><td ' + attrs + '>' + programa.programa_desc + '</td><td class="m">' + average + '</td></tr>';
});
tableContent += '<tr class="total"><td class="n">' + totalCount + '</td><td>TOTAL</td><td class="m">' + totalAverage + '</td></tr>';
tableContent += '</tbody></table>';

$dataTable.append(tableContent);

$links.append('<a class="button" href="#">Acesse o relatório de fiscalização da cidade</a>');

} else if(!selectedFilters.cidade && selectedFilters.tipo && !selectedFilters.programa) {
/*--TIPO
gráfico pizza
Expand All @@ -445,9 +463,15 @@ function theMagic() {
var itemData = jLinq.from(tableData.programa).starts('programa', programa.programa).select();
$.each(itemData, function(key, value) { itemData = value });
var count = itemData.count;
if(!count) count = '--';
else totalCount = totalCount + count;
tableContent += '<tr><td>' + programa.programa_desc + '</td><td class="n">' + count + '</td></tr>';
var attrs;
if(!count) {
count = '--';
attrs = false;
} else {
totalCount = totalCount + count;
attrs = 'class="filterable" onClick="addFilter(\'programa\', \'' + programa.programa + '\');"';
}
tableContent += '<tr><td ' + attrs + '>' + programa.programa_desc + '</td><td class="n">' + count + '</td></tr>';
});
tableContent += '</tbody></table>';

Expand Down Expand Up @@ -477,9 +501,15 @@ function theMagic() {
var itemData = jLinq.from(tableData.tipo).starts('tipo', tipo.tipo).select();
$.each(itemData, function(key, value) { itemData = value });
var count = itemData.count;
if(!count) count = '--';
else totalCount = totalCount + count;
tableContent += '<tr><td>' + tipo.tipo + '</td><td class="n">' + count + '</td></tr>';
var attrs;
if(!count) {
count = '--';
attrs = false;
} else {
totalCount = totalCount + count;
attrs = 'class="filterable" onClick="addFilter(\'tipo\', \'' + tipo.tipo + '\');"';
}
tableContent += '<tr><td ' + attrs + '>' + tipo.tipo + '</td><td class="n">' + count + '</td></tr>';
});
tableContent += '</tbody></table>';

Expand Down Expand Up @@ -509,19 +539,21 @@ function theMagic() {
var itemData = jLinq.from(tableData.programa).starts('programa', programa.programa).select();
$.each(itemData, function(key, value) { itemData = value });
var count = itemData.count;
if(!count) count = '--';
else totalCount = totalCount + count;
tableContent += '<tr><td>' + programa.programa_desc + '</td><td class="n">' + count + '</td></tr>';
var attrs;
if(!count) {
count = '--';
attrs = false;
} else {
totalCount = totalCount + count;
attrs = 'class="filterable" onClick="addFilter(\'programa\', \'' + programa.programa + '\');"';
}
tableContent += '<tr><td ' + attrs + '>' + programa.programa_desc + '</td><td class="n">' + count + '</td></tr>';
});
tableContent += '</tbody></table>';

$dataTable.append(tableContent);
$dataTable.find('td.total').text(totalCount);
$dataTable.find('td.total').append('<span>irregularidades</span>');

$links.append('<a class="button" href="#">Veja a lista de irregularidades</a>');
$links.append('<a class="button" href="#">Acesse o relatório de fiscalização da cidade</a>');

} else if(!selectedFilters.cidade && selectedFilters.tipo && selectedFilters.programa) {
/*--TIPO+PROGRAMA
gráfico barra
Expand All @@ -538,16 +570,13 @@ function theMagic() {
var totalCount = getIrregularidadesCount(selectedFilters);
tableContent += '<tr><td rowspan="11" class="total"></td></tr>';
$.each(tableData.cidade, function(i, cidade) {
if(i < 10) tableContent += '<tr><td>' + cidade.cidade + '</td><td class="n">' + cidade.count + '</td></tr>';
var attrs = 'class="filterable" onClick="addFilter(\'cidade\', \'' + cidade.cidade + '\');"';
if(i < 10) tableContent += '<tr><td ' + attrs + '>' + cidade.cidade + '</td><td class="n">' + cidade.count + '</td></tr>';
});
tableContent += '</tbody></table>';

$dataTable.append(tableContent);
$dataTable.find('td.total').text(totalCount);
$dataTable.find('td.total').append('<span>irregularidades</span>');

$links.append('<a class="button" href="#">Veja a lista de irregularidades</a>');

} else if(selectedFilters.cidade && !selectedFilters.tipo && selectedFilters.programa) {
/*--CIDADE+PROGRAMA
gráfico pizza
Expand All @@ -571,25 +600,70 @@ function theMagic() {
var itemData = jLinq.from(tableData.tipo).starts('tipo', tipo.tipo).select();
$.each(itemData, function(key, value) { itemData = value });
var count = itemData.count;
if(!count) count = '--';
else totalCount = totalCount + count;
tableContent += '<tr><td>' + tipo.tipo + '</td><td class="n">' + count + '</td></tr>';
var attrs;
if(!count) {
count = '--';
attrs = false;
} else {
totalCount = totalCount + count;
attrs = 'class="filterable" onClick="addFilter(\'tipo\', \'' + tipo.tipo + '\');"';
}
tableContent += '<tr><td ' + attrs + '>' + tipo.tipo + '</td><td class="n">' + count + '</td></tr>';
});
tableContent += '</tbody></table>';

$dataTable.append(tableContent);
$dataTable.find('td.total').text(totalCount);
$dataTable.find('td.total').append('<span>irregularidades</span>');

$links.append('<a class="button" href="#">Veja a lista de irregularidades</a>');
$links.append('<a class="button" href="#">Acesse o relatório de fiscalização da cidade</a>');
} else if(selectedFilters.cidade && selectedFilters.tipo && selectedFilters.programa) {
/*--CIDADE+TIPO+PROGRAMA
só lista
*/
}

// irregularidades table
if(Object.keys(selectedFilters).length >= 2) {
var category = categories[0];
if(category)
var categoryTitle = category.charAt(0).toUpperCase() + category.slice(1) + 's';
if(Object.keys(selectedFilters).length == 2)
$links.append('<a class="irregularidades-toggle button" href="#">Exibir a lista de irregularidades</a>');
else
$irregularidadesContainer.addClass('active');

var irregularidadesContent = '';
irregularidadesContent += '<table class="irregularidades"><tbody><tr>';
if(category) irregularidadesContent += '<th class="' + category + ' category">' + categoryTitle + '</th>';
irregularidadesContent += '<th>Irregularidades</th></tr>';
$.each(currentData.irregularidades, function(i, irregularidade) {
irregularidadesContent += '<tr>';
if(category) irregularidadesContent += '<td class="' + normalize(irregularidade[category]) + '">' + irregularidade[category] + '</td>';
irregularidadesContent += '<td><p>' + irregularidade.constatacao + '</p></td>';
})
irregularidadesContent += '</tbody></table>';
$irregularidadesContainer.append(irregularidadesContent);
}

if(selectedFilters.cidade) {
$links.append('<a class="button" href="#">Acesse o relatório de fiscalização da cidade</a>');
}

$('.irregularidades-toggle').click(function() {
if(!$irregularidadesContainer.hasClass('active')) {
$irregularidadesContainer.addClass('active');
$(this).text('Esconder a lista de irregularidades');
resultsScrollApi.reinitialise();
$()
} else {
$irregularidadesContainer.removeClass('active');
$(this).text('Exibir a lista de irregularidades');
resultsScrollApi.reinitialise();
}
return false;
});

resultsScrollApi.reinitialise();
$('.jspPane, .jspDrag').css({'top':0});
}

function getCidadeGraphData(filters) {
Expand Down Expand Up @@ -770,4 +844,28 @@ function drawCidade(cidade, containerId) {

};

})(jQuery);
})(jQuery);


// class friendly text helper
var normalize = (function() {
var from = "ÃÀÁÄÂÈÉËÊÌÍÏÎÒÓÖÔÙÚÜÛãàáäâèéëêìíïîòóöôùúüûÑñÇç",
to = "AAAAAEEEEIIIIOOOOUUUUaaaaaeeeeiiiioooouuuunncc",
mapping = {};

for(var i=0; i<from.length; i++)
mapping[from.charAt(i)] = to.charAt(i);

return function(str) {
var ret = []
for(var i=0; i<str.length; i++) {
var c = str.charAt(i)
if(mapping.hasOwnProperty(str.charAt(i)))
ret.push(mapping[c]);
else
ret.push(c);
}
return ret.join('').replace(/[^-A-Za-z0-9]+/g, '-').toLowerCase();
}

})();
44 changes: 44 additions & 0 deletions site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -492,6 +492,16 @@ section#navegue #data-table table {
margin: 0 0 20px;
}

section#navegue #data-table table tr td.filterable {
color: #000;
}

section#navegue #data-table table tr td.filterable:hover {
background-color: #E5C1B3;
color: #C33132;
cursor: pointer;
}

section#navegue #data-table table tr:nth-child(odd) {
background-color: #f1eee5;
}
Expand Down Expand Up @@ -588,6 +598,40 @@ section#navegue #links {
float: right;
}

section#navegue #irregularidades {
display: none;
}

section#navegue #irregularidades.active {
display: block;
}

section#navegue #irregularidades table {
font-size: 14px;
margin: 20px 0;
width: 100%;
}

section#navegue #irregularidades tr th {
padding: 10px 0;
text-align: center;
font-weight: bold;
background: #daeae0;
}

section#navegue #irregularidades tr th.category {
width: 33%;
}

section#navegue #irregularidades tr:nth-child(odd) {
background: #eeece0;
}

section#navegue #irregularidades tr td {
padding: 10px;
vertical-align: middle;
}

footer {
width: 100%;
height: 200px;
Expand Down

0 comments on commit cf56ea1

Please sign in to comment.