js finalization

ot_templating/Resources/Private/Layouts/Classic/StructuresFrame.html

@@ -73,8 +73,7 @@
                                 <div class="city-search-dropdown" style="display: none;">
                                     <div class="city-search-loading">
                                         <f:image src="EXT:ot_templating/Resources/Public/media/gear.gif"
-                                                 alt="{f:translate(key: 'please-wait')}"
-                                                 style="padding:15px; width:40px"/>
+                                                 alt="{f:translate(key: 'please-wait')}"/>
                                     </div>
                                     <div class="city-search-no-result"><f:translate key="no-result"/></div>
                                     <div class="city-search-results"></div>
@@ -116,7 +115,7 @@
                                 <option value="200">200km</option>
                             </select>
                         </div>
-                        <div class="structure-search-row">
+                        <div class="structure-search-row search-buttons">
                             <button class="reset-search">Réinitialiser</button>
                             <span class="spacer"></span>
                             <button class="submit-search" name="submit-search">Rechercher</button>

ot_templating/Resources/Public/assets/Classic/script/structures.js

@@ -46,6 +46,7 @@ function sphericDistance(lat1, lon1, lat2, lon2)
 $(document).ready(function() {
 
     // Init
+    let document = $('html, body');
     let structureFrame = $('.ot-structures-frame').first();
 
     let organizationId = structureFrame.data('org-id');
@@ -83,12 +84,20 @@ $(document).ready(function() {
         attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
     }).addTo(map);
 
+    var listenMapMoves = false;
+
+    var defaultsBounds = [51.03, -5.78, 41.2, 9.70];
+
     // Set the view
-    bounds = L.latLngBounds(
-        L.latLng(51.03, -5.78),
-        L.latLng(41.2, 9.70)
-    );
-    map.fitBounds(bounds);
+    let resetMapBounds = function () {
+        area = null;
+        bounds = L.latLngBounds(
+            L.latLng(defaultsBounds[0], defaultsBounds[1]),
+            L.latLng(defaultsBounds[2], defaultsBounds[3])
+        );
+        map.fitBounds(bounds);
+    }
+    resetMapBounds();
 
     var clusters = null;
 
@@ -97,9 +106,10 @@ $(document).ready(function() {
 
     // The current query
     var query = {};
+    var area = null;
 
     // Update the current query with form data
-    let updateQuery = function() {
+    function updateQuery() {
         query['what'] = whatInput.val();
         query['lat'] = latInput.val();
         query['long'] = longInput.val();
@@ -109,8 +119,12 @@ $(document).ready(function() {
         query['radius'] = radiusSelect.val();
     }
 
+    function updateArea(long1, lat1, long2, lat2) {
+        area = [long1, lat1, long2, lat2];
+    }
+
     // Does the given structure match the current query
-    let matchCurrentQuery = function(structure) {
+    function matchCurrentQuery(structure) {
 
         // Filter by name
         if (query['what'] && !structure.name.toLowerCase().includes(query['what'].toLowerCase())) {
@@ -148,14 +162,24 @@ $(document).ready(function() {
                 return false
             }
         }
-        if (query['federation'] && structure.parentId !== query['federation']) {
+        if (query['federation'] && !structure.parents.includes(Number(query['federation']))) {
             return false;
         }
-        // structure match every filter
+
+        // filter by map bounds
+        if (area !== null) {
+            if (structure.longitude < area[0] ||
+                structure.latitude < area[1] ||
+                structure.longitude > area[2] ||
+                structure.latitude > area[3]
+            ) {
+                return false;
+            }
+        }
         return true;
     }
 
-    let populateFederationsSelect = function () {
+    function populateFederationsSelect() {
         federationSelect.children('option:not(:first)').remove();
         let has_options = false;
         structures.forEach(function (structure) {
@@ -171,15 +195,14 @@ $(document).ready(function() {
         }
     }
 
-
     // #### Display results
-    const itemsPerPage = 10;
+    const itemsPerPage = 8;
     let currentPage = 1;
 
     updateQuery();
 
     // on page link clicked event
-    let pageLinkClicked = function(e) {
+    function pageLinkClicked(e) {
         e.preventDefault();
         let page = $(this).data('page');
         if (page > 0) {
@@ -191,15 +214,16 @@ $(document).ready(function() {
     gotoFirstPage.on('click', pageLinkClicked);
     gotoLastPage.on('click', pageLinkClicked);
 
-    let refresh = function() {
+    function refresh(listOnly=false) {
 
         // Reinitialize current results
         pleaseWaitSpan.show();
+        listenMapMoves = false;
 
         resultsPageDiv.find('.structure-card').remove();
         paginationList.find('.goto-page-li').remove();
         paginationList.hide();
-        if (clusters !== null) {
+        if (!listOnly && clusters !== null) {
             map.removeLayer(clusters);
         }
 
@@ -235,7 +259,7 @@ $(document).ready(function() {
                 cardDiv.find('.structure-details-address').first().text(
                     [structure.streetAddress, structure.postalCode, structure.addressCity].join(" ")
                 );
-                cardDiv.find('.structure-details-federation').first().text(structure.parentName);
+                cardDiv.find('.structure-details-federation').first().text(structure.n1Name);
 
                 cardDiv.show();
                 cardDiv.removeClass('structure-card-model');
@@ -246,16 +270,18 @@ $(document).ready(function() {
         });
 
         // ** Update results on map
-        clusters = L.markerClusterGroup();
-
-        results.forEach(function (item) {
-            if (item.longitude && item.latitude) {
-                let marker = L.marker([item.latitude, item.longitude]);
-                marker.bindPopup(`<b>${item.name}</b><br/>${item.postalCode} ${item.addressCity}<br/><a href="${item.website}" target="_blank">${item.website}</a>`);
-                clusters.addLayer(marker);
-            }
-        });
-        map.addLayer(clusters);
+        if (!listOnly) {
+            clusters = L.markerClusterGroup();
+
+            results.forEach(function (item) {
+                if (item.longitude && item.latitude) {
+                    let marker = L.marker([item.latitude, item.longitude]);
+                    marker.bindPopup(`<b>${item.name}</b><br/>${item.postalCode} ${item.addressCity}<br/><a href="${item.website}" target="_blank">${item.website}</a>`);
+                    clusters.addLayer(marker);
+                }
+            });
+            map.addLayer(clusters);
+        }
 
         // ** Update pagination
         let resultsCount = results.length;
@@ -291,7 +317,14 @@ $(document).ready(function() {
 
         // Finalize
         pleaseWaitSpan.hide();
+        listenMapMoves = true;
+    }
 
+    function fitMapToResults() {
+        bounds = clusters.getBounds();
+        if (bounds.isValid()) {
+            map.fitBounds(bounds);
+        }
     }
 
     // #### Load structures data and refresh
@@ -304,7 +337,6 @@ $(document).ready(function() {
     })
     .done(function(res) {
         structures = res["hydra:member"];
-        console.log(structures);
         populateFederationsSelect();
         refresh();
     })
@@ -319,16 +351,25 @@ $(document).ready(function() {
     form.on('submit', function(e) {
         e.preventDefault();
         updateQuery();
+        area = null;
         currentPage = 1;
         refresh();
+        if (Object.values(query).some((k) => k)) {
+            // if it's not an empty query, fit to results
+            fitMapToResults();
+        }
+    });
+
+    $('button[name="submit-search"]', form).on('click', function() {
+        form.submit();
     });
 
-    $('button[name="submit-search"]').on('click', function() {
+    $('.filters select', form).on('change', function() {
         form.submit();
     });
 
     // Reset search fields
-    $('.reset-search').on('click', function (e) {
+    $('.reset-search', form).on('click', function (e) {
         e.preventDefault();
         let form = $(this).closest('form');
         form.find('input').each(function () {
@@ -337,6 +378,7 @@ $(document).ready(function() {
         form.find('select').each(function () {
             $(this).val('');
         });
+        resetMapBounds();
         form.submit();
     });
 
@@ -373,46 +415,78 @@ $(document).ready(function() {
         e.preventDefault();
         div.removeClass('map-view');
         div.addClass('list-view');
+        resetMapBounds();
     })
 
-    // Form
+    map.on('zoomend moveend', function(e) {
+        if (listenMapMoves) {
+            let bounds = map.getBounds();
+            updateArea(bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth())
+            refresh(true);
+        }
+    })
 
-    // city search
+    // ### Location filter
     let addressApiUrl = "https://api-adresse.data.gouv.fr/search/?type=municipality&autocomplete=1&limit=5&q=";
 
     let resultDropdownDiv = form.find('.city-search-dropdown').first();
-    let input_name = resultDropdownDiv.siblings("input[name='search-city']").first();
-    let input_lat = resultDropdownDiv.siblings("input[name='lat']").first();
-    let input_long = resultDropdownDiv.siblings("input[name='long']").first();
+    let inputName = resultDropdownDiv.siblings("input[name='search-city']").first();
+    let inputLat = resultDropdownDiv.siblings("input[name='lat']").first();
+    let inputLong = resultDropdownDiv.siblings("input[name='long']").first();
     let resultDiv = resultDropdownDiv.find('.city-search-results').first();
     let loadingDiv = resultDropdownDiv.find('.city-search-loading').first();
     let noResultDiv = resultDropdownDiv.find('.city-search-no-result').first();
+    let geolocButton = form.find("button[name='search-localize']").first();
 
-    $('body').click(function() {
+    function setNewLocation(name, long, lat) {
+        inputName.val(name);
+        inputLong.val(long);
+        inputLat.val(lat);
+        inputName.css("cursor", "pointer");
         resultDropdownDiv.hide();
+        form.submit();
+    }
 
+    function hideCityResults() {
+        resultDropdownDiv.hide();
         // if no city was selected, clear the input
-        if (!input_lat.val()) {
-            input_name.val('');
+        if (!inputLat.val()) {
+            inputName.val('');
             resultDiv.empty();
         }
+        inputName.css("cursor", "inherit");
+    }
+
+    document.click(function() {
+        hideCityResults();
     });
 
-    input_name.click(function(e) {
+    $(document).keyup(function(e) {
+        if(e.key === "Escape") {
+            hideCityResults();
+        }
+    });
+
+    inputName.click(function(e) {
         if (resultDiv.children('.city-search-item').length > 0) {
             resultDropdownDiv.show();
         }
         e.stopPropagation();
     });
 
-    $('.city-search-results').on('click', '.city-search-item', function (e) {
-        input_name.val($(this).text());
-        input_long.val($(this).data("x"));
-        input_lat.val($(this).data("y"));
+    resultDiv.on('click', '.city-search-item', function (e) {
+        setNewLocation($(this).text(), $(this).data("x"), $(this).data("y"))
+        e.stopPropagation();
+    });
+
+    inputName.on('click', function(e) {
+        if ($(this).is(":focus")) {
+            $(this).val('');
+        }
     });
 
-    $("input[name='search-city']").on('input', function(e) {
-        let query = $(this).val();
+    function populateCitySearchResults() {
+        let query = inputName.val();
         let url = addressApiUrl + encodeURI(query);
 
         if (!query) {
@@ -420,8 +494,8 @@ $(document).ready(function() {
             return;
         }
 
-        input_lat.val('');
-        input_long.val('');
+        inputLat.val('');
+        inputLong.val('');
         loadingDiv.show();
         resultDiv.empty();
         resultDropdownDiv.show();
@@ -450,10 +524,34 @@ $(document).ready(function() {
             loadingDiv.hide();
         })
         .fail(function(e) {
-            let span = "<div>Une erreur s'est produite</div>";
             console.error(e);
-            resultDiv.append(span);
             loadingDiv.hide();
         });
+    }
+
+    var runningPopulate = null;
+
+    inputName.on('input', function(e) {
+        if (runningPopulate !== null) {
+            window.clearTimeout(runningPopulate)
+        }
+        runningPopulate = window.setTimeout(populateCitySearchResults, 300);
+    });
+
+    geolocButton.on('click', function(e) {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+                function (geoloc) {
+                    setNewLocation('Autour de moi', geoloc.coords.longitude, geoloc.coords.latitude)
+                    e.stopPropagation();
+                 },
+                function () {
+                    alert("Erreur: La géolocalisation n'est pas disponible, vérifiez les permissions de votre navigateur");
+                }
+            );
+            e.stopPropagation();
+        } else {
+            alert("La géolocalisation n'est pas disponible sur votre navigateur");
+        }
     });
 });

ot_templating/Resources/Public/assets/Classic/style/module/_structures.scss

@@ -213,6 +213,10 @@ $input-border-color: #bfbfbf;
     left: 0;
   }
 
+  #structure-map a {
+    text-decoration: none;
+  }
+
   #structure-map-bar {
     margin: 16px 2% 6px 2%;
 
@@ -300,7 +304,6 @@ $input-border-color: #bfbfbf;
     display: inline-block;
     top: -24px;
     left: -24px;
-
   }
 
   .city-search-results, .city-search-no-result, .city-search-loading {
@@ -311,6 +314,11 @@ $input-border-color: #bfbfbf;
     z-index: 99;
   }
 
+  .city-search-loading img {
+    padding:10px;
+    width:30px;
+  }
+
   .city-search-item {
     display: block;
     padding: 12px 24px;
@@ -328,6 +336,7 @@ $input-border-color: #bfbfbf;
     margin: 3px 6px;
     font-weight: 750;
     width: 127px;
+    font-size: 12px;
   }
 
   .structure-search .reset-search {
@@ -458,17 +467,25 @@ $input-border-color: #bfbfbf;
     display: none;
   }
 
-  .structure-search form {
-    flex-direction: row;
+  .structure-search form .search-buttons {
   }
 
   .search-bar-wrapper {
     flex: 1;
     margin-right: 2%;
+    max-width: none;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .search-bar {
+    flex: 1;
+    max-width: none;
   }
 
   .filters select, .filters button {
     height: 52px;
+    width: auto;
   }
 
   .structure-col-results {