Map: basic management of map tab

2 files changed, 127 insertions, 27 deletions

diff --git a/ishtar_common/static/js/ishtar-map.js b/ishtar_common/static/js/ishtar-map.js
index 3a0b4bd35..8fb01f06c 100644
--- a/ishtar_common/static/js/ishtar-map.js
+++ b/ishtar_common/static/js/ishtar-map.js
@@ -1,13 +1,50 @@
+/* layers */
 
+var source_osm = function(options){
+    return new ol.layer.Tile({
+        source: new ol.source.OSM()
+    });
+};
+
+
+var map_layers = {
+    'osm': source_osm
+};
+
+var get_layers = function(layers){
+    if (!layers){
+        layers = [{'type': 'osm', 'options': null}];
+    }
+    console.log(layers);
+    var ol_layers = [];
+    for (idx in layers){
+        var layer_attr = layers[idx];
+        ol_layers.push(
+            map_layers[layer_attr['type']](layer_attr['options'])
+        );
+    }
+    return ol_layers;
+};
+
+/* get markers */
+
+var get_markers = function(points){
+};
+
+
+/* display map */
+
+var display_map = function(map_id, points, layers){
+    var map = new ol.Map({
+        target: map_id,
+        layers: get_layers(layers),
+        view: new ol.View({
+            center: ol.proj.fromLonLat([37.41, 8.82]),
+            zoom: 4
+        })
+    });
+    get_markers(points);
+
+
+}
 
-var map = new ol.Map({
-	target: 'map',
-	layers: [
-		new ol.layer.Tile({
-			source: new ol.source.OSM()
-		})],
-	view: new ol.View({
-		center: ol.proj.fromLonLat([37.41, 8.82]),
-		zoom: 4
-	})
-});
diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 19bec49e3..f450fef49 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -23,6 +23,12 @@ beforeSend: function(xhr, settings) {
     }
 }});
 
+if (typeof String.prototype.endsWith !== 'function') {
+    String.prototype.endsWith = function(suffix) {
+        return this.indexOf(suffix, this.length - suffix.length) !== -1;
+    };
+}
+
 function manage_async_link(event){
     event.preventDefault();
     var url = $(this).attr('href');
@@ -1048,10 +1054,10 @@ var number_with_commas = function(number) {
     return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
 
-var render_gallery = function(data_table, table_name, nb_select, gallery_id){
-    var html = '<div class="ishtar-gallery-wrapper container-fluid">';
-    html += '<label>' + show_msg;
-    var id_select = table_name + '-length_image';
+
+var render_paginate_select = function(table_name, name, nb_select){
+    var html = '<label>' + show_msg;
+    var id_select = table_name + '-length_' + name;
     html += ' <select class="form-control form-control-sm" name="' + id_select + '" id="id_' + id_select + '">';
     var nb_rows = [5, 10, 25, 50, 100];
     for (idx in nb_rows){
@@ -1061,7 +1067,28 @@ var render_gallery = function(data_table, table_name, nb_select, gallery_id){
         html += '>' + nb + '</option>';
     }
     html += '</select> ' + entries_msg + '</label>';
+    return html
+};
+
+var get_hover_div = function(table_cols, data){
+    var hover = "";
+    for (idx_tc in table_cols){
+        var key = table_cols[idx_tc];
+        if (idx_tc < 7 && key in data && data[key]){
+            if (idx_tc == 3 || idx_tc == 6){
+                hover += "<br>";
+            } else if (hover){
+                hover += " - ";
+            }
+            hover += data[key].replace(/"/g, '&quot;');
+        }
+    }
+    return hover;
+};
 
+var render_gallery = function(data_table, table_name, nb_select, gallery_id){
+    var html = '<div class="ishtar-gallery-wrapper container-fluid">';
+    html += render_paginate_select(table_name, 'image', nb_select);
     var page_total = data_table['total'];
     var page_current = data_table['page'];
     var recordsTotal = data_table['recordsTotal'];
@@ -1107,18 +1134,7 @@ var render_gallery = function(data_table, table_name, nb_select, gallery_id){
         if ("name" in data){
             name = data["name"];
         }
-        var hover = "";
-        for (idx_tc in table_cols){
-            var key = table_cols[idx_tc];
-            if (idx_tc < 7 && key in data && data[key]){
-                if (idx_tc == 3 || idx_tc == 6){
-                    hover += "<br>";
-                } else if (hover){
-                    hover += " - ";
-                }
-                hover += data[key].replace(/"/g, '&quot;');
-            }
-        }
+        var hover = get_hover_div(table_cols, data);
         var caption_id = 'lightgallery-' + gallery_id +'-caption-' + data["id"];
         html += '<div class="card m-2" data-toggle="tooltip" data-html="true" title="' + hover + '">';
         html += '<a data-sub-html="#'+ caption_id + '" class="thumb-image" href="' + image + '">';
@@ -1221,9 +1237,56 @@ var register_image_gallery = function(gallery_id){
     $('.tooltip').tooltip('hide');
 };
 
+var render_map = function(data_table, table_name, nb_select, map_id){
+    //var html = render_paginate_select(table_name, 'map', nb_select);
+    var html = "";
+    html += "<div class='ishtar-table-map' id='" + map_id + "'></div>";
+    var table_cols = data_table["table-cols"];
+
+    var points = [];
+    var missings = [];
+    $.each(data_table["rows"], function(idx, data){
+        var name = '';
+        if ("cached_label" in data){
+            name = data["cached_label"];
+        }
+        if ("name" in data){
+            name = data["name"];
+        }
+
+        var point = "";
+        for (key in data){
+            if (key.endsWith('point_2d') && data[key] != "") {
+                point = data[key];
+            }
+        }
+
+        if (point){
+            points.push({
+                "id": data["id"],
+                "point": point,
+                "name": name
+            });
+        } else {
+            missings.push({
+                "id": data["id"],
+                "name": name
+            });
+        }
+    });
+    return {"points": points, "html": html};
+};
+
+var register_map = function(map_id, points){
+    console.log(points);
+    display_map(map_id, points);
+    // pass
+};
+
 var main_submit_search = function(){
     if (current_tab == "table") datatable_submit_search();
     if (current_tab == "gallery") gallery_submit_search();
+    if (current_tab == "map") map_submit_search();
 };
 
 var search_get_query_data = function(query_vars, table_name){