MISP
/
misp-dashboard
mirror of https://github.com/MISP/misp-dashboard
2
0
Fork 0
Code Issues Releases Wiki Activity

chg: [geo-query] Added feedback about the loading state (querying/drawing/finish)

pull/68/head
Sami Mokaddem 2018-10-01 12:19:26 +02:00
parent bc31387a2e
commit d92884c13a
2 changed files with 79 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
static/js/geo.js
View File

@ -187,7 +187,24 @@ 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){
var geo_param = {
dateStart: dateStart,
dateEnd: dateEnd,
centerLat: coord.lat,
centerLon: coord.lng,
radius: radius_km
};
$.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
@ -205,12 +222,56 @@ function queryAndAddMarkers() {
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());

4
templates/geo.html
View File

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