Fix filtered direct links and CSS caching, add misc icons to InfoWind…

…ow (#103) * Fix filtered direct links * Add misc icons to InfoWindow, various ESLint fixes, webpack CSS cache fix * RELEASE: 3.8.4
supercharge-info · Jan 26, 2024 · f7d05a6 · f7d05a6
1 parent 0a2c9f7
commit f7d05a6
Show file tree

Hide file tree

Showing 12 changed files with 104 additions and 50 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "supercharge.info",
-  "version": "3.8.3",
+  "version": "3.8.4",
   "description": "map",
   "scripts": {
     "build": "echo use 'npm run prodbuild' or 'npm run devbuild'",

diff --git a/src/main/primary_entry/css/page/map/MapView.css b/src/main/primary_entry/css/page/map/MapView.css
@@ -93,7 +93,7 @@ Markers
     background-color: rgba(128, 0, 0, 0.9);
     color: yellow; 
     padding: 1px 5px;
-    margin: 0 -5px;
+    margin: 1px -5px;
 }
 .tooltip.open { background-color: rgba(240, 0, 0, 0.95); }
 .tooltip.construction { background-color: rgba(240, 144, 0, 0.95); }
@@ -141,31 +141,33 @@ Info Window
 
 .info-window-content .open {
     color: red;
-    font-weight: bold
+    font-weight: bold;
 }
 
 .info-window-content .construction {
     color: orange;
-    font-weight: bold
+    font-weight: bold;
 }
 
 .info-window-content .permit {
     color: #0000ff;
-    font-weight: bold
+    font-weight: bold;
 }
 
 .info-window-content .closed-temp {
     color: gray;
-    font-weight: bold
+    font-weight: bold;
 }
 
 .info-window-content .closed-perm {
     color: black;
-    font-weight: bold
+    font-weight: bold;
 }
 
 .info-window-content img {
     width: 16px;
+}
+.info-window-content img.status {
     margin-top: -4px;
 }
 

diff --git a/src/main/primary_entry/script/common/UserConfig.js b/src/main/primary_entry/script/common/UserConfig.js
@@ -157,6 +157,17 @@ class UserConfig {
         return Units.fromString(this.unit);
     }
 
+    isAnyFilterSet() {
+        return this.filter.changeType !== null
+            || this.filter.regionId !== null
+            || this.filter.countryId !== null
+            || this.filter.state.length > 0
+            || this.filter.status.length> 0
+            || this.filter.stalls !== null
+            || this.filter.power !== null
+            || this.filter.otherEVs !== null;
+    }
+
     // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
     // load/save
     // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

diff --git a/src/main/primary_entry/script/page/changes/ChangesView.js b/src/main/primary_entry/script/page/changes/ChangesView.js
@@ -69,7 +69,7 @@ export default class ChangesView {
         const site = Sites.getById(changeRow.siteId);
         if (Objects.isNullOrUndef(site) || Objects.isNullOrUndef(site.address)) return changeRow.siteName;
         var hoverText = '';
-        if (site.address.street)  hoverText += site.address.street
+        if (site.address.street)  hoverText += site.address.street;
         if (site.address.city)    hoverText += ' • ' + site.address.city;
         if (site.address.state)   hoverText += ' • ' + site.address.state;
         if (site.address.country) hoverText += ' • ' + site.address.country;
@@ -294,10 +294,10 @@ export default class ChangesView {
                 clearInterval(window.changesInterval);
                 window.changesInterval = setInterval(() => {
                     // Asynchronously initialize tooltips, starting from both ends of the table and working toward the middle
-                    for (var i = 0; i < 40 && window.changesIcons.length > 0; i++) {
+                    for (var i1 = 0; i1 < 40 && window.changesIcons.length > 0; i1++) {
                         window.changesIcons.shift().tooltip({ "container": "body" });
                     }
-                    for (var i = 0; i < 10 && window.changesIcons.length > 0; i++) {
+                    for (var i2 = 0; i2 < 10 && window.changesIcons.length > 0; i2++) {
                         window.changesIcons.pop().tooltip({ "container": "body" });
                     }
                     if (window.changesIcons.length === 0) {

diff --git a/src/main/primary_entry/script/page/data/DataView.js b/src/main/primary_entry/script/page/data/DataView.js
@@ -191,10 +191,10 @@ export default class DataView {
                 clearInterval(window.dataInterval);
                 window.dataInterval = setInterval(() => {
                     // Asynchronously initialize tooltips, starting from both ends of the table and working toward the middle
-                    for (var i = 0; i < 40 && window.dataIcons.length > 0; i++) {
+                    for (var i1 = 0; i1 < 40 && window.dataIcons.length > 0; i1++) {
                         window.dataIcons.shift().tooltip({ "container": "body" });
                     }
-                    for (var i = 0; i < 10 && window.dataIcons.length > 0; i++) {
+                    for (var i2 = 0; i2 < 10 && window.dataIcons.length > 0; i2++) {
                         window.dataIcons.pop().tooltip({ "container": "body" });
                     }
                     if (window.dataIcons.length === 0) {

diff --git a/src/main/primary_entry/script/page/map/FilterControlView.js b/src/main/primary_entry/script/page/map/FilterControlView.js
@@ -7,16 +7,16 @@ import $ from "jquery";
 export default class FilterControlView {
 
     constructor(filterDialog) {
-        EventBus.addListener("control-visible-model-changed-event", this.handleVisibilityModelChange, this);
-
         this.filterControl = new SiteFilterControl(
             $("#control-row-filter"),
             this.filterControlCallback.bind(this),
             filterDialog
         );
 
+        EventBus.addListener("control-visible-model-changed-event", this.handleVisibilityModelChange, this);
+        EventBus.addListener("reset-filters", this.filterControl.handleFilterReset, this.filterControl);
         filterDialog.dialog.on("hidden.bs.modal", () => { EventBus.dispatch("viewport-changed-event"); });
-    
+
         this.syncFilters();
     }
 
@@ -35,6 +35,7 @@ export default class FilterControlView {
         userConfig.setPower(this.filterControl.getPower());
         userConfig.setOtherEVs(this.filterControl.getOtherEVs());
         this.filterControl.updateVisibility();
+        EventBus.dispatch("unpin-sites-event");
         EventBus.dispatch("remove-all-markers-event");
         EventBus.dispatch("viewport-changed-event");
     }

diff --git a/src/main/primary_entry/script/page/map/MapPage.js b/src/main/primary_entry/script/page/map/MapPage.js
@@ -29,7 +29,7 @@ export default class MapPage {
 
     /**
      * Note that part of the map page initialization takes place asynchronously (after user acknowledges or blocks
-     * geolocation prompt). We use MapPage.initStarted, MapPage.initViewStarted, MapView.initComplete.
+     * geolocation prompt). We use MapPage.initStarted, MapPage.initViewStarted, MapPage.initComplete, MapPage.initViewComplete.
      */
     onPageShow() {
         if (!MapPage.initStarted) {
@@ -49,6 +49,7 @@ export default class MapPage {
         new RenderControlView();
         new RangeControlView();
         new RoutingPanel();
+        EventBus.addListener("map-viewport-change-event", this.setInitViewComplete, this);
 
         const initSite = QueryStrings.isSiteIdSet() ? Sites.getById(QueryStrings.getSiteId()) : null;
 
@@ -59,7 +60,6 @@ export default class MapPage {
         }
         /* CASE 2: User has explicitly specified a valid site ID */
         else if (initSite !== null) {
-            // TODO: if specified site would be filtered out, either clear user filters, or skip entirely and/or show error message
             console.log(`initializing map with site ${initSite.id} (${initSite.location.lat},${initSite.location.lng})`);
             this.initializeAt(initSite.location.lat, initSite.location.lng);
             EventBus.dispatch("map-show-location-event", QueryStrings.getSiteId());
@@ -148,4 +148,8 @@ export default class MapPage {
         MapPage.initComplete = true;
     }
 
+    setInitViewComplete() {
+        MapPage.initViewComplete = true;
+    }
+
 }
diff --git a/src/main/primary_entry/script/page/map/MapView.js b/src/main/primary_entry/script/page/map/MapView.js
@@ -21,7 +21,7 @@ import TotalCountPanel from "../../nav/TotalCountPanel";
 export default class MapView {
 
     constructor(lat, lng, initialZoom) {
-        this.searchMarker = null;
+        this.pinnedSites = [];
 
         this.initMap(lat, lng, initialZoom);
         this.zoom = initialZoom;
@@ -47,12 +47,13 @@ export default class MapView {
         new MapContextMenu(this.mapApi);
         EventBus.addListener("way-back-trigger-event", this.setupForWayBack, this);
         EventBus.addListener("way-back-cleanup-event", this.cleanupWayBack, this);
-        EventBus.addListener("places-changed-event", this.handlePlacesChange, this);
         EventBus.addListener(RouteEvents.result_model_changed, this.handleRouteResult, this);
         EventBus.addListener("viewport-changed-event", this.handleViewportChange, this);
         EventBus.addListener("markersize-changed-event", this.updateMarkerSize, this);
         EventBus.addListener("remove-all-markers-event", this.removeAllMarkers, this);
         EventBus.addListener("zoom-to-site-event", this.handleZoomToSite, this);
+        EventBus.addListener("pin-site-event", this.pinSite, this);
+        EventBus.addListener("unpin-sites-event", this.unpinSites, this);
 
         this.mapApi.on('moveend', $.proxy(this.handleViewportChange, this));
 
@@ -279,6 +280,17 @@ export default class MapView {
 
     getMarkerSizeByZoom = (zoom) => zoom < 4 ? 4 : zoom > 16 ? 10 : Math.ceil(zoom / 2) + 2;
 
+    pinSite(event, supercharger) {
+        if (supercharger.marker === null || supercharger.marker === undefined) {
+            if (this.pinnedSites.indexOf(supercharger) < 0) this.pinnedSites.push(supercharger);
+            this.markerFactory.createMarker(supercharger, this.markerSize, false);
+        }
+    }
+
+    unpinSites() {
+        this.pinnedSites = [];
+    }
+
     createIndividualMarkers(bounds, newMarkerSize) {
         var t = performance.now(), created = 0, infoWindows = [];
         if (this.markerSize !== newMarkerSize) {
@@ -294,6 +306,12 @@ export default class MapView {
                 markers.push(this.markerFactory.createMarker(supercharger, newMarkerSize, true));
                 created++;
             });
+        this.pinnedSites.forEach((supercharger) => {
+            if (supercharger.marker === null || supercharger.marker === undefined) {
+                markers.push(this.markerFactory.createMarker(supercharger, newMarkerSize, true));
+                created++;
+            }
+        });
         mapLayers.addGroupToOverlay(markers);
         this.restoreInfoWindows(infoWindows);
         console.log(`zoom=${this.zoom} created=${created} markers=${newMarkerSize} t=${(performance.now() - t)}`);
@@ -341,6 +359,13 @@ export default class MapView {
                 }
             });
 
+        this.pinnedSites.forEach((supercharger) => {
+            if (supercharger.marker === null || supercharger.marker === undefined) {
+                markers.push(this.markerFactory.createMarker(supercharger, this.markerSize, true));
+                created++;
+            }
+        });
+
         mapLayers.addGroupToOverlay(markers);
         this.restoreInfoWindows(infoWindows);
         console.log(`zoom=${newZoom} created=${created} clusters=${renderModel.getCurrentClusterSize()} t=${(performance.now() - t)}`);

diff --git a/src/main/primary_entry/script/page/map/action/ShowSiteAction.js b/src/main/primary_entry/script/page/map/action/ShowSiteAction.js
@@ -4,7 +4,6 @@ import $ from "jquery";
 import MapPage from "../../map/MapPage";
 import Sites from "../../../site/Sites";
 
-
 /**
  * Show a location on the map page. Even if the map is not the current page.
  *
@@ -32,30 +31,34 @@ export default class ShowSiteAction {
          * thing which may not be initialized yet.
          */
         $.doTimeout(250, () => {
-            if (MapPage.initComplete) {
-
-                EventBus.dispatch(MapEvents.pan_zoom, { latLng: supercharger.location, zoom: 10 });
-
-                /* Now the map is initialized, but the selected marker may not be because we initialize markers
-                 * in response to viewport changes on the map. */
-                $.doTimeout(75, () => {
-                    if (supercharger && supercharger.marker) {
-                        if (!supercharger.marker.infoWindow || !supercharger.marker.infoWindow.isShown()) {
-                            // Do not remove popup if it exists
-                            supercharger.marker.fire('click');
-                        }
-                        return false;
-                    }
-                    else if (performance.now() - t < 10000) {
-                        // If we return true here the inner doTimeout will try again in 75ms
-                        return true;
-                    }
-                });
-                return false;
-            } else {
+            if (!MapPage.initComplete) {
                 // If we return true here the outer doTimeout will try again in 250ms
                 return true;
             }
+
+            EventBus.dispatch(MapEvents.pan_zoom, { latLng: supercharger.location, zoom: 10 });
+
+            /* Now the map is initialized, but the selected marker may not be because we initialize markers
+             * in response to viewport changes on the map. */
+            $.doTimeout(75, () => {
+                if (!MapPage.initViewComplete && performance.now() - t < 10000) {
+                    // If we return true here the inner doTimeout will try again in 75ms
+                    return true;
+                }
+                if (supercharger && supercharger.marker) {
+                    if (!supercharger.marker.infoWindow || !supercharger.marker.infoWindow.isShown()) {
+                        // Do not remove popup if it exists
+                        supercharger.marker.fire('click');
+                    }
+                }
+                else if (supercharger) {
+                    // If there's no marker, create it (essentially bypassing/overriding any filters) and try again in 75ms
+                    EventBus.dispatch("pin-site-event", supercharger);
+                    return true;
+                }
+                return false;
+            });
+            return false;
         });
     }
 

diff --git a/src/main/primary_entry/script/page/map/infowindow/InfoWindow.js b/src/main/primary_entry/script/page/map/infowindow/InfoWindow.js
@@ -172,14 +172,20 @@ export default class InfoWindow {
             }
 
             //
-            // Construction/Permit/Closed/Limited Hours
+            // Status, other attributes, limited hours
             //
-            popupContent += ` • <span class='${site.status.className}'><img src='${site.status.getIcon(site)}' title='${site.status.getTitle(site)}'/> `;
-            popupContent += `${site.isOpen() ? Math.floor((Date.now() - new Date(site.dateOpened)) / 86400000): site.statusDays} days`;
+            popupContent += ` • <span class='${site.status.className}'><img class="status" src='${site.status.getIcon(site)}' title='${site.status.getTitle(site)}'/> `;
+            popupContent += `${site.isOpen() ? Math.floor((Date.now() - new Date(site.dateOpened)) / 86400000): site.statusDays} day${site.statusDays == 1 ? "" : "s"}</span>`;
+
+            if (site.otherEVs || site.solarCanopy || site.battery) popupContent += ' • ';
+            if (site.otherEVs)     popupContent += '<img title="other EVs OK" src="/images/car-electric.svg"/>';
+            if (site.solarCanopy)  popupContent += '<img title="solar canopy" src="/images/solar-power-variant.svg"/>';
+            if (site.battery)      popupContent += '<img title="battery backup" src="/images/battery-charging.svg"/>';
+
             if (Objects.isNotNullOrUndef(site.hours)) {
                 popupContent += `<div class="limited">${site.formatHours()}</div>`; 
             }
-            popupContent += "</span></div>";
+            popupContent += "</div>";
         }
 
         popupContent += "<hr/>";

diff --git a/webpack.config.js b/webpack.config.js
@@ -176,8 +176,11 @@ module.exports = (env) => {
                     {from: 'src/main/common_entry/sitemap.xml'}
                 ]
             }),
-            //new ESLintPlugin(),
-            new MiniCssExtractPlugin()
+            new ESLintPlugin(),
+            new MiniCssExtractPlugin({
+                filename: "[name].[contenthash].css",
+                chunkFilename: "[id].[contenthash].css"
+            })
         ]
     }
     if (env.WEBPACK_SERVE) {