From fde3b5271f420e14ee560f5761665d520d5c3267 Mon Sep 17 00:00:00 2001 From: vcoppe Date: Thu, 2 Sep 2021 16:18:21 +0200 Subject: [PATCH] display elevation loss --- index.html | 18 +++++++++--------- js/buttons.js | 2 +- js/total.js | 14 +++++++++++--- js/trace.js | 10 ++++++++-- res/index.css | 7 +++++-- 5 files changed, 34 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 773c935a..a38cc070 100644 --- a/index.html +++ b/index.html @@ -108,21 +108,21 @@
Distance
-
- km
-
Elevation gain
-
- m
+
+
Elevation
+
Speed
-
- km/h
+
Moving time
-
- h -
+
-
--
-
--
-
--
-
--
+
--
+
--
+
--
+
--
diff --git a/js/buttons.js b/js/buttons.js index 2cec3125..df50eaea 100644 --- a/js/buttons.js +++ b/js/buttons.js @@ -231,7 +231,7 @@ export default class Buttons { // ELEVATION PROFILE const mapWidth = this.map._container.offsetWidth; - var elevation_profile_width = Math.min((mapWidth - 270) * 2 / 3, 400); + var elevation_profile_width = Math.min((mapWidth - 290) * 2 / 3, 400); var mobileEmbeddingStyle = this.embedding && elevation_profile_width < 200; if (mobileEmbeddingStyle) elevation_profile_width = mapWidth * 4/5; this.elev = L.control.elevation({ diff --git a/js/total.js b/js/total.js index af4baca1..01bd2867 100644 --- a/js/total.js +++ b/js/total.js @@ -114,7 +114,8 @@ export default class Total { showData() { this.buttons.distance.innerHTML = (this.getDistance() / 1000).toFixed(1).toString() + ' ' + (this.buttons.km ? this.buttons.unit_kilometers_text : this.buttons.unit_miles_text); - this.buttons.elevation.innerHTML = this.getElevation().toFixed(0).toString() + ' ' + (this.buttons.km ? this.buttons.unit_meters_text : this.buttons.unit_feet_text); + this.buttons.elevation.innerHTML = ' ' + this.getElevationGain().toFixed(0).toString() + (this.buttons.km ? this.buttons.unit_meters_text : this.buttons.unit_feet_text) + + ' ' + this.getElevationLoss().toFixed(0).toString() + (this.buttons.km ? this.buttons.unit_meters_text : this.buttons.unit_feet_text); if (this.buttons.cycling) this.buttons.speed.innerHTML = this.getMovingSpeed().toFixed(1).toString() + ' ' + (this.buttons.km ? this.buttons.unit_kilometers_text : this.buttons.unit_miles_text) + '/' + this.buttons.unit_hours_text; else this.buttons.speed.innerHTML = this.msToTimeMin(this.getMovingPace()) + ' ' + this.buttons.unit_minutes_text + '/' + (this.buttons.km ? this.buttons.unit_kilometers_text : this.buttons.unit_miles_text); this.buttons.duration.innerHTML = this.msToTime(this.getMovingTime()); @@ -172,10 +173,17 @@ export default class Total { return tot; } - getElevation() { + getElevationGain() { var tot = 0; for (var i=0; i ' + this.getElevationLoss().toFixed(0).toString() + (this.buttons.km ? this.buttons.unit_meters_text : this.buttons.unit_feet_text); if (this.buttons.cycling) this.buttons.speed.innerHTML = this.getMovingSpeed().toFixed(1).toString() + ' ' + (this.buttons.km ? this.buttons.unit_kilometers_text : this.buttons.unit_miles_text) + '/' + this.buttons.unit_hours_text; else this.buttons.speed.innerHTML = this.total.msToTimeMin(this.getMovingPace()) + ' ' + this.buttons.unit_minutes_text + '/' + (this.buttons.km ? this.buttons.unit_kilometers_text : this.buttons.unit_miles_text); this.buttons.duration.innerHTML = this.total.msToTime(this.getMovingTime()); @@ -767,11 +768,16 @@ export default class Trace { else return this.gpx._info.moving_length / 1.60934; } - getElevation() { + getElevationGain() { if (this.buttons.km) return this.gpx._info.elevation.gain; else return this.gpx._info.elevation.gain * 3.28084; } + getElevationLoss() { + if (this.buttons.km) return this.gpx._info.elevation.loss; + else return this.gpx._info.elevation.loss * 3.28084; + } + getMovingTime() { return this.gpx._info.duration.moving; } diff --git a/res/index.css b/res/index.css index b1dc376f..2eb0aca1 100644 --- a/res/index.css +++ b/res/index.css @@ -129,7 +129,6 @@ html, body { grid-gap: 0px 0px; justify-items: right; align-items: center; - grid-auto-columns: min-content; grid-auto-rows: min-content; } @@ -156,18 +155,21 @@ html, body { .panels-info { padding-top: 0px; + padding-right: 0px; font-size: 10px; color: #777777; } .panels-val { padding-bottom: 0px; + padding-right: 0px; min-width: 70px; text-align: right; } .panels-live { - text-align: center; + padding-bottom: 0px; + min-width: 60px; background-color: #f5f5f5; font-size: 11px; margin-right: 4px; @@ -189,6 +191,7 @@ html, body { } #elevation-val { + min-width: 120px; grid-column: 2 / span 1; grid-row: 1 / span 1; }