Workon polygon edition widget.

4 files changed, 165 insertions, 26 deletions

diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 9927f9b..a94670c 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -16,6 +16,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 See the file COPYING for details.
 */
 
+var extra_url;
+
 function transformExtent(extent) {
   return ol.proj.transformExtent(
     extent, EPSG_DISPLAY_PROJECTION, EPSG_PROJECTION);
@@ -99,7 +101,7 @@ function transform(obj) {
             itinerary_step_number:0, // current step number
             icon_offset: [0, 0],
             edition: false, // edition mode
-            edition_type_is_route: false, // route or POI edition
+            edition_type: 'marker', // marker, route or polygon edition
             //default_icon: new OpenLayers.Icon(
             //        'http://www.openlayers.org/dev/img/marker-green.png',
             //        new OpenLayers.Size(21, 25),
@@ -156,7 +158,7 @@ function transform(obj) {
                     new OpenLayers.Pixel(0, -32));
             }
             */
-            if (defaults.map_layers == null || defaults.map_layers == []){
+            if (defaults.map_layers == null || ! defaults.map_layers.length){
                 defaults.map_layers = [
                     new ol.layer.Tile({
                         style: 'Road',
@@ -352,21 +354,23 @@ function transform(obj) {
                     }
                 );
                 settings.current_feature = feature;
-                if (feature) {
-                    $(settings.popup_item).popover('destroy');
-                    var coords = feature.getGeometry().getCoordinates();
-                    settings.popup.setPosition(coords);
-                    settings.popup.setOffset([feature.get('popup_offset_x'),
-                                              -feature.get('popup_offset_y')]);
-                    $(settings.popup_item).popover({
-                        'placement': 'top',
-                        'html': true,
-                        'content': feature.get('name')
-                    });
-                    $(settings.popup_item).popover('show');
-                    methods.display_feature_detail(feature.get('pk'));
-                } else {
-                    $(settings.popup_item).popover('destroy');
+                if (!settings.edition){
+                    if (feature) {
+                        $(settings.popup_item).popover('destroy');
+                        var coords = feature.getGeometry().getCoordinates();
+                        settings.popup.setPosition(coords);
+                        settings.popup.setOffset([feature.get('popup_offset_x'),
+                                                  -feature.get('popup_offset_y')]);
+                        $(settings.popup_item).popover({
+                            'placement': 'top',
+                            'html': true,
+                            'content': feature.get('name')
+                        });
+                        $(settings.popup_item).popover('show');
+                        methods.display_feature_detail(feature.get('pk'));
+                    } else {
+                        $(settings.popup_item).popover('destroy');
+                    }
                 }
             });
 
@@ -383,6 +387,39 @@ function transform(obj) {
             /* Vectors layer */
             settings.layerVectors = new ol.layer.Vector();
             settings.map.addLayer(settings.layerVectors);
+            if (settings.edition && (settings.edition_type == 'polygon'
+                                     || settings.edition_type == 'route')){
+                settings.editionSource = new ol.source.Vector({wrapX: false});
+                settings.editionVector = new ol.layer.Vector({
+                  source: settings.editionSource,
+                  style: new ol.style.Style({
+                    fill: new ol.style.Fill({
+                      color: 'rgba(180, 180, 180, 0.3)'
+                    }),
+                    stroke: new ol.style.Stroke({
+                      color: '#ffcc33',
+                      width: 2
+                    }),
+                    image: new ol.style.Circle({
+                      radius: 7,
+                      fill: new ol.style.Fill({
+                        color: '#ffcc33'
+                      })
+                    })
+                  })
+                });
+
+                settings.map.addLayer(settings.editionVector);
+
+                var edition_type;
+                if (settings.edition_type == 'route') edition_type = 'LineString';
+                if (settings.edition_type == 'polygon') edition_type = 'Polygon';
+
+                settings.draw = new ol.interaction.Draw({
+                    source: settings.editionSource,
+                    type: (edition_type),
+                });
+            }
             // OL3-deprecated settings.layerVectors.setOpacity(0.8);
             /* OL3-deprecated-routing
             if (settings.edition_type_is_route){
@@ -532,10 +569,12 @@ function transform(obj) {
                 // methods.activateContextMenu()
             } else {
                 /// OL3-TODO
-                if (!settings.edition_type_is_route){
-                    methods.activateMarkerEdit();
-                } else {
+                if (settings.edition_type == 'route'){
                     methods.activateRouteEdit();
+                } else if (settings.edition_type == 'polygon'){
+                    methods.activatePolygonEdit();
+                } else {
+                    methods.activateMarkerEdit();
                 }
             }
             return;
@@ -625,7 +664,13 @@ function transform(obj) {
                                          methods.displayMapMenu);
         },
 
+        activatePolygonEdit: function(){
+            // TODO OL3
+            return;
+        },
         activateRouteEdit: function(){
+            // TODO OL3
+            return;
             settings.edition_type_is_route = true;
             methods.cleanMarker();
             settings.map.events.unregister('click', settings.map,
@@ -783,9 +828,6 @@ function transform(obj) {
                     },
                     error: function (data, textStatus, errorThrown) {
                         settings.markers.clear();
-                        alert(data);
-                        alert(textStatus);
-                        alert(errorThrown);
                         /// OL3-TODO
                         //settings.layerVectors.removeAllFeatures();
                         //if (settings.enable_clustering){
@@ -989,6 +1031,12 @@ function transform(obj) {
                 }
             }
         },
+        activateDraw: function (){
+            settings.map.addInteraction(settings.draw);
+        },
+        deactivateDraw: function (){
+            settings.map.removeInteraction(settings.draw);
+        },
         /*
         * Put a marker on the map
         */
diff --git a/chimere/templates/chimere/blocks/polygon_edit.html b/chimere/templates/chimere/blocks/polygon_edit.html
new file mode 100644
index 0000000..7c773b4
--- /dev/null
+++ b/chimere/templates/chimere/blocks/polygon_edit.html
@@ -0,0 +1,46 @@
+{% load unescape i18n %}<script type='text/javascript'>
+  var resolutions;
+  var zoomOffset;
+  image_path = '{static_url}chimere/img/';
+  var EPSG_DISPLAY_PROJECTION = epsg_display_projection = 'EPSG:{display_projection}';
+  var EPSG_PROJECTION = epsg_projection = 'EPSG:{projection}';
+  var CENTER_LONLAT = centerLonLat = ol.proj.transform(
+        {center}, epsg_display_projection, epsg_projection);
+  var DEFAULT_ZOOM = {zoom};
+  var chimere_init_options = {% raw %}{{}}{% endraw %};
+  chimere_init_options["input_id"] = 'id_{{name}}';
+  {% if map_layers %}chimere_init_options["map_layers"] = [{map_layers}];{% endif %}
+  chimere_init_options['dynamic_categories'] = false;
+  chimere_init_options['edition'] = true;
+  chimere_init_options['edition_type'] = 'polygon';
+  chimere_init_options["checked_categories"] = [];
+  {% if default_area %} chimere_init_options['selected_map_layer'] = {{default_area}};{% endif %}
+</script>
+
+</div>
+
+<div id='popup'></div>
+<div id='map_edit'>
+<div class='map_button'>
+  <a href='#' id='polygon_move' class='toggle-button toggle-button-active'>{% trans "Move on the map" %}</a>
+  <a href='#' id='polygon_draw' class='toggle-button toggle-button-inactive'>{% trans "Draw" %}</a>
+</div>
+</div>
+  <input type='hidden' name='{{name}}' id='id_{{name}}' value='{{val}}'/>
+
+<script type="text/javascript">
+    function init_map_edit(){% raw %}{{{% endraw %}
+        $('#map_edit').chimere(chimere_init_options);
+    {% raw %}}}{% endraw %}
+    {% if initialized %}init_map_edit();{% endif %}
+    $('#polygon_draw').click(function(){% raw %}{{{% endraw %}
+        $('#polygon_move').removeClass('toggle-button-active').addClass('toggle-button-inactive');
+        $('#polygon_draw').removeClass('toggle-button-inactive').addClass('toggle-button-active');
+        $('#map_edit').chimere('activateDraw');
+    {% raw %}}}{% endraw %});
+    $('#polygon_move').click(function(){% raw %}{{{% endraw %}
+        $('#polygon_draw').removeClass('toggle-button-active').addClass('toggle-button-inactive');
+        $('#polygon_move').removeClass('toggle-button-inactive').addClass('toggle-button-active');
+        $('#map_edit').chimere('deactivateDraw');
+    {% raw %}}}{% endraw %});
+</script>
diff --git a/chimere/templatetags/unescape.py b/chimere/templatetags/unescape.py
index 59809a3..18bdf86 100644
--- a/chimere/templatetags/unescape.py
+++ b/chimere/templatetags/unescape.py
@@ -6,6 +6,7 @@ import HTMLParser
 
 register = template.Library()
 
+
 def unescape(value):
     parser = HTMLParser.HTMLParser()
     return parser.unescape(value)
@@ -13,3 +14,28 @@ def unescape(value):
 register.filter(unescape)
 
 
+def raw(parser, token):
+    # Whatever is between {% raw %} and {% endraw %} will be preserved as
+    # raw, unrendered template code.
+    text = []
+    parse_until = 'endraw'
+    tag_mapping = {
+        template.TOKEN_TEXT: ('', ''),
+        template.TOKEN_VAR: ('{{', '}}'),
+        template.TOKEN_BLOCK: ('{%', '%}'),
+        template.TOKEN_COMMENT: ('{#', '#}'),
+    }
+    # By the time this template tag is called, the template system has already
+    # lexed the template into tokens. Here, we loop over the tokens until
+    # {% endraw %} and parse them to TextNodes. We have to add the start and
+    # end bits (e.g. "{{" for variables) because those have already been
+    # stripped off in a previous part of the template-parsing process.
+    while parser.tokens:
+        token = parser.next_token()
+        if token.token_type == template.TOKEN_BLOCK and \
+                token.contents == parse_until:
+            return template.TextNode(u''.join(text))
+        start, end = tag_mapping[token.token_type]
+        text.append(u'%s%s%s' % (start, token.contents, end))
+    parser.unclosed_block_tag(parse_until)
+raw = register.tag(raw)
diff --git a/chimere/widgets.py b/chimere/widgets.py
index bffd42f..5795b77 100644
--- a/chimere/widgets.py
+++ b/chimere/widgets.py
@@ -614,8 +614,27 @@ class PolygonChooserWidget(forms.TextInput):
             ["%schimere/js/jquery.chimere.js" % settings.STATIC_URL]
 
     def render(self, name, value, attrs=None, area_name='', initialized=True):
-        # To be done
-        return super(PolygonChooserWidget, self).render(name, value, attrs)
+        val = ''
+        if value:
+            val = str(value)
+        map_layers, default_area = get_map_layers(area_name)
+        map_layers = [js for n, js, default in map_layers
+                      if 'OpenLayers' not in js]
+        tpl = render_to_string(
+            'chimere/blocks/polygon_edit.html',
+            {'name': name, 'val': val, 'initialized': initialized,
+             'isvalue': bool(value),
+             'default_area': "true" if default_area else "false"}
+        )
+        # TODO: manage area
+        return mark_safe(tpl.format(
+            static_url=settings.STATIC_URL,
+            display_projection=settings.CHIMERE_EPSG_DISPLAY_PROJECTION,
+            projection=settings.CHIMERE_EPSG_PROJECTION,
+            center=list(settings.CHIMERE_DEFAULT_CENTER),
+            zoom=settings.CHIMERE_DEFAULT_ZOOM,
+            map_layers=", ".join(map_layers)
+        ))
 
 
 class PolygonField(models.PolygonField):
@@ -623,7 +642,7 @@ class PolygonField(models.PolygonField):
     Set the widget for the form field
     '''
     def formfield(self, **keys):
-        defaults = {'widget': RouteChooserWidget}
+        defaults = {'widget': PolygonChooserWidget}
         keys.update(defaults)
         return super(PolygonField, self).formfield(**keys)