waypoints and button

src/index.html

@@ -24,8 +24,8 @@
         <table style="border: 0; display: block;">
             <tbody>
                 <tr>
-                    <td style="width: 760px;">
-                        <div class="header-text">Планирование маршрутов</div>
+                    <td style="width: 760px; vertical-align: top; border-right: 5px solid #252d4a;">
+                        <div class="header-text">Выбор региона для посещения</div>
                         <div class="hr"></div>
                         <div id="map"></div>
                         <div class="legend-row">
@@ -42,12 +42,20 @@
                             <div id="regionPointsList"></div>
                         </div>
                     </td>
-                    <td style="width: 640px;">
+                    <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">Для планирования маршрута выберите регион, и точки для посещения. Затем
+                            разместите в начале списка пункт с которого планируете
+                            начать
+                            путешествие, а в конце, пункт в котором планируете закончить. После чего нажмите кнопку -
+                            <b>Рассчитать маршрут.</b>
+                        </p>
+                        <div id="recalculateWaypointsButton"> </div>
                     </td>
                 </tr>
             </tbody>

src/js/index.js

@@ -1,6 +1,8 @@
 let markersData = [];
 let regions = [];
 let points = [];
+var regionPointsWidget;
+var selectedPointsWidget;
 const markerUrl = './img/map-marker.png';
 
 // Инициализация данных, подготовка массивов для загрузки в контролы
@@ -37,7 +39,8 @@ function loadPoints(region) {
         var lon = parseFloat(loc[1].trim())
         points.push({
             id: p_idx,
-            text: point.name + ' (' + point.description + ')',
+            text: point.name,
+            description: point.description,
             location: [lat, lon],
             tooltip: {
                 text: point.description,
@@ -65,8 +68,13 @@ function initMap() {
 
 // Пересоздание списка точек указанного региона, для выбора мест к посещению
 function rebuildRegionPointsList(region) {
-    loadPoints(region);
-    const listWidget = $('#regionPointsList').dxList({
+    if (regionPointsWidget) {
+        regionPointsWidget.dispose();
+    }
+    if (selectedPointsWidget) {
+        selectedPointsWidget.dispose();
+    }
+    regionPointsWidget = $('#regionPointsList').dxList({
         dataSource: new DevExpress.data.DataSource({
             store: new DevExpress.data.ArrayStore({
                 key: 'id',
@@ -74,12 +82,19 @@ function rebuildRegionPointsList(region) {
             }),
         }),
         height: 400,
+        showScrollbar: 'always',
         showSelectionControls: true,
         selectionMode: 'all',
         selectByClick: false,
         onSelectionChanged() {
-            rebuildSelectedPointsList(listWidget.option('selectedItemKeys'));
+            rebuildSelectedPointsList(regionPointsWidget.option('selectedItemKeys'));
         },
+        itemTemplate(data) {
+            const result = $('<div>').addClass('region-point');
+            $('<h3>').text(data.text).appendTo(result);
+            $('<i>').text(data.description).appendTo(result);
+            return result;
+          }
     }).dxList('instance');
 }
 
@@ -95,6 +110,7 @@ function initRegionDropDown() {
         keyExpr: 'id',
         onItemClick(e) {
             var region = data['regions'][e.itemData.id];
+            loadPoints(region);
             rebuildRegionPointsList(region);
             DevExpress.ui.notify(`${e.itemData.name}`, 'success', 600);
         },
@@ -102,13 +118,69 @@ function initRegionDropDown() {
     });
 }
 
-function rebuildSelectedPointsList(selectedPointsIndexes)
-{
+// Перестроение списка выбранных точек
+function rebuildSelectedPointsList(selectedPointsIndexes) {
+    let selected = [];
+    for (const p_idx in points) {
+        if (p_idx in selectedPointsIndexes) {
+            selected.push(points[p_idx]);
+        }
+    }
+    if (selectedPointsWidget) {
+        selectedPointsWidget.dispose();
+    }
+    selectedPointsWidget = $("#selectedPointsList").dxList({
+        dataSource: selected,
+        keyExpr: 'id',
+        height: 400,
+        showScrollbar: 'always',
+        itemDragging: {
+            allowReordering: true,
+            data: selected,
+            group: 'selected',
+            onDragStart(e) {
+                e.itemData = e.fromData[e.fromIndex];
+            },
+            onAdd(e) {
+                e.toData.splice(e.toIndex, 0, e.itemData);
+                e.component.reload();
+            },
+            onRemove(e) {
+                e.fromData.splice(e.fromIndex, 1);
+                e.component.reload();
+            },
+            onReorder({
+                fromIndex,
+                toIndex,
+                fromData,
+                component,
+            }) {
+                [fromData[fromIndex], fromData[toIndex]] = [fromData[toIndex], fromData[fromIndex]];
+                component.reload();
+            },
+        },
+    }).dxList('instance');
+}
+
+function initRecalculateWaypointsButton(){
+    $('#recalculateWaypointsButton').dxButton({
+        stylingMode: 'contained',
+        text: 'Рассчитать маршрут',
+        type: 'default',
+        width: 220,
+        onClick() {
+            recalculateWaypoints();
+        },
+      });
+}
 
+function recalculateWaypoints(){
+    DevExpress.ui.notify('The Text button was clicked');
 }
 
 $(() => {
     initData();
     initMap();
     initRegionDropDown();
+    initRecalculateWaypointsButton();
 });

src/styles/styles.css

@@ -32,10 +32,19 @@
     font-size: 30px;
     font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', Helvetica, 'Trebuchet MS', 'Droid Sans', Tahoma, Geneva, sans-serif;
     font-weight: 200;
-    margin-left: 100px;
     padding: 0 0 30px 0;
 }
 
+.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;
+    font-weight: 200;
+    padding: 0 0 0 0;
+    color: white;
+}
+
 .dark .header-text
 {
     color: white;