Dynamic update iof org rank in header

server.py

@@ -252,6 +252,15 @@ def getAllOrg():
     data = ['CIRCL', 'CASES', 'SMILE' ,'ORG4' ,'ORG5', 'SUPER HYPER LONG ORGINZATION NAME']
     return jsonify(data)
 
+@app.route("/_getOrgRank")
+def getOrgRank():
+    try:
+        org = request.args.get('org')
+    except:
+        org = ''
+    data = {'org': org, 'rank': random.randint(1,16)}
+    return jsonify(data)
+
 @app.route("/_getTopCoord")
 def getTopCoord():
     try:

static/css/ranking.css

@@ -9,11 +9,13 @@
 
 .popOverBtn {
     float: left;
-    padding: 0px;
+    padding-top: 2px;
+    padding-bottom: 2px;
     padding-right: 8px;
     height: 46px;
     margin-top: 2px;
     margin-bottom: 2px;
+    display: none;
 }
 
 .table > tbody > tr > td.centerCell {

static/js/contrib.js

@@ -73,9 +73,8 @@ var typeaheadOption = {
             return process(allOrg);
         }
     },
-    updater: function(item) {
-        $('#orgText').text(item);
-        $('#btnCurrRank').show();
+    updater: function(org) {
+        updateProgressHeader(org);
     }
 }
 
@@ -103,7 +102,7 @@ function getRankIcon(rank, size, header) {
     }
     return img.outerHTML;
 }
-function generateRankingSheet() {
+function generateRankingSheet(rank) {
     var table = document.createElement('table');
     table.classList.add('table', 'table-striped');
     table.style.marginBottom = '0px';
@@ -111,7 +110,7 @@ function generateRankingSheet() {
     var thead = document.createElement('thead');
     var tr = document.createElement('tr');
     var th = document.createElement('th');
-    th.innerHTML = "Ranking";
+    th.innerHTML = "Rank";
     tr.appendChild(th);
     var th = document.createElement('th');
     th.innerHTML = "Requirement";
@@ -128,6 +127,10 @@ function generateRankingSheet() {
         var td = document.createElement('td');
         td.innerHTML = i+" pnts";
         td.style.padding = "2px";
+        tr.style.textAlign = "center";
+        if (i == rank) { // current org rank
+            tr.classList.add('info')
+        }
         tr.appendChild(td);
         tbody.appendChild(tr);
     }
@@ -154,16 +157,23 @@ function addToTableFromJson(datatable, url) {
 }
 
 
-
+function updateProgressHeader(org) {
+    // get Org rank
+    $.getJSON( url_getOrgRank+'?org='+org, function( data ) {
+        $('#btnCurrRank').show();
+        $('#orgText').text(data.org);
+        var popoverRank = $('#btnCurrRank').data('bs.popover');
+        popoverRank.options.content = generateRankingSheet(data.rank);
+        $('#orgRankDiv').html(getRankIcon(data.rank, 40, true));
+        $('#orgNextRankDiv').html(getRankIcon(data.rank+1, 40, true));
+    });
+}
 
 $(document).ready(function() {
-    $('#orgName').typeahead(typeaheadOption);
-    $('#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);
+        updateProgressHeader(org)
+    $('#orgName').typeahead(typeaheadOption);
+    $('#btnCurrRank').popover(popOverOption);
     datatableTop = $('#topContribTable').DataTable(optionDatatable_top);
     datatableFame = $('#fameTable').DataTable(optionDatatable_fame);
     datatableCateg = $('#categTable').DataTable(optionDatatable_Categ);

templates/contrib.html

@@ -68,14 +68,14 @@
                         <strong id="orgText"></strong>
                     </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 id="orgRankDiv" class='textTopHeader' style="padding-top: 0px; position: relative; width: 40px; height: 40px;"></div>
+                        <div class='' style="float: left; padding: 10px;">
                             <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 id="progressBarDiv" class="progress-bar progress-bar-striped" role="progressbar" style="width:70%">
                                 </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; position: relative; width: 40px; height: 40px;"></div>
                     </button>
                 </div>
             </div>
@@ -234,6 +234,7 @@
         var url_getCategPerContrib = "{{ url_for('getCategPerContrib') }}";
         var url_getTop5Overtime = "{{ url_for('getTop5Overtime') }}";
         var url_getAllOrg = "{{ url_for('getAllOrg') }}";
+        var url_getOrgRank = "{{ url_for('getOrgRank') }}";
         var url_baseRankLogo =     "{{ url_for('static', filename='pics/rankingMISP/1.png') }}";
         url_baseRankLogo = url_baseRankLogo.substring(0, url_baseRankLogo.length-5);