Merge pull request #304 from mjaschen/feature/track-analysis

Add sidebar tab with route analysis data
nrenner · Jun 8, 2020 · f37489c · f37489c
2 parents b181649 + fc54c65
commit f37489c
Show file tree

Hide file tree

Showing 9 changed files with 682 additions and 53 deletions.
diff --git a/css/style.css b/css/style.css
@@ -249,6 +249,38 @@ input#trackname:focus:invalid {
     margin: 0;
 }
 
+.track-analysis-header-distance {
+    text-align: right;
+}
+
+.track-analysis-table td {
+    font-size: small;
+}
+
+table.dataTable.track-analysis-table tfoot td {
+    font-weight: bold;
+    text-align: right;
+    padding-right: 0;
+}
+
+table.track-analysis-table tr:hover {
+    background-color: rgba(255, 255, 0, 0.3);
+}
+
+.track-analysis-title {
+    text-transform: capitalize;
+}
+
+.track-analysis-distance {
+    text-align: right;
+}
+
+.track-analysis-heading {
+    margin-top: 15px;
+    font-weight: bold;
+    font-size: 1.2em;
+}
+
 /* dashed line animation, derived from Chris Coyier and others
 https://css-tricks.com/svg-line-animation-works/
 */

diff --git a/gulpfile.js b/gulpfile.js
@@ -55,6 +55,7 @@ var paths = {
             'js/Map.js',
             'js/LayersConfig.js',
             'js/router/BRouter.js',
+            'js/util/*.js',
             'js/plugin/*.js',
             'js/control/*.js',
             'js/index.js'

diff --git a/index.html b/index.html
@@ -573,6 +573,11 @@ <h4 class="modal-title" data-i18n="export.title">
                             ><i class="fa fa-table"></i
                         ></a>
                     </li>
+                    <li>
+                        <a href="#tab_statistics" role="tab" data-i18n="[title]sidebar.analysis.title" title="Analysis"
+                            ><i class="fa fa-pie-chart"></i
+                        ></a>
+                    </li>
                 </ul>
             </div>
 
@@ -764,6 +769,14 @@ <h1 class="leaflet-sidebar-header">
                             </h1>
                             <div id="itinerary" class="flexcolumn flexgrow"></div>
                         </div>
+
+                        <div class="leaflet-sidebar-pane" id="tab_statistics">
+                            <h1 class="leaflet-sidebar-header">
+                                <span data-i18n="sidebar.analysis.title">Analysis</span>
+                                <span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span>
+                            </h1>
+                            <div id="track_statistics" class="flexcolumn flexgrow"></div>
+                        </div>
                     </div>
                 </div>
             </div>