Combine packages for single lat/lng/address (#3)

www/assets/js/list.js

@@ -109,40 +109,43 @@ function loadPackageList(sortType) {
     }
 
     for (var i = 0; i < sortedPackages.length; i++) {
-        var icon = "fas fa-box-open";
+        for (var j = 0; j < sortedPackages[i].value.items.length; j++) {
-        var classes = "";
+            var item = sortedPackages[i].value.items[j];
-        var delivered = false;
+            var icon = "fas fa-box-open";
-        if (sortedPackages[i].value.delivered == true) {
+            var classes = "";
-            delivered = true;
+            var delivered = false;
-            icon = "fas fa-check";
+            if (item.delivered) {
-            classes = "text-color-green";
+                delivered = true;
-        } else if (typeof sortedPackages[i].value.distance != 'undefined' && sortedPackages[i].value.distance * 1 < localStorage.getItem("alertradius") * 1) {
+                icon = "fas fa-check";
-            classes = "text-color-deeporange";
+                classes = "text-color-green";
+            } else if (typeof sortedPackages[i].value.distance != 'undefined' && sortedPackages[i].value.distance * 1 < localStorage.getItem("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">'
+                    + '    <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="fas fa-route"></i>&nbsp; Directions</a>'
+                    + '</div>'
+                    + '<div class="swipeout-actions-right">'
+                    + '  <a href="#" class="swipeout-delete"><i class="fas fa-trash"></i>&nbsp; Delete</a>'
+                    + '</div>'
+                    + '</li>'
+                    );
         }
-        $("#addresslist").append(
-                '<li class="swipeout package-list-item" data-packageid="' + sortedPackages[i].index + '">'
-                + '<div class="item-content swipeout-content ' + classes + '" data-packageid="' + sortedPackages[i].index + '" data-latitude="' + sortedPackages[i].value.coords[0] + '" data-longitude="' + sortedPackages[i].value.coords[1] + '">'
-                + '  <div class="item-media">'
-                + '    <i class="icon ' + icon + '"></i>'
-                + '  </div>'
-                + '  <div class="item-inner">'
-                + '    <div class="item-title">'
-                + '       ' + sortedPackages[i].value.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="' + sortedPackages[i].index + '">' + (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="fas fa-route"></i>&nbsp; Directions</a>'
-                + '</div>'
-                + '<div class="swipeout-actions-right">'
-                + '  <a href="#" class="swipeout-delete"><i class="fas fa-trash"></i>&nbsp; Delete</a>'
-                + '</div>'
-                + '</li>'
-                );
     }
 }
 

www/assets/js/location.js

@@ -53,8 +53,8 @@ if ("geolocation" in navigator) {
                         if (packages[i].lastAlert > currentTimestamp - alertinterval) {
                             continue;
                         }
-
+                        
-                        if (packages[i].delivered) {
+                        if (getUndeliveredCount(packages[i]) == 0) {
                             continue;
                         }
 

www/assets/js/main.js

@@ -37,6 +37,18 @@ function restartApplication() {
     window.location = "index.html";
 }
 
+/**
+ * Generate a UUID.
+ * From https://stackoverflow.com/a/2117523
+ * @returns {String}
+ */
+function uuidv4() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    });
+}
+
 
 router.on("pageInit", function (pagedata) {
     pagedata.$el.find('script').each(function (el) {

www/assets/js/manage.js

@@ -4,31 +4,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-
-function addPackage(address, latitude, longitude) {
-    packages.push({
-        "address": address,
-        "coords": [
-            latitude,
-            longitude
-        ]
-    });
-    localStorage.setItem("packages", JSON.stringify(packages));
-
-    playSound("ok");
-
-    app.toast.show({
-        text: 'Package Added!<br><span style="font-size: 80%;">' + address + "</span>",
-        position: "bottom",
-        destroyOnClose: true,
-        closeTimeout: 1000 * 3
-    });
-
-    if (map != null) {
-        reloadMap();
-    }
-}
-
 $("#addpackagebtn").click(function () {
     if ($("input[name=number]").val().trim() == "") {
         playSound("error");

www/assets/js/map.js

@@ -36,11 +36,16 @@ function reloadMap() {
 /**
  * Make the toggle button on the popup sheet do things
  */
-$("#app").on("click", "#package-info-sheet #package-info-toggle-status", function () {
+$("#app").on("click", "#package-info-sheet .package-info-toggle-status", function () {
-    var pid = $(this).data("packageid");
+    var pid = $(this).data("id");
     markDelivered(pid);
     map.updatePackageLayer(packages);
-    openPackageInfoSheet(packages[pid], true);
+    for (var i = 0; i < packages.length; i++) {
+        if (packages[i].id == $(this).data("coordid")) {
+            openPackageInfoSheet(packages[i], true);
+            return;
+        }
+    } 
 });
 
 $("#app").on("click", "#package-info-sheet #package-info-get-directions", function () {
@@ -51,18 +56,27 @@ function openPackageInfoSheet(package, refreshOnly) {
     if (typeof refreshOnly == "undefined") {
         refreshOnly = false;
     }
-    $("#package-info-toggle-status").data("packageid", packages.findIndex(function (p) {
+    
-        return p == package;
-    }));
-    $("#package-info-address").text(package.address);
     $("#package-info-get-directions").attr("href", "geo:" + package.coords[0] + "," + package.coords[1]);
-    if (package.delivered) {
+    $("#package-info-sheet-inner").html("");
-        $("#package-info-delivery-status").html('<span class="text-color-green"><i class="fas fa-check-circle"></i> Delivered</span>');
+
-        $("#package-info-toggle-status").text("Mark undelivered");
+    for (var i = 0; i < package.items.length; i++) {
-    } else {
+        $("#package-info-sheet-inner").append(''
-        $("#package-info-delivery-status").html('<i class="fas fa-circle"></i> Not delivered');
+                + '<div class="block margin-top-half">'
-        $("#package-info-toggle-status").text("Mark delivered");
+                + '  <div>'
+                + '    <span class="package-info-delivery-status">'
+                + '      ' +  + (package.items[i].delivered ? '<span class="text-color-green"><i class="fas fa-check-circle"></i> Delivered</span>' : '<i class="fas fa-circle"></i> Not delivered')
+                + '    </span>'
+                + '  </div>'
+                + '  <h3>'
+                + '    <span class="package-info-address">' + package.items[i].address + '</span>'
+                + '  </h3>'
+                + '  <div class="button button-fill margin-top" class="package-info-toggle-status" data-id="' + package.items[i].id + '" data-coordid=' + package.id + '>'
+                + '    ' + (package.items[i].delivered ? "Undeliver" : "Deliver")
+                + '  </div>'
+                + '</div>');
     }
+    
     if (!refreshOnly) {
         app.sheet.create({el: "#package-info-sheet"}).open();
     }

www/assets/js/map_leaflet.js

@@ -55,13 +55,11 @@ function leafletMap() {
     map.updatePackageLayer = function (data) {
         map.packagelayer.clearLayers();
 
-        data.forEach(function (package) {
+        for (var i = 0; i < data.length; i++) {
-
             var iconName = "box";
-
+            if (getUndeliveredCount(data[i]) == 0) {
-            if (package.delivered) {
                 iconName = "box-check";
-            } else if (package.distance * 1 < localStorage.getItem("alertradius") * 1) {
+            } else if (data[i].distance * 1 < localStorage.getItem("alertradius") * 1) {
                 iconName = "box-alert";
             }
 
@@ -73,18 +71,18 @@ function leafletMap() {
 
             var marker = L.marker(
                     [
-                        package.coords[0],
+                        data[i].coords[0],
-                        package.coords[1]
+                        data[i].coords[1]
                     ],
                     {
                         icon: icon
                     })
                     .on("click", function () {
-                        openPackageInfoSheet(package);
+                        openPackageInfoSheet(data[i]);
                     });
 
             map.packagelayer.addLayer(marker);
-        });
+        }
     }
 
     map.animateMapIn = function (latitude, longitude, zoom, heading) {

www/assets/js/packages.js

@@ -10,18 +10,89 @@ if (localStorage.getItem("packages") != null) {
     packages = JSON.parse(localStorage.getItem("packages"));
 }
 
-function markDelivered(id, delivered) {
+/**
-    if (typeof delivered == 'undefined') {
+ * Count how many items are still undelivered for an address.
-        if (typeof packages[id].delivered == "undefined" || packages[id].delivered == false) {
+ * @param {type} address An item in the packages array.
-            delivered = true;
+ * @returns {Number}
-        } else {
+ */
-            delivered = false;
+function getUndeliveredCount(address) {
+    var undelivered = 0;
+    for (var i = 0; i < address.items.length; j++) {
+        if (!address.items[i].delivered) {
+            undelivered++;
+        }
+    }
+    return undelivered;
+}
+
+function addPackage(address, latitude, longitude) {
+    var added = false;
+    for (var i = 0; i < packages.length; i++) {
+        if (packages[i].coords == [latitude, longitude] && packages[i].address == address) {
+            packages[i].items.push({
+                address: address,
+                delivered: false,
+                type: "package",
+                id: uuidv4()
+            });
+            added = true;
+            break;
         }
     }
-    if (delivered) {
+    if (!added) {
-        packages[id].deliverytimestamp = Date.now();
+        packages.push({
+            coords: [
+                latitude,
+                longitude
+            ],
+            id: uuidv4(),
+            address: address,
+            items: [
+                {
+                    address: address,
+                    delivered: false,
+                    type: "package",
+                    id: uuidv4()
+                }
+            ]
+        });
     }
-    packages[id].delivered = delivered;
+    localStorage.setItem("packages", JSON.stringify(packages));
+
+    playSound("ok");
+
+    app.toast.show({
+        text: 'Package Added!<br><span style="font-size: 80%;">' + address + "</span>",
+        position: "bottom",
+        destroyOnClose: true,
+        closeTimeout: 1000 * 3
+    });
+
+    if (map != null) {
+        reloadMap();
+    }
+}
+
+function markDelivered(id, delivered) {
+    for (var i = 0; i < packages.length; i++) {
+        for (var j = 0; j < packages[i].items.length; j++) {
+            if (packages[i].items[j].id == id) {
+                if (typeof delivered == 'undefined') {
+                    if (typeof packages[id].delivered == "undefined" || packages[id].delivered == false) {
+                        delivered = true;
+                    } else {
+                        delivered = false;
+                    }
+                }
+
+                packages[i].items[j].delivered = delivered;
+                if (delivered) {
+                    packages[i].items[j].deliverytimestamp = Date.now();
+                }
+            }
+        }
+    }
+
     localStorage.setItem("packages", JSON.stringify(packages));
 }
 
@@ -40,16 +111,30 @@ function confirmDeletePackage(id) {
 }
 
 function deletePackage(id) {
-    packages.splice(id, 1);
+    for (var i = 0; i < packages.length; i++) {
-    localStorage.setItem("packages", JSON.stringify(packages));
+        for (var j = 0; j < packages[i].items.length; j++) {
-    loadPackageList();
+            if (packages[i].items[j].id == id) {
+                packages[i].items.splice(j, 1);
+
+                if (packages[i].items.length == 0) {
+                    packages.splice(i, 1);
+                }
+
+                localStorage.setItem("packages", JSON.stringify(packages));
+                loadPackageList();
+                return;
+            }
+        }
+    }
 }
 
 function countRemainingPackages() {
     var undelivered = 0;
     for (var i = 0; i < packages.length; i++) {
-        if (packages[i].delivered != true) {
+        for (var j = 0; j < packages[i].items.length; j++) {
-            undelivered++;
+            if (packages[i].items[j].delivered != true) {
+                undelivered++;
+            }
         }
     }
     return undelivered;

www/pages/map.html

@@ -38,7 +38,7 @@
                 <div class="right"><a class="link sheet-close" href="#">Done</a></div>
             </div>
         </div>
-        <div class="sheet-modal-inner">
+        <div class="sheet-modal-inner" id="package-info-sheet-inner">
             <div class="block margin-top-half">
                 <div>
                     <span id="package-info-delivery-status"></span>