Netsyms/PackageHelper
2
0
Fork 1
Code Issues 9 Pull Requests Releases 12 Wiki Activity

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

Browse Source
This commit is contained in:
Skylar Ittner 2020-04-27 17:51:18 -06:00
parent 00b412e0e8
commit adda98320f
2 changed files with 56 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
www/assets/js/list.js
View File

@ -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();

6
www/pages/list.html
View File

@ -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>