Load event details together with the event table.
This commit is contained in:
parent
882bd9aa14
commit
b38fcddad7
Notes:
subgit
2018-03-07 17:58:49 +01:00
r622 www/trunk
149
www/events.js
149
www/events.js
@ -72,82 +72,6 @@ function ajaxLoadEvents(stime, etime) {
|
|||||||
minlon: W-config['map']['latlngDelta'],
|
minlon: W-config['map']['latlngDelta'],
|
||||||
maxlon: E+config['map']['latlngDelta'],
|
maxlon: E+config['map']['latlngDelta'],
|
||||||
minmag: config['event']['minMag']-config['event']['minMagDelta'],
|
minmag: config['event']['minMag']-config['event']['minMagDelta'],
|
||||||
};
|
|
||||||
$.ajax({
|
|
||||||
type: "GET",
|
|
||||||
url: config['ajax']['eventURL'],
|
|
||||||
data: request_data,
|
|
||||||
dataType: "xml",
|
|
||||||
success: function (xml) {
|
|
||||||
$(xml).find('event').each(function () {
|
|
||||||
var id = $(this).attr('publicID').split('/')[2];
|
|
||||||
var mag = $(this).find('magnitude > mag > value').text();
|
|
||||||
var otime = $(this).find('origin > time > value').text();
|
|
||||||
var lng = $(this).find('origin > longitude > value').text();
|
|
||||||
var lat = $(this).find('origin > latitude > value').text();
|
|
||||||
var evaluationMode = $(this).find('evaluationMode').text();
|
|
||||||
var evaluationStatus = $(this).find('evaluationStatus').text();
|
|
||||||
var type = $(this).find('type').last().text();
|
|
||||||
var location
|
|
||||||
// try use location with reverse geolocation lookup (nominatim), check cache first
|
|
||||||
// use getLocation if it fails or description -> text if it also fails
|
|
||||||
if ( geolocationTable[id] ) {
|
|
||||||
location = geolocationTable[id];
|
|
||||||
} else {
|
|
||||||
location = getGeolocation(id, lat, lng);
|
|
||||||
( location ) ? null : location = $(this).find('description > text').text();
|
|
||||||
};
|
|
||||||
// create table row: Date, Time, Mag, Location
|
|
||||||
if ( !eventTable[id] && $.inArray(type, config['event']['typeWhitelist'] )+1 && $.inArray(evaluationStatus, config['event']['evaluationBlacklist'])<0 && Number(mag)+0.05 >= config['event']['minMag'] ) {
|
|
||||||
var row = '<tr class="tablesorter-hasChildRow">'
|
|
||||||
+ '<td class="utctime-date">'+otime.split('.')[0]+'Z</td>'
|
|
||||||
+ '<td class="utctime-time">'+otime.split('.')[0]+'Z</td>'
|
|
||||||
+ sprintf('<td class="ar">%.1f</td>', Number(mag))
|
|
||||||
+ '<td><a href="#" class="toggle" eventid="'+id+'">'+location+'</a><a class="map-link" href="#" eventid="'+id+'">Karte</a></td>'
|
|
||||||
+ '</tr>';
|
|
||||||
row += '<tr class="tablesorter-childRow">'
|
|
||||||
+ '<td colspan="4" eventid="'+id+'">Daten werden geladen ...</td></tr>';
|
|
||||||
var added = $('#eventstable tbody').append(row);
|
|
||||||
added.find('.tablesorter-childRow td').hide();
|
|
||||||
$('#eventstable').find('td.utctime-date').each(function() {
|
|
||||||
$.localtime.formatObject($(this), "dd.MM.yyyy");
|
|
||||||
$(this).removeClass('utctime-date');
|
|
||||||
$(this).addClass('localtime-date');
|
|
||||||
});
|
|
||||||
$('#eventstable').find('td.utctime-time').each(function() {
|
|
||||||
$.localtime.formatObject($(this), "HH:mm");
|
|
||||||
$(this).removeClass('utctime-time');
|
|
||||||
$(this).addClass('localtime-time');
|
|
||||||
});
|
|
||||||
// create marker
|
|
||||||
var marker = addEventMarker(id, Number(lat), Number(lng), Number(mag));
|
|
||||||
var text = sprintf('<h3 eventid="%s">%s</h3>', id, location)
|
|
||||||
+ sprintf('<p>Ereignis: %s</br>', id)
|
|
||||||
+ sprintf('Ort: %.4f °N, %.4f °O </br>', Number(lat), Number(lng))
|
|
||||||
+ sprintf('Zeit: <span class="utctime">%sZ</span></p>', otime.split('.')[0], otime.split('.')[0]);
|
|
||||||
marker.bindPopup(text);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
},
|
|
||||||
complete: function () {
|
|
||||||
initStationTable();
|
|
||||||
var sort = [[0,1],[1,1],[2,1]];
|
|
||||||
$("#eventstable").trigger("update", [true]);
|
|
||||||
$("#eventstable").trigger("updateCache");
|
|
||||||
$("#eventstable").trigger("sorton", [sort]);
|
|
||||||
initMapLink();
|
|
||||||
},
|
|
||||||
error: function( jqxhr, textStatus, error ) {
|
|
||||||
var err = textStatus + ", " + error;
|
|
||||||
console.log( "Request Failed: " + err );
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/* ajaxLoadEventInfo */
|
|
||||||
function ajaxLoadEventInfo(id) {
|
|
||||||
var request_data = {
|
|
||||||
eventid: id,
|
|
||||||
includeArrivals: true,
|
includeArrivals: true,
|
||||||
};
|
};
|
||||||
$.ajax({
|
$.ajax({
|
||||||
@ -156,9 +80,9 @@ function ajaxLoadEventInfo(id) {
|
|||||||
data: request_data,
|
data: request_data,
|
||||||
dataType: "xml",
|
dataType: "xml",
|
||||||
success: function (xml) {
|
success: function (xml) {
|
||||||
eventDetails[id] = true;
|
|
||||||
$(xml).find('event').each(function () {
|
$(xml).find('event').each(function () {
|
||||||
var event = $(this);
|
var event = $(this);
|
||||||
|
var id = $(this).attr('publicID').split('/')[2];
|
||||||
var mag = $(this).find('magnitude > mag > value').text();
|
var mag = $(this).find('magnitude > mag > value').text();
|
||||||
var otime = $(this).find('origin > time > value').text();
|
var otime = $(this).find('origin > time > value').text();
|
||||||
var lng = $(this).find('origin > longitude > value').text();
|
var lng = $(this).find('origin > longitude > value').text();
|
||||||
@ -170,9 +94,31 @@ function ajaxLoadEventInfo(id) {
|
|||||||
var rms = $(this).find('origin > quality > standardError').text();
|
var rms = $(this).find('origin > quality > standardError').text();
|
||||||
var gap = $(this).find('origin > quality > azimuthalGap').text();
|
var gap = $(this).find('origin > quality > azimuthalGap').text();
|
||||||
var phases_count = $(this).find('origin > quality > usedPhaseCount').text();
|
var phases_count = $(this).find('origin > quality > usedPhaseCount').text();
|
||||||
|
var evaluationMode = $(this).find('evaluationMode').text();
|
||||||
|
var evaluationStatus = $(this).find('evaluationStatus').text();
|
||||||
var type = $(this).find('type').last().text();
|
var type = $(this).find('type').last().text();
|
||||||
// setting up general event info
|
var location
|
||||||
var row = "<pre>"
|
// try to use location with reverse geolocation lookup (nominatim), check cache first
|
||||||
|
// use getLocation if it fails or description -> text if it also fails
|
||||||
|
if ( geolocationTable[id] ) {
|
||||||
|
location = geolocationTable[id];
|
||||||
|
} else {
|
||||||
|
location = getGeolocation(id, lat, lng);
|
||||||
|
( location ) ? null : location = $(this).find('description > text').text();
|
||||||
|
};
|
||||||
|
// create table row: Date, Time, Mag, Location
|
||||||
|
if ( !eventTable[id] && $.inArray(type, config['event']['typeWhitelist'] )+1 && $.inArray(evaluationStatus, config['event']['evaluationBlacklist'])<0 && Number(mag)+0.05 >= config['event']['minMag'] ) {
|
||||||
|
// general event info (1st line)
|
||||||
|
var row = '<tr class="tablesorter-hasChildRow">'
|
||||||
|
+ '<td class="utctime-date">'+otime.split('.')[0]+'Z</td>'
|
||||||
|
+ '<td class="utctime-time">'+otime.split('.')[0]+'Z</td>'
|
||||||
|
+ sprintf('<td class="ar">%.1f</td>', Number(mag))
|
||||||
|
+ '<td><a href="#" class="toggle" eventid="'+id+'">'+location+'</a><a class="map-link" href="#" eventid="'+id+'">Karte</a></td>'
|
||||||
|
+ '</tr>';
|
||||||
|
// setting up event details (2nd line)
|
||||||
|
row += '<tr class="tablesorter-childRow">'
|
||||||
|
+ '<td colspan="4" eventid="'+id+'">'
|
||||||
|
+ '<pre>'
|
||||||
+ sprintf("ID %49s\n", id)
|
+ sprintf("ID %49s\n", id)
|
||||||
+ sprintf("Type %47s\n\n", type)
|
+ sprintf("Type %47s\n\n", type)
|
||||||
+ "Origin\n"
|
+ "Origin\n"
|
||||||
@ -201,16 +147,42 @@ function ajaxLoadEventInfo(id) {
|
|||||||
var channel = waveformid.attr('channelCode').substring(2,2);
|
var channel = waveformid.attr('channelCode').substring(2,2);
|
||||||
var phasemode = event.find('pick[publicID="'+pickid+'"] > evaluationMode').text().substring(0,1).toUpperCase();
|
var phasemode = event.find('pick[publicID="'+pickid+'"] > evaluationMode').text().substring(0,1).toUpperCase();
|
||||||
var picktime = event.find('pick[publicID="'+pickid+'"] > time > value').text().split('T')[1].substring(0,11);
|
var picktime = event.find('pick[publicID="'+pickid+'"] > time > value').text().split('T')[1].substring(0,11);
|
||||||
row = row
|
row += sprintf('%-4s %2s %5.1f %5.1f %3s %1s %13s %5.1f %5.2f\n', stationcode, networkcode, Number(dist), Number(azi), phase, phasemode, picktime, Number(tres), Number(tweight));
|
||||||
+ sprintf('%-4s %2s %5.1f %5.1f %3s %1s %13s %5.1f %5.2f\n', stationcode, networkcode, Number(dist), Number(azi), phase, phasemode, picktime, Number(tres), Number(tweight));
|
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
row = row + '</pre>';
|
row += '</td></tr>';
|
||||||
$('#eventstable > tbody > tr.tablesorter-childRow > td[eventid='+id+']').html(row);
|
// add row to table
|
||||||
|
var added = $('#eventstable tbody').append(row);
|
||||||
|
added.find('.tablesorter-childRow td').hide();
|
||||||
|
$('#eventstable').find('td.utctime-date').each(function() {
|
||||||
|
$.localtime.formatObject($(this), "dd.MM.yyyy");
|
||||||
|
$(this).removeClass('utctime-date');
|
||||||
|
$(this).addClass('localtime-date');
|
||||||
|
});
|
||||||
|
$('#eventstable').find('td.utctime-time').each(function() {
|
||||||
|
$.localtime.formatObject($(this), "HH:mm");
|
||||||
|
$(this).removeClass('utctime-time');
|
||||||
|
$(this).addClass('localtime-time');
|
||||||
|
});
|
||||||
|
// create marker
|
||||||
|
var marker = addEventMarker(id, Number(lat), Number(lng), Number(mag));
|
||||||
|
var text = sprintf('<h3 eventid="%s">%s</h3>', id, location)
|
||||||
|
+ sprintf('<p>Ereignis: %s</br>', id)
|
||||||
|
+ sprintf('Type: %s</br>', type)
|
||||||
|
+ sprintf('Magnitude: %3.1f</br>', Number(mag))
|
||||||
|
+ sprintf('Ort: %.4f °N, %.4f °O </br>', Number(lat), Number(lng))
|
||||||
|
+ sprintf('Zeit: <span class="utctime">%sZ</span></p>', otime.split('.')[0], otime.split('.')[0]);
|
||||||
|
marker.bindPopup(text);
|
||||||
|
};
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
complete: function () {
|
complete: function () {
|
||||||
null;
|
initStationTable();
|
||||||
|
var sort = [[0,1],[1,1],[2,1]];
|
||||||
|
$("#eventstable").trigger("update", [true]);
|
||||||
|
$("#eventstable").trigger("updateCache");
|
||||||
|
$("#eventstable").trigger("sorton", [sort]);
|
||||||
|
initMapLink();
|
||||||
},
|
},
|
||||||
error: function( jqxhr, textStatus, error ) {
|
error: function( jqxhr, textStatus, error ) {
|
||||||
var err = textStatus + ", " + error;
|
var err = textStatus + ", " + error;
|
||||||
@ -272,7 +244,7 @@ function highlightEvent( id ) {
|
|||||||
};
|
};
|
||||||
var normalStyle = {
|
var normalStyle = {
|
||||||
fillColor: config['event']['markerColor'],
|
fillColor: config['event']['markerColor'],
|
||||||
color: config['event']['markerColorH']
|
color: config['event']['markerColor']
|
||||||
};
|
};
|
||||||
$("#eventstable > tbody > tr:not(.filtered)").find("a.map-link").each( function() {
|
$("#eventstable > tbody > tr:not(.filtered)").find("a.map-link").each( function() {
|
||||||
if ( $(this).attr("eventid") ) {
|
if ( $(this).attr("eventid") ) {
|
||||||
@ -336,10 +308,6 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
// show / hide event info
|
// show / hide event info
|
||||||
$('#eventstable').delegate('.toggle', 'click' , function(){
|
$('#eventstable').delegate('.toggle', 'click' , function(){
|
||||||
// load event details
|
|
||||||
var eventid = $(this).attr('eventid');
|
|
||||||
( eventDetails[eventid] ) ? null : ajaxLoadEventInfo(eventid);
|
|
||||||
|
|
||||||
// toggle visibility of selected row
|
// toggle visibility of selected row
|
||||||
$(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').toggle('slow');
|
$(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').toggle('slow');
|
||||||
|
|
||||||
@ -357,11 +325,12 @@ $(document).ready(function() {
|
|||||||
var selected = $(this).hasClass('selected');
|
var selected = $(this).hasClass('selected');
|
||||||
if ( selected ) {
|
if ( selected ) {
|
||||||
$(this).removeClass('selected');
|
$(this).removeClass('selected');
|
||||||
|
highlightFirstEvent();
|
||||||
} else {
|
} else {
|
||||||
$(this).addClass('selected');
|
$(this).addClass('selected');
|
||||||
|
highlightEvent($(this).attr('eventid'));
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -104,7 +104,7 @@ function initMapLink() {
|
|||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
|
||||||
// create a map in the "map" div, set the view to a given place and zoom
|
// create a map in the "map" div, set the view to a given place and zoom
|
||||||
map = L.map('map', { zoomControl: false }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
|
map = L.map('map', { zoomControl: false, worldCopyJump: true }).setView(config['map']['centerDefault'], config['map']['zoomDefault']);
|
||||||
new L.Control.Zoom({ position: 'topright' }).addTo(map);
|
new L.Control.Zoom({ position: 'topright' }).addTo(map);
|
||||||
|
|
||||||
// add MapQuestOSM tile layer
|
// add MapQuestOSM tile layer
|
||||||
|
Loading…
Reference in New Issue
Block a user