refactoring

main
Ogoun 5 months ago
parent 9011eb2a5c
commit b30dac2562

@ -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}"
}
]
}

Binary file not shown.

@ -20,43 +20,38 @@
</head>
<body class="dark">
<div class="layout">
<div class="page">
<table style="border: 0; display: block;">
<tbody>
<tr>
<td style="width: 760px;">
<div class="header-text">Планирование маршрутов</div>
<div class="content">
<div class="row" style="height: 450px;">
<div class="legend-row">
<div class="hr"></div>
</div>
<div id="map"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<div id="use-custom-markers"></div>
</div>
<div class="option">
<div id="show-tooltips"></div>
</div>
</div>
</div>
<div class="row" style="height: 80px;">
<div class="legend-row">
<div class="legend">Маршруты</div>
</div>
<div class="hr"></div>
<br />
<div class="dx-field">
<div id="one-section"></div>
</div>
</div>
<div class="row" style="height: 450px;">
<div class="legend-row">
<div class="hr"></div>
</div>
<br />
<div class="dx-field">
<div id="simpleList"></div>
<div id="regionPointsList"></div>
</div>
</td>
<td style="width: 640px;">
<div class="travel">
<div class="dx-field">
<div id="selectedPointsList"></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<script src="js/data.js"></script>
<script src="js/index.js"></script>

@ -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 points = [];
const markerUrl = './img/map-marker.png';
$(() => {
let markersData = [];
let regions = [];
/*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,25 +55,18 @@ $(() => {
},
zoom: 11,
height: 440,
width: '100%',
width: 760,
controls: true,
markerIconSrc: markerUrl,
markers: markersData,
type: 'roadmap'
}).dxMap('instance');
}
$('#one-section').dxDropDownButton({
text: 'Выбор региона',
icon: 'globe',
dropDownOptions: {
width: 230,
},
displayExpr: 'name',
keyExpr: 'id',
onItemClick(e) {
var region = data['regions'][e.itemData.id];
var points = loadPoints(region);
const listWidget = $('#simpleList').dxList({
// Пересоздание списка точек указанного региона, для выбора мест к посещению
function rebuildRegionPointsList(region) {
loadPoints(region);
const listWidget = $('#regionPointsList').dxList({
dataSource: new DevExpress.data.DataSource({
store: new DevExpress.data.ArrayStore({
key: 'id',
@ -85,13 +77,38 @@ $(() => {
showSelectionControls: true,
selectionMode: 'all',
selectByClick: false,
onSelectionChanged() {
alert(listWidget.option('selectedItemKeys').join(', '));
rebuildSelectedPointsList(listWidget.option('selectedItemKeys'));
},
}).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);
},
items: regions,
});
}
function rebuildSelectedPointsList(selectedPointsIndexes)
{
}
$(() => {
initData();
initMap();
initRegionDropDown();
});

@ -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;

Loading…
Cancel
Save

Powered by TurnKey Linux.