Added ranking table

pull/3/head
Sami Mokaddem 2017-11-02 10:16:34 +01:00
parent 1ae827d202
commit cfd1818a33
4 changed files with 90 additions and 61 deletions

View File

@ -249,7 +249,7 @@ def getCategPerContrib():
@app.route("/_getAllOrg")
def getAllOrg():
data = ['CIRCL', 'CASES', 'SMILE' ,'ORG4' ,'ORG5']
data = ['CIRCL', 'CASES', 'SMILE' ,'ORG4' ,'ORG5', 'SUPER HYPER LONG ORGINZATION NAME']
return jsonify(data)
@app.route("/_getTopCoord")

View File

@ -3,6 +3,19 @@
height: auto;
}
.popover-content {
padding: 3px
}
.popOverBtn {
float: left;
padding: 0px;
padding-right: 8px;
height: 46px;
margin-top: 2px;
margin-bottom: 2px;
}
.table > tbody > tr > td.centerCell {
text-align: center;
min-width: 45px;

View File

@ -1,7 +1,17 @@
/* CONFIG */
/* GLOB VAR */
var allOrg = [];
var datatableTop;
var datatableFame;
/* CONFIG */
var maxRank = 16;
var popOverOption = {
trigger: "hover",
title: "Ranking icons",
html: true,
placement: 'bottom',
content: generateRankingSheet()
}
var optionsLineChart = {
series: {
shadowSize: 0 ,
@ -65,11 +75,12 @@ var typeaheadOption = {
},
updater: function(item) {
$('#orgText').text(item);
$('#btnCurrRank').show();
}
}
/* FUNCTIONS */
function getRankIcon(rank, size) {
function getRankIcon(rank, size, header) {
rankLogoPath = url_baseRankLogo+rank+'.png';
var img = document.createElement('img');
img.src = rankLogoPath;
@ -77,11 +88,53 @@ function getRankIcon(rank, size) {
img.height = 26;
img.width = 26;
} else {
img.height = size;
img.width = size;
if (header) {
img.height = size;
img.width = size;
img.style.position = 'absolute';
img.style.top = '0';
img.style.bottom = '0';
img.style.margin = 'auto';
img.style.left = '0px';
} else {
img.height = size;
img.width = size;
}
}
return img.outerHTML;
}
function generateRankingSheet() {
var table = document.createElement('table');
table.classList.add('table', 'table-striped');
table.style.marginBottom = '0px';
//head
var thead = document.createElement('thead');
var tr = document.createElement('tr');
var th = document.createElement('th');
th.innerHTML = "Ranking";
tr.appendChild(th);
var th = document.createElement('th');
th.innerHTML = "Requirement";
tr.appendChild(th);
thead.appendChild(tr);
//body
var tbody = document.createElement('tbody');
for (var i=1; i<=maxRank; i++) {
var tr = document.createElement('tr');
var td = document.createElement('td');
td.innerHTML = getRankIcon(i, 20);
td.style.padding = "2px";
tr.appendChild(td);
var td = document.createElement('td');
td.innerHTML = i+" pnts";
td.style.padding = "2px";
tr.appendChild(td);
tbody.appendChild(tr);
}
table.appendChild(thead);
table.appendChild(tbody);
return table.outerHTML;
}
function addToTableFromJson(datatable, url) {
$.getJSON( url, function( data ) {
@ -105,60 +158,23 @@ function addToTableFromJson(datatable, url) {
$(document).ready(function() {
$('#orgName').typeahead(typeaheadOption);
$('#orgRankDiv').html(getRankIcon(8, 50));
$('#orgNextRankDiv').html(getRankIcon(9, 50));
$('#orgRankDiv').html(getRankIcon(8, 40, true));
$('#orgNextRankDiv').html(getRankIcon(9, 40, true));
$('#orgText').text(currOrg);
if(currOrg != "") // currOrg selected
$('#btnCurrRank').show();
$('[data-toggle="popover"]').popover(popOverOption);
datatableTop = $('#topContribTable').DataTable(optionDatatable_top);
datatableFame = $('#fameTable').DataTable(optionDatatable_fame);
datatableCateg = $('#categTable').DataTable(optionDatatable_Categ);
datatableLast = $('#lastTable').DataTable(optionDatatable_last);
// top contributors
$.getJSON(url_getTopContributor , function( data ) {
for (i in data) {
var row = data[i];
i = parseInt(i);
var to_add = [
i+1,
getRankIcon(row.rank),
row.logo_path,
row.org
];
datatableTop.row.add(to_add);
}
datatableTop.draw();
});
addToTableFromJson(datatableTop, url_getTopContributor);
// hall of fame
$.getJSON( url_getTopContributor, function( data ) {
for (i in data) {
var row = data[i];
i = parseInt(i);
var to_add = [
i+1,
getRankIcon(row.rank),
row.logo_path,
row.org
];
datatableFame.row.add(to_add);
}
datatableFame.draw();
});
$.getJSON( url_getTopContributor, function( data ) {
for (i in data) {
var row = data[i];
i = parseInt(i);
var to_add = [
i+1,
getRankIcon(row.rank),
row.logo_path,
row.org
];
datatableLast.row.add(to_add);
}
datatableLast.draw();
});
addToTableFromJson(datatableFame, url_getTopContributor);
// last contributors
addToTableFromJson(datatableLast, url_getTopContributor);
// category per contributors
$.getJSON( url_getCategPerContrib, function( data ) {
for (i in data) {
var row = data[i];

View File

@ -67,16 +67,16 @@
<div class='leftSepa textTopHeader' style="min-width: 100px;">
<strong id="orgText"></strong>
</div>
<div id="orgRankDiv" class='textTopHeader' style="padding-top: 0px;">
</div>
<div class='textTopHeader'>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
</div>
<button id="btnCurrRank" class='btn btn-default popOverBtn' data-container='body' data-toggle='popover' style="display: none;">
<div id="orgRankDiv" class='textTopHeader' style="padding-top: 0px; position: relative; width: 40px;"></div>
<div class='textTopHeader'>
<div class="progress" style=''>
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
</div>
</div>
</div>
</div>
<div id="orgNextRankDiv" class='textTopHeader' style="padding-top: 0px;">
</div>
<div id="orgNextRankDiv" class='textTopHeader' style="padding-top: 0px; position: relative; width: 40px;"></div>
</button>
</div>
</div>
<!-- /.navbar-header -->