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

www/assets/js/list.js

@@ -130,6 +130,53 @@ function loadPackageList(sortType) {
         }
     }
 
+    itemTemplateAccordion = '<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>';
+
+    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,
@@ -143,29 +190,7 @@ function loadPackageList(sortType) {
             }
             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>'
+        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",