region and points

8 months ago · 9011eb2a5c
parent 343a43e7c3
commit 9011eb2a5c
23 changed files with 49322 additions and 219 deletions
--- a/src/index.html
+++ b/src/index.html
@ -4,6 +4,7 @@
 <head>
    <title>Планирование маршрутов</title>
    <link href="styles/styles.css" rel="stylesheet" />
+    <link href="styles/dx.material.blue.dark.compact.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/knockout-latest.js"></script>
    <script src="js/cldr.min.js"></script>
@ -22,7 +23,7 @@
    <div class="layout">
        <div class="header-text">Планирование маршрутов</div>
        <div class="content">
-            <div class="row">
+            <div class="row" style="height: 450px;">
                <div class="legend-row">
                    <div class="hr"></div>
                </div>
@ -37,13 +38,23 @@
                    </div>
                </div>
            </div>
-            <div class="row">
+            <div class="row" style="height: 80px;">
                <div class="legend-row">
                    <div class="legend">Маршруты</div>
+                </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>
-                <div class="clear"></div>
-
+                <br />
+                <div class="dx-field">
+                    <div id="simpleList"></div>
+                </div>
            </div>
        </div>
    </div>
--- a/src/js/index.js
+++ b/src/js/index.js
@ -1,54 +1,97 @@
+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 = [];
-    for(var r_idx in data['regions'])
-    {
+    let regions = [];
+
+    /*regions.push({
+        id: -1,
+        name: "-- Все регионы --",
+        icon: 'airplane'
+    });*/
+    for (var r_idx in data['regions']) {
        var region = data['regions'][r_idx]
-        for(var p_idx in region.points)
-        {
+        regions.push({
+            id: r_idx,
+            name: region.name,
+            icon: 'airplane'
+        });
+        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())
-            markersData.push({ location: [lat, lon], tooltip: { text: point.name, },}, );
+            markersData.push({
+                location: [lat, lon],
+                tooltip: {
+                    text: point.name,
+                }
+            });
        }
    }

    const markerUrl = './img/map-marker.png';
- 
+
    const mapWidget = $('#map').dxMap({
        provider: 'bing',
        apiKey: {
-          bing: 'AnpoY0kAA4Kk5A045nQxyVbrlkNTgOuMVBitLxN_iLnZdtONf21HxUTzXwNIebES',
+            bing: 'AnpoY0kAA4Kk5A045nQxyVbrlkNTgOuMVBitLxN_iLnZdtONf21HxUTzXwNIebES',
        },
-      zoom: 11,
-      height: 440,
-      width: '100%',
-      controls: true,
-      markerIconSrc: markerUrl,
-      markers: markersData,
-      type: 'roadmap'
+        zoom: 11,
+        height: 440,
+        width: '100%',
+        controls: true,
+        markerIconSrc: markerUrl,
+        markers: markersData,
+        type: 'roadmap'
    }).dxMap('instance');
-  
-    $('#use-custom-markers').dxCheckBox({
-      value: true,
-      text: 'Use custom marker icons',
-      onValueChanged(data) {
-        mapWidget.option('markers', markersData);
-        mapWidget.option('markerIconSrc', data.value ? markerUrl : null);
-      },
-    });
-  
-    $('#show-tooltips').dxButton({
-      text: 'Show all tooltips',
-      onClick() {
-        const newMarkers = $.map(markersData, (item) => $.extend(
-          true,
-          {},
-          item,
-          { tooltip: { isShown: true } },
-        ));
-  
-        mapWidget.option('markers', newMarkers);
-      },
+
+    $('#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({
+                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');
+            DevExpress.ui.notify(`${e.itemData.name}`, 'success', 600);
+        },
+        items: regions,
    });
-  });
+});
--- a/src/styles/dx.dark.compact.css
+++ b/src/styles/dx.dark.compact.css
--- a/src/styles/dx.material.blue.dark.compact.css
+++ b/src/styles/dx.material.blue.dark.compact.css
--- a/src/styles/fonts/Roboto-300.ttf
+++ b/src/styles/fonts/Roboto-300.ttf
--- a/src/styles/fonts/Roboto-300.woff
+++ b/src/styles/fonts/Roboto-300.woff
--- a/src/styles/fonts/Roboto-300.woff2
+++ b/src/styles/fonts/Roboto-300.woff2
--- a/src/styles/fonts/Roboto-400.ttf
+++ b/src/styles/fonts/Roboto-400.ttf
--- a/src/styles/fonts/Roboto-400.woff
+++ b/src/styles/fonts/Roboto-400.woff
--- a/src/styles/fonts/Roboto-400.woff2
+++ b/src/styles/fonts/Roboto-400.woff2
--- a/src/styles/fonts/Roboto-500.ttf
+++ b/src/styles/fonts/Roboto-500.ttf
--- a/src/styles/fonts/Roboto-500.woff
+++ b/src/styles/fonts/Roboto-500.woff
--- a/src/styles/fonts/Roboto-500.woff2
+++ b/src/styles/fonts/Roboto-500.woff2
--- a/src/styles/fonts/Roboto-700.ttf
+++ b/src/styles/fonts/Roboto-700.ttf
--- a/src/styles/fonts/Roboto-700.woff
+++ b/src/styles/fonts/Roboto-700.woff
--- a/src/styles/fonts/Roboto-700.woff2
+++ b/src/styles/fonts/Roboto-700.woff2
--- a/src/styles/icons/dxicons.ttf
+++ b/src/styles/icons/dxicons.ttf
--- a/src/styles/icons/dxicons.woff
+++ b/src/styles/icons/dxicons.woff
--- a/src/styles/icons/dxicons.woff2
+++ b/src/styles/icons/dxicons.woff2
--- a/src/styles/icons/dxiconsmaterial.ttf
+++ b/src/styles/icons/dxiconsmaterial.ttf
--- a/src/styles/icons/dxiconsmaterial.woff
+++ b/src/styles/icons/dxiconsmaterial.woff
--- a/src/styles/icons/dxiconsmaterial.woff2
+++ b/src/styles/icons/dxiconsmaterial.woff2
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@ -18,11 +18,6 @@
    background-color: #363e5b;
 }

-.light
-{
-    background-color: white;
-}
-
 .header-text
 {
    display: inline-block;
@ -38,29 +33,6 @@
    color: white;
 }

-.light .header-text
-{
-    color: #43474b;
-}
-
-.img-theme
-{
-    float: right;
-    width: 60px;
-    height: 50px;
-    margin-right: 100px;
-    margin-top: 60px;
-    z-index: 101;
-    background-image: url(sprite.png);
-    background-position: -90px 0;
-    cursor: pointer;
-}
-
-.light .img-theme
-{
-    background-position: 0 0;
-}
-
 .content
 {
    width: 1070px;
@ -68,51 +40,13 @@
    padding: 40px 100px;
 }

-.slide-button
-{
-    position: absolute;
-    top: 430px;
-    background-image: url(sprite.png);
-    width: 40px;
-    height: 80px;
-    cursor: pointer;
-}
-
-.slide-button.right-button
-{
-    right: 0;
-    background-position: -90px -55px;
-}
-
-.light .slide-button.right-button
-{
-    background-position: 0px -55px;
-}
-
-.slide-button.left-button
-{
-    left: 0;
-    background-position: -135px -55px;
-}
-
-.light .slide-button.left-button
-{
-    background-position: -45px -55px;
-}
-
 .row
 {
-    width: 1070px;
-    height: 450px;
+    width: 1070px;    
    margin-top: 10px;
    overflow: hidden;
 }

-.traffic .row
-{
-    height: 340px;
-}
-
 .legend-row
 {
    position: relative;
@ -140,119 +74,10 @@
    color: white;
 }

-.light .legend
-{
-    color: #43474b;
-}
-
 .hr
 {
-    width: 1100px;
+    width: 1000px;
    height: 10px;
    border-bottom: 1px solid #6b7289;
    float: left;
-}
-
-.light .hr
-{
-    border-bottom: 1px solid #c0c0c0;
-}
-
-.clear
-{
-    clear: both;
-}
-
-.helth .row .col1
-{
-    width: 210px;
-    height: 170px;
-    float: left;
-}
-
-.traffic .row .col1
-{
-    float: left;
-    width: 420px;
-    height: 320px;
-    overflow: hidden;
-}
-
-.helth .row .col2
-{
-    width: 210px;
-    height: 375px;
-    float: left;
-    margin: -10px 0 0 0;
-}
-
-.traffic .row .col2
-{
-    width: 600px;
-    height: 320px;
-    float: right;
-    overflow: hidden;
-}
-
-.helth .row .col3
-{
-    height: 165px;
-    float: left;
-    width: 650px;
-}
-
-.col1 .text
-{
-    -ms-word-wrap: normal;
-    word-wrap: normal;
-    font-size: 11px;
-    color: #8e93a7;
-    width: 200px;
-    margin-top: 20px;
-}
-
-.col1 .label-value
-{
-    font-family: 'Segoe UI Semibold', 'Helvetica Neue Medium', 'Segoe UI', 'Helvetica Neue', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
-    font-size: 60px;
-    line-height: 60px;
-    font-weight: 600;
-}
-
-label#requestNumber
-{
-    color: #7cd2c7;
-}
-
-.light label#requestsNumber
-{
-    color: #76c8bd;
-}
-
-label#CPU
-{
-    color: #75c0e0;
-}
-
-label#memoryConsumption
-{
-    color: #7e8ab6;
-}
-
-.light label#memoryConsumption
-{
-    color: #96a3d4;
-}
-
-.traffic .chart-container
-{
-    width: inherit;
-    height: 300px;
-}
-
-.traffic .chartContainer
-{
-    width: inherit;
-    height: 300px;
-}
-
+}