From 7438af529217e7221af09948f20b8abd7e74e6da Mon Sep 17 00:00:00 2001 From: Sami Mokaddem Date: Tue, 31 Oct 2017 15:08:44 +0100 Subject: [PATCH] Continuation of contrib page (2) --- server.py | 96 +++++++++++++++++++++---- static/css/ranking.css | 2 + templates/contrib.html | 155 +++++++++++++++++++---------------------- 3 files changed, 156 insertions(+), 97 deletions(-) diff --git a/server.py b/server.py index 03fc056..72d57a7 100755 --- a/server.py +++ b/server.py @@ -133,36 +133,67 @@ def contrib(): return render_template('contrib.html', ) -@app.route("/_getTopContributor") -def getTopContributor(): +@app.route("/_getLastContributor") +def getLastContributor(): data = [ { - 'progression': '', + 'rank': random.randint(1,16), 'logo_path': 'logo1', 'org': 'CIRCL', }, { - 'progression': '', + 'rank': random.randint(1,16), 'logo_path': 'logo2', 'org': 'CASES', }, { - 'progression': '', + 'rank': random.randint(1,16), 'logo_path': 'logo3', 'org': 'SMILE', }, { - 'progression': '', + 'rank': random.randint(1,16), 'logo_path': 'logo4', 'org': 'ORG4', }, { - 'progression': '', + 'rank': random.randint(1,16), 'logo_path': 'logo5', 'org': 'ORG5', }, ] - return jsonify(data) + return jsonify(data*2) + +@app.route("/_getTopContributor") +def getTopContributor(): + data = [ + { + 'rank': random.randint(1,16), + 'logo_path': 'logo1', + 'org': 'CIRCL', + }, + { + 'rank': random.randint(1,16), + 'logo_path': 'logo2', + 'org': 'CASES', + }, + { + 'rank': random.randint(1,16), + 'logo_path': 'logo3', + 'org': 'SMILE', + }, + { + 'rank': random.randint(1,16), + 'logo_path': 'logo4', + 'org': 'ORG4', + }, + { + 'rank': random.randint(1,16), + 'logo_path': 'logo5', + 'org': 'ORG5', + }, + ] + return jsonify(data*2) @app.route("/_getTop5Overtime") def getTop5Overtime(): @@ -171,12 +202,49 @@ def getTop5Overtime(): @app.route("/_getCategPerContrib") def getCategPerContrib(): - data = [["", "", "CIRCL", 723, 21, 32], -["", "", "CASES", 32, 435, 2], -["", "", "SMILE", 65, 231, 3], -["", "", "ORG4", 34, 21, 7], -["", "", "ORG5", 45, 211, 9]] - return jsonify(data) + data = [ + { + 'rank': random.randint(1,16), + 'logo_path': 'logo1', + 'org': 'CIRCL', + 'network_activity': random.randint(100,1600), + 'payload_delivery': random.randint(100,1600), + 'others': random.randint(1,16) + }, + { + 'rank': random.randint(1,16), + 'logo_path': 'logo2', + 'org': 'CASES', + 'network_activity': random.randint(10,1600), + 'payload_delivery': random.randint(10,1600), + 'others': random.randint(1,16) + }, + { + 'rank': random.randint(1,16), + 'logo_path': 'logo3', + 'org': 'SMILE', + 'network_activity': random.randint(1,160), + 'payload_delivery': random.randint(1,160), + 'others': random.randint(1,160) + }, + { + 'rank': random.randint(1,16), + 'logo_path': 'logo4', + 'org': 'ORG4', + 'network_activity': random.randint(1,160), + 'payload_delivery': random.randint(1,160), + 'others': random.randint(1,16) + }, + { + 'rank': random.randint(1,16), + 'logo_path': 'logo5', + 'org': 'ORG5', + 'network_activity': random.randint(1,16), + 'payload_delivery': random.randint(1,16), + 'others': random.randint(1,16) + }, + ] + return jsonify(data*2) @app.route("/_getTopCoord") def getTopCoord(): diff --git a/static/css/ranking.css b/static/css/ranking.css index 031f46e..ff8cca4 100644 --- a/static/css/ranking.css +++ b/static/css/ranking.css @@ -12,6 +12,8 @@ .table > tbody > tr > td.centerCellPic { padding: 5px; + text-align: center; + min-width: 45px; } .star1-1{ diff --git a/templates/contrib.html b/templates/contrib.html index b2de773..64acf1a 100644 --- a/templates/contrib.html +++ b/templates/contrib.html @@ -135,8 +135,8 @@ small { - - + + @@ -154,51 +154,21 @@ small {
- Top progression + Last contributors
-
+
-
#Org rank Logo Organization name
+
- - + + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Org rank LogoOrganization nameOrg name
@@ -218,7 +188,8 @@ small { - + + @@ -252,7 +223,8 @@ small {
#Org rank Logo Organization name Network Activity
- + + @@ -271,7 +243,7 @@ small { Top 5 Contributor overtime
-
+
@@ -295,6 +267,17 @@ small { /* DATA FROM CONF */ + function getRankIcon(rank) { + var imgsPath = "{{ url_for('static', filename='pics/rankingMISP/1.png') }}"; + imgsPath = imgsPath.substring(0, imgsPath.length-5); + rankLogoPath = imgsPath+rank+'.png'; + var img = document.createElement('img'); + img.src = rankLogoPath; + img.height = 26; + img.width = 26; + return img.outerHTML; + } + function create_stars_dom(n) { var n = 4-n; //1 is best -> 3 stars var div = document.createElement('DIV'); @@ -358,7 +341,7 @@ small { responsive: true, searching: false, ordering: false, - scrollY: '50vh', + scrollY: '30vh', scrollCollapse: true, paging: false, "language": { @@ -368,61 +351,34 @@ small { "infoEmpty": "", }, "info": false, - "columnDefs": [ - { className: "centerCell", "targets": [ 0 ] } - ] - }; - var optionDatatable_light2 = { - responsive: true, - searching: false, - ordering: false, - scrollY: '50vh', - scrollCollapse: true, - paging: false, - "language": { - "lengthMenu": "", - "info": "", - "infoFiltered": "", - "infoEmpty": "", - }, - "info": false, - "columnDefs": [ - { className: "centerCellPic", "targets": [ 0 ] } - ] }; + var optionDatatable_top = jQuery.extend({}, optionDatatable_light) + var optionDatatable_last = jQuery.extend({}, optionDatatable_light) + var optionDatatable_fame = jQuery.extend({}, optionDatatable_light) + optionDatatable_fame.scrollY = '50vh'; var optionDatatable_Categ = { - ajax: { - url: "{{ url_for('getCategPerContrib') }}", - dataSrc: '' - }, responsive: true, - searching: false, - scrollY: '50vh', + searching: true, + scrollY: '39vh', scrollCollapse: true, paging: false, "info": false, - "columnDefs": [ - { className: "centerCell", "targets": [ 0 ] } - ] }; - $.getJSON( "{{ url_for('getCategPerContrib') }}", function( data ) { - console.log(data); - }); - $(document).ready(function() { - datatableTop = $('#topContribTable').DataTable(optionDatatable_light); - datatableFame = $('#fameTable').DataTable(optionDatatable_light); + datatableTop = $('#topContribTable').DataTable(optionDatatable_top); + datatableFame = $('#fameTable').DataTable(optionDatatable_fame); datatableCateg = $('#categTable').DataTable(optionDatatable_Categ); - datatableProgress = $('#topProgressTable').DataTable(optionDatatable_light2); + datatableLast = $('#lastTable').DataTable(optionDatatable_last); // top contributors $.getJSON( "{{ url_for('getTopContributor') }}", function( data ) { for (i in data) { var row = data[i]; + i = parseInt(i); var to_add = [ - getIndexRank(), - row.progression, + i+1, + getRankIcon(row.rank), row.logo_path, row.org ]; @@ -434,11 +390,12 @@ small { // hall of fame $.getJSON( "{{ url_for('getTopContributor') }}", function( data ) { datatableIndex = 1; - var table = document.getElementById('fameTableBody'); for (i in data) { var row = data[i]; + i = parseInt(i); var to_add = [ - getIndexRank(), + i+1, + getRankIcon(row.rank), row.logo_path, row.org ]; @@ -447,6 +404,38 @@ small { datatableFame.draw(); }); + $.getJSON( "{{ url_for('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(); + }); + + $.getJSON( "{{ url_for('getCategPerContrib') }}", 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, + row.network_activity, + row.payload_delivery, + row.others + ]; + datatableCateg.row.add(to_add); + } + datatableCateg.draw(); + }); // top 5 contrib overtime $.getJSON( "{{ url_for('getTop5Overtime') }}", function( data ) { var plotLineChart = $.plot("#divTop5Overtime", data, optionsLineChart);
#prev. rank Logo Organization name