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.
camsys · Apr 14, 2012 · 6eff39e · 6eff39e
1 parent 386a6c4
commit 6eff39e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 9 deletions.
diff --git a/...away-webapp/src/main/webapp/WEB-INF/content/admin/problems/trip-problem-reports-edit.jspx b/...away-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
@@ -26,33 +26,34 @@ 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);
 		}
 
 		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);
 		}
 
 		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);
 		}
 	}
 
 	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,20 +63,41 @@ 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);
 
 				google.maps.event.addListener(m, 'click', handler);
 
 				bounds.extend(point);
+
+				add_highlight_location_on_hover(row, map, point);
 			}
 		}
 	}
 
 	if( ! bounds.isEmpty() )
 		map.fitBounds(bounds);
-};    
+};
+
+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);
+
+};