Use virtual list for list view (hopefully handle more items better)

www/assets/js/list.js

@@ -19,6 +19,8 @@ $(".view-main").on("click", "#addresslist .package-list-item .delete-btn", funct
 // Searchbar is setup in routes.js, this is for forcing a wider scope
 var searchbar = null;
 
+var itemVirtualList = null;
+
 /**
  * Update package distances relative to the passed coordinates.
  * @param {type} latitude
@@ -96,6 +98,7 @@ function loadPackageList(sortType) {
         $("#no-packages-display").addClass("display-none");
     }
 
+    var items = [];
     for (var i = 0; i < sortedPackages.length; i++) {
         for (var j = 0; j < sortedPackages[i].value.items.length; j++) {
             var item = sortedPackages[i].value.items[j];
@@ -111,33 +114,60 @@ function loadPackageList(sortType) {
             } else if (typeof sortedPackages[i].value.distance != 'undefined' && sortedPackages[i].value.distance * 1 < getStorage("alertradius") * 1) {
                 classes = "text-color-deeporange";
             }
-            $("#addresslist ul").append(
-                    '<li class="package-list-item accordion-item" data-packageid="' + item.id + '" data-coordid=' + sortedPackages[i].value.id + '>'
-                    + '<div class="item-content item-link ' + classes + '" data-packageid="' + item.id + '" data-latitude="' + sortedPackages[i].value.coords[0] + '" data-longitude="' + sortedPackages[i].value.coords[1] + '">'
-                    + '  <div class="item-inner">'
-                    + '    <div class="item-title">'
-                    + '       <i class="' + icon1 + '"></i>'
-                    + '       ' + item.address
-                    + '    </div>'
-                    + '    <div class="item-footer">'
-                    + '      <i class="' + icon2 + '"></i>'
-                    + '      <span class="distance">' + (typeof sortedPackages[i].value.distance != 'undefined' ? getDisplayDistance(sortedPackages[i].value.distance) : '...') + '</span>'
-                    + '    </div>'
-                    + '  </div>'
-                    + '</div>'
-                    + '<div class="accordion-item-content">'
-                    + '  <div class="row padding-horizontal">'
-                    + '    <a href="#" class="col deliver-btn button button-outline color-green" data-packageid="' + item.id + '">' + (delivered ? "<i class='fas fa-undo'></i> Undeliver" : "<i class='fas fa-check'></i>&nbsp; Deliver") + '</a>'
-                    + '    <a href="geo:' + sortedPackages[i].value.coords[0] + ',' + sortedPackages[i].value.coords[1] + '" class="col geolink directions-btn button button-outline"><i class="fas fa-directions"></i> Directions</a>'
-                    + '    <a href="#" class="col delete-btn color-red button button-outline"><i class="fas fa-trash"></i> Delete</a>'
-                    + '  </div>'
-                    + '  </div>'
-                    + '</div>'
-                    + '</li>'
-                    );
+            items.push({
+                id: item.id,
+                coordid: sortedPackages[i].value.id,
+                classes: classes,
+                latitude: sortedPackages[i].value.coords[0],
+                longitude: sortedPackages[i].value.coords[1],
+                icon1: icon1,
+                icon2: icon2,
+                address: item.address,
+                distance: (typeof sortedPackages[i].value.distance != 'undefined' ? getDisplayDistance(sortedPackages[i].value.distance) : '...'),
+                delivered: delivered,
+                geolink: 'geo:' + sortedPackages[i].value.coords[0] + ',' + sortedPackages[i].value.coords[1]
+            });
         }
     }
 
+    itemVirtualList = app.virtualList.create({
+        el: "#addresslist",
+        items: items,
+        searchAll: function (query, items) {
+            query = query.toLowerCase();
+            var found = [];
+            for (var i = 0; i < items.length; i++) {
+                if (items[i].address.toLowerCase().indexOf(query) >= 0 || query.trim() === '') {
+                    found.push(i);
+                }
+            }
+            return found; //return array with mathced indexes
+        },
+        itemTemplate:
+                '<li class="package-list-item accordion-item" data-packageid="{{id}}" data-coordid="{{coordid}}">'
+                + '<div class="item-content item-link {{classes}}" data-packageid="{{id}}" data-latitude="{{latitude}}" data-longitude="{{longitude}}">'
+                + '  <div class="item-inner">'
+                + '    <div class="item-title">'
+                + '       <i class="{{icon1}}"></i>'
+                + '       {{address}}'
+                + '    </div>'
+                + '    <div class="item-footer">'
+                + '      <i class="{{icon2}}"></i>'
+                + '      <span class="distance">{{distance}}</span>'
+                + '    </div>'
+                + '  </div>'
+                + '</div>'
+                + '<div class="accordion-item-content">'
+                + '  <div class="row padding-horizontal">'
+                + '    <a href="#" class="col deliver-btn button button-outline color-green" data-packageid="{{id}}">{{#if delivered}}<i class="fas fa-undo"></i> Undeliver{{else}}<i class="fas fa-check"></i>&nbsp; Deliver{{/if}}</a>'
+                + '    <a href="{{geolink}}" class="col geolink directions-btn button button-outline"><i class="fas fa-directions"></i> Directions</a>'
+                + '    <a href="#" class="col delete-btn color-red button button-outline"><i class="fas fa-trash"></i> Delete</a>'
+                + '  </div>'
+                + '  </div>'
+                + '</div>'
+                + '</li>'
+    });
+
     // If there was a search open when the reload was triggered
     if (router.currentRoute.name == "list") {
         var searchboxVal = $(".package-list-searchbar input[type=search]").val();

www/pages/list.html

@@ -53,10 +53,8 @@
                     <img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/box-open-dashed.svg" class="margin-vertical" />
                     <div class="margin-top"><a href="/add" class="button button-round button-fill margin-horizontal">Add a Package</a></div>
                 </div>
-                <div class="list no-hairlines tablet-inset no-margin-top accordion-list" id="addresslist">
-                    <ul>
-                        <!-- Packages go here -->
-                    </ul>
+                <div class="list no-hairlines tablet-inset no-margin-top accordion-list virtual-list" id="addresslist">
+                    <!-- Packages go here -->
                 </div>
             </div>
         </div>