Improve routing: manage steps

* Manage steps in routing core
* Add extra parameters for steps in urls.py
* Modify the view to parse steps and send them to the routing core
* Manage steps in JS (add many step flags and send a correct request to
  the view)
* Manage a clear itinerary action in JS
* Add a new flag image for steps
* CSS improvement

8 files changed, 93 insertions, 22 deletions

diff --git a/chimere/route.py b/chimere/route.py
index 207232b..bc08a39 100644
--- a/chimere/route.py
+++ b/chimere/route.py
@@ -39,7 +39,7 @@ class Router:
 class RoutinoRouter(Router):
     re_desc = [re.compile("<tr class='n'>"), re.compile("<tr class='s'>"),
                re.compile("<tr class='t'>")]
-    def route(self, lon1, lat1, lon2, lat2, session_id='', transport='foot'):
+    def route(self, lon1, lat1, lon2, lat2, steps=[], transport='foot'):
         '''
         Get a list of geojson polylines and route description
         '''
@@ -53,9 +53,15 @@ class RoutinoRouter(Router):
                 "--output-gpx-track",
                 "--lat1=%0.15f" % lat1,
                 "--lon1=%0.15f" % lon1,
-                "--lat2=%0.15f" % lat2,
-                "--lon2=%0.15f" % lon2
                 ]
+        lonlat_index = 1
+        for lon, lat in steps:
+            lonlat_index += 1
+            args += ["--lat%d=%0.15f" % (lonlat_index, lat),
+                     "--lon%d=%0.15f" % (lonlat_index, lon)]
+        lonlat_index += 1
+        args += ["--lat%d=%0.15f" % (lonlat_index, lat2),
+                 "--lon%d=%0.15f" % (lonlat_index, lon2)]
         tmp_dir = tempfile.mkdtemp(prefix='chimere_') + os.sep
         p = Popen(args, stdout=PIPE, cwd=tmp_dir)
         p.communicate()
diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index 5fd9cd7..9133001 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -417,11 +417,24 @@ ul#share li{
     padding-top:0;
 }
 
+#chimere_itinerary table
+{
+    border-collapse:collapse;
+}
+
+#chimere_itinerary td{
+    border:8px solid #fff;
+}
+
 #chimere_itinerary td.l{
     padding:5px;
     width:60px;
 }
 
+#chimere_itinerary td.r{
+    font-size:0.8em;
+}
+
 #chimere_itinerary span.j{
     font-style:italic;
 }
@@ -444,6 +457,14 @@ ul#share li{
     border-radius: 0 8px 8px 8px;
 }
 
+#map_menu_clear{
+    display:none;
+}
+
+#map_menu_zoomin{
+    border-top:1px solid #999;
+}
+
 #chimere_map_menu ul, #chimere_map_menu li{
     padding:0.2em;
     margin:0;
diff --git a/chimere/static/chimere/img/flag-step.png b/chimere/static/chimere/img/flag-step.png
new file mode 100644
index 0000000..5556c94
--- /dev/null
+++ b/chimere/static/chimere/img/flag-step.png
diff --git a/chimere/static/chimere/img/images_licences b/chimere/static/chimere/img/images_licences
index 000fdf0..03d63dc 100644
--- a/chimere/static/chimere/img/images_licences
+++ b/chimere/static/chimere/img/images_licences
@@ -31,9 +31,10 @@ Author: Sbrools
 Licence: Public domain
 Url: https://commons.wikimedia.org/wiki/File:8thNote.svg
 
-* Flags image credit (flag-start.png, flag-finish.png)
+* Flags image credit (flag-start.png, flag-step.png, flag-finish.png)
 
 Author: FatCow Web Hosting
 Licence: Creative Commons Attribution 3.0 United States license
