diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..2ba986f --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/cytoscape.js-3.29.2.zip b/cytoscape.js-3.29.2.zip new file mode 100644 index 0000000..70af607 Binary files /dev/null and b/cytoscape.js-3.29.2.zip differ diff --git a/src/index.html b/src/index.html index 3f76fe4..a10299a 100644 --- a/src/index.html +++ b/src/index.html @@ -20,43 +20,38 @@ -
-
Планирование маршрутов
-
-
-
-
-
-
-
-
Options
-
-
-
-
-
-
-
-
-
-
-
Маршруты
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ + + + + + + +
+
Планирование маршрутов
+
+
+
+
Маршруты
+
+
+
+
+
+
+
+
+
+
+
+ 		+
+
+
+
+
+
diff --git a/src/js/index.js b/src/js/index.js index 2e0a799..2540aa5 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,31 +1,10 @@ -function loadPoints(region) { - let 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, - } - }); - } - return points; -} - -$(() => { - let markersData = []; - let regions = []; +let markersData = []; +let regions = []; +let points = []; +const markerUrl = './img/map-marker.png'; - /*regions.push({ - id: -1, - name: "-- Все регионы --", - icon: 'airplane' - });*/ +// Инициализация данных, подготовка массивов для загрузки в контролы +function initData() { for (var r_idx in data['regions']) { var region = data['regions'][r_idx] 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({ provider: 'bing', apiKey: { @@ -56,13 +55,36 @@ $(() => { }, zoom: 11, height: 440, - width: '100%', + width: 760, controls: true, markerIconSrc: markerUrl, markers: markersData, type: 'roadmap' }).dxMap('instance'); +} + +// Пересоздание списка точек указанного региона, для выбора мест к посещению +function rebuildRegionPointsList(region) { + loadPoints(region); + const listWidget = $('#regionPointsList').dxList({ + dataSource: new DevExpress.data.DataSource({ + store: new DevExpress.data.ArrayStore({ + key: 'id', + data: points, + }), + }), + height: 400, + showSelectionControls: true, + selectionMode: 'all', + selectByClick: false, + onSelectionChanged() { + rebuildSelectedPointsList(listWidget.option('selectedItemKeys')); + }, + }).dxList('instance'); +} +// Инициализация выпадающего списка с регионами +function initRegionDropDown() { $('#one-section').dxDropDownButton({ text: 'Выбор региона', icon: 'globe', @@ -73,25 +95,20 @@ $(() => { keyExpr: 'id', onItemClick(e) { var region = data['regions'][e.itemData.id]; - var points = loadPoints(region); - const listWidget = $('#simpleList').dxList({ - dataSource: new DevExpress.data.DataSource({ - store: new DevExpress.data.ArrayStore({ - key: 'id', - data: points, - }), - }), - height: 400, - showSelectionControls: true, - selectionMode: 'all', - selectByClick: false, - - onSelectionChanged() { - alert(listWidget.option('selectedItemKeys').join(', ')); - }, - }).dxList('instance'); + rebuildRegionPointsList(region); DevExpress.ui.notify(`${e.itemData.name}`, 'success', 600); }, items: regions, }); +} + +function rebuildSelectedPointsList(selectedPointsIndexes) +{ + +} + +$(() => { + initData(); + initMap(); + initRegionDropDown(); }); \ No newline at end of file diff --git a/src/styles/styles.css b/src/styles/styles.css index 291e7cb..36d5a63 100644 --- a/src/styles/styles.css +++ b/src/styles/styles.css @@ -5,12 +5,20 @@ margin: 0; } -.layout +.page { - width: 1270px; - font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif; - font-weight: 400; margin: 0 auto; + width: 1280px; + height: 960px; + font-weight: 400; + font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif; +} + +.travel +{ + vertical-align: top; + width: 400px; + float: right; } .dark @@ -25,7 +33,7 @@ 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: 60px 0 0 0; + padding: 0 0 30px 0; } .dark .header-text @@ -33,50 +41,9 @@ color: white; } -.content -{ - width: 1070px; - height: 960px; - padding: 40px 100px; -} - -.row -{ - width: 1070px; - margin-top: 10px; - overflow: hidden; -} - -.legend-row -{ - position: relative; - height: 17px; - width: 1500px; -} - -.row::after .legend-row::after -{ - content: ' '; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - -.legend -{ - font-family: 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif; - font-weight: 400; - font-size: 15px; - margin-right: 3px; - z-index: 10; - float: left; - color: white; -} - .hr { - width: 1000px; + width: 760px; height: 10px; border-bottom: 1px solid #6b7289; float: left;