From b3a288465a81ee043ad67a6f903aae53d4ba0c2a Mon Sep 17 00:00:00 2001
From: Krivchikov Dmitry <krivchikovda@gmail.com>
Date: Fri, 25 Apr 2014 08:49:58 +0400
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B2=D1=8B=D0=B9=20=D0=B2?=
 =?UTF-8?q?=D0=B0=D1=80=D0=B8=D0=B0=D0=BD=D1=82=20=D0=BC=D0=B0=D1=80=D1=88?=
 =?UTF-8?q?=D1=80=D1=83=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ground/controllers/IndexController.php |   2 +-
 ground/views/indexTemplate.php         |   9 ++-
 public/js/main.js                      | 104 ++++++++++++++++---------
 3 files changed, 77 insertions(+), 38 deletions(-)

diff --git a/ground/controllers/IndexController.php b/ground/controllers/IndexController.php
index d5ffc8f..414d4de 100644
--- a/ground/controllers/IndexController.php
+++ b/ground/controllers/IndexController.php
@@ -9,7 +9,7 @@ class IndexController extends Controller
 	static function actionIndex()
 	{
         self::addScript('/js/jquery-2.1.0.min.js');
-        self::addScript('http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU&mode=release');
+        self::addScript('http://api-maps.yandex.ru/2.0-stable/?load=package.full&lang=ru-RU&mode=release');
         self::addScript('/js/main.js?ver='.App::getConfig('version'));
         self::addScript('/js/bootstrap.min.js');
         self::addStyle('/css/style.css?ver='.App::getConfig('version'));
diff --git a/ground/views/indexTemplate.php b/ground/views/indexTemplate.php
index f7a8f10..da6a3c6 100644
--- a/ground/views/indexTemplate.php
+++ b/ground/views/indexTemplate.php
@@ -1,4 +1,11 @@
 <div id="map"></div>
+<div id="routeWindow" class="popover fade in" style="display: none; position: absolute; top: 50px; right: 7px; left: auto;">
+	<h3 class="popover-title">Мой маршрут</h3>
+	<div class="popover-content">
+		<ul id="wayPoints"></ul>
+		<button class="btn btn-default" onclick="buildRoute()"><span class="glyphicon glyphicon-send"></span> Проложить</button>
+	</div>
+</div>
 <div id="footer">
     <table width="100%">
         <tr>
@@ -14,7 +21,7 @@
                 &nbsp;
             </td>
             <td>
-<!--                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-align-justify"></span> Маршрут</button>-->
+                <button class="btn btn-default" type="button" onclick="$('#routeWindow').toggle(200)"><span class="glyphicon glyphicon-align-justify"></span> Маршрут</button>
                 <button class="btn btn-default" type="button" onclick="showMeOnTheMap()"><span class="glyphicon glyphicon-screenshot"></span> Я на карте</button>
             </td>
             <td class="text-right">
diff --git a/public/js/main.js b/public/js/main.js
index e37f980..1e6411a 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -53,29 +53,36 @@ function init() {
     myMap.geoObjects.add(im);
 }
 
+function constructPoint(data)
+{
+    id = data['id'];
+    points[id] = new ymaps.Placemark(
+        [data['lat'], data['lng']], {
+            hintContent: data['name'],
+            id: id
+        },
+        {
+            iconImageHref: data['categoryIcon'],
+            iconImageSize: [32, 37],
+            iconImageOffset: [-16, -33],
+            openEmptyBalloon: true,
+            balloonCloseButton: true
+        });
+
+    points[id].events.add('click', function (e) {
+        showInfo(e.get('target').properties.get('id'));
+    });
+
+    return points[id];
+}
+
 function getPoints()
 {
     $.ajax({
         url: "/json/points/",
         success: function(data){
             for(var k in data) {
-                id = data[k]['id'];
-                points[id] = new ymaps.Placemark(
-                    [data[k]['lat'], data[k]['lng']], {
-                        hintContent: data[k]['name'],
-                        id: id
-                    },{
-                        iconImageHref: data[k]['categoryIcon'],
-                        iconImageSize: [32, 37],
-                        iconImageOffset: [-16, -33],
-                        openEmptyBalloon: true,
-                        balloonCloseButton: true
-                    });
-
-                points[id].events.add('click', function (e) {
-                    showInfo(e.get('target').properties.get('id'));
-                });
-                myMap.geoObjects.add(points[id]);
+                myMap.geoObjects.add(constructPoint(data[k]));
             }
         }
     });
@@ -94,6 +101,9 @@ function showInfo(id)
                 description = '<div class="infoCard">' +
                         '<h3>' + data.name + '</h3>' +
                         '<img src="' + data.img + '" />' +
+                        '<button type="button" class="btn btn-default btn-xs" onclick="addToRoute(' + id + ')">' +
+                        '<span class="glyphicon glyphicon-plus"></span> Добавить в маршрут' +
+                        '</button><br/>' +
                         data.description +
                         ' <a href="' + data.source + '" target="blank">Подробнее...</a></div>'
                 points[id].properties.set('balloonContent', description);
@@ -161,30 +171,20 @@ function addPoint()
             lng: $('#addPointLng').val()
         },
         success: function(data) {
-            id = data;
-            points[id] = new ymaps.Placemark(
-                    [$('#addPointLat').val(), $('#addPointLng').val()], {
-                hintContent: $('#addPointName').val(),
-                id: id
-            }, {
-                iconImageHref: categories[$('#addPointCategoryId').val()].icon,
-                iconImageSize: [32, 37],
-                iconImageOffset: [-16, -33],
-                openEmptyBalloon: true,
-                balloonCloseButton: false
-            });
-
-            points[id].events.add('click', function(e) {
-                showInfo(e.get('target').properties.get('id'));
-            });
-
-            var balloon = myMap.balloon.open([$('#addPointLat').val(), $('#addPointLng').val()], {content: 'Точка успешно добавлена!'}, {closeButton: false});
+            balloon = myMap.balloon.open([$('#addPointLat').val(), $('#addPointLng').val()], {content: 'Точка успешно добавлена!'}, {closeButton: false});
             setTimeout(function() {
                 balloon.close();
             }, 3000);
 
+            obj = {};
+            obj.id = data;
+            obj.name = $('#addPointName').val();
+            obj.lat = $('#addPointLat').val();
+            obj.lng = $('#addPointLng').val();
+            obj.categoryIcon = categories[$('#addPointCategoryId').val()].icon;
+
             setTimeout(function(){
-                myMap.geoObjects.add(points[id]);
+                myMap.geoObjects.add(constructPoint(obj));
             }, 3000);
 
             $('#addPointModal').modal('hide');
@@ -219,3 +219,35 @@ function addPoint()
         }
     });
 }
+
+function buildRoute()
+{
+    wayPoints = Array();
+
+    $('#wayPoints li').each(function(i, el)
+    {
+        wayPoints.push(points[$(el).attr('pointId')].geometry.getCoordinates());
+    });
+
+    ymaps.route(wayPoints, {
+        mapStateAutoApply: true
+    }).then(function(route) {
+//        console.log(route.getPaths());
+        route.options.set({
+            // в балуне выводим только информацию о времени движения с учетом пробок
+            balloonContenBodyLayout: ymaps.templateLayoutFactory.createClass('$[properties.humanJamsTime]'),
+            strokeColor: '9000ffff',
+            opacity: 0.9
+        });
+
+        myMap.geoObjects.add(route);
+    });
+}
+
+function addToRoute(id)
+{
+    $('#wayPoints').append('<li pointid="'+id+'">' + points[id].properties.get('hintContent') + '</li>');
+    myMap.balloon.close();
+    $('#routeWindow').show(200);
+    return true;
+}