-Url: https://upload.wikimedia.org/wikipedia/commons/6/64/Farm-Fresh_flag_finish.png
-     https://upload.wikimedia.org/wikipedia/commons/c/cb/Farm-Fresh_flag_1.png
+Url: https://upload.wikimedia.org/wikipedia/commons/c/cb/Farm-Fresh_flag_1.png
+     https://upload.wikimedia.org/wikipedia/commons/8/81/Farm-Fresh_flag_blue.png
+     https://upload.wikimedia.org/wikipedia/commons/6/64/Farm-Fresh_flag_finish.png
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 4639a09..7676517 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -231,17 +231,24 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             $('#map_menu_center').bind("click", methods.mapCenter);
             if (settings.routing){
                 settings.routing_start = null;
+                settings.routing_steps = new Array();
                 settings.routing_end = null;
                 settings.icon_start = new OpenLayers.Icon(
                     STATIC_URL + "chimere/img/flag-start.png",
                     new OpenLayers.Size(32, 32),
                     new OpenLayers.Pixel(0, -32));
+                settings.icon_step = new OpenLayers.Icon(
+                    STATIC_URL + "chimere/img/flag-step.png",
+                    new OpenLayers.Size(32, 32),
+                    new OpenLayers.Pixel(0, -32));
                 settings.icon_end = new OpenLayers.Icon(
                     STATIC_URL + "chimere/img/flag-finish.png",
                     new OpenLayers.Size(32, 32),
                     new OpenLayers.Pixel(0, -32));
                 $('#map_menu_from').bind("click", methods.routingFrom);
+                $('#map_menu_step').bind("click", methods.routingAddStep);
                 $('#map_menu_to').bind("click", methods.routingTo);
+                $('#map_menu_clear').bind("click", methods.routingClear);
                 settings.layerRoute = new OpenLayers.Layer.Vector("Route Layer");
                 settings.map.addLayer(settings.layerRoute);
                 settings.layerRoute.setOpacity(0.8);
@@ -516,7 +523,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
         // set the start point for routing
         routingFrom: function(){
             $('#chimere_map_menu').hide();
-            //$('#chimere_itinerary_panel').hide();
+            $('#map_menu_clear').show();
             $('#chimere_itinerary_panel').dialog('close');
             settings.routing_start = new OpenLayers.Marker(
                                           settings.current_position.clone(),
@@ -525,10 +532,23 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             if (settings.routing_end) methods.route();
         },
 
+        // add a step point for routing
+        routingAddStep: function(){
+            $('#chimere_map_menu').hide();
+            $('#map_menu_clear').show();
+            $('#chimere_itinerary_panel').dialog('close');
+            settings.routing_steps.push(new OpenLayers.Marker(
+                                          settings.current_position.clone(),
+                                          settings.icon_step.clone()));
+            settings.layerRouteMarker.addMarker(
+                       settings.routing_steps[settings.routing_steps.length-1]);
+            if (settings.routing_end && settings.routing_start) methods.route();
+        },
+
         // set the finish point for routing
         routingTo: function(){
             $('#chimere_map_menu').hide();
-            //$('#chimere_itinerary_panel').hide();
+            $('#map_menu_clear').show();
             $('#chimere_itinerary_panel').dialog('close');
             settings.routing_end = new OpenLayers.Marker(
                                           settings.current_position.clone(),
@@ -537,22 +557,39 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             if (settings.routing_start) methods.route();
         },
 
+        // clear the current itinerary
+        routingClear: function(){
+            $('#chimere_map_menu').hide();
+            $('#map_menu_clear').hide();
+            $('#chimere_itinerary_panel').dialog('close');
+            settings.layerRoute.removeAllFeatures();
+            settings.layerRouteMarker.clearMarkers();
+            settings.routing_start = null;
+            settings.routing_end = null;
+            settings.routing_steps = new Array();
+        },
+
         // display a route
         route: function(){
             if (!settings.routing_start || !settings.routing_end){
                 return;
             }
-            var start = settings.routing_start.lonlat.clone().transform(
-                                            settings.map.getProjectionObject(),
-                                            EPSG_DISPLAY_PROJECTION);
-            var end = settings.routing_end.lonlat.clone().transform(
+            var steps = [settings.routing_start.lonlat.clone()]
+            for (var i = 0; i < settings.routing_steps.length; i++) {
+                steps.push(settings.routing_steps[i].lonlat.clone());
+            }
+            steps.push(settings.routing_end.lonlat.clone());
+            // create the appropriate URL
+            var uri = extra_url + "route/"
+            for (var i = 0; i < steps.length; i++) {
+                var step = steps[i].transform(
                                             settings.map.getProjectionObject(),
                                             EPSG_DISPLAY_PROJECTION);
-            var uri = extra_url + "route/"
-                                + start.lon + '_'
-                                + start.lat + '_'
-                                + end.lon + '_'
-                                + end.lat;
+                if (i > 0){
+                    uri += '_';
+                }
+                uri += step.lon + '_' + step.lat;
+            }
             $.ajax({url: uri, 
                     dataType: "json",
                     success: function (data) {
@@ -562,8 +599,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                         }
                         $('#chimere_itinerary').html(
                                             data.properties.description);
-                        //$('#chimere_itinerary_panel').show();
-            $('#chimere_itinerary_panel').dialog('open');
+                        $('#chimere_itinerary_panel').dialog('open');
                     },
                     error: function (data) {
                         settings.layerRoute.removeAllFeatures();
diff --git a/chimere/templates/chimere/blocks/map_menu.html b/chimere/templates/chimere/blocks/map_menu.html
index 52a4107..e541c1e 100644
--- a/chimere/templates/chimere/blocks/map_menu.html
+++ b/chimere/templates/chimere/blocks/map_menu.html
@@ -3,7 +3,9 @@
     <ul>
         {% if routing %}
         <li id='map_menu_from' class='routing_item'>{% trans "From" context "routing" %}</li>
+        <li id='map_menu_step' class='routing_item'>{% trans "Add a step" context "routing" %}</li>
         <li id='map_menu_to' class='routing_item'>{% trans "To" context "routing" %}</li>
+        <li id='map_menu_clear' class='routing_item'>{% trans "Clear the itinerary" context "routing" %}</li>
         {% endif%}
         <li id='map_menu_zoomin'>{% trans "Zoom in" %}</li>
         <li id='map_menu_zoomout'>{% trans "Zoom out" %}</li>
diff --git a/chimere/urls.py b/chimere/urls.py
index ad88e32..aec82fb 100644
--- a/chimere/urls.py
+++ b/chimere/urls.py
@@ -55,6 +55,7 @@ if settings.CHIMERE_ENABLE_ROUTING:
     urlpatterns += patterns('chimere.views',
         url(r'^(?P<area_name>[a-zA-Z0-9_-]*/)?route/'\
             r'(?P<lon1>[-]?[0-9]+[.]?[0-9]*)_(?P<lat1>[-]?[0-9]+[.]?[0-9]*)_'\
+            r'(?P<lonlat_steps>([-]?[0-9]+[.]?[0-9]*_[-]?[0-9]+[.]?[0-9]*_)*)'\
             r'(?P<lon2>[-]?[0-9]+[.]?[0-9]*)_(?P<lat2>[-]?[0-9]+[.]?[0-9]*)$',
                 'route', name="route"),
     )
diff --git a/chimere/views.py b/chimere/views.py
index ad4b0ca..df403e0 100644
--- a/chimere/views.py
+++ b/chimere/views.py
@@ -638,17 +638,21 @@ def redirectFromTinyURN(request, area_name='', tiny_urn=''):
         return redir
     return HttpResponseRedirect(response_dct['extra_url'] + parameters)
 
-def route(request, area_name, lon1, lat1, lon2, lat2, transport='foot'):
+def route(request, area_name, lon1, lat1, lonlat_steps, lon2, lat2,
+          transport='foot'):
     '''
     Get the JSON for a route
     '''
     try:
         lon1, lat1 = float(lon1), float(lat1)
         lon2, lat2 = float(lon2), float(lat2)
+        steps = [float(lonlat) for lonlat in lonlat_steps.split('_') if lonlat]
+        # regroup by 2
+        steps = [(steps[i*2], steps[i*2+1]) for i in range(len(steps)/2)]
     except ValueError:
         return HttpResponse('no results')
-    jsons, desc = router.route(lon1, lat1, lon2, lat2, transport=transport,
-                         session_id=request.session.session_key)
+    jsons, desc = router.route(lon1, lat1, lon2, lat2, steps=steps,
+                               transport=transport)
     if not jsons:
         return HttpResponse('no results')
     jsonencoder = simplejson.JSONEncoder()