display elevation loss

gpxstudio · Sep 2, 2021 · fde3b52 · fde3b52
1 parent d14e095
commit fde3b52
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -108,21 +108,21 @@
         <div id="info" class="padding-container center-leaflet">
             <div id="info-grid" class="panels-container trace-info">
                 <div class="panels panels-info" id="distance">Distance</div>
-                <div class="panels panels-val" id="distance-val">- km</div>
-                <div class="panels panels-info" id="elevation">Elevation gain</div>
-                <div class="panels panels-val" id="elevation-val">- m</div>
+                <div class="panels panels-val" id="distance-val"></div>
+                <div class="panels panels-info" id="elevation">Elevation</div>
+                <div class="panels panels-val" id="elevation-val"></div>
                 <div class="panels panels-info" id="speed">Speed</div>
-                <div class="panels panels-val" id="speed-val">- km/h</div>
+                <div class="panels panels-val" id="speed-val"></div>
                 <div class="panels panels-info" id="duration">Moving time</div>
-                <div class="panels panels-val" id="duration-val">- h -</div>
+                <div class="panels panels-val" id="duration-val"></div>
                 <div class="panels panels-info" id="points" style="display: none">Track points</div>
                 <div class="panels panels-val" id="points-val" style="display: none">0</div>
                 <div class="panels panels-info" id="segments" style="display: none">Segments</div>
                 <div class="panels panels-val" id="segments-val" style="display: none">0</div>
-                <div class="panels panels-val panels-live" id="live-distance">--</div>
-                <div class="panels panels-val panels-live" id="live-speed">--</div>
-                <div class="panels panels-val panels-live" id="live-elevation">--</div>
-                <div class="panels panels-val panels-live" id="live-slope">--</div>
+                <div class="panels panels-live" id="live-distance">--</div>
+                <div class="panels panels-live" id="live-speed">--</div>
+                <div class="panels panels-live" id="live-elevation">--</div>
+                <div class="panels panels-live" id="live-slope">--</div>
                 <div id="crop-container">
                     <div class="panels-button" id="validate"><i class="fas fa-check custom-button"></i></div>
                     <div class="panels-button" id="unvalidate"><i class="fas fa-ban custom-button"></i></div>

diff --git 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
@@ -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 = '<i class="fas fa-angle-up"></i> ' + this.getElevationGain().toFixed(0).toString() + (this.buttons.km ? this.buttons.unit_meters_text : this.buttons.unit_feet_text) +
+            ' <i class="fas fa-angle-down"></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.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.traces.length; i++)
-            tot += this.traces[i].getElevation();
+            tot += this.traces[i].getElevationGain();
+        return tot;
+    }
+
+    getElevationLoss() {
+        var tot = 0;
+        for (var i=0; i<this.traces.length; i++)
+            tot += this.traces[i].getElevationLoss();
         return tot;
     }
 

diff --git a/js/trace.js b/js/trace.js
@@ -436,7 +436,8 @@ export default class Trace {
 
     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 = '<i class="fas fa-angle-up"></i> ' + this.getElevationGain().toFixed(0).toString() + (this.buttons.km ? this.buttons.unit_meters_text : this.buttons.unit_feet_text) +
+            ' <i class="fas fa-angle-down"></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
@@ -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;
 }