From 9fc82589ab321882ba4f02183c7df354ddd4f39b Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <mokaddem.sami@gmail.com>
Date: Tue, 31 Oct 2017 15:49:04 +0100
Subject: [PATCH] Added typeahead orgname

---
 server.py              |  5 +++++
 templates/contrib.html | 51 +++++++++++++++---------------------------
 templates/geo.html     |  9 ++++----
 3 files changed, 28 insertions(+), 37 deletions(-)

diff --git a/server.py b/server.py
index 72d57a7..0b5bb5c 100755
--- a/server.py
+++ b/server.py
@@ -246,6 +246,11 @@ def getCategPerContrib():
     ]
     return jsonify(data*2)
 
+@app.route("/_getAllOrg")
+def getAllOrg():
+    data = ['CIRCL', 'CASES', 'SMILE' ,'ORG4' ,'ORG5']
+    return jsonify(data)
+
 @app.route("/_getTopCoord")
 def getTopCoord():
     try:
diff --git a/templates/contrib.html b/templates/contrib.html
index 64acf1a..dfdf332 100644
--- a/templates/contrib.html
+++ b/templates/contrib.html
@@ -26,6 +26,7 @@
     <script src="{{ url_for('static', filename='js/jquery.flot.resize.js') }}"></script>
     <!-- Bootstrap Core JavaScript -->
     <script src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/bootstrap3-typeahead.min.js') }}"></script>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="text/css">
 
     <link rel="stylesheet" href="{{ url_for('static', filename='css/jquery-jvectormap-2.0.3.css') }}" type="text/css" media="screen"/>
@@ -112,6 +113,11 @@ small {
                       <li><a href="{{ url_for('geo') }}">MISP Geolocalisation</a></li>
                       <li><a href="{{ url_for('contrib') }}">MISP Contributors</a></li>
                     </ul>
+                <div id="ledsHolder" style="float: right; height: 50px;">
+                    <div class='leftSepa textTopHeader'>
+                        <strong>Your organisation name: <input type="text" id="orgName" data-provide="typeahead" size="30" style="margin-bottom: 5px;"></strong>
+                    </div>
+                </div>
             </div>
             <!-- /.navbar-header -->
         </nav>
@@ -278,39 +284,18 @@ small {
             return img.outerHTML;
         }
 
-        function create_stars_dom(n) {
-            var n = 4-n; //1 is best -> 3 stars
-            var div = document.createElement('DIV');
-            div.classList.add('ranking');
-            for(var i=1; i<=n; i++) {
-                var span = document.createElement('span');
-                span.classList.add("glyphicon");
-                span.classList.add("glyphicon-star");
-                span.classList.add("star"+n+"-"+i);
-                div.appendChild(span);
+        var allOrg = [];
+        var typeaheadOption = {
+            source: function (query, process) {
+                if (allOrg.length == 0) { // caching
+                    return $.getJSON("{{ url_for('getAllOrg') }}", function (data) {
+                            allOrg = data;
+                            return process(data);
+                    });
+                } else {
+                    return process(allOrg);
+                }
             }
-            return div.outerHTML;
-        }
-
-        var datatableIndex = 1;
-        function getIndexRank() {
-            var to_return;
-            switch (datatableIndex) {
-                case 1:
-                    to_return = create_stars_dom(1);
-                    break;
-                case 2:
-                    to_return = create_stars_dom(2);
-                    break;
-                case 3:
-                    to_return = create_stars_dom(3);
-                    break;
-
-                default:
-                    to_return = datatableIndex;
-            }
-            datatableIndex++;
-            return to_return;
         }
 
         var datatableTop;
@@ -367,6 +352,7 @@ small {
         };
 
         $(document).ready(function() {
+            $('#orgName').typeahead(typeaheadOption);
             datatableTop = $('#topContribTable').DataTable(optionDatatable_top);
             datatableFame = $('#fameTable').DataTable(optionDatatable_fame);
             datatableCateg = $('#categTable').DataTable(optionDatatable_Categ);
@@ -389,7 +375,6 @@ small {
 
             // hall of fame
             $.getJSON( "{{ url_for('getTopContributor') }}", function( data ) {
-                datatableIndex = 1;
                 for (i in data) {
                     var row = data[i];
                     i = parseInt(i);
diff --git a/templates/geo.html b/templates/geo.html
index 50302b2..2dfbfde 100644
--- a/templates/geo.html
+++ b/templates/geo.html
@@ -58,7 +58,7 @@
 }
 
 .textTopHeader {
-    height: 50px; 
+    height: 50px;
     text-align: center;
     margin-left: 8px;
     float: left;
@@ -90,6 +90,7 @@ small {
                     <ul class="dropdown-menu">
                       <li><a href="{{ url_for('index') }}">MISP Live Dashboard</a></li>
                       <li><a href="{{ url_for('geo') }}">MISP Geolocalisation</a></li>
+                      <li><a href="{{ url_for('contrib') }}">MISP Contributors</a></li>
                     </ul>
 
                 <div id="ledsHolder" style="float: right; height: 50px;">
@@ -184,7 +185,7 @@ small {
                         </div><!-- /.col-lg-6 -->
 
                         <div class="col-lg-6">
-                            
+
                             <div class="panel panel-default" style="height: 100%;">
                                 <div class="panel-heading bg-info" style="font-weight: bold;">
                                     <b id="worldMapHeader">Hit map </b>
@@ -198,7 +199,7 @@ small {
                             <div class="panel panel-default" style="height: 100%;">
                                 <div class="panel-heading bg-info" style="font-weight: bold; padding: 5px 10px;">
                                     <b id="radiusHeader" style="font-size: 18px;">Geospatial information</b>
-                                    <strong  class='leftSepa textTopHeader' style="float: none; padding: 11px;">Dates: 
+                                    <strong  class='leftSepa textTopHeader' style="float: none; padding: 11px;">Dates:
                                         <input type="text" id="datepickerRadiusFrom" size="20" style="">
                                         <input type="text" id="datepickerRadiusTo" size="20" style="">
                                     </strong>
@@ -225,7 +226,7 @@ small {
 <!-- /#wrapper -->
 
     <!-- Index -->
-    <script> 
+    <script>
         /* URL */
         var urlTopCoord = "{{ url_for('getTopCoord') }}";
         var urlHitMap = "{{ url_for('getHitMap') }}";