|
|
|
@ -1,31 +1,10 @@
|
|
|
|
function loadPoints(region) {
|
|
|
|
let markersData = [];
|
|
|
|
let points = [];
|
|
|
|
let regions = [];
|
|
|
|
for (var p_idx in region.points) {
|
|
|
|
let points = [];
|
|
|
|
var point = region.points[p_idx];
|
|
|
|
const markerUrl = './img/map-marker.png';
|
|
|
|
var loc = point.gps.split(',');
|
|
|
|
|
|
|
|
var lat = parseFloat(loc[0].trim())
|
|
|
|
|
|
|
|
var lon = parseFloat(loc[1].trim())
|
|
|
|
|
|
|
|
points.push({
|
|
|
|
|
|
|
|
id: p_idx,
|
|
|
|
|
|
|
|
text: point.name + ' (' + point.description + ')',
|
|
|
|
|
|
|
|
location: [lat, lon],
|
|
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
|
|
text: point.description,
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return points;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$(() => {
|
|
|
|
// Инициализация данных, подготовка массивов для загрузки в контролы
|
|
|
|
let markersData = [];
|
|
|
|
function initData() {
|
|
|
|
let regions = [];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*regions.push({
|
|
|
|
|
|
|
|
id: -1,
|
|
|
|
|
|
|
|
name: "-- Все регионы --",
|
|
|
|
|
|
|
|
icon: 'airplane'
|
|
|
|
|
|
|
|
});*/
|
|
|
|
|
|
|
|
for (var r_idx in data['regions']) {
|
|
|
|
for (var r_idx in data['regions']) {
|
|
|
|
var region = data['regions'][r_idx]
|
|
|
|
var region = data['regions'][r_idx]
|
|
|
|
regions.push({
|
|
|
|
regions.push({
|
|
|
|
@ -46,9 +25,29 @@ $(() => {
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const markerUrl = './img/map-marker.png';
|
|
|
|
// Загрузка точек на карте из региона
|
|
|
|
|
|
|
|
function loadPoints(region) {
|
|
|
|
|
|
|
|
points = [];
|
|
|
|
|
|
|
|
for (var p_idx in region.points) {
|
|
|
|
|
|
|
|
var point = region.points[p_idx];
|
|
|
|
|
|
|
|
var loc = point.gps.split(',');
|
|
|
|
|
|
|
|
var lat = parseFloat(loc[0].trim())
|
|
|
|
|
|
|
|
var lon = parseFloat(loc[1].trim())
|
|
|
|
|
|
|
|
points.push({
|
|
|
|
|
|
|
|
id: p_idx,
|
|
|
|
|
|
|
|
text: point.name + ' (' + point.description + ')',
|
|
|
|
|
|
|
|
location: [lat, lon],
|
|
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
|
|
text: point.description,
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Инициализация контрола карты
|
|
|
|
|
|
|
|
function initMap() {
|
|
|
|
const mapWidget = $('#map').dxMap({
|
|
|
|
const mapWidget = $('#map').dxMap({
|
|
|
|
provider: 'bing',
|
|
|
|
provider: 'bing',
|
|
|
|
apiKey: {
|
|
|
|
apiKey: {
|
|
|
|
@ -56,25 +55,18 @@ $(() => {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
zoom: 11,
|
|
|
|
zoom: 11,
|
|
|
|
height: 440,
|
|
|
|
height: 440,
|
|
|
|
width: '100%',
|
|
|
|
width: 760,
|
|
|
|
controls: true,
|
|
|
|
controls: true,
|
|
|
|
markerIconSrc: markerUrl,
|
|
|
|
markerIconSrc: markerUrl,
|
|
|
|
markers: markersData,
|
|
|
|
markers: markersData,
|
|
|
|
type: 'roadmap'
|
|
|
|
type: 'roadmap'
|
|
|
|
}).dxMap('instance');
|
|
|
|
}).dxMap('instance');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
$('#one-section').dxDropDownButton({
|
|
|
|
// Пересоздание списка точек указанного региона, для выбора мест к посещению
|
|
|
|
text: 'Выбор региона',
|
|
|
|
function rebuildRegionPointsList(region) {
|
|
|
|
icon: 'globe',
|
|
|
|
loadPoints(region);
|
|
|
|
dropDownOptions: {
|
|
|
|
const listWidget = $('#regionPointsList').dxList({
|
|
|
|
width: 230,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
displayExpr: 'name',
|
|
|
|
|
|
|
|
keyExpr: 'id',
|
|
|
|
|
|
|
|
onItemClick(e) {
|
|
|
|
|
|
|
|
var region = data['regions'][e.itemData.id];
|
|
|
|
|
|
|
|
var points = loadPoints(region);
|
|
|
|
|
|
|
|
const listWidget = $('#simpleList').dxList({
|
|
|
|
|
|
|
|
dataSource: new DevExpress.data.DataSource({
|
|
|
|
dataSource: new DevExpress.data.DataSource({
|
|
|
|
store: new DevExpress.data.ArrayStore({
|
|
|
|
store: new DevExpress.data.ArrayStore({
|
|
|
|
key: 'id',
|
|
|
|
key: 'id',
|
|
|
|
@ -85,13 +77,38 @@ $(() => {
|
|
|
|
showSelectionControls: true,
|
|
|
|
showSelectionControls: true,
|
|
|
|
selectionMode: 'all',
|
|
|
|
selectionMode: 'all',
|
|
|
|
selectByClick: false,
|
|
|
|
selectByClick: false,
|
|
|
|
|
|
|
|
|
|
|
|
onSelectionChanged() {
|
|
|
|
onSelectionChanged() {
|
|
|
|
alert(listWidget.option('selectedItemKeys').join(', '));
|
|
|
|
rebuildSelectedPointsList(listWidget.option('selectedItemKeys'));
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}).dxList('instance');
|
|
|
|
}).dxList('instance');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Инициализация выпадающего списка с регионами
|
|
|
|
|
|
|
|
function initRegionDropDown() {
|
|
|
|
|
|
|
|
$('#one-section').dxDropDownButton({
|
|
|
|
|
|
|
|
text: 'Выбор региона',
|
|
|
|
|
|
|
|
icon: 'globe',
|
|
|
|
|
|
|
|
dropDownOptions: {
|
|
|
|
|
|
|
|
width: 230,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
displayExpr: 'name',
|
|
|
|
|
|
|
|
keyExpr: 'id',
|
|
|
|
|
|
|
|
onItemClick(e) {
|
|
|
|
|
|
|
|
var region = data['regions'][e.itemData.id];
|
|
|
|
|
|
|
|
rebuildRegionPointsList(region);
|
|
|
|
DevExpress.ui.notify(`${e.itemData.name}`, 'success', 600);
|
|
|
|
DevExpress.ui.notify(`${e.itemData.name}`, 'success', 600);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
items: regions,
|
|
|
|
items: regions,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function rebuildSelectedPointsList(selectedPointsIndexes)
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$(() => {
|
|
|
|
|
|
|
|
initData();
|
|
|
|
|
|
|
|
initMap();
|
|
|
|
|
|
|
|
initRegionDropDown();
|
|
|
|
});
|
|
|
|
});
|
Ogoun
5 months ago