Add list style setting, re-add swipe list option (close #52)

www/assets/js/list.js

@@ -130,21 +130,7 @@ function loadPackageList(sortType) {
         }
     }
 
-    itemVirtualList = app.virtualList.create({
+    itemTemplateAccordion = '<li class="package-list-item accordion-item" data-packageid="{{id}}" data-coordid="{{coordid}}">'
-        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">'
@@ -165,7 +151,46 @@ function loadPackageList(sortType) {
             + '  </div>'
             + '  </div>'
             + '</div>'
-                + '</li>'
+            + '</li>';
+
+    itemTemplateSwipe = '<li class="swipeout package-list-item" data-packageid="{{id}}" data-coordid="{{coordid}}">'
+            + '<div class="item-content swipeout-content {{classes}}" data-packageid="{{id}}" data-latitude="{{latitude}}" data-longitude="{{longitude}}">'
+            + '  <div class="item-media {{classes}}">'
+            + '    <i class="icon {{icon1}}"></i>'
+            + '  </div>'
+            + '  <div class="item-inner">'
+            + '    <div class="item-title">'
+            + '       {{address}}'
+            + '    </div>'
+            + '    <div class="item-footer">'
+            + '      <span class="distance">{{distance}}</span>'
+            + '    </div>'
+            + '  </div>'
+            + '</div>'
+            + '<div class="swipeout-actions-left">'
+            + '  <a href="#" class="color-green deliver-btn" data-packageid="{{id}}">{{#if delivered}}<i class="fas fa-undo"></i> &nbsp; Undeliver{{else}}<i class="fas fa-check"></i>&nbsp; Deliver{{/if}}</a>'
+            + '  <a href="{{geolink}}" class="color-blue directions-btn"><i class="material-icons">directions</i></a>'
+            + '</div>'
+            + '<div class="swipeout-actions-right">'
+            + '  <a href="#" class="color-red delete-btn"><i class="material-icons">delete</i>&nbsp; Delete</a>'
+            + '</div>'
+            + '</li>';
+
+
+    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: (getStorage("liststyle") == "swipe" ? itemTemplateSwipe : itemTemplateAccordion)
     });
 
     // If there was a search open when the reload was triggered

www/assets/js/settings.js

@@ -49,6 +49,10 @@ $('.item-link[data-setting=apptheme] select').on("change", function () {
     applyColorTheme();
 });
 
+$('.item-link[data-setting=liststyle] select').on("change", function () {
+    setStorage("liststyle", $('.item-link[data-setting=liststyle] select').val());
+});
+
 $('.item-link[data-setting=animation] select').on("change", function () {
     setStorage("animation", $('.item-link[data-setting=animation] select').val());
 

www/routes.js

@@ -755,6 +755,23 @@ var routes = [
                                 }
                             ]
                         },
+                        {
+                            setting: "liststyle",
+                            title: "List Style",
+                            select: true,
+                            options: [
+                                {
+                                    value: "accordion",
+                                    label: "Accordion",
+                                    selected: getStorage("liststyle") == null || getStorage("liststyle") == "accordion"
+                                },
+                                {
+                                    value: "swipe",
+                                    label: "Swipe",
+                                    selected: getStorage("liststyle") == "swipe"
+                                }
+                            ]
+                        },
                         {
                             setting: "animation",
                             title: "Animations",