add dynamic loading of pages

ot_templating/Resources/Private/Language/locallang.xlf

@@ -190,6 +190,9 @@
 			<trans-unit id="search">
 				<source>Rechercher</source>
 			</trans-unit>
+			<trans-unit id="please-wait">
+				<source>Veuillez patienter...</source>
+			</trans-unit>
 			<trans-unit id="more-informations">
 				<source>Plus d'infos</source>
 			</trans-unit>

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

@@ -93,12 +93,11 @@
                     </div>
 
                     <div class="structure-results">
-                        <f:if condition="{structuresCollection.totalItems} == 0">
-                            <span><f:translate key="no-result"/></span>
-                        </f:if>
+                        <span class="please-wait"><f:translate key="please-wait"/></span>
+                        <span class="no-result" style="display: none"><f:translate key="no-result"/></span>
 
-                        <div class="structures-results-pages">
-                            <div class="structure-card-model" data-id="{structure.id}" style="display: none">
+                        <div class="structures-page">
+                            <div class="structure-card-model" data-id="" style="display: none">
 
                                 <div class="structure-poster">
                                     <f:image src="EXT:ot_templating/Resources/Public/media/event-default.jpg" alt="poster" />
@@ -115,14 +114,14 @@
                                     <table class="structure-details-table">
                                         <tr class="structure-details-entry structure-address">
                                             <td><i class="fas fa-map-marker-alt"></i></td>
-                                            <td>
+                                            <td class="structure-details-address">
                                                 {structure.streetAddress}
                                                 {structure.postalCode} {structure.addressCity}
                                             </td>
                                         </tr>
                                         <tr class="structure-details-entry structure-federation">
                                             <td><i class="fas fa-project-diagram"></i></td>
-                                            <td>{structure.parentName}</td>
+                                            <td class="structure-details-federation">{structure.parentName}</td>
                                         </tr>
                                     </table>
                                 </div>
@@ -136,19 +135,20 @@
                             </div>
                         </div>
 
-                        <div class="pagination-bar">
+                        <div class="pagination-bar" data-current-page="1">
                             <a class="goto-page" data-page="1" href="#" title="{f:translate(key:'go-to-first-page')}">
                                 <i class="fa fa-angle-double-left"></i>
                             </a>
 
-                            <ul>
-                                <li class="goto-page-model" style="display: none">
-                                    <a class="goto-page" data-page="" href="#" title="{f:translate(key:'go-to-page')}">
+                            <ul class="pagination-list">
+                                <li class="goto-page-model" style="display: none;">
+                                    <a data-page="1" href="#" title="{f:translate(key:'go-to-page')}">
+                                        1
                                     </a>
                                 </li>
                             </ul>
 
-                            <a class="goto-page" data-page="" href="#" title="{f:translate(key:'go-to-last-page')}">
+                            <a class="goto-page" data-page="-1" href="#" title="{f:translate(key:'go-to-last-page')}">
                                 <i class="fa fa-angle-double-right"></i>
                             </a>
                         </div>

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

@@ -6,7 +6,11 @@ $(document).ready(function() {
     // Display map on network structures page
     if ($('.ot-structures-frame #structure-map').length) {
 
-        // Instanciate leaflet map
+        // #### Load the structures data
+        let structures = $('.ot-structures-frame').data('structures');
+        console.log(structures);
+
+        // #### Instanciate and populate leaflet map
         let mapDiv = $('#structure-map').first();
         let mapId = $(mapDiv).attr("id");
         if (!mapId) {
@@ -30,73 +34,110 @@ $(document).ready(function() {
         );
         map.fitBounds(bounds);
 
-        // load data
-        let structures = $(mapDiv).closest('.ot-structures-frame').data('structures');
-        console.log(structures);
-
-
         // Load clustered markers on leaflet map
         var clusters = L.markerClusterGroup();
 
         structures.forEach(function (item) {
             if (item.longitude && item.latitude) {
                 let marker = L.marker([item.latitude, item.longitude]);
-                let label = `<b>${item.name}</b><br/>${item.postalCode} ${item.addressCity}<br/>`
-                if (item.otherWebsite) {
-                    label += `<a href="${item.otherWebsite}" target="_blank">En savoir plus</a>`
-                }
-                marker.bindPopup(label);
+                marker.bindPopup(`<b>${item.name}</b><br/>${item.postalCode} ${item.addressCity}<br/><a href="${item.otherWebsite}" target="_blank">${item.otherWebsite}</a>`);
                 clusters.addLayer(marker);
             }
         });
         map.addLayer(clusters);
 
-        // populate results list
 
-    }
+        // #### Populate results list
+        let resultsPageDiv = $('.ot-structures-frame .structures-page');
+        let pleaseWaitSpan = $('.ot-structures-frame .please-wait');
+        let noResultSpan = $('.ot-structures-frame .no-result');
+        let cardDivModel = $('.ot-structures-frame .structure-card-model');
+        let paginationBar = $('.ot-structures-frame .pagination-bar');
+        let paginationList = $('.ot-structures-frame .pagination-list');
 
-    // Goto commands
-    $('img[data-map-fit]').on('click', function (e) {
-        let goto = $(this).data('map-fit');
-        let corners = goto.split(";");
-        let p1 = corners[0].split(",");
-        let p2 = corners[1].split(",");
-        let bounds = L.latLngBounds(L.latLng(p1[0], p1[1]), L.latLng(p2[0], p2[1]));
-        map.fitBounds(bounds);
-    });
+        let totalStructures = structures.length;
+        let itemsPerPage = 10;
 
-    // Goto page links
-    $('a.goto-page').on('click', function (e) {
-        e.preventDefault();
-        let goto = $(this).data('page');
+        pleaseWaitSpan.show();
+
+        if (totalStructures === 0) {
+            noResultSpan.show();
+        }
+
+        function showPage(page) {
+
+            let index = 0;
+            $('.ot-structures-frame .structures-page .structure-card').remove();
 
-        let ul = $(this).closest('ul');
-        let current_li = ul.children('li.current').first()
-        let target_li = ul.find('li[data-page='.concat(goto, ']')).first();
+            structures.forEach(function(structure) {
 
-        let current_page = current_li.data('page')
+                if (((page - 1) * itemsPerPage) <= index && index < (page * itemsPerPage)) {
 
-        let results = $(this).closest('.structure-results');
-        let current_div = results.find('.structures-page[data-page='.concat(current_page, ']'))
-        let target_div = results.find('.structures-page[data-page='.concat(goto, ']'))
+                    let cardDiv = $(cardDivModel).clone();
 
-        current_div.hide();
-        target_div.show();
+                    cardDiv.data('id', structure.id);
 
-        current_li.removeClass('current');
-        target_li.addClass('current');
+                    cardDiv.find('.structure-poster').first().children('img').first().attr('src', structure.logoId);
+                    cardDiv.find('.structure-name').first().text(structure.name);
+                    cardDiv.find('.structure-details-address').first().text(
+                        [structure.streetAddress, structure.postalCode, structure.addressCity].join(" ")
+                    );
+                    cardDiv.find('.structure-details-federation').first().text("A network...");
 
-        ul.children('li').each(function (x) {
-            if ($(x).data('page') <= current_page + 5 && $(x).data('page') >= current_page - 5) {
-                $(x).show();
-            } else {
-                $(x).hide();
+                    cardDiv.show();
+                    cardDiv.removeClass('structure-card-model');
+                    cardDiv.addClass('structure-card');
+                    cardDiv.appendTo(resultsPageDiv);
+                }
+                index++;
+            });
+
+            // Update the pagination
+            $('.ot-structures-frame .pagination-list .goto-page').remove();
+            let pageLiModel = paginationList.find('.goto-page-model').first();
+
+            $totalPages = Math.floor(totalStructures / itemsPerPage);
+
+            for (let i = 1; i < $totalPages; i++) {
+                let pageLi = pageLiModel.clone();
+
+                let pageLink = pageLi.children('a').first();
+
+                pageLink.text("" + i);
+                pageLink.data("page", i);
+
+                if (i === page) {
+                    pageLi.addClass('current');
+                }
+                pageLi.removeClass('goto-page-model')
+                pageLi.addClass('goto-page')
+                pageLi.show();
+                pageLi.appendTo(paginationList);
             }
+        }
+        showPage(1);
+
+        $('.goto-page a').on('click', function (e) {
+            e.preventDefault();
+            let page = $(this).data('page');
+            console.log('go to page ' + page)
+            $(window).scrollTop(0);
+            showPage(page);
         });
 
-        $(window).scrollTop(0);
-    });
+        pleaseWaitSpan.hide();
 
+    }
+
+    // Map goto commands
+    $('img[data-map-fit]').on('click', function (e) {
+        let goto = $(this).data('map-fit');
+        let corners = goto.split(";");
+        let p1 = corners[0].split(",");
+        let p2 = corners[1].split(",");
+        let bounds = L.latLngBounds(L.latLng(p1[0], p1[1]), L.latLng(p2[0], p2[1]));
+        map.fitBounds(bounds);
+    });
 
     // Toggle structures list and map view
     $('.activate-map-view').on('click', function (e) {
@@ -123,6 +164,7 @@ $(document).ready(function() {
         div.addClass('list-view');
     })
 
+    // Reset search fields
     $('.reset-search').on('click', function (e) {
         e.preventDefault();
         let form = $(this).closest('form');