Merge pull request #264 from nrenner/241-data-map-sync

Data table hover and selection improvements

css/style.css

@@ -388,6 +388,10 @@ table.dataTable.display tbody tr.odd:hover,
 table.dataTable.display tbody tr.even:hover {
     background-color: rgba(255, 255, 0, 0.2);
 }
+table.dataTable.hover tbody tr:hover.selected,
+table.dataTable.display tbody tr:hover.selected {
+    background-color: #bcc8b8;
+}
 
 /*
  * No-go areas
@@ -519,6 +523,19 @@ table.dataTable.display tbody tr.even:hover {
     justify-content: center;
 }
 
+/* corresponding to leaflet-sidebar-expand/-close in leaflet-sidebar-v2 */
+.sync-map {
+    float: right;
+    width: 36px;
+    height: 36px;
+    text-align: center;
+    cursor: pointer;
+    color: #333;
+}
+.sync-map.active {
+    color: #0074d9;
+}
+
 /*
  * CodeMirror
  */

index.html

@@ -737,9 +737,16 @@
 
                         <div class="leaflet-sidebar-pane" id="tab_data">
                             <h1 class="leaflet-sidebar-header">
-                                <span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span
-                                ><span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span
-                                ><span data-i18n="sidebar.data.title">Data</span>
+                                <span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span>
+                                <span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span>
+                                <span
+                                    id="data-sync-map"
+                                    class="sync-map active"
+                                    data-i18n="[title]sidebar.data.sync-map"
+                                    title="Synchronize map"
+                                    ><i class="fa fa-exchange"></i
+                                ></span>
+                                <span data-i18n="sidebar.data.title">Data</span>
                             </h1>
                             <table id="datatable" class="mini cell-border hover stripe"></table>
                         </div>

js/control/TrackMessages.js

@@ -4,7 +4,9 @@ BR.TrackMessages = L.Class.extend({
             color: 'yellow',
             opacity: 0.8,
             weight: 8
-        }
+        },
+        // center hovered edge (way segment) on map
+        syncMap: true
     },
 
     // true when tab is shown, false when hidden
@@ -29,6 +31,9 @@ BR.TrackMessages = L.Class.extend({
         var table = document.getElementById('datatable');
         this.tableClassName = table.className;
         this.tableParent = table.parentElement;
+
+        var syncButton = document.getElementById('data-sync-map');
+        L.DomEvent.on(syncButton, 'click', this._toggleSyncMap, this);
     },
 
     update: function(polyline, segments) {
@@ -75,6 +80,7 @@ BR.TrackMessages = L.Class.extend({
         // highlight track segment (graph edge) on row hover
         this._setEdges(polyline, segments);
         $('#datatable tbody tr').hover(L.bind(this._handleHover, this), L.bind(this._handleHoverOut, this));
+        $('#datatable tbody').on('click', 'tr', L.bind(this._toggleSelected, this));
     },
 
     show: function() {
@@ -187,20 +193,55 @@ BR.TrackMessages = L.Class.extend({
         }
     },
 
-    _handleHover: function(evt) {
-        var tr = $(evt.currentTarget),
-            row = this._table.row(tr),
+    _getRowEdge: function(tr) {
+        var row = this._table.row($(tr)),
             trackLatLngs = this._track.getLatLngs(),
             startIndex = row.index() > 0 ? this._edges[row.index() - 1] : 0,
             endIndex = this._edges[row.index()],
             edgeLatLngs = trackLatLngs.slice(startIndex, endIndex + 1);
 
-        this._selectedEdge = L.polyline(edgeLatLngs, this.options.edgeStyle).addTo(this._map);
-        this._map.panTo(this._selectedEdge.getBounds().getCenter());
+        return L.polyline(edgeLatLngs, this.options.edgeStyle);
+    },
+
+    _handleHover: function(evt) {
+        var tr = evt.currentTarget;
+
+        this._hoveredEdge = this._getRowEdge(tr).addTo(this._map);
+        if (this.options.syncMap && !this._selectedEdge) {
+            this._map.panTo(this._hoveredEdge.getCenter());
+        }
     },
 
     _handleHoverOut: function(evt) {
+        this._map.removeLayer(this._hoveredEdge);
+        this._hoveredEdge = null;
+    },
+
+    _toggleSelected: function(evt) {
+        var tr = evt.currentTarget;
+
+        if (tr.classList.toggle('selected')) {
+            if (this._selectedEdge) {
+                // no multi-select, remove selection of other row
+                // (simpler to implement and to use?)
+                this._map.removeLayer(this._selectedEdge);
+                this._selectedRow.classList.remove('selected');
+            }
+            this._selectedEdge = this._getRowEdge(tr).addTo(this._map);
+            this._selectedRow = tr;
+
+            this._map.panTo(this._selectedEdge.getCenter());
+        } else {
             this._map.removeLayer(this._selectedEdge);
             this._selectedEdge = null;
+            this._selectedRow = null;
+        }
+    },
+
+    _toggleSyncMap: function(evt) {
+        var button = evt.currentTarget;
+
+        button.classList.toggle('active');
+        this.options.syncMap = !this.options.syncMap;
     }
 });

locales/en.json

@@ -172,6 +172,7 @@
       "title": "Customize profile"
     },
     "data": {
+      "sync-map": "Synchronize map",
       "title": "Data"
     },
     "itinerary": {