Доработаны маршруты

ground/controllers/IndexController.php

@@ -9,6 +9,7 @@ class IndexController extends Controller
 	static function actionIndex()
 	{
         self::addScript('/js/jquery-2.1.0.min.js');
+        self::addScript('/js/jquery-ui-1.10.4.custom.min.js');
         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');

ground/views/indexTemplate.php

@@ -1,9 +1,10 @@
 <div id="map"></div>
-<div id="routeWindow" class="popover fade in" style="display: none; position: absolute; top: 50px; right: 7px; left: auto;">
+<div id="routeWindow" class="popover fade in" style="display: none; position: absolute; top: 50px; right: 7px; left: auto; max-width: none;">
 	<h3 class="popover-title">Мой маршрут <b id="routeDistance"></b></h3>
 	<div class="popover-content">
-		<ul id="wayPoints"></ul>
+		<div id="wayPoints"></div>
-		<button class="btn btn-default" onclick="buildRoute()"><span class="glyphicon glyphicon-send"></span> Проложить</button>
+		<button class="btn btn-default" type="button" onclick="$('#routeWindow').toggle(200)">Скрыть</button>
+		<button class="btn btn-info" onclick="buildRoute()"><span class="glyphicon glyphicon-send"></span> Проложить</button>
 	</div>
 </div>
 <div id="footer">

public/css/style.css

@@ -22,3 +22,7 @@ div#footer table{}
 
 .form-group .error {display: none;}
 .form-group.has-error .error {display: inline-block;}
+
+#wayPoints {margin-bottom: 10px;}
+#wayPoints .wayPoint {cursor: pointer; border: solid 1px #999; padding: 2px 5px; margin-bottom: 3px;}
+#wayPoints .wayPoint span {font-weight: bold; color: red;}

public/js/main.js

@@ -8,6 +8,7 @@ var categories;
 var points = Array();
 var im;
 var search;
+var route = false;
 
 // -------------------------------- Libs ---------------------------------------
 
@@ -62,6 +63,9 @@ function init() {
             }
         );
     myMap.geoObjects.add(im);
+
+	$("#wayPoints").sortable();
+	$("#wayPoints").disableSelection();
 }
 
 function constructPoint(data)
@@ -251,16 +255,18 @@ function addPoint()
 function buildRoute()
 {
     wayPoints = Array();
+	if (route)
+		myMap.geoObjects.remove(route);
 
-    $('#wayPoints li').each(function(i, el)
+    $('#wayPoints div').each(function(i, el)
     {
         wayPoints.push(points[$(el).attr('pointId')].geometry.getCoordinates());
     });
 
     ymaps.route(wayPoints, {
         mapStateAutoApply: true
-    }).then(function(route) {
+    }).then(function(newRoute) {
-//        console.log(route.getPaths());
+		route = newRoute;
         route.options.set({
             // в балуне выводим только информацию о времени движения с учетом пробок
             balloonContenBodyLayout: ymaps.templateLayoutFactory.createClass('$[properties.humanJamsTime]'),
@@ -276,7 +282,7 @@ function buildRoute()
 
 function addToRoute(id)
 {
-    $('#wayPoints').append('<li pointid="'+id+'">' + points[id].properties.get('hintContent') + '</li>');
+    $('#wayPoints').append('<div pointid="'+id+'" class="wayPoint"><span onclick="$(this).parent().remove()">&times;</span> ' + points[id].properties.get('hintContent') + '</div>');
     myMap.balloon.close();
     $('#routeWindow').show(200);
     return true;