From d92884c13a4c4702d0a936875141a93e3fd4fe68 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <sami.mokaddem@circl.lu>
Date: Mon, 1 Oct 2018 12:19:26 +0200
Subject: [PATCH] chg: [geo-query] Added feedback about the loading state
 (querying/drawing/finish)

---
 static/js/geo.js   | 93 ++++++++++++++++++++++++++++++++++++++--------
 templates/geo.html |  4 +-
 2 files changed, 79 insertions(+), 18 deletions(-)

diff --git a/static/js/geo.js b/static/js/geo.js
index 8f06559..f8b946f 100644
--- a/static/js/geo.js
+++ b/static/js/geo.js
@@ -187,30 +187,91 @@ function queryAndAddMarkers() {
     var coord = circleRadius._latlng;
     var dateStart = datePickersRadiusWidgetFrom.datepicker("getDate").getTime() / 1000;
     var dateEnd = datePickersRadiusWidgetTo.datepicker("getDate").getTime() / 1000;
-    $.getJSON(urlCoordsByRadius+"?dateStart="+dateStart+"&dateEnd="+dateEnd+"&centerLat="+coord.lat+"&centerLon="+coord.lng+"&radius="+radius_km, function(allList){
-        // remove old markers
-        for (var i in savedMarkerRadius) {
-            savedMarkerRadius[i].remove(); // remove marker
-        }
+    var geo_param = {
+        dateStart: dateStart,
+        dateEnd: dateEnd,
+        centerLat: coord.lat,
+        centerLon: coord.lng,
+        radius: radius_km
+    };
 
-        for (var listIndex in allList) {
-            var curMarker = allList[listIndex];
-            var dataText = "";
-            var coordJson = curMarker[1];
-            for (var dataI in curMarker[0]) {
-                var jsonData = JSON.parse(curMarker[0][dataI])
-                dataText += '<strong>'+jsonData.categ+': </strong> '+jsonData.value + "<br>"
+    $.ajax({
+        data: geo_param,
+        cache: false,
+        beforeSend: function(XMLHttpRequest) {
+            //$('.loading').show();
+            set_loading_status($('#geo_info_qry_btn'), true, 'Querying and fetching', 1);
+        },
+        success: function(data, textStatus) {
+            var allList = data;
+            set_loading_status($('#geo_info_qry_btn'), true, 'Drawing '+allList.length + ' results', 2);
+            // remove old markers
+            for (var i in savedMarkerRadius) {
+                savedMarkerRadius[i].remove(); // remove marker
             }
-            var marker = L.marker([coordJson[1], coordJson[0]]).addTo(radiusOpenStreetMap);
-            savedMarkerRadius.push(marker);
-            marker.bindPopup(dataText, {autoClose:false}).openPopup();
-        }
+
+            for (var listIndex in allList) {
+                var curMarker = allList[listIndex];
+                var dataText = "";
+                var coordJson = curMarker[1];
+                for (var dataI in curMarker[0]) {
+                    var jsonData = JSON.parse(curMarker[0][dataI])
+                    dataText += '<strong>'+jsonData.categ+': </strong> '+jsonData.value + "<br>"
+                }
+                var marker = L.marker([coordJson[1], coordJson[0]]).addTo(radiusOpenStreetMap);
+                savedMarkerRadius.push(marker);
+                marker.bindPopup(dataText, {autoClose:false}).openPopup();
+            }
+            set_loading_status($('#geo_info_qry_btn'), false, allList.length + ' results');
+        },
+        error: function( jqXhr, textStatus, errorThrown ){
+            set_loading_status($('#geo_info_qry_btn'), false, 'Error: '+ errorThrown);
+        },
+        type: 'get',
+        url: urlCoordsByRadius
     });
 }
 
 
 /* UTIL */
 
+function set_loading_status(jhtml, is_loading, text, loading_state) {
+    text = text === undefined || text === null ? '' : text;
+    if (is_loading) {
+        if (jhtml.data('default-text') === undefined) {
+            jhtml.data('default-text', jhtml.text());
+        }
+        var loading_icon = ''
+        switch(loading_state) {
+            case 1:
+                loading_icon = 'fa-spinner';
+                break;
+
+            case 2:
+                loading_icon = 'fa-circle-o-notch';
+                break;
+
+            case 3:
+                loading_icon = 'fa-refresh';
+                break;
+
+            default:
+                loading_icon = 'fa-circle-o-notch';
+                break;
+        }
+        var loadingIcon = $('<i class="fa fa-spin '+loading_icon+'"></i>');
+        jhtml.text(' '+text);
+        jhtml.prepend(loadingIcon);
+    } else {
+        jhtml.empty();
+        jhtml.text(text);
+        setTimeout(function() {
+            let old_text = jhtml.data('default-text');
+            jhtml.text(old_text);
+        }, 5000);
+    }
+}
+
 function days_between(date1, date2) {
     var ONEDAY = 60*60*24*1000;
     var diff_ms = Math.abs(date1.getTime() - date2.getTime());
diff --git a/templates/geo.html b/templates/geo.html
index 8023a23..1fe4d81 100644
--- a/templates/geo.html
+++ b/templates/geo.html
@@ -26,7 +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>
-    <link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="text/css">
+    <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"/>
     <script src="{{ url_for('static', filename='js/jquery-jvectormap-2.0.3.min.js') }}"></script>
@@ -211,7 +211,7 @@ small {
                                         <input type="text" id="datepickerRadiusFrom" size="20" style="">
                                         <input type="text" id="datepickerRadiusTo" size="20" style="">
                                     </strong>
-                                    <button type="button" class="btn btn-default leftSepa" onclick="queryAndAddMarkers()">Query</button>
+                                    <button id="geo_info_qry_btn" type="button" class="btn btn-default leftSepa" style="padding-left: 12px;" onclick="queryAndAddMarkers()">Query</button>
                                 </div>
                                 <div id="panelbody" class="panel-body" style="height: 100%;">
                                     <div id="radiusMap" style="width:100%; height: 51vh; position: relative; z-index: 1;"></div>