diff options
| -rw-r--r-- | ishtar_common/static/js/ishtar-map.js | 58 | ||||
| -rw-r--r-- | ishtar_common/templates/base.html | 1 | ||||
| -rw-r--r-- | ishtar_common/templates/blocks/DataTables-tabs.html | 17 | ||||
| -rw-r--r-- | ishtar_common/views_item.py | 5 | ||||
| -rw-r--r-- | scss/custom.scss | 24 |
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">×</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; |