Routing: finish work on add step - extract JS routing in a specific JS file

3 files changed, 172 insertions, 60 deletions

diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index a80a9ea..04beda5 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -95,6 +95,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             current_popup: null, // To store the current POI popup displayed
             current_category: null, // To store the current category clicked in list
             current_route_feature: null, // To store the current route find by routing
+            itinerary_step_number:0, // current step number
             icon_offset: new OpenLayers.Pixel(0, 0),
             edition: false, // edition mode
             edition_type_is_route: false, // route or POI edition
@@ -322,6 +323,11 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             settings.map.setCenter(settings.current_position);
         },
 
+        // set current position
+        setCurrentPosition: function(lonlat){
+            settings.current_position = lonlat;
+        },
+
         /*
         * Display menu on the map
         */
@@ -330,8 +336,8 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             if ($('#chimere_map_menu').is(":visible")){
                 $('#chimere_map_menu').hide();
             } else{
-                settings.current_position =
-                                settings.map.getLonLatFromViewPortPx(e.xy);
+                methods.setCurrentPosition(
+                                settings.map.getLonLatFromViewPortPx(e.xy));
                 var offsetX = e.pageX;
                 var offsetY = e.pageY;
                 $('#chimere_map_menu').show('fast');
@@ -521,7 +527,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
 
             var markerClick = function (evt) {
                 settings.current_feature = feature;
-                settings.current_position = feature.lonlat;
+                methods.setCurrentPosition(feature.lonlat);
                 if ( settings.on_marker_click ) {
                     settings.on_marker_click(evt, mark, settings);
                 }
@@ -595,25 +601,40 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             settings.current_feature.geometry = linestring;
             settings.layerVectors.addFeatures([settings.current_feature]);
         },
-        routingInputChange: function(){
+        routingInputChange: function(nominatim_id){
             $('#map_menu_clear').show();
-            if ($('#nominatim_start_lon').val()){
-                settings.routing_start = new OpenLayers.Marker(
-                  new OpenLayers.LonLat($('#nominatim_start_lon').val(),
-                                        $('#nominatim_start_lat').val()
-                                        ).transform(EPSG_DISPLAY_PROJECTION,
-                                            settings.map.getProjectionObject()),
-                                      settings.icon_start);
-                settings.layerRouteMarker.addMarker(settings.routing_start);
-            }
-            if ($('#nominatim_end_lon').val()){
-                settings.routing_end = new OpenLayers.Marker(
-                  new OpenLayers.LonLat($('#nominatim_end_lon').val(),
-                                        $('#nominatim_end_lat').val()
-                                        ).transform(EPSG_DISPLAY_PROJECTION,
-                                            settings.map.getProjectionObject()),
-                                      settings.icon_end);
-                settings.layerRouteMarker.addMarker(settings.routing_end);
+            switch(nominatim_id){
+                case 'nominatim_start':
+                    settings.routing_start = new OpenLayers.Marker(
+                            new OpenLayers.LonLat(
+                                    $('#'+nominatim_id+'_lon').val(),
+                                    $('#'+nominatim_id+'_lat').val()
+                                    ).transform(EPSG_DISPLAY_PROJECTION,
+                                        settings.map.getProjectionObject()),
+                            settings.icon_start);
+                    settings.layerRouteMarker.addMarker(settings.routing_start);
+                    break;
+                case 'nominatim_end':
+                    settings.routing_end = new OpenLayers.Marker(
+                            new OpenLayers.LonLat(
+                                    $('#'+nominatim_id+'_lon').val(),
+                                    $('#'+nominatim_id+'_lat').val()
+                                    ).transform(EPSG_DISPLAY_PROJECTION,
+                                        settings.map.getProjectionObject()),
+                            settings.icon_end);
+                    settings.layerRouteMarker.addMarker(settings.routing_end);
+                    break;
+                default:
+                    settings.routing_steps.push(new OpenLayers.Marker(
+                            new OpenLayers.LonLat(
+                                    $('#'+nominatim_id+'_lon').val(),
+                                    $('#'+nominatim_id+'_lat').val()
+                                    ).transform(EPSG_DISPLAY_PROJECTION,
+                                        settings.map.getProjectionObject()),
+                            settings.icon_step.clone()));
+                    settings.layerRouteMarker.addMarker(
+                        settings.routing_steps[settings.routing_steps.length-1]);
+                    break;
             }
             if (settings.routing_end && settings.routing_start
                 && $('#search_routing').length) {
@@ -648,9 +669,48 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                                           settings.icon_step.clone()));
             settings.layerRouteMarker.addMarker(
                        settings.routing_steps[settings.routing_steps.length-1]);
+
+            if (nominatim_url){
+                var current_itinerary_number = methods.add_step_fx();
+                helpers.updateNominatimName(settings.current_position.clone()
+                                 .transform(settings.map.getProjectionObject(),
+                                            EPSG_DISPLAY_PROJECTION),
+                                     'step_'+current_itinerary_number+'_label');
+            }
             if (settings.routing_end && settings.routing_start) methods.route();
         },
 
+        // add a step on the interface
+        add_step_fx: function (){
+            settings.itinerary_step_number += 1;
+            var cloned = $("#id_start_div").clone();
+            var c_id = 'step_' + settings.itinerary_step_number;
+            cloned.attr('id', 'id_'+c_id+'_div');
+            cloned.children("#nominatim_start_label").attr('id', c_id+'_label'
+                                                    ).html('');
+            cloned.children('label[for="id_start"]').html(step_label
+                                                   ).attr('for', "");
+            var id_suffixes = ['_lat', '_lon', ''];
+            for (idx=0;idx < id_suffixes.length;idx+=1){
+                var suffix = id_suffixes[idx];
+                val = c_id + suffix;
+                cloned.children("#nominatim_start"+suffix).attr('id', val
+                                                         ).attr('name', val);
+            }
+            if (settings.itinerary_step_number == 1){
+                $("#nominatim_end_label").after(cloned);
+            } else {
+                $("#step_"+(settings.itinerary_step_number-1)+"_label"
+                                                            ).after(cloned);
+            }
+            $('#' + c_id).val(default_nominatim_lbl);
+            $('#' + c_id).click(function(){
+                $('#'+c_id).val('');
+            });
+            $(".nominatim-widget").autocomplete(nominatim_widget_options);
+            return settings.itinerary_step_number;
+        },
+
         // set the finish point for routing
         routingTo: function(){
             $('#chimere_map_menu').hide();
@@ -684,12 +744,14 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
             $('#map_menu_clear').hide();
             $('#chimere_itinerary').hide();
             $('#chimere_itinerary_form').show();
+            $('div[id^="id_step_"]').remove();
             if($('#search_routing').length) $('#search_routing').button('disable');
             settings.layerRoute.removeAllFeatures();
             settings.layerRouteMarker.clearMarkers();
             settings.routing_start = null;
             settings.routing_end = null;
             settings.routing_steps = new Array();
+            settings.current_itinerary_number = 0;
             settings.current_route_feature = null;
         },
 
@@ -1134,6 +1196,7 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                 },
                 success: function (data) {
                     vals = $.parseJSON(data);
+                    $('#'+response_id).html(vals.display_name);
                     $('#nominatim_'+response_id).html(vals.display_name);
                     $('#chimere_'+response_id).html(vals.display_name);
                 }
diff --git a/chimere/static/chimere/js/nominatim-widget.js b/chimere/static/chimere/js/nominatim-widget.js
index e925cf2..2ac9d1b 100644
--- a/chimere/static/chimere/js/nominatim-widget.js
+++ b/chimere/static/chimere/js/nominatim-widget.js
@@ -1,42 +1,44 @@
 var default_nominatim_lbl = '';
-$(function(){
-    $(".nominatim-widget").autocomplete({
-           source: function (request, response) {
-               $.ajax({
-                      url: nominatim_url,
-                      data: {
-                          format: "json",
-                          q: request.term,
-                      },
-                      success: function ( data ) {
-                          response ( $.map( $.parseJSON(data), function( item ) {
-                              return {
-                                  label: item.display_name,
-                                  value: item.display_name,
-                                  lat: item.lat,
-                                  lon: item.lon
-                                }
-                              }));
+var nominatim_widget_options = {
+    source: function (request, response) {
+       $.ajax({
+              url: nominatim_url,
+              data: {
+                  format: "json",
+                  q: request.term,
+              },
+              success: function ( data ) {
+                  response ( $.map( $.parseJSON(data), function( item ) {
+                      return {
+                          label: item.display_name,
+                          value: item.display_name,
+                          lat: item.lat,
+                          lon: item.lon
+                        }
+                      }));
+
+                  }
+              })
+    },
+    minLength: 6,
+    delay: 1000,
+    select: function ( event, ui ) {
+        $('#'+$(this).attr('id')+'_lat').val(ui.item.lat);
+        $('#'+$(this).attr('id')+'_lon').val(ui.item.lon);
+        $('#'+$(this).attr('id')+'_label').html(ui.item.label);
+        $('#chimere_'+$(this).attr('id').substring(10)+'_label').html(ui.item.label);
+        $('#'+$(this).attr('id')).val(default_nominatim_lbl);
+        jQuery("#map").chimere("routingInputChange", $(this).attr('id'));
+        return false;
+    },
+    open: function() {
+        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+    },
+    close: function() {
+        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+    }
+}
 
-                          }
-                      })
-            },
-            minLength: 6,
-            delay: 1000,
-            select: function ( event, ui ) {
-                $('#'+$(this).attr('id')+'_lat').val(ui.item.lat);
-                $('#'+$(this).attr('id')+'_lon').val(ui.item.lon);
-                $('#'+$(this).attr('id')+'_label').html(ui.item.label);
-                $('#chimere_'+$(this).attr('id').substring(10)+'_label').html(ui.item.label);
-                $('#'+$(this).attr('id')).val(default_nominatim_lbl);
-                jQuery("#map").chimere("routingInputChange");
-                return false;
-            },
-            open: function() {
-                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
-            },
-            close: function() {
-                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
-            }
-    });
+$(function(){
+    $(".nominatim-widget").autocomplete(nominatim_widget_options);
 });
diff --git a/chimere/static/chimere/js/routing-widget.js b/chimere/static/chimere/js/routing-widget.js
new file mode 100644
index 0000000..043c957
--- /dev/null
+++ b/chimere/static/chimere/js/routing-widget.js
@@ -0,0 +1,47 @@
+var step_label = "Step";
+var add_step = null;
+
+$(document).ready(function() {
+    var itinerary_step_number = 0;
+    $("#add_step_link").click(function(){
+        $('#main-map').chimere('add_step_fx');
+        return false;
+    });
+    $('#search_routing').button({'disabled':true});
+    $('#routing_button').click(function(){
+        $('#chimere_itinerary_panel').dialog('open');
+    });
+    $('#chimere_itinerary_modify').click(function(){
+        $('#chimere_itinerary').hide();
+        $('#chimere_itinerary_form').show();
+    });
+    $('#chimere_itinerary_new').click(function(){
+        $('#map').chimere('routingClear');
+    });
+    $('#search_routing').click(function(){
+        $('#map').chimere('route');
+    });
+
+    var detached_speeds = Array();
+    function filter_speed(transport){
+        $("#id_speed_div").show();
+        for (i=0;i<detached_speeds.length;i+=1){
+            $("#id_speed").append(detached_speeds[i]);
+        }
+        detached_speeds = Array();
+        $("#id_speed option").each(function(){
+            if(!$(this).val().match(transport) && $(this).val()){
+                detached_speeds.push($(this).detach());
+            }
+        });
+        $('#id_speed').val('');
+        if($("#id_speed option").length == 1){
+            $("#id_speed_div").hide();
+        }
+    }
+    $('#id_transport label').click(function(){
+        checked_item = $("#"+$(this).attr('for'));
+        filter_speed(checked_item.val());
+    });
+    filter_speed($('#id_transport :checked').val());
+});