diff --git a/src/index.html b/src/index.html
index a10299a..49780a7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -24,8 +24,8 @@
-
-
+ |
+
|
-
+ |
+
+ Для планирования маршрута выберите регион, и точки для посещения. Затем
+ разместите в начале списка пункт с которого планируете
+ начать
+ путешествие, а в конце, пункт в котором планируете закончить. После чего нажмите кнопку -
+ Рассчитать маршрут.
+
+
|
diff --git a/src/js/index.js b/src/js/index.js
index 2540aa5..257564a 100644
--- a/src/js/index.js
+++ b/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 = $('').addClass('region-point');
+ $('
').text(data.text).appendTo(result);
+ $('').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();
});
\ No newline at end of file
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 36d5a63..2997561 100644
--- a/src/styles/styles.css
+++ b/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;