Added ranking table

server.py

@@ -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")

static/css/ranking.css

@@ -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;

static/js/contrib.js

@@ -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;
+        if (header) {
-        img.width = size;
+            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));
+    $('#orgRankDiv').html(getRankIcon(8, 40, true));
-    $('#orgNextRankDiv').html(getRankIcon(9, 50));
+    $('#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 ) {
+    addToTableFromJson(datatableTop, url_getTopContributor);
-        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();
-    });
-
     // hall of fame
-    $.getJSON( url_getTopContributor, function( data ) {
+    addToTableFromJson(datatableFame, url_getTopContributor);
-        for (i in data) {
+    // last contributors
-            var row = data[i];
+    addToTableFromJson(datatableLast, url_getTopContributor);
-            i = parseInt(i);
+    // category per contributors
-            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();
-    });
-
     $.getJSON( url_getCategPerContrib, function( data ) {
         for (i in data) {
             var row = data[i];

templates/contrib.html

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