fix view

src/js/index.js

@@ -81,7 +81,7 @@ class WaypointsData {
 const waypoints = new WaypointsData();
 const markerUrl = './img/map-marker.png';
 // Максимальное число путей для перебора
-const max_ways_count = 200000;
+const max_ways_count = 400000;
 let regionPointsWidget;
 let selectedPointsWidget;
 
@@ -212,35 +212,46 @@ function showTravelPoints(indexes) {
     let calculatedPoints = [];
     let prevPoint = null;
     let id = 0;
+    let total_distance = 0;
     for (const idx in points) {
         const point = points[idx];
         if (prevPoint != null) {
-            const d = (calculateDistance(point.location[0], point.location[1], prevPoint.location[0], prevPoint.location[1]) / 1000.0).toFixed(2);
+            const d = calculateDistance(point.location[0], point.location[1], prevPoint.location[0], prevPoint.location[1]) / 1000.0;
+            total_distance += d;
             calculatedPoints.push({
                 ID: id,
-                Waypoint: d + ' км.'
+                Waypoint: d.toFixed(2) + ' км.',
+                type: 'distance'
             });
             id++;
         }
 
         calculatedPoints.push({
             ID: id,
-            Waypoint: point.text
+            Waypoint: point.text,
+            type: 'pointName'
         });
         id++;
 
         prevPoint = point;
     }
+    calculatedPoints.push({
+        ID: id,
+        Waypoint: "Общая длина маршрута: " + total_distance.toFixed(2) + ' км.',
+        type: 'distance'
+    });
     $(() => {
-        $('#waypointsGrid').dxDataGrid({
+        $('#waypointsGrid').dxList({
             dataSource: calculatedPoints,
-            showColumnHeaders: false,
-            showColumnLines: false,
-            showRowLines: true,
-            rowAlternationEnabled: true,
+            height: 400,
+            width: '100%',
+            showScrollbar: 'always',
             keyExpr: 'ID',
-            columns: ['Waypoint'],
             showBorders: true,
+            itemTemplate(data) {
+                const result = $('<div>').addClass(data.type).text(data.Waypoint);
+                return result;
+            }
         });
     });
 }

src/styles/styles.css

@@ -1,12 +1,10 @@
-body
-{
+body {
     position: relative;
     background-color: gray;
     margin: 0;
 }
 
-.page
-{
+.page {
     margin: 0 auto;
     width: 1280px;
     height: 960px;
@@ -14,13 +12,11 @@
     font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
 }
 
-.dark
-{
+.dark {
     background-color: #363e5b;
 }
 
-.header-text
-{
+.header-text {
     display: inline-block;
     font-size: 30px;
     font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', Helvetica, 'Trebuchet MS', 'Droid Sans', Tahoma, Geneva, sans-serif;
@@ -28,8 +24,7 @@
     padding: 0 0 30px 0;
 }
 
-.text
-{
+.text {
     display: inline-block;
     font-size: 18px;
     font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', Helvetica, 'Trebuchet MS', 'Droid Sans', Tahoma, Geneva, sans-serif;
@@ -38,15 +33,29 @@
     color: white;
 }
 
-.dark .header-text
-{
+.dark .header-text {
     color: white;
 }
 
-.hr
-{
+.hr {
     width: 760px;
     height: 10px;
     border-bottom: 1px solid #6b7289;
     float: left;
+}
+
+.pointName {
+    text-align: justify;
+    height: 100%;
+    width: 100%;
+    vertical-align: middle;
+    float: left;
+}
+
+.distance {
+    height: 100%;
+    width: 100%;
+    float: left;
+    vertical-align: middle;
+    padding-left: 46px;
 }