From 21cd1fbf2afb5479d6dbce3b5c53f6512d12aaa6 Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Tue, 2 Sep 2014 20:56:04 +0200 Subject: [PATCH] add DataTables for dynamic & interactive track messages table (data tab) --- README.md | 4 +++ css/style.css | 24 +++++++++++++++++ index.html | 5 ++++ js/control/TrackMessages.js | 51 +++++++++++++++++++++++++++++++++++++ js/index.js | 3 +++ 5 files changed, 87 insertions(+) create mode 100644 js/control/TrackMessages.js diff --git a/README.md b/README.md index 1a3bbb4..6ef011e 100644 --- a/README.md +++ b/README.md @@ -58,3 +58,7 @@ Copyright (c) 2011-2012, Pavel Shramov; [2-clause BSD License](https://github.co Copyright (c) 2010-2014 Caolan McMahon; [MIT License](https://github.com/caolan/async/blob/master/LICENSE) * [Bootstrap](http://getbootstrap.com/) Copyright (c) 2011-2014 Twitter, Inc; [MIT License](https://github.com/twbs/bootstrap/blob/master/LICENSE) +* [jQuery](https://github.com/jquery/jquery) +Copyright 2005, 2014 jQuery Foundation and other contributors; [MIT License](https://github.com/jquery/jquery/blob/master/LICENSE.txt) +* [DataTables](https://github.com/DataTables/DataTables) +Copyright (C) 2008-2014, SpryMedia Ltd.; [MIT License](http://www.datatables.net/license/mit) diff --git a/css/style.css b/css/style.css index 7e4ce18..7348209 100644 --- a/css/style.css +++ b/css/style.css @@ -167,6 +167,11 @@ textarea:focus { background-color: rgba(255,255,255,255); } +/* track messages (data tab) */ +#tab_data { + font-size: x-small; +} + /* dashed line animation, derived from Chris Coyier and others http://css-tricks.com/svg-line-animation-works/ */ @@ -211,3 +216,22 @@ textarea:focus { .nav > li > a { padding: 2px 15px; } + +/* + * DataTables + */ + +table.dataTable.mini thead th, +table.dataTable.mini thead td { + padding: 3px 13px 3px 2px; +} + +table.dataTable.mini tbody th, +table.dataTable.mini tbody td { + padding: 2px 2px; +} +table.dataTable thead .sorting_asc, +table.dataTable thead .sorting_desc, +table.dataTable thead .sorting { + background-position: center right -3px; +} diff --git a/index.html b/index.html index e7ac42e..592d967 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,7 @@ + @@ -72,6 +73,7 @@
+
@@ -101,6 +103,8 @@ + + + diff --git a/js/control/TrackMessages.js b/js/control/TrackMessages.js new file mode 100644 index 0000000..4d6f2ca --- /dev/null +++ b/js/control/TrackMessages.js @@ -0,0 +1,51 @@ +BR.TrackMessages = L.Class.extend({ + initialize: function () { + }, + + update: function (polyline, segments) { + var i, + messages, + data = [], + columns; + + if (!segments || segments.length === 0) + return; + + for (i = 0; segments && i < segments.length; i++) { + messages = segments[i].feature.properties.messages; + + if (i === 0) { + columns = this._getColumns(messages[0]); + } + + data = data.concat(messages.slice(1)); + } + + $('#datatable').DataTable({ + destroy: true, + data: data, + columns: columns, + paging: false, + searching: false, + info: false, + scrollY: 330, + scrollX: 370, + scrollCollapse: true, + order: [] + }); + + }, + + _getColumns: function(headings) { + var columns = []; + for (k = 0; k < headings.length; k++) { + // http://datatables.net/reference/option/#Columns + columns.push({ + title: headings[k] + }); + } + return columns; + } +}); + +BR.TrackMessages.include(L.Mixin.Events); diff --git a/js/index.js b/js/index.js index 214e8a6..5474642 100644 --- a/js/index.js +++ b/js/index.js @@ -88,6 +88,7 @@ elevation, download, profile, + trackMessages, leftPaneId = 'leftpane', saveWarningShown = false; @@ -140,6 +141,7 @@ BR.message.hideError(); routingOptions.setCustomProfile(null); }); + trackMessages = new BR.TrackMessages(); routing = new BR.Routing({ routing: { @@ -177,6 +179,7 @@ elevation.update(track); stats.update(track, segments); + trackMessages.update(track, segments); if (latLngs.length > 1) { urls.gpx = router.getUrl(latLngs, 'gpx');