misp-dashboard/static/js/contrib.js

578 lines
19 KiB
JavaScript
Raw Normal View History

2017-11-02 10:16:34 +01:00
/* GLOB VAR */
2017-11-02 08:41:30 +01:00
var allOrg = [];
var datatableTop;
var datatableFame;
2017-11-06 15:00:51 +01:00
var refresh_speed = min_between_reload*60;
var will_reload = $("#reloadCheckbox").is(':checked');
var sec_before_reload = refresh_speed;
var dataTop5Overtime;
var plotLineChart
2017-11-02 10:16:34 +01:00
/* CONFIG */
var maxRank = 16;
var popOverOption = {
trigger: "hover",
html: true,
placement: 'bottom',
content: generateRankingSheet()
}
2017-11-02 08:41:30 +01:00
var optionsLineChart = {
series: {
shadowSize: 0 ,
lines: {
fill: true,
fillColor: {
colors: [ { opacity: 1 }, { opacity: 0.1 } ]
}
}
},
colors: ["#2F4F4F", "#778899", "#696969", "#A9A9A9", "#D3D3D3", "#337ab7"],
2017-11-02 08:41:30 +01:00
points: { show: true },
lines: { show: true, fill: true },
grid: {
tickColor: "#dddddd",
borderWidth: 0
},
legend: {
show: true,
position: "nw"
},
xaxis: {
mode: "time",
timeformat: "%m/%d",
minTickSize: [1, "day"]
2017-11-02 08:41:30 +01:00
}
};
var optionDatatable_light = {
responsive: true,
searching: false,
ordering: false,
scrollY: '30vh',
scrollCollapse: true,
paging: false,
"language": {
"lengthMenu": "",
"info": "",
"infoFiltered": "",
"infoEmpty": "",
},
"info": false,
"columnDefs": [
{ className: "centerCellPicOrgRank", "targets": [ 2 ] },
{ className: "centerCellPicOrgLogo", "targets": [ 3 ] },
{ className: "centerCellPicOrgLogo", "targets": [ 4 ] }
]
2017-11-02 08:41:30 +01:00
};
var optionDatatable_top = jQuery.extend({}, optionDatatable_light)
var optionDatatable_last = jQuery.extend({}, optionDatatable_light)
optionDatatable_last.columnDefs = [
2017-11-10 10:32:51 +01:00
{ className: "small", "targets": [ 0 ] },
{ className: "verticalAlign", "targets": [ 1 ] },
{ className: "centerCellPicOrgRank verticalAlign", "targets": [ 2 ] },
2017-11-07 12:59:32 +01:00
{ className: "centerCellPicOrgLogo", "targets": [ 3 ] },
2017-11-10 10:32:51 +01:00
{ className: "centerCellPicOrgLogo verticalAlign", "targets": [ 4 ] },
{ className: "centerCellPicOrgLogo verticalAlign", "targets": [ 5 ] },
{ className: "verticalAlign", "targets": [ 6 ] },
{ 'orderData':[6], 'targets': [0] },
{
'targets': [6],
'searchable': false
},
]
2017-11-02 08:41:30 +01:00
var optionDatatable_fame = jQuery.extend({}, optionDatatable_light)
2017-11-06 18:44:51 +01:00
optionDatatable_fame.scrollY = '45vh';
2017-11-02 08:41:30 +01:00
var optionDatatable_Categ = {
responsive: true,
searching: true,
"order": [[ 0, "desc" ]],
2017-11-02 16:21:04 +01:00
scrollY: '38vh',
"scrollX": true,
2017-11-02 08:41:30 +01:00
scrollCollapse: true,
paging: false,
"info": false,
"columnDefs": [
{ className: "centerCellPicOrgRank", "targets": [ 2 ] },
{ className: "centerCellPicOrgLogo", "targets": [ 3 ], 'searchable': false, 'sortable': false },
{ className: "centerCellPicOrgLogo", "targets": [ 4 ]}
]
2017-11-02 08:41:30 +01:00
};
var typeaheadOption = {
source: function (query, process) {
if (allOrg.length == 0) { // caching
return $.getJSON(url_getAllOrg, function (data) {
allOrg = data;
return process(data);
});
} else {
return process(allOrg);
}
},
2017-11-02 10:57:16 +01:00
updater: function(org) {
updateProgressHeader(org);
2017-11-02 08:41:30 +01:00
}
}
/* FUNCTIONS */
function getMonthlyRankIcon(rank, size, header) {
2017-11-02 15:14:21 +01:00
if (rank > 16) {
var rankLogoPath = url_baseRankMonthlyLogo+0+'.svg';
2017-11-02 15:14:21 +01:00
} else {
var rankLogoPath = url_baseRankMonthlyLogo+rank+'.svg';
2017-11-02 15:14:21 +01:00
}
2017-11-02 08:41:30 +01:00
var img = document.createElement('img');
img.src = rankLogoPath;
if(size == undefined) {
img.height = 26;
img.width = 26;
} else {
2017-11-02 10:16:34 +01:00
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;
}
2017-11-02 08:41:30 +01:00
}
return img.outerHTML;
}
2017-11-06 18:40:44 +01:00
function getOrgRankIcon(rank, size) {
if (rank > 16) {
var rankLogoPath = url_baseOrgRankLogo+0+'.svg';
} else {
var rankLogoPath = url_baseOrgRankLogo+rank+'.svg';
}
var obj = document.createElement('img');
obj.height = size/2;
obj.width = size;
obj.src = rankLogoPath;
obj.type = "image/svg"
obj.title = org_rank_obj[rank];
obj.classList.add('orgRankClass')
return obj.outerHTML;
}
function createImg(source, size) {
var obj = document.createElement('img');
obj.height = size;
obj.width = size;
2017-11-06 18:40:44 +01:00
obj.style.margin = 'auto';
obj.src = source;
obj.type = "image/png"
obj.alt = ""
2017-11-06 18:40:44 +01:00
return obj.outerHTML;
}
function createHonorImg(array, size) {
size = 32;
var div = document.createElement('div');
2017-11-10 10:32:51 +01:00
div.style.boxShadow = '0px 0px 5px #00000099';
div.style.backgroundColor = '#e1e1e1';
for (badgeNum of array) {
var obj = document.createElement('img');
obj.height = size;
obj.width = size;
obj.style.margin = 'auto';
obj.title = org_honor_badge_title[badgeNum];
obj.src = url_baseHonorLogo+badgeNum+'.svg';
div.appendChild(obj);
}
2017-11-10 10:32:51 +01:00
div.style.width = 32*array.length+'px';
div.style.borderRadius = '15px';
return div.outerHTML;
}
function createOrgLink(org) {
var a = document.createElement('a');
a.innerHTML = org;
a.href = "?org="+org;
return a.outerHTML;
}
function generateRankingSheet(rank, rankDec, stepPnt, pnt, Rpnt) {
var Cpnt = pnt - stepPnt;
var Tpnt = Cpnt + Rpnt;
var OuterDiv = document.createElement('div');
var gdiv = document.createElement('div');
gdiv.id = "globalDiv";
gdiv.style.float = 'left';
//progressBar
var div = document.createElement('div');
div.classList.add('progress');
var pb_length = 187;
div.style.width = pb_length+'px'; //HARDCODED...
div.style.marginBottom = '0px';
var div1 = document.createElement('div')
div1.classList.add('progress-bar')
div1.style.width = 100*(Cpnt)/Tpnt+'%';
div1.innerHTML = "<strong>"+Cpnt+"</strong>";
div.appendChild(div1);
var div1 = document.createElement('div')
div1.classList.add('progress-bar', 'progress-bar-warning')
div1.style.width = 100*(Rpnt)/Tpnt+'%'
div1.innerHTML = "<strong>"+Rpnt+"</strong>";
div.appendChild(div1);
gdiv.appendChild(div);
// table
2017-11-02 10:16:34 +01:00
var table = document.createElement('table');
table.classList.add('table', 'table-striped');
table.style.marginBottom = '5px';
2017-11-02 10:16:34 +01:00
//head
var thead = document.createElement('thead');
var tr = document.createElement('tr');
var th = document.createElement('th');
2017-11-02 10:57:16 +01:00
th.innerHTML = "Rank";
2017-11-02 10:16:34 +01:00
tr.appendChild(th);
var th = document.createElement('th');
th.innerHTML = "Requirement (CP)";
2017-11-02 10:16:34 +01:00
tr.appendChild(th);
thead.appendChild(tr);
//body
var tbody = document.createElement('tbody');
for (var i=1; i<=maxRank; i++) {
var tr = document.createElement('tr');
2017-11-02 15:14:21 +01:00
var td1 = document.createElement('td');
td1.innerHTML = getMonthlyRankIcon(i, 40);
2017-11-02 15:14:21 +01:00
td1.style.padding = "2px";
var td2 = document.createElement('td');
td2.innerHTML = Math.floor(Math.pow(rankMultiplier, i));
td2.style.padding = "2px";
2017-11-02 10:57:16 +01:00
tr.style.textAlign = "center";
if (i == rank) { // current org rank
2017-11-02 15:14:21 +01:00
tr.style.backgroundColor = "#337ab7";
tr.style.color = "white";
} else if (i == rank+1) {
tr.style.backgroundColor = "#f0ad4e";
tr.style.color = "white";
2017-11-02 10:57:16 +01:00
}
2017-11-02 15:14:21 +01:00
tr.appendChild(td1);
tr.appendChild(td2);
2017-11-02 10:16:34 +01:00
tbody.appendChild(tr);
}
table.appendChild(thead);
table.appendChild(tbody);
gdiv.appendChild(table);
OuterDiv.appendChild(gdiv);
// Tot nbr points
var tableHeight = 720; //HARDCODED...
var div = document.createElement('div');
div.classList.add('progress');
div.style.width = '20px';
div.style.height = tableHeight+'px'; //HARDCODED...
div.style.display = 'flex'
div.style.float = 'left';
div.style.marginTop = '56px';
div.style.marginBottom = '0px';
div.style.marginLeft = '2px';
var div1 = document.createElement('div')
div1.classList.add('progress-bar', 'progress-bar-success', 'progress-bar-striped')
div1.style.height = ((rank+rankDec)*100/16)+'%';
div1.style.width = '100%';
div.appendChild(div1);
OuterDiv.appendChild(div);
return OuterDiv.outerHTML;
2017-11-02 10:16:34 +01:00
}
2017-11-02 08:41:30 +01:00
function addToTableFromJson(datatable, url) {
$.getJSON( url, function( data ) {
for (i in data) {
var row = data[i];
i = parseInt(i);
var to_add = [
row.pnts,
getMonthlyRankIcon(row.rank),
getOrgRankIcon(row.orgRank, 60),
createHonorImg(row.honorBadge, 20),
createImg(row.logo_path, 32),
createOrgLink(row.org)
2017-11-02 08:41:30 +01:00
];
datatable.row.add(to_add);
}
datatable.draw();
});
}
function addLastFromJson(datatable, url) {
$.getJSON( url, function( data ) {
for (i in data) {
var row = data[i];
i = parseInt(i);
addLastContributor(datatable, row);
}
datatable.draw();
});
}
function addLastContributor(datatable, data, update) {
var date = new Date(data.epoch*1000);
var to_add = [
date.toTimeString().slice(0,-15) +' '+ date.toLocaleDateString(),
data.pnts,
getMonthlyRankIcon(data.rank),
getOrgRankIcon(data.orgRank, 60),
createHonorImg(data.honorBadge, 20),
createImg(data.logo_path, 32),
createOrgLink(data.org),
];
if (update == undefined || update == false) {
datatable.row.add(to_add);
} else if(update == true) {
datatable.rows().every( function() {
if(this.data()[3] == data.org) {
datatable.row( this ).data( to_add );
}
});
}
}
function updateProgressBar(org) {
if(currOrg != org)
return;
$.getJSON( url_getOrgRank+'?org='+org, function( data ) {
var rank = Math.floor(data.rank);
var rankDec = data.rank-rank;
var popoverRank = $('#btnCurrRank').data('bs.popover');
popoverRank.options.content = generateRankingSheet(rank, rankDec, data.stepPts, data.points, data.remainingPts);
$('#orgRankDiv').html(getMonthlyRankIcon(rank, 40, true));
$('#orgNextRankDiv').html(getMonthlyRankIcon(rank+1, 40, true));
if (data.rank > 16){
$('#progressBarDiv').width(1*150); //150 is empty bar width
} else {
$('#progressBarDiv').width((data.rank - rank)*150); //150 is empty bar width
}
});
}
function updateOvertakePnts() {
var prevOrgName = "";
var prevOrgPnts = 0;
datatableTop.rows().every( function() {
var row = this.node();
var orgRowName = $(this.data()[5])[0].text; // contained in <a>
var orgRowPnts = this.data()[0]
if(orgRowName == currOrg) {
if(prevOrgName == ""){ //already first
$('#orgToOverTake').text(orgRowName);
$('#pntsToOvertakeNext').text(0);
} else {
$('#orgToOverTake').text(prevOrgName);
$('#pntsToOvertakeNext').text(parseInt(prevOrgPnts)-orgRowPnts);
}
} else {
prevOrgName = orgRowName;
prevOrgPnts = orgRowPnts;
}
});
}
2017-11-02 10:57:16 +01:00
function updateProgressHeader(org) {
currOrg = org;
2017-11-02 10:57:16 +01:00
// get Org rank
$.getJSON( url_getOrgRank+'?org='+org, function( data ) {
2017-11-02 13:13:13 +01:00
datatableTop.draw();
2017-11-02 11:36:23 +01:00
var rank = Math.floor(data.rank);
var rankDec = data.rank-rank;
2017-11-02 10:57:16 +01:00
$('#btnCurrRank').show();
$('#orgText').text(data.org);
var popoverRank = $('#btnCurrRank').data('bs.popover');
popoverRank.options.content = generateRankingSheet(rank, rankDec, data.stepPts, data.points, data.remainingPts);
$('#orgRankDiv').html(getMonthlyRankIcon(rank, 40, true));
$('#orgNextRankDiv').html(getMonthlyRankIcon(rank+1, 40, true));
2017-11-02 15:27:31 +01:00
if (data.rank > 16){
$('#progressBarDiv').width(1*150); //150 is empty bar width
} else {
$('#progressBarDiv').width((data.rank - rank)*150); //150 is empty bar width
}
2017-11-02 13:13:13 +01:00
// update color in other dataTables
datatableTop.rows().every( function() {
var row = this.node();
if(this.data()[5] == data.org) { row.classList.add('selectedOrgInTable'); } else { row.classList.remove('selectedOrgInTable'); }
2017-11-02 13:13:13 +01:00
});
datatableFame.rows().every( function() {
var row = this.node();
if(this.data()[5] == data.org) { row.classList.add('selectedOrgInTable'); } else { row.classList.remove('selectedOrgInTable'); }
2017-11-02 13:13:13 +01:00
});
datatableCateg.rows().every( function() {
var row = this.node();
if(this.data()[5] == data.org) { row.classList.add('selectedOrgInTable'); } else { row.classList.remove('selectedOrgInTable'); }
2017-11-02 13:13:13 +01:00
});
datatableLast.rows().every( function() {
var row = this.node();
if(this.data()[6] == data.org) { row.classList.add('selectedOrgInTable'); } else { row.classList.remove('selectedOrgInTable'); }
2017-11-02 13:13:13 +01:00
});
2017-11-02 10:57:16 +01:00
});
// colorize row contribution rank help
$.getJSON( url_getContributionOrgStatus+'?org='+org, function( data ) {
var status = data['status'];
var curContributionOrgRank = data['rank'];
var totNumPoints = data['totPoints']
$('#orgTotNumOfPoint').text(totNumPoints);
if (curContributionOrgRank == 0) {
$('#orgContributionRank').attr('data', '');
} else {
$('#orgContributionRank').attr('data', url_baseOrgRankLogo+curContributionOrgRank+'.svg');
}
for (var row of $('#bodyTablerankingModal')[0].children) {
row = $(row);
var firstCell = $(row.children()[0]);
var rank = row.data('rank');
//remove all classes
row.removeClass("warning");
row.removeClass("danger");
row.removeClass("success");
firstCell.removeClass("successCell");
//add correct class
if(status[rank] == 0){
row.addClass("danger");
} else if(status[rank] == 1) {
row.addClass("warning");
}
if(rank == curContributionOrgRank) {
firstCell.addClass("successCell");
}
}
});
// colorize badge if acquired
$.getJSON( url_getHonorBadges+'?org='+org, function( data ) {
for(var i=0; i<numberOfBadges; i++) { // remove
$('#divBadge_'+(i+1)).removeClass('circlBadgeAcquired');
}
for(var i=0; i<data.length; i++) { // add
$('#divBadge_'+(data[i])).addClass('circlBadgeAcquired');
}
});
//update overtake points
updateOvertakePnts();
//Add new data to linechart
var flag_already_displayed = false;
for(obj of dataTop5Overtime) { //check if already displayed
if (obj.label == currOrg) {
flag_already_displayed = true;
break;
}
}
if (!flag_already_displayed) {
$.getJSON( url_getOrgOvertime+'?org='+org, function( data ) {
var toPlot = dataTop5Overtime.slice(0); //cloning data
// transform secs into date
var new_data = [];
for(list of data['data']) {
new_data.push([list[0]*1000, list[1]]);
}
data['data'] = new_data;
toPlot.push(data);
plotLineChart.setData(toPlot);
plotLineChart.setupGrid();
plotLineChart.draw();
});
}
2017-11-02 10:57:16 +01:00
}
2017-11-02 08:41:30 +01:00
function showOnlyOrg() {
datatableCateg.search( $('#orgText').text() ).draw();
}
2017-11-06 15:00:51 +01:00
function timeToString(time) {
var min = Math.floor(time / 60);
min = (min < 10) ? ("0" + min) : min;
var sec = time - 60*min;
sec = (sec < 10) ? ("0" + sec) : sec;
return min + ":" + sec
}
function updateTimer() {
if ($("#reloadCheckbox").is(':checked')) {
sec_before_reload--;
if (sec_before_reload < 1) {
source_lastContrib.close();
location.reload();
} else {
$('#labelRemainingTime').text(timeToString(sec_before_reload));
setTimeout(function(){ updateTimer(); }, 1000);
}
} else {
sec_before_reload = refresh_speed;
}
}
$(':checkbox').change(function() {
if ($("#reloadCheckbox").is(':checked')) { setTimeout(function(){ updateTimer(); }, 1000); }
});
2017-11-02 08:41:30 +01:00
$(document).ready(function() {
2017-11-06 15:00:51 +01:00
$('#labelRemainingTime').text(timeToString(sec_before_reload));
updateTimer();
2017-11-02 10:57:16 +01:00
$('#orgName').typeahead(typeaheadOption);
$('#btnCurrRank').popover(popOverOption);
2017-11-02 08:41:30 +01:00
datatableTop = $('#topContribTable').DataTable(optionDatatable_top);
datatableFame = $('#fameTable').DataTable(optionDatatable_fame);
datatableCateg = $('#categTable').DataTable(optionDatatable_Categ);
datatableLast = $('#lastTable').DataTable(optionDatatable_last);
// top contributors
2017-11-02 10:16:34 +01:00
addToTableFromJson(datatableTop, url_getTopContributor);
2017-11-02 08:41:30 +01:00
// hall of fame
addToTableFromJson(datatableFame, url_getFameContributor);
2017-11-02 10:16:34 +01:00
// last contributors
addLastFromJson(datatableLast, url_getLastContributor);
2017-11-02 10:16:34 +01:00
// category per contributors
2017-11-02 08:41:30 +01:00
$.getJSON( url_getCategPerContrib, function( data ) {
for (i in data) {
var row = data[i];
i = parseInt(i);
var to_add = [
row.pnts,
getMonthlyRankIcon(row.rank),
getOrgRankIcon(row.orgRank, 44),
createHonorImg(row.honorBadge, 20),
createImg(row.logo_path, 32),
createOrgLink(row.org),
2017-11-02 08:41:30 +01:00
];
for (categ of categ_list) {
to_add.push(row[categ]);
}
2017-11-02 08:41:30 +01:00
datatableCateg.row.add(to_add);
}
datatableCateg.draw();
});
// top 5 contrib overtime
$.getJSON( url_getTop5Overtime, function( data ) {
// transform secs into date
for(i in data){
var new_data = [];
for(list of data[i]['data']) {
new_data.push([list[0]*1000, list[1]]);
}
data[i]['data'] = new_data;
}
dataTop5Overtime = data;
plotLineChart = $.plot("#divTop5Overtime", data, optionsLineChart);
2017-11-02 08:41:30 +01:00
});
2017-11-06 09:58:59 +01:00
if(currOrg != "") // currOrg selected
//FIXME: timeout used to wait that all datatables are draw.
2017-11-10 10:32:51 +01:00
setTimeout( function() { updateProgressHeader(currOrg); }, 500);
source_lastContrib = new EventSource(url_eventStreamLastContributor);
source_lastContrib.onmessage = function(event) {
var json = jQuery.parseJSON( event.data );
addLastContributor(datatableLast, json, true);
datatableLast.draw();
updateProgressBar(json.org);
updateOvertakePnts();
2017-11-06 15:00:51 +01:00
sec_before_reload = refresh_speed; //reset timer at each contribution
};
2017-11-02 08:41:30 +01:00
});