Map: manage complete list of items

5 files changed, 83 insertions, 22 deletions

diff --git a/ishtar_common/static/js/ishtar-map.js b/ishtar_common/static/js/ishtar-map.js
index 4045d952f..78c02adca 100644
--- a/ishtar_common/static/js/ishtar-map.js
+++ b/ishtar_common/static/js/ishtar-map.js
@@ -6,6 +6,9 @@ var marker_cluster = "/media/images/marker-cluster.png";
 var view_projection = 'EPSG:3857';
 var animation_duration = 250;
 
+var cluster_threshold_1 = 8;
+var cluster_threshold_2 = 25;
+
 var map_default_center = 'SRID=4326;POINT (2.4397 46.5528)';
 var map_default_zoom = '7';
 var min_auto_zoom_on_cluster = 13;
@@ -61,7 +64,7 @@ var cluster_get_style = function(feature, resolution){
     if (!style && size == 1){
         style = _styleCache[size] = [get_icon_style()];
     } else if (!style && size > 1){
-        var color = size > 25 ? "192,0,0" : size > 8 ? "255,128,0" : "0,128,0";
+        var color = size > cluster_threshold_2 ? "192,0,0" : size > cluster_threshold_1 ? "255,128,0" : "0,128,0";
         var radius = Math.max(8, Math.min(size * 0.75, 20));
         var lbl = size.toString();
         style = _styleCache[size] = [
@@ -145,20 +148,20 @@ var manage_click_on_map = function(e) {
             return feature;
         }
     );
-    click_on_feature(feature);
+    click_on_feature(feature, e);
 };
 
-var click_on_feature = function(feature){
+var click_on_feature = function(feature, e){
+
+    if (!$(e.target).is($(popup_item))
+        && !$.contains($(popup_item)[0],e.target) ) {
+        $(popup_item).hide();
+    }
 
     if (typeof feature == 'undefined'){
         current_feature = null;
-        $(popup_item).hide();
         return;
     }
-    if (current_feature == feature){
-        $(popup_item).hide();
-        return
-    }
     current_feature = feature;
     if (!feature) return;
 
@@ -172,6 +175,8 @@ var click_on_feature = function(feature){
     }, timeout);
 };
 
+var auto_zoom = false;
+
 var click_on_cluster = function(feature, zoom_level, duration, nb_zoom,
                                 current_nb_items){
     if (!duration){
@@ -184,7 +189,9 @@ var click_on_cluster = function(feature, zoom_level, duration, nb_zoom,
     var props = feature.getProperties();
     if (!'features' in props) return feature;
 
-    if (props['features'].length == 1) return display_cluster_detail(feature);
+    if (!auto_zoom || props['features'].length == 1){
+        return display_cluster_detail(feature);
+    }
 
     if (!current_nb_items){
         current_nb_items = props['features'].length;
@@ -246,7 +253,7 @@ var click_on_cluster = function(feature, zoom_level, duration, nb_zoom,
 var display_cluster_detail = function(cluster){
     // console.log("display_cluster_detail");
     var features = cluster.getProperties()['features']
-    var offset_x = -14;
+    var offset_x = 0;
     var offset_y = -21;
     if (features.length == 1){
         offset_y = -54;
@@ -258,30 +265,42 @@ var display_items = function(features, offset_x, offset_y){
     wait_animation_end(function() {_display_items(features, offset_x, offset_y)});
 };
 
+var open_map_window = function(){
+    $('.ishtar-map-window').show();
+};
+
+var complete_list_label = "complete list...";
+
 var _display_items = function(features, offset_x, offset_y){
     // console.log("display_items");
     var feature = features[0];
     var geom = feature.getGeometry();
     var popup_content = "<ul>";
+    var window_content = "<ul>";
     var has_extra = false;
     for (idx_feat in features){
-        if (idx_feat >= 5){
-            has_extra = true;
-            popup_content += "<li><a href='#'>...</a></li>"
-            break;
+        if (idx_feat == 5){
+            popup_content += "<li class='text-center'><a href='#' class='map-list-detail'>";
+            popup_content += complete_list_label;
+            popup_content += "</a></li>";
         }
         var feat = features[idx_feat];
         var properties = feat.getProperties();
         var link = link_template.replace("<pk>", properties["id"]);
-        popup_content += "<li>" + link + " " + properties['name'] + "</li>"
+        var txt = "<li>" + link + " " + properties['name'] + "</li>";
+        window_content += txt;
+        if (idx_feat < 5){
+            popup_content += txt;
+        }
     }
     popup_content += "</ul>";
+    window_content += "</ul>";
+    $(".simple-window-content .modal-body").html(window_content);
     $(popup_item).html(popup_content);
-    popup.setPosition([0, 0]);  // out of the map
+    $(".map-list-detail").click(open_map_window);
+    popup.setPosition(geom.getCoordinates());
     $(popup_item).show(function(){
-        offset_x -= $(popup_item).width() / 2;
         popup.setOffset([offset_x, offset_y]);
-        popup.setPosition(geom.getCoordinates());
     });
 };
 
@@ -311,8 +330,7 @@ var init_popup = function(){
     popup_item = document.getElementById("ishtar-map-popup-" + map_id);
     var popup_options = {
         element: popup_item,
-        positioning: 'bottom-left',
-        stopEvent: false
+        positioning: 'bottom-center'
     }
     popup = new ol.Overlay(popup_options);
     map.addOverlay(popup);
diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index 0a4f58e24..450882679 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -48,6 +48,7 @@
     var activate_all_search_msg = "{% trans 'Searches in the shortcut menu deal with all items.' %}";
     var activate_own_search_msg = "{% trans 'Searches in the shortcut menu deal with only your items.' %}";
     var search_pinned_msg = "{% trans 'Search pinned' %}";
+    var complete_list_label = "{% trans 'complete list...' %}";
     var added_message = "{% trans " items added." %}";
     var select_only_one_msg = "{% trans "Select only one item." %}";
     var YES = "{% trans 'yes' %}";
diff --git a/ishtar_common/templates/blocks/DataTables-tabs.html b/ishtar_common/templates/blocks/DataTables-tabs.html
index ddfcaa575..5b830ec89 100644
--- a/ishtar_common/templates/blocks/DataTables-tabs.html
+++ b/ishtar_common/templates/blocks/DataTables-tabs.html
@@ -40,4 +40,21 @@
   </div>{% endif %}
 </div>
 
+{% if use_map %}
+<div class="ishtar-map-window simple-window" tabindex="-1" aria-hidden="true">
+    <div class="simple-window-content">
+        <div class="modal-header">
+            {% trans "Item list" %}
+            <button type="button" class="close"
+                    onclick="$('.ishtar-map-window').hide()"
+                    aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
+        </div>
+        <div class="modal-body">
+        </div>
+    </div>
+</div>
+{% endif %}
+
 
diff --git a/ishtar_common/views_item.py b/ishtar_common/views_item.py
index 4e8a742e2..bc3962ff6 100644
--- a/ishtar_common/views_item.py
+++ b/ishtar_common/views_item.py
@@ -1715,8 +1715,9 @@ def get_item(model, func_name, default_name, extra_request_keys=None,
             return HttpResponse(data, content_type='application/json')
         elif data_type == "csv":
             response = HttpResponse(content_type='text/csv')
-            filename = u'%s_%s.csv' % (default_name,
-                                       n.strftime('%Y%m%d-%H%M%S'))
+            n = datetime.datetime.now()
+            filename = u'%s_%s.csv' % (
+                default_name, n.strftime('%Y%m%d-%H%M%S'))
             response['Content-Disposition'] = 'attachment; filename=%s' \
                                               % filename
             writer = csv.writer(response, **CSV_OPTIONS)
diff --git a/scss/custom.scss b/scss/custom.scss
index 0406858cf..c577c7def 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -668,6 +668,28 @@ ul.compact{
     width: 100%;
 }
 
+.simple-window{
+    position: absolute;
+    left: 50%;
+    display: none;
+}
+
+.simple-window-content{
+    position: relative;
+    left: -50%;
+    top: -470px;
+    width: 350px;
+    background-color: #fff;
+    border: 1px solid $gray-500;
+    border-radius: 0.3rem;
+}
+
+.simple-window .modal-body{
+    max-height: 300px;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
 .ishtar-table-map{
     width: 100%;
     height: 50%;
@@ -681,8 +703,10 @@ ul.compact{
     border-style: solid;
     border-width: 1px;
     border-color: $gray-500;
+    display: none;
 }
 
+.simple-window-content ul,
 .ishtar-map-popup ul {
     margin: 0;
     padding: 0;