From 6f223dc58d2157877f94f57b083579b6ce0f2a86 Mon Sep 17 00:00:00 2001
From: geoffroy-noel-ddh <geoffroy.noel@kcl.ac.uk>
Date: Fri, 29 Nov 2024 14:06:20 +0000
Subject: [PATCH] static: fixed request to single images from the map.

---
 html/photos/index.html                    |   1 +
 html/static/photos/photos_search.js       | 156 +---------------------
 html/static/photos/photos_search_map.js   |  18 ++-
 html/static/photos/static_api.js          |  65 +++++++++
 photos/static/photos/photos_search.js     |  96 -------------
 photos/static/photos/photos_search_map.js |   2 +
 6 files changed, 84 insertions(+), 254 deletions(-)
 create mode 100644 html/static/photos/static_api.js

diff --git a/html/photos/index.html b/html/photos/index.html
index 6acb6d1..cc363ab 100644
--- a/html/photos/index.html
+++ b/html/photos/index.html
@@ -452,6 +452,7 @@ <h2 v-if="photo.attributes.description">{{ photo.attributes.description }}</h2>
   
     
     <script src="../static/photos/api_photos.js"></script>
+    <script src="../static/photos/static_api.js"></script>
     <script src="../static/photos/photos_search_map.js"></script>
     <script src="../static/photos/photos_search.js"></script>
     <script>
diff --git a/html/static/photos/photos_search.js b/html/static/photos/photos_search.js
index aa346b4..e7714ad 100644
--- a/html/static/photos/photos_search.js
+++ b/html/static/photos/photos_search.js
@@ -1,60 +1,3 @@
-class StaticAPI {
-    constructor() {
-        this.response = API_PHOTOS
-        // console.log(staticAPI.get_photo_urls())
-
-        // turn url to photos relative
-        this.response.data.forEach(photo => {
-            photo.attributes.image = photo.attributes.image.replace('src="/media/', 'src="../media/')
-            photo.attributes.url = photo.attributes.url.replace('/photos/', '')
-        })
-    }
-    get_photo_urls() {
-        return this.response.data.map(p => {
-            return `<a href="${p.id}/">${p.id}</a><br>`
-        }).join('\n')
-    }
-    filter(query) {
-        // .page: 1
-        // .perpage: 12
-        console.log(query)
-        // let ret = JSON.parse(JSON.stringify(this.response).replaceAll('height-375', 'height-700'));
-        let ret = JSON.parse(JSON.stringify(this.response));
-        ret.meta.query.view = query.view || 'grid';
-        ret.meta.query.perpage = parseInt(query.perpage || 12);
-        ret.meta.query.page = parseInt(query.page || 1);
-        let start = (ret.meta.query.page - 1) * ret.meta.query.perpage
-        ret.data = ret.data.slice(
-            start, 
-            start + ret.meta.query.perpage
-        )
-        ret.meta.qs = (new URLSearchParams(ret.meta.query)).toString()
-        ret.meta.pagination.per_page = ret.meta.query.perpage
-        ret.meta.pagination.page = ret.meta.query.page
-        ret.meta.pagination.pages = Math.ceil(ret.meta.pagination.count / ret.meta.pagination.per_page)
-
-        let q = {
-            ...ret.meta.query,
-            page: ret.meta.pagination.page + 1
-        }
-        if (q.page <= ret.meta.pagination.pages) {
-            ret.links.next = '?' + (new URLSearchParams(q)).toString()
-        }
-        q.page = ret.meta.pagination.page - 1
-        if (q.page > 0) {
-            ret.links.prev = '?' + (new URLSearchParams(q)).toString()
-        }
-        q.page = ret.meta.pagination.pages
-        ret.links.last = '?' + (new URLSearchParams(q)).toString()
-        q.page = 1
-        ret.links.first = '?' + (new URLSearchParams(q)).toString()
-
-        return ret
-    }
-}
-
-var staticAPI = new StaticAPI();
-
 var photo_search = function(g_initial_query) {
     /*
     notations:
@@ -252,7 +195,8 @@ var photo_search = function(g_initial_query) {
                     );
                 }
 
-                query.imgspecs = this.get_image_spec(3, g_image_size_increment);
+                // query.imgspecs = this.get_image_spec(3, g_image_size_increment);
+                query.imgspecs = 'height-375';
 
                 // request for the photo result (list of images)
                 let res = staticAPI.filter(query)
@@ -288,102 +232,6 @@ var photo_search = function(g_initial_query) {
                     }
                 }
             },
-            call_api_old: function(aquery, query_string, load_more) {
-                /*
-                Calls the API with parameters found in this.meta.query.
-
-                If aquery is provided, its parameters will override
-                this.meta.query.
-
-                If query_string is provided (?page=1), it will be used instead
-                of this.meta.query and aquery.
-
-                this.data is updated with the API response. Including this.meta.query.
-
-                IMPORTANT: this function makes up to two requests to the API:
-
-                * One request for the showing a paginated list of images
-
-                * Another optional request for showing all (i.e. unpaginated)
-                  photo markers on the map.
-
-                Both are query dependent (i.e. depend on search phrase, facets).
-                */
-
-                // build the query
-                var self = this;
-
-                if (self.updating_from_response) {
-                    console.log('Skip API call due to changes made in last response.');
-                    return;
-                }
-
-                var query = {};
-                self.searching = 1;
-
-                if (query_string) {
-                    query = mmee.get_dict_from_query_string(query_string);
-                } else {
-                    query_string = '';
-
-                    query = $.extend(
-                        {}, // Important: without this {}, we get all the getters and setters from self.meta.query
-                        self.meta.query,
-                        {
-                            facets: this.get_string_from_selected_facets(),
-                        },
-                        aquery
-                    );
-                }
-
-                query.imgspecs = this.get_image_spec(3, g_image_size_increment);
-
-                if (this.$options.request) {
-                    // In case user paginates or pan maps multiple times quickly
-                    // no need to continue processing last request.
-                    // Also a good way to avoid infinite loops.
-                    // e.g. ?order=nearest&perpage=60&geo=51.524,-0.048,0&page=1&phrase=sign&view=grid
-                    this.$options.request.abort();
-                }
-
-                // request for the photo result (list of images)
-                this.$options.request = $.getJSON('/api/1.0/photos/', query);
-                this.$options.request.done(function(data) {
-                    if (!load_more) {
-                        Vue.set(self, 'photos', []);
-                    }
-                    Array.prototype.push.apply(self.photos, data.data);
-
-                    self.updating_from_response = 1;
-                    // console.log('' + query.geo + ' -> ' + data.meta.query.geo);
-                    Vue.set(self, 'meta', data.meta);
-                    Vue.set(self, 'links', data.links);
-
-                    mmee.replace_query_string(data.meta.qs);
-                    self.searching = 0;
-                });
-                this.$options.request.always(function() {
-                    self.$nextTick(function () {
-                        self.updating_from_response = 0;
-                    });
-                });
-
-                // request for the map result (map markers)
-                if (this.is_map_on_page()) {
-                    query.page = 1;
-                    query.perpage = 5000;
-                    query.geo_only = 1;
-                    var geo_query_hash = this.get_hash_from_geo_query(query);
-                    if (geo_query_hash !== self.last_geo_query_hash) {
-                        // console.log('GEO ONLY QUERY ' + geo_query_hash);
-                        var req_geo_only = $.getJSON('/api/1.0/photos/', query);
-                        req_geo_only.done(function(data) {
-                            self.last_geo_query_hash = self.get_hash_from_geo_query(data.meta.query);
-                            g_leaflet.replace_markers(data.data, 1);
-                        });
-                    }
-                }
-            },
             get_string_from_selected_facets: function() {
                 // returns a single string representing all selected facets
                 var ret = [];
diff --git a/html/static/photos/photos_search_map.js b/html/static/photos/photos_search_map.js
index 00d1fee..10a7074 100644
--- a/html/static/photos/photos_search_map.js
+++ b/html/static/photos/photos_search_map.js
@@ -29,6 +29,7 @@ var search_map = function(L, g_map_image_size, on_map_created) {
 
         tile_layer.on('load', function() {
             $('#initial-map-container').hide();
+            console.log('load')
         });
 
         return ret;
@@ -57,11 +58,19 @@ var search_map = function(L, g_map_image_size, on_map_created) {
         var marker = e.target;
         var content = '<a href="/photos/'+marker.id+'">Loading image...</a>';
         marker.setPopupContent(content);
-        var req = $.getJSON('/api/1.0/photos/', {'id': marker.id, 'imgspecs': 'height-'+g_map_image_size});
-        req.done(function(res) {
-            content = '<a class="map-img" href="/photos/'+marker.id+'">'+res.data[0].attributes.image+'</a>';
+        let query = {'id': marker.id, 'imgspecs': 'height-'+g_map_image_size}
+        if (0) {
+            var req = $.getJSON('/api/1.0/photos/', query);
+            req.done(function(res) {
+                content = '<a class="map-img" href="/photos/'+marker.id+'">'+res.data[0].attributes.image+'</a>';
+                marker.setPopupContent(content);
+            });
+        } else {
+            // static call
+            let res = staticAPI.filter(query)
+            content = '<a class="map-img" href="'+res.data[0].attributes.url+'">'+res.data[0].attributes.image+'</a>';
             marker.setPopupContent(content);
-        });
+        }
     }
 
     ns.fit_bounds = function(bounds) {
@@ -95,6 +104,7 @@ var search_map = function(L, g_map_image_size, on_map_created) {
         if (on_map_created) {
             on_map_created();
         }
+
         ns.resize_map();
 
         if (has_markers && reframe) {
diff --git a/html/static/photos/static_api.js b/html/static/photos/static_api.js
new file mode 100644
index 0000000..b476802
--- /dev/null
+++ b/html/static/photos/static_api.js
@@ -0,0 +1,65 @@
+class StaticAPI {
+    constructor() {
+        this.response = API_PHOTOS
+        // console.log(staticAPI.get_photo_urls())
+
+        // turn url to photos relative
+        this.response.data.forEach(photo => {
+            photo.attributes.image = photo.attributes.image.replace('src="/media/', 'src="../media/')
+            photo.attributes.url = photo.attributes.url.replace('/photos/', '')
+        })
+    }
+    get_photo_urls() {
+        return this.response.data.map(p => {
+            return `<a href="${p.id}/">${p.id}</a><br>`
+        }).join('\n')
+    }
+    filter(query) {
+        // .page: 1
+        // .perpage: 12
+        console.log(query)
+        // let ret = JSON.parse(JSON.stringify(this.response).replaceAll('height-375', 'height-700'));
+        let resStr = JSON.stringify(this.response)
+        if (query.imgspecs) {
+            resStr = resStr.replaceAll('height-375', query.imgspecs)
+        }
+        let ret = JSON.parse(resStr);
+
+        ret.meta.query.view = query.view || 'grid';
+        ret.meta.query.perpage = parseInt(query.perpage || 12);
+        ret.meta.query.page = parseInt(query.page || 1);
+        let start = (ret.meta.query.page - 1) * ret.meta.query.perpage
+        ret.data = ret.data.slice(
+            start, 
+            start + ret.meta.query.perpage
+        )
+        ret.meta.qs = (new URLSearchParams(ret.meta.query)).toString()
+        ret.meta.pagination.per_page = ret.meta.query.perpage
+        ret.meta.pagination.page = ret.meta.query.page
+        ret.meta.pagination.pages = Math.ceil(ret.meta.pagination.count / ret.meta.pagination.per_page)
+
+        let q = {
+            ...ret.meta.query,
+            page: ret.meta.pagination.page + 1
+        }
+        if (q.page <= ret.meta.pagination.pages) {
+            ret.links.next = '?' + (new URLSearchParams(q)).toString()
+        }
+        q.page = ret.meta.pagination.page - 1
+        if (q.page > 0) {
+            ret.links.prev = '?' + (new URLSearchParams(q)).toString()
+        }
+        q.page = ret.meta.pagination.pages
+        ret.links.last = '?' + (new URLSearchParams(q)).toString()
+        q.page = 1
+        ret.links.first = '?' + (new URLSearchParams(q)).toString()
+
+        if (query.id) {
+            ret.data = ret.data.filter(p => p.id == query.id)
+        }
+
+        return ret
+    }
+}
+
+var staticAPI = new StaticAPI();
diff --git a/photos/static/photos/photos_search.js b/photos/static/photos/photos_search.js
index 87b8e0a..e7714ad 100644
--- a/photos/static/photos/photos_search.js
+++ b/photos/static/photos/photos_search.js
@@ -232,102 +232,6 @@ var photo_search = function(g_initial_query) {
                     }
                 }
             },
-            call_api_old: function(aquery, query_string, load_more) {
-                /*
-                Calls the API with parameters found in this.meta.query.
-
-                If aquery is provided, its parameters will override
-                this.meta.query.
-
-                If query_string is provided (?page=1), it will be used instead
-                of this.meta.query and aquery.
-
-                this.data is updated with the API response. Including this.meta.query.
-
-                IMPORTANT: this function makes up to two requests to the API:
-
-                * One request for the showing a paginated list of images
-
-                * Another optional request for showing all (i.e. unpaginated)
-                  photo markers on the map.
-
-                Both are query dependent (i.e. depend on search phrase, facets).
-                */
-
-                // build the query
-                var self = this;
-
-                if (self.updating_from_response) {
-                    console.log('Skip API call due to changes made in last response.');
-                    return;
-                }
-
-                var query = {};
-                self.searching = 1;
-
-                if (query_string) {
-                    query = mmee.get_dict_from_query_string(query_string);
-                } else {
-                    query_string = '';
-
-                    query = $.extend(
-                        {}, // Important: without this {}, we get all the getters and setters from self.meta.query
-                        self.meta.query,
-                        {
-                            facets: this.get_string_from_selected_facets(),
-                        },
-                        aquery
-                    );
-                }
-
-                query.imgspecs = this.get_image_spec(3, g_image_size_increment);
-
-                if (this.$options.request) {
-                    // In case user paginates or pan maps multiple times quickly
-                    // no need to continue processing last request.
-                    // Also a good way to avoid infinite loops.
-                    // e.g. ?order=nearest&perpage=60&geo=51.524,-0.048,0&page=1&phrase=sign&view=grid
-                    this.$options.request.abort();
-                }
-
-                // request for the photo result (list of images)
-                this.$options.request = $.getJSON('/api/1.0/photos/', query);
-                this.$options.request.done(function(data) {
-                    if (!load_more) {
-                        Vue.set(self, 'photos', []);
-                    }
-                    Array.prototype.push.apply(self.photos, data.data);
-
-                    self.updating_from_response = 1;
-                    // console.log('' + query.geo + ' -> ' + data.meta.query.geo);
-                    Vue.set(self, 'meta', data.meta);
-                    Vue.set(self, 'links', data.links);
-
-                    mmee.replace_query_string(data.meta.qs);
-                    self.searching = 0;
-                });
-                this.$options.request.always(function() {
-                    self.$nextTick(function () {
-                        self.updating_from_response = 0;
-                    });
-                });
-
-                // request for the map result (map markers)
-                if (this.is_map_on_page()) {
-                    query.page = 1;
-                    query.perpage = 5000;
-                    query.geo_only = 1;
-                    var geo_query_hash = this.get_hash_from_geo_query(query);
-                    if (geo_query_hash !== self.last_geo_query_hash) {
-                        // console.log('GEO ONLY QUERY ' + geo_query_hash);
-                        var req_geo_only = $.getJSON('/api/1.0/photos/', query);
-                        req_geo_only.done(function(data) {
-                            self.last_geo_query_hash = self.get_hash_from_geo_query(data.meta.query);
-                            g_leaflet.replace_markers(data.data, 1);
-                        });
-                    }
-                }
-            },
             get_string_from_selected_facets: function() {
                 // returns a single string representing all selected facets
                 var ret = [];
diff --git a/photos/static/photos/photos_search_map.js b/photos/static/photos/photos_search_map.js
index 0506f5c..10a7074 100644
--- a/photos/static/photos/photos_search_map.js
+++ b/photos/static/photos/photos_search_map.js
@@ -29,6 +29,7 @@ var search_map = function(L, g_map_image_size, on_map_created) {
 
         tile_layer.on('load', function() {
             $('#initial-map-container').hide();
+            console.log('load')
         });
 
         return ret;
@@ -103,6 +104,7 @@ var search_map = function(L, g_map_image_size, on_map_created) {
         if (on_map_created) {
             on_map_created();
         }
+
         ns.resize_map();
 
         if (has_markers && reframe) {