add region to track text

static/gps_logger/js/main.js

@@ -111,20 +111,20 @@ window.onload = function() {
         .then(jsonResponse => {
           gps.parse(jsonResponse);
           for(const t of gps.trips) {
-            var desc = "Start: <b>" + timeFormat(t.startTime, "datetime") + 
-                  "</b><br/>Finish: <b>" + timeFormat(t.endTime, "datetime") + "</b><br/>" +
-                  "Track time (full): "+ timeFormat(t.totalTime) + "<br>" +
-                  "Track time (mov.): "+ timeFormat(t.movementTime) + "<br>" +
-                  "Alt: &uarr;" + t.ascendHeight.toFixed(1) + "m  &darr;" + t.descendHeight.toFixed(1) + "m"+
-                  "<br/>Distance: "+(t.distance/1000).toFixed(1)+"km<br/>" +
-                  "top speed: "+t.topSpeed.toFixed(1)+
-                  "km/h<br/>"+
-                  "average speed: "+t.avgSpeed.toFixed(1)+"km/h<br/>";
+            var desc = `Region: ${t.name}<br/>` +
+                  `Start: <b>${timeFormat(t.startTime, "datetime")}</b><br/>` + 
+                  `Finish: <b>${timeFormat(t.endTime, "datetime")}</b><br/>` +
+                  `Track time (full): ${timeFormat(t.totalTime)}<br>` +
+                  `Track time (mov.): ${timeFormat(t.movementTime)}<br>` +
+                  `Alt: &uarr;${t.ascendHeight.toFixed(1)}m  &darr;${t.descendHeight.toFixed(1)}m<br/>` +
+                  `Distance: ${(t.distance/1000).toFixed(1)}km<br/>` +
+                  `top speed: ${t.topSpeed.toFixed(1)}km/h<br/>` +
+                  `average speed: ${t.avgSpeed.toFixed(1)}km/h`;
 
             const col = Cesium.Color.fromCssColorString(t.color)
             var path = viewer.entities.add({
-              label : "Track "+t.id,
-              id: "track_"+t.id,
+              name : `Track ${t.id}`,
+              id: `track_${t.id}`,
               description: desc,
               polyline : {
                 positions : t.path.map(p => Cesium.Cartesian3.fromDegrees(p.lng, p.lat, p.alt)),
@@ -159,14 +159,14 @@ window.onload = function() {
           }
           const i = gps.getInfo();
           var html =
-            "Time (full): "+ timeFormat(i.totalTime) + "<br>" +
-            "Time (mov.): "+ timeFormat(i.movementTime) + "<br>" +
-            "Alt: &uarr;" + (i.ascendHeight).toFixed(1) + "m  &darr;" + (i.descendHeight).toFixed(1) + "m<br>"+
-            "Distance: <b>"+(i.distance/1000).toFixed(1)+"km</b><br/>" +
-            "Top speed: <b>"+i.topSpeed.toFixed(1) + "km/h</b><br/>"+
-            "Avg. speed: "+i.avgSpeed.toFixed(1)+"km/h<br/>"+
-            "Data points: "+i.points+"<br/>"+
-            "<a href='javascript:show(" + (gps.trips.length-1) + ")'>Graph</a>";
+            `Time (full): ${timeFormat(i.totalTime)}<br>` +
+            `Time (mov.): ${timeFormat(i.movementTime)}<br>` +
+            `Alt: &uarr;${(i.ascendHeight).toFixed(1)}m  &darr;${(i.descendHeight).toFixed(1)}m<br/>` +
+            `Distance: <b>${(i.distance/1000).toFixed(1)}km</b><br/>` +
+            `Top speed: <b>${i.topSpeed.toFixed(1)}km/h</b><br/>` +
+            `Avg. speed: ${i.avgSpeed.toFixed(1)}km/h<br/>` +
+            `Data points: ${i.points}<br/>` +
+            `<a href='javascript:show(${(gps.trips.length-1)})'>Graph</a>`;
           
           $(".status").append(html);
 
@@ -288,7 +288,7 @@ function setZoom(Xmin, Xmax) {
 }
 
 function addInfo(bingMapsProvider, viewer, id, data) {
-  $('.sidebar').append("<div class='info' id='info_" + id + "'>" + 
+  $('.sidebar').append(`<div class='info' id='info_${id}'>` + 
     timeFormat(data.timestamp, "short") + "<br>" +
     data.name + "<br><b>" +
     (data.distance/1000).toFixed(1) + " km</b></div>");