ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add DataTables for dynamic & interactive track messages table (data tab)

Browse source
This commit is contained in:
Norbert Renner 2014-09-02 20:56:04 +02:00
parent bb371a30a7
commit 21cd1fbf2a
5 changed files with 87 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -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) Copyright (c) 2010-2014 Caolan McMahon; [MIT License](https://github.com/caolan/async/blob/master/LICENSE)
* [Bootstrap](http://getbootstrap.com/) * [Bootstrap](http://getbootstrap.com/)
Copyright (c) 2011-2014 Twitter, Inc; [MIT License](https://github.com/twbs/bootstrap/blob/master/LICENSE) 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)

24
css/style.css
View file

@ -167,6 +167,11 @@ textarea:focus {
background-color: rgba(255,255,255,255); 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 /* dashed line animation, derived from Chris Coyier and others
http://css-tricks.com/svg-line-animation-works/ http://css-tricks.com/svg-line-animation-works/
*/ */
@ -211,3 +216,22 @@ textarea:focus {
.nav > li > a { .nav > li > a {
padding: 2px 15px; 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;
}

5
index.html
View file

@ -16,6 +16,7 @@
<link rel="stylesheet" href="css/leaflet-routing.css" /> <link rel="stylesheet" href="css/leaflet-routing.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style.css" />
</head> </head>
<body> <body>
@ -72,6 +73,7 @@
</form> </form>
</div> </div>
<div class="tab-pane" id="tab_data"> <div class="tab-pane" id="tab_data">
<table id="datatable" class="table mini cell-border hover stripe"></table>
</div> </div>
</div> </div>
</div> </div>
@ -101,6 +103,8 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
<script> <script>
// global package prefix for BRouter web application // global package prefix for BRouter web application
BR = {}; BR = {};
@ -118,6 +122,7 @@
<script src="js/control/Download.js"></script> <script src="js/control/Download.js"></script>
<script src="js/control/Tabs.js"></script> <script src="js/control/Tabs.js"></script>
<script src="js/control/Profile.js"></script> <script src="js/control/Profile.js"></script>
<script src="js/control/TrackMessages.js"></script>
<script src="js/control/RoutingOptions.js"></script> <script src="js/control/RoutingOptions.js"></script>
<script src="js/control/Message.js"></script> <script src="js/control/Message.js"></script>

51
js/control/TrackMessages.js Normal file
View file

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

3
js/index.js
View file

@ -88,6 +88,7 @@
elevation, elevation,
download, download,
profile, profile,
trackMessages,
leftPaneId = 'leftpane', leftPaneId = 'leftpane',
saveWarningShown = false; saveWarningShown = false;
@ -140,6 +141,7 @@
BR.message.hideError(); BR.message.hideError();
routingOptions.setCustomProfile(null); routingOptions.setCustomProfile(null);
}); });
trackMessages = new BR.TrackMessages();
routing = new BR.Routing({ routing = new BR.Routing({
routing: { routing: {
@ -177,6 +179,7 @@
elevation.update(track); elevation.update(track);
stats.update(track, segments); stats.update(track, segments);
trackMessages.update(track, segments);
if (latLngs.length > 1) { if (latLngs.length > 1) {
urls.gpx = router.getUrl(latLngs, 'gpx'); urls.gpx = router.getUrl(latLngs, 'gpx');