From 6eff39ec7a130df3675614a8e44770c444903fc5 Mon Sep 17 00:00:00 2001
From: Brian Ferris <bdferris@google.com>
Date: Sat, 14 Apr 2012 14:41:38 +0200
Subject: [PATCH] Issue #5: Improve the Utility of the Trip Problem Report
 Admin Interface

- Add mouseover effect for the vehicle location records table, such that
the currently selected record will have its vehicle location highlighted
on the map.
- Add a row index column to the vehicle location records table, such
that it's easier to identify a specific record.
- For the info-window that's shown when you click on a vehicle
location record on the map, now show the record row index and a better
formatted timestamp, both of which should exactly match the values used
in the records table.
---
 .../problems/trip-problem-reports-edit.jspx   |  6 ++--
 ...oba-admin-problems-trip-problem-reports.js | 36 +++++++++++++++----
 2 files changed, 33 insertions(+), 9 deletions(-)
diff --git a/onebusaway-webapp/src/main/webapp/WEB-INF/content/admin/problems/trip-problem-reports-edit.jspx b/onebusaway-webapp/src/main/webapp/WEB-INF/content/admin/problems/trip-problem-reports-edit.jspx
index 4bc3e80f6..4d4d7f1a3 100644
--- a/onebusaway-webapp/src/main/webapp/WEB-INF/content/admin/problems/trip-problem-reports-edit.jspx
+++ b/onebusaway-webapp/src/main/webapp/WEB-INF/content/admin/problems/trip-problem-reports-edit.jspx
@@ -33,7 +33,7 @@
   var data = {};
   data.tripProblemReport = <oba:json value="model"/>;
   data.vehicleLocationRecords = <oba:json value="vehicleLocationRecords"/>;
-  jQuery(document).ready(function() { oba_admin_problems_trip_problem_reports(data) } );
+  jQuery(document).ready(function() { oba_admin_problems_trip_problem_reports(data); } );
 </script>          
 </head>
 <body>
@@ -197,14 +197,16 @@ jQuery("input#trip-problem-reports_label").autocomplete({
     <table id="vehicleLocationRecordsTable">
         <thead class="darkHeader">
             <tr>
+                <td class="index">Index</td>
                 <td class="time">Time</td>
                 <td class="scheduleDeviation">Schedule Deviation</td>
                 <td class="location">Location</td>
             </tr>
         </thead>
         <tbody>
-            <s:iterator value="vehicleLocationRecords">
+            <s:iterator value="vehicleLocationRecords" status="it">
                 <tr>
+                    <td><s:property value="#it.index"/></td>
                     <td><oba:date timeStyle="short" value="timeOfRecord" /></td>
                     <td><s:if test="scheduleDeviationSet">
                       <s:text name="scheduleDeviationInMinutes">
diff --git a/onebusaway-webapp/src/main/webapp/js/oba-admin-problems-trip-problem-reports.js b/onebusaway-webapp/src/main/webapp/js/oba-admin-problems-trip-problem-reports.js
index 40ab9e67d..6df7f687a 100644
--- a/onebusaway-webapp/src/main/webapp/js/oba-admin-problems-trip-problem-reports.js
+++ b/onebusaway-webapp/src/main/webapp/js/oba-admin-problems-trip-problem-reports.js
@@ -26,7 +26,7 @@ function oba_admin_problems_trip_problem_reports(data) {
 		if( report.userLat && report.userLon) {
 			var point = new google.maps.LatLng(report.userLat,report.userLon);
 			var url = OBA.Resources.Map['PersonMarker.png'];
-			var marker = new google.maps.Marker({position: point, map: map, icon: url});
+			new google.maps.Marker({position: point, map: map, icon: url});
 			
 			bounds.extend(point);
 		}
@@ -34,7 +34,7 @@ function oba_admin_problems_trip_problem_reports(data) {
 		if( report.vehicleLat && report.vehicleLon) {
 			var point = new google.maps.LatLng(report.vehicleLat,report.vehicleLon);
 			var url = OBA.Resources.Map['MapIcon-Bus-22.png'];
-			var marker = new google.maps.Marker({position: point, map: map, icon: url});
+			new google.maps.Marker({position: point, map: map, icon: url});
 			
 			bounds.extend(point);
 		}
@@ -42,7 +42,7 @@ function oba_admin_problems_trip_problem_reports(data) {
 		if ( report.stop ) {
 			var stop = report.stop;
 			var point = new google.maps.LatLng(stop.lat,stop.lon);
-			var marker = new google.maps.Marker({position: point, map: map});
+			new google.maps.Marker({position: point, map: map});
 			
 			bounds.extend(point);
 		}
@@ -50,9 +50,10 @@ function oba_admin_problems_trip_problem_reports(data) {
 	
 	if( data.vehicleLocationRecords ) {
 		var records = data.vehicleLocationRecords;
+		var rows = jQuery("#vehicleLocationRecordsTable tr");
 		for( var i=0; i<records.length; i++) {
-			
 			var record = records[i];
+			var row = rows.eq(i);
 			
 			if( record.currentLocation ) {
 
@@ -62,9 +63,9 @@ function oba_admin_problems_trip_problem_reports(data) {
 				var m = new google.maps.Marker({position: point, map: map, icon: url});
 
 				var handler = function(record,marker) {
-					var d = new Date(record.timeOfRecord);
+					var label = i + " @ " + row.find("td").eq(1).text(); 
 					return function() {						
-					    infoWindow.setContent('t=' + d.toTimeString() );
+					    infoWindow.setContent(label);
 						infoWindow.open(map,marker);
 					};
 				}(record,m);
@@ -72,10 +73,31 @@ function oba_admin_problems_trip_problem_reports(data) {
 				google.maps.event.addListener(m, 'click', handler);
 				
 				bounds.extend(point);
+
+				add_highlight_location_on_hover(row, map, point);
 			}
 		}
 	}
 	
 	if( ! bounds.isEmpty() )
 		map.fitBounds(bounds);
-};    
\ No newline at end of file
+};
+
+function add_highlight_location_on_hover(el, map, p) {
+	var selection_marker = null;
+	var on_hover_in = function(obj) {
+		on_hover_out();
+		var icon_url = OBA.Resources.Map['SelectionCircle36.png'];
+		var anchor = new google.maps.Point(18, 18);
+		var icon = new google.maps.MarkerImage(icon_url, null, null, anchor);
+		selection_marker = new google.maps.Marker({position: p, map: map, icon: icon, clickable: false});
+	};
+	var on_hover_out = function(obj) {
+		if (selection_marker != null) {
+			selection_marker.setMap(null);
+			selection_marker = null;
+		}
+	};
+	el.hover(on_hover_in, on_hover_out);
+
+};
\ No newline at end of file

Index	Time	Schedule Deviation	Location
		diff --git a/onebusaway-webapp/src/main/webapp/js/oba-admin-problems-trip-problem-reports.js b/onebusaway-webapp/src/main/webapp/js/oba-admin-problems-trip-problem-reports.js index 40ab9e67d..6df7f687a 100644 --- a/onebusaway-webapp/src/main/webapp/js/oba-admin-problems-trip-problem-reports.js +++ b/onebusaway-webapp/src/main/webapp/js/oba-admin-problems-trip-problem-reports.js @@ -26,7 +26,7 @@ function oba_admin_problems_trip_problem_reports(data) { if( report.userLat && report.userLon) { var point = new google.maps.LatLng(report.userLat,report.userLon); var url = OBA.Resources.Map['PersonMarker.png']; - var marker = new google.maps.Marker({position: point, map: map, icon: url}); + new google.maps.Marker({position: point, map: map, icon: url}); bounds.extend(point); } @@ -34,7 +34,7 @@ function oba_admin_problems_trip_problem_reports(data) { if( report.vehicleLat && report.vehicleLon) { var point = new google.maps.LatLng(report.vehicleLat,report.vehicleLon); var url = OBA.Resources.Map['MapIcon-Bus-22.png']; - var marker = new google.maps.Marker({position: point, map: map, icon: url}); + new google.maps.Marker({position: point, map: map, icon: url}); bounds.extend(point); } @@ -42,7 +42,7 @@ function oba_admin_problems_trip_problem_reports(data) { if ( report.stop ) { var stop = report.stop; var point = new google.maps.LatLng(stop.lat,stop.lon); - var marker = new google.maps.Marker({position: point, map: map}); + new google.maps.Marker({position: point, map: map}); bounds.extend(point); } @@ -50,9 +50,10 @@ function oba_admin_problems_trip_problem_reports(data) { if( data.vehicleLocationRecords ) { var records = data.vehicleLocationRecords; + var rows = jQuery("#vehicleLocationRecordsTable tr"); for( var i=0; i