Load event details together with the event table.

This commit is contained in:
Kasper D. Fischer 2014-05-08 11:36:20 +00:00
parent 882bd9aa14
commit b38fcddad7
Notes: subgit 2018-03-07 17:58:49 +01:00
r622 www/trunk
2 changed files with 54 additions and 85 deletions

View File

@ -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;
}); });

View File

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