Convert package list to use accordions instead of swipes

www/assets/js/list.js

@@ -15,9 +15,10 @@ $(".view-main").on("click", "#addresslist .package-list-item .directions-btn", f
     window.open($(this).attr("href"), "_system");
 });
 
-$(".view-main").on("swipeout:delete", "#addresslist .package-list-item", function () {
-    console.log("Info", "Deleting package", $(this).data("packageid"));
-    deletePackage($(this).data("packageid"));
+$(".view-main").on("click", "#addresslist .package-list-item .delete-btn", function () {
+    var id = $(this).parents(".package-list-item").data("packageid");
+    console.log("Info", "Deleting package", id);
+    deletePackage(id);
 });
 
 // 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) {
         $("#no-packages-display").removeClass("display-none");
@@ -103,40 +104,66 @@ function loadPackageList(sortType) {
     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];
-            var icon = getIconForType(item.type);
+            var icon1 = getIconForType(item.type);
+            var icon2 = "";
             var classes = "";
             var delivered = false;
             if (item.delivered) {
                 delivered = true;
-                icon = "far fa-check-circle";
+                icon2 = icon1;
+                icon1 = "far fa-check-circle fa-fw";
                 classes = "text-color-green";
             } else if (typeof sortedPackages[i].value.distance != 'undefined' && sortedPackages[i].value.distance * 1 < getStorage("alertradius") * 1) {
                 classes = "text-color-deeporange";
             }
-            $("#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>'
+            $("#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="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 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 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>'
                     );
+//            $("#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>'
+//                    );
         }
     }
 

www/pages/help/list.html

@@ -20,14 +20,11 @@
             <div class="page-content">
                 <div class="block-title">Manage Items</div>
                 <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.
-                    These actions are marking the item as delivered/undelivered, or
-                    navigating to its location with your device's default maps app.
-                    <br />
-                    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.
+                    These actions are marking the item as delivered/undelivered,
+                    navigating to its location with your device's default maps app,
+                    and deleting the item.
                 </div>
 
                 <div class="block-title">Clear the List</div>

www/pages/list.html

@@ -51,9 +51,11 @@
             <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>
-        <ul class="list no-hairlines tablet-inset no-margin-top" id="addresslist">
-            <!-- Packages go here -->
-        </ul>
+        <div class="list no-hairlines tablet-inset no-margin-top accordion-list" id="addresslist">
+            <ul>
+                <!-- Packages go here -->
+            </ul>
+        </div>
 
     </div>