Dareezy11
/
PackageHelper
forked from Netsyms/PackageHelper
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Convert package list to use accordions instead of swipes

Browse Source
Skylar Ittner 4 years ago
parent c0c9aad049
commit 3a362168bd
3 changed files with 54 additions and 28 deletions
Show Stats Download Patch File Download Diff File

63
www/assets/js/list.js
Unescape Escape View File

@ -15,9 +15,10 @@ $(".view-main").on("click", "#addresslist .package-list-item .directions-btn", f
window.open($(this).attr("href"), "_system"); window.open($(this).attr("href"), "_system");
}); });
$(".view-main").on("swipeout:delete", "#addresslist .package-list-item", function () { $(".view-main").on("click", "#addresslist .package-list-item .delete-btn", function () {
console.log("Info", "Deleting package", $(this).data("packageid")); var id = $(this).parents(".package-list-item").data("packageid");
deletePackage($(this).data("packageid")); console.log("Info", "Deleting package", id);
deletePackage(id);
}); });
// Searchbar is setup in routes.js, this is for forcing a wider scope // Searchbar is setup in routes.js, this is for forcing a wider scope
@ -92,7 +93,7 @@ function loadPackageList(sortType) {
}); });
$("#addresslist").html(""); $("#addresslist ul").html("");
if (packages.length == 0) { if (packages.length == 0) {
$("#no-packages-display").removeClass("display-none"); $("#no-packages-display").removeClass("display-none");
@ -103,40 +104,66 @@ function loadPackageList(sortType) {
for (var i = 0; i < sortedPackages.length; i++) { for (var i = 0; i < sortedPackages.length; i++) {
for (var j = 0; j < sortedPackages[i].value.items.length; j++) { for (var j = 0; j < sortedPackages[i].value.items.length; j++) {
var item = sortedPackages[i].value.items[j]; var item = sortedPackages[i].value.items[j];
var icon = getIconForType(item.type); var icon1 = getIconForType(item.type);
var icon2 = "";
var classes = ""; var classes = "";
var delivered = false; var delivered = false;
if (item.delivered) { if (item.delivered) {
delivered = true; delivered = true;
icon = "far fa-check-circle"; icon2 = icon1;
icon1 = "far fa-check-circle fa-fw";
classes = "text-color-green"; classes = "text-color-green";
} else if (typeof sortedPackages[i].value.distance != 'undefined' && sortedPackages[i].value.distance * 1 < getStorage("alertradius") * 1) { } else if (typeof sortedPackages[i].value.distance != 'undefined' && sortedPackages[i].value.distance * 1 < getStorage("alertradius") * 1) {
classes = "text-color-deeporange"; classes = "text-color-deeporange";
} }
$("#addresslist").append( $("#addresslist ul").append(
'<li class="swipeout package-list-item" data-packageid="' + item.id + '" data-coordid=' + sortedPackages[i].value.id + '>' '<li class="package-list-item accordion-item" data-packageid="' + item.id + '" data-coordid=' + sortedPackages[i].value.id + '>'
+ '<div class="item-content swipeout-content ' + classes + '" data-packageid="' + item.id + '" data-latitude="' + sortedPackages[i].value.coords[0] + '" data-longitude="' + sortedPackages[i].value.coords[1] + '">' + '<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-media ' + classes + '">'
+ ' <i class="icon ' + icon + '"></i>'
+ ' </div>'
+ ' <div class="item-inner">' + ' <div class="item-inner">'
+ ' <div class="item-title">' + ' <div class="item-title">'
+ ' <i class="' + icon1 + '"></i>'
+ ' ' + item.address + ' ' + item.address
+ ' </div>' + ' </div>'
+ ' <div class="item-footer">' + ' <div class="item-footer">'
+ ' <i class="' + icon2 + '"></i>'
+ ' <span class="distance">' + (typeof sortedPackages[i].value.distance != 'undefined' ? getDisplayDistance(sortedPackages[i].value.distance) : '...') + '</span>' + ' <span class="distance">' + (typeof sortedPackages[i].value.distance != 'undefined' ? getDisplayDistance(sortedPackages[i].value.distance) : '...') + '</span>'
+ ' </div>' + ' </div>'
+ ' </div>' + ' </div>'
+ '</div>' + '</div>'
+ '<div class="swipeout-actions-left">' + '<div class="accordion-item-content">'
+ ' <a href="#" class="color-green deliver-btn" data-packageid="' + item.id + '">' + (delivered ? "<i class='fas fa-undo'></i>&nbsp; Undeliver" : "<i class='fas fa-check'></i>&nbsp; Deliver") + '</a>' + ' <div class="row padding-horizontal">'
+ ' <a href="geo:' + sortedPackages[i].value.coords[0] + ',' + sortedPackages[i].value.coords[1] + '" class="color-blue directions-btn"><i class="material-icons">directions</i></a>' + ' <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>'
+ '</div>' + ' <a href="geo:' + sortedPackages[i].value.coords[0] + ',' + sortedPackages[i].value.coords[1] + '" class="col directions-btn button button-outline"><i class="fas fa-directions"></i> Directions</a>'
+ '<div class="swipeout-actions-right">' + ' <a href="#" class="col delete-btn color-red button button-outline"><i class="fas fa-trash"></i> Delete</a>'
+ ' <a href="#" class="swipeout-delete"><i class="material-icons">delete</i>&nbsp; Delete</a>' + ' </div>'
+ ' </div>'
+ '</div>' + '</div>'
+ '</li>' + '</li>'
); );
// $("#addresslist").append(
// '<li class="swipeout package-list-item" data-packageid="' + item.id + '" data-coordid=' + sortedPackages[i].value.id + '>'
// + '<div class="item-content swipeout-content ' + classes + '" data-packageid="' + item.id + '" data-latitude="' + sortedPackages[i].value.coords[0] + '" data-longitude="' + sortedPackages[i].value.coords[1] + '">'
// + ' <div class="item-media ' + classes + '">'
// + ' <i class="icon ' + icon + '"></i>'
// + ' </div>'
// + ' <div class="item-inner">'
// + ' <div class="item-title">'
// + ' ' + item.address
// + ' </div>'
// + ' <div class="item-footer">'
// + ' <span class="distance">' + (typeof sortedPackages[i].value.distance != 'undefined' ? getDisplayDistance(sortedPackages[i].value.distance) : '...') + '</span>'
// + ' </div>'
// + ' </div>'
// + '</div>'
// + '<div class="swipeout-actions-left">'
// + ' <a href="#" class="color-green deliver-btn" data-packageid="' + item.id + '">' + (delivered ? "<i class='fas fa-undo'></i>&nbsp; Undeliver" : "<i class='fas fa-check'></i>&nbsp; Deliver") + '</a>'
// + ' <a href="geo:' + sortedPackages[i].value.coords[0] + ',' + sortedPackages[i].value.coords[1] + '" class="color-blue directions-btn"><i class="material-icons">directions</i></a>'
// + '</div>'
// + '<div class="swipeout-actions-right">'
// + ' <a href="#" class="swipeout-delete"><i class="material-icons">delete</i>&nbsp; Delete</a>'
// + '</div>'
// + '</li>'
// );
} }
} }

11
www/pages/help/list.html
Unescape Escape View File

@ -20,14 +20,11 @@
<div class="page-content"> <div class="page-content">
<div class="block-title">Manage Items</div> <div class="block-title">Manage Items</div>
<div class="block"> <div class="block">
Swipe <i class="fas fa-arrow-right"></i> left-to-right on a list entry Tap or click on a list entry
to show the actions you can take. to show the actions you can take.
These actions are marking the item as delivered/undelivered, or These actions are marking the item as delivered/undelivered,
navigating to its location with your device's default maps app. navigating to its location with your device's default maps app,
<br /> and deleting the item.
Swipe <i class="fas fa-arrow-left"></i> right-to-left on a list entry
and tap
<span class="button button-small display-inline button-fill color-red text-color-white"><i class="material-icons">delete</i> Delete</span> to remove it.
</div> </div>
<div class="block-title">Clear the List</div> <div class="block-title">Clear the List</div>

8
www/pages/list.html
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save