Fix bug where selected icon loses highlight after alert sound, add alert class to icons

www/assets/css/app.css

@@ -50,7 +50,12 @@ Framework7 and FontAwesome both have a .fab class
 }
 
 #mapbox .package-marker.selected {
-    border: 4px solid #2196f3;
+    border: 4px solid #2196F3;
+    border-radius: 50%;
+}
+
+#mapbox .package-marker.alerted {
+    border: 4px solid #FF9800;
     border-radius: 50%;
 }
 

www/assets/js/map.js

@@ -77,6 +77,7 @@ $("#app").on("click", "#package-info-sheet #package-info-sheet-inner .list ul li
 });
 
 $("#app").on("sheet:close", "#package-info-sheet", function () {
+    map.openedPanelIconID = null;
     $(".package-marker").removeClass("selected");
 });
 
@@ -96,6 +97,7 @@ $("#app").on("click", "#package-info-sheet #package-info-deliver-all", function
 });
 
 function openPackageInfoSheet(coordid, refreshOnly) {
+    map.openedPanelIconID = coordid;
     if (typeof refreshOnly == "undefined") {
         refreshOnly = false;
     }

www/assets/js/map_leaflet.js

@@ -64,6 +64,8 @@ function leafletMap() {
         });
     }
 
+    map.openedPanelIconID = null;
+
     map.updatePackageLayer = function (data) {
         map.packagelayer.clearLayers();
 
@@ -77,10 +79,21 @@ function leafletMap() {
                 var iconName = getMapIconForItems(datai.items);
                 //console.log(iconName);
 
+                var classes = "package-marker package-marker-leaflet";
+                
+                // Prevent selection highlight from going away after map refresh
+                if (map.openedPanelIconID != null && map.openedPanelIconID == datai.id) {
+                    classes += " selected";
+                }
+                // Show different color highlight when nearby
+                if (packages[i].distance * 1 < getStorage("alertradius") * 1) {
+                    classes += " alerted";
+                }
                 var icon = L.icon({
                     iconUrl: "assets/images/" + iconName + ".png",
                     iconSize: [25, 25],
-                    iconAnchor: [12.5, 12.5]
+                    iconAnchor: [12.5, 12.5],
+                    className: classes
                 });
 
                 var marker = L.marker(
@@ -93,12 +106,11 @@ function leafletMap() {
                         })
                         .on("click", function () {
                             marker._icon.id = "marker-" + datai.id;
-                            marker._icon.classList.add('package-marker');
-                            marker._icon.classList.add('package-marker-leaflet');
                             openPackageInfoSheet(datai.id);
                         });
 
                 map.packagelayer.addLayer(marker);
+
                 //L.DomUtil.addClass(marker._icon, 'package-marker'); // enable selected CSS to work correctly
             })(data[i]);
         }

www/assets/js/map_mapbox.js

@@ -84,6 +84,8 @@ function mapboxMap() {
         });
     }
 
+    map.openedPanelIconID = null;
+
     map.updatePackageLayer = function (data) {
         var oldmarkers = document.getElementsByClassName("package-marker");
         if (oldmarkers.length > 0) {
@@ -102,7 +104,16 @@ function mapboxMap() {
                 //console.log(iconName);
 
                 var el = document.createElement("div");
+
                 el.className = "package-marker package-marker-mapbox";
+                // Prevent selection highlight from going away after map refresh
+                if (map.openedPanelIconID != null && map.openedPanelIconID == datai.id) {
+                    el.className += " selected";
+                }
+                // Show different color highlight when nearby
+                if (packages[i].distance * 1 < getStorage("alertradius") * 1) {
+                    el.className += " alerted";
+                }
 
                 el.id = "marker-" + datai.id;