refactoring

src/index.html

@@ -44,11 +44,9 @@
                     </td>
                     <td style="width: 640px; vertical-align: top;">
                         <div class="header-text">Планирование маршрута</div>
-                        <div class="travel">
                         <div class="dx-field">
                             <div id="selectedPointsList"></div>
                         </div>
-                        </div>
                         <p class="text">Для планирования маршрута выберите регион, и точки для посещения. Затем
                             разместите в начале списка пункт с которого планируете
                             начать

src/js/index.js

@@ -133,6 +133,7 @@ function rebuildSelectedPointsList(selectedPointsIndexes) {
         dataSource: selected,
         keyExpr: 'id',
         height: 400,
+        width: '100%',
         showScrollbar: 'always',
         itemDragging: {
             allowReordering: true,
@@ -162,20 +163,36 @@ function rebuildSelectedPointsList(selectedPointsIndexes) {
     }).dxList('instance');
 }
 
+// Инициализация кнопки для расчета маршрута
 function initRecalculateWaypointsButton() {
     $('#recalculateWaypointsButton').dxButton({
         stylingMode: 'contained',
         text: 'Рассчитать маршрут',
         type: 'default',
-        width: 220,
+        width: 600,
+        height: 40,
         onClick() {
-            recalculateWaypoints();
+            recalculateWaypoints(selectedPointsWidget.option('items'));
         },
     });
 }
 
-function recalculateWaypoints(){
-    DevExpress.ui.notify('The Text button was clicked');
+// Вычисление оптимального маршрута по начальной и конечной точке
+function recalculateWaypoints(waypoints) {
+    if (!waypoints || waypoints.length < 2) {
+        DevExpress.ui.notify("Недостаточно точек для построения маршрута");
+    } else {
+        var start = waypoints[0];
+        var end = waypoints[waypoints.length - 1];
+        DevExpress.ui.notify("Расчет маршрута от '" + start.text + "' к '" + end.text + "'");
+        if (waypoints.length == 2) {
+
+        } else if (waypoints.length == 3) {
+
+        } else {
+
+        }
+    }
 }
 
 $(() => {