khasang · tkabanof · Jun 24, 2018 · Jun 24, 2018
diff --git a/rest/web/WEB-INF/views/css/yandex-map.css b/rest/web/WEB-INF/views/css/yandex-map.css
@@ -1,4 +1,8 @@
 #yandexMap{
     width: 100%;
     height: 400px;
+}
+#map {
+    width: 100%;
+    height: 400px;
 }
diff --git a/rest/web/WEB-INF/views/helloPage.jsp b/rest/web/WEB-INF/views/helloPage.jsp
@@ -41,7 +41,7 @@
     <!-- Яндекс карта -->
     <link href="css/yandex-map.css" rel="stylesheet">
     <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
-    <script type="text/javascript" src="js/yandex.map.js"></script>
+    <script src="js/multiroute_driving.js" type="text/javascript"></script>
 
 </head>
 

diff --git a/rest/web/WEB-INF/views/js/multiroute_driving.js b/rest/web/WEB-INF/views/js/multiroute_driving.js
@@ -0,0 +1,145 @@
+function init () {
+    multiRoute = new ymaps.multiRouter.MultiRoute({
+        referencePoints: rout,
+        params: {
+            results: 1
+        }
+    }, {
+        editorMidPointsType: "via",
+        editorDrawOver: false
+    });
+
+    buttonEditor = new ymaps.control.Button({
+        data: { content: "Режим редактирования" }
+    });
+
+    buttonEditor.events.add("select", function () {
+        multiRoute.editor.start({
+            addWayPoints: true,
+            removeWayPoints: true
+        });
+    });
+
+    buttonEditor.events.add("deselect", function () {
+        multiRoute.editor.stop();
+        routMake(multiRoute);
+    });
+
+    myMap = new ymaps.Map('map', {
+        center: rout[1],
+        zoom: 7,
+        controls: ['default', 'routeButtonControl', buttonEditor]
+    }, {
+        buttonMaxWidth: 300
+    });
+    myMap.geoObjects.add(multiRoute);
+
+}
+function routMake(multiRoute) {
+    var JSONObject = multiRoute.model.getJson();
+    var length = JSONObject.properties.waypoints.length;
+    var routJson =[];
+    for (var i = 0; i <length; i++) {
+        var x = JSONObject.properties.waypoints[i].coordinates[0];
+        var y = JSONObject.properties.waypoints[i].coordinates[1];
+        routJson.push({"coordX": x*(1000000000000000), "coordY": y*(1000000000000000)});
+    }
+    routjson = routJson;
+
+}
+var routjson;
+var rout = [[55.734876, 37.59308], [56.86584046233189, 35.909198046874444], [56.27758208348245, 34.29420781249997]];
+console.log(rout);
+ymaps.ready(init);
+
+function upLoad() {
+    var prerout = {"name": $('#name').val(),
+        "owner": $('#username').val(),
+        "description": $('#description').val(),
+        "checkPointList": routjson};
+    $.ajax({
+        type: 'POST',
+        url:  'rout/add',
+        contentType: 'application/json;utf-8',
+        data: JSON.stringify(prerout),
+        dataType: 'json',
+        async: false,
+        success: function (result) {
+            console.log("Success");
+            $('#id').val(result.id);
+            $('#name').val(result.name);
+        },
+        error: function (jqXHR, testStatus, errorThrown) {
+            console.log("Error "+ errorThrown);
+        }
+    });
+}
+var deleteRout = function () {
+    $.ajax({
+        type: 'DELETE',
+        url: 'rout/delete/' + $('#id').val(),
+        dataType: 'json',
+        async: false,
+        success: function (result) {
+            $('#id').val("ID");
+            $('#name').val("DELETED");
+            $('#description').val("");
+        },
+        error: function (jqXHR, testStatus, errorThrown) {
+        }
+    });
+};
+
+function getById() {
+    myMap.geoObjects.removeAll();
+    multiRoute = null;
+    $.ajax({
+        type: 'GET',
+        url: 'rout/get/' + $('#getById').val(),
+        dataType: 'json',
+        async: false,
+        success: function (result) {
+            $('#id').val(result.id);
+            $('#name').val(result.name);
+            $('#description').val(result.description);
+            rout = null;
+            rout = [];
+            for (var i = 0; i <result.checkPointList.length; i++) {
+                var x = result.checkPointList[i].coordX/1000000000000000;
+                var y = result.checkPointList[i].coordY/1000000000000000;
+                rout.push([y,x]);
+            }
+            console.log(rout);
+        },
+        error: function (jqXHR, testStatus, errorThrown) {
+        }
+
+    });
+    myMap.geoObjects.removeAll();
+        multiRoute = new ymaps.multiRouter.MultiRoute({
+                referencePoints: rout,
+                params: {results: 1}},
+            {editorMidPointsType: "via", editorDrawOver: false});
+        myMap.geoObjects.add(multiRoute);
+};
+function update() {
+    var prerout = {"id": $('#id').val(),
+        "name": $('#name').val(),
+        "owner": $('#username').val(),
+        "description": $('#description').val(),
+        "checkPointList": routjson};
+    $.ajax({
+        type: 'PUT',
+        url:  'rout/update',
+        contentType: 'application/json;utf-8',
+        data: JSON.stringify(prerout),
+        dataType: 'json',
+        async: false,
+        success: function (result) {
+            console.log("Success");
+        },
+        error: function (jqXHR, testStatus, errorThrown) {
+            console.log("Error "+ errorThrown);
+        }
+    });
+};
diff --git a/rest/web/WEB-INF/views/js/yandex.map.js b/rest/web/WEB-INF/views/js/yandex.map.js
diff --git a/rest/web/WEB-INF/views/parts/body.jsp b/rest/web/WEB-INF/views/parts/body.jsp
@@ -19,11 +19,7 @@
             <jsp:include page="breadcrumbs.jsp"/>
         </div>
 
-        <div id="textArea">
-            <p>На многих коммерческих сайтах есть контактная информация с местом расположения их офиса. Иногда,
-                это просто изображение со схемой проезда, но очень часто встречается использование Яндекс.Карт</p>
-                <div id="yandexMap"></div>
-        </div>
+            <jsp:include page="yaMap.jsp"/>
 
     </div><!--/.col-xs-12.col-sm-9-->
 

diff --git a/rest/web/WEB-INF/views/parts/yaMap.jsp b/rest/web/WEB-INF/views/parts/yaMap.jsp
@@ -0,0 +1,44 @@
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<html>
+
+<body>
+<div id="map"></div>
+<div class="form-group">
+    <div class="row">
+        <div class="col-xs-2">
+            <input name="getById" id="getById" type="text" class="form-control">
+        </div>
+        <div class="col-xs-3">
+            <input type="button" class="btn btn-default" value="GET BY ID" onclick="getById()">
+        </div>
+    </div>
+</div>
+<form role="form">
+    <div class="form-group">
+        <div class="row">
+            <div class="col-xs-3">
+                <input name="id" type="text"  class="form-control" placeholder="ID" id="id" disabled/>
+            </div>
+            <div class="col-xs-6">
+                <input name="name" type="text"  class="form-control" placeholder="NAME" id="name"/>
+                <p class="help-block">TYPE NAME OF ROUT</p>
+            </div>
+            <div class="col-xs-3">
+                <div class="input-group">
+                    <span class="input-group-addon">@</span>
+                    <input name="username" type="text" class="form-control" placeholder="Username" id="username" disabled/>
+                </div>
+        </div>
+        </div>
+    </div>
+    <div class="form-group">
+        <textarea name="comment" class="form-control" placeholder="Description" id="description"></textarea>
+    </div>
+    <div class="form-group">
+        <input type="button" class="btn btn-success" value="SAVE" onclick="upLoad()"/>
+        <input type="button" class="btn btn-danger" value="DELETE" onclick="deleteRout()"/>
+        <input type="button" class="btn btn-default" value="UPDATE" onclick="update()"/>
+    </div>
+</form>
+</body>
+</html>