refactor(map-engine): Mustache popup templates, CSS classes, feed name in multi-feed popups

package.json

@@ -26,14 +26,16 @@
     ],
     "dependencies": {
         "@fortawesome/fontawesome-free": "^5.15.3",
+        "@types/mustache": "^4.2.6",
         "@wordpress/dataviews": "^14.0.0",
         "beautifymarker": "^1.0.9",
         "leaflet": "^1.9.4",
         "leaflet-easybutton": "^2.4.0",
         "leaflet-gpx": "^2.2.0",
         "leaflet-textpath": "^1.3.0",
         "leaflet-tilelayer-swiss": "^2.2.1",
-        "leaflet.fullscreen": "^5.3.1"
+        "leaflet.fullscreen": "^5.3.1",
+        "mustache": "^4.2.0"
     },
     "devDependencies": {
         "@jest/globals": "^29.7.0",

src/map-engine/MarkerManager.ts

@@ -1,5 +1,7 @@
+import Mustache from 'mustache';
 import type { SpotPoint, SpotmapLayers } from './types';
 import { debug as debugLog } from './utils';
+import { POPUP_TEMPLATE, buildView } from './popup-templates';
 import {
     CIRCLE_DOT_ICON_SIZE,
     CIRCLE_DOT_ICON_ANCHOR,
@@ -28,19 +30,22 @@ export class MarkerManager {
     private readonly iconCache = new Map< string, L.Icon >();
     private readonly abortController = new AbortController();
     private readonly dbg: ( ...args: unknown[] ) => void;
+    private readonly feedCount: number;
 
     constructor(
         map: L.Map,
         layers: SpotmapLayers,
         layerManager: LayerManager,
         canvasRenderer: L.Renderer,
-        debugEnabled = false
+        debugEnabled = false,
+        feedCount = 1
     ) {
         this.canvasRenderer = canvasRenderer;
         this.map = map;
         this.layers = layers;
         this.layerManager = layerManager;
         this.dbg = ( ...args ) => debugLog( debugEnabled, ...args );
+        this.feedCount = feedCount;
 
         const { signal } = this.abortController;
         document.addEventListener(
@@ -88,7 +93,7 @@ export class MarkerManager {
         }
 
         const iconShape = this.getIconShape( point );
-        const popupHtml = MarkerManager.getPopupHtml( point );
+        const popupHtml = MarkerManager.getPopupHtml( point, this.feedCount );
         const popupOptions: L.PopupOptions = {
             autoPan: false,
             maxWidth: 280,
@@ -359,65 +364,7 @@ export class MarkerManager {
         this.markerById.clear();
     }
 
-    /**
-     * Generate the popup HTML for a point.
-     */
-    private static popupImageHtml( src: string ): string {
-        return `<img src="${ src }" style="display:block;width:100%;max-height:180px;object-fit:cover;margin-bottom:4px;" loading="lazy" alt="" /><br>`;
-    }
-
-    static getPopupHtml( entry: SpotPoint ): string {
-        if ( entry.type === 'POST' ) {
-            let html = '';
-            if ( entry.image_url ) {
-                html += MarkerManager.popupImageHtml( entry.image_url );
-            }
-            const title = entry.message ?? 'Post';
-            if ( entry.url ) {
-                html += `<b><a href="${ entry.url }" target="_blank" rel="noopener noreferrer">${ title }</a></b><br>`;
-            } else {
-                html += `<b>${ title }</b><br>`;
-            }
-            if ( entry.excerpt ) {
-                html += `<span style="font-size:0.9em">${ entry.excerpt }</span><br>`;
-            }
-            html += `<span style="font-size:0.85em;color:#888">${ entry.date }</span>`;
-            return html;
-        }
-
-        let html = `<b>${ entry.type }</b><br>`;
-        html += `Time: ${ entry.time }<br>Date: ${ entry.date }<br>`;
-
-        if (
-            entry.local_timezone &&
-            ! (
-                entry.localdate === entry.date && entry.localtime === entry.time
-            )
-        ) {
-            html += `Local Time: ${ entry.localtime }<br>Local Date: ${ entry.localdate }<br>`;
-        }
-
-        if ( entry.message && entry.type === 'MEDIA' ) {
-            html += MarkerManager.popupImageHtml( entry.message );
-        } else if ( entry.message ) {
-            html += `${ entry.message }<br>`;
-        }
-
-        if ( entry.altitude > 0 ) {
-            html += `Altitude: ${ Number( entry.altitude ) }m<br>`;
-        }
-
-        if ( entry.battery_status === 'LOW' ) {
-            html += `Battery status is low!<br>`;
-        }
-
-        if ( entry.hiddenPoints ) {
-            const { count, radius } = entry.hiddenPoints;
-            const radiusNote =
-                radius > 0 ? ` within a radius of ${ radius } meters` : '';
-            html += `There are ${ count } hidden points${ radiusNote }<br>`;
-        }
-
-        return html;
+    static getPopupHtml( entry: SpotPoint, feedCount = 1 ): string {
+        return Mustache.render( POPUP_TEMPLATE, buildView( entry, feedCount ) );
     }
 }

src/map-engine/Spotmap.ts

@@ -226,7 +226,8 @@ export class Spotmap {
             this.layers,
             this.layerManager,
             canvasRenderer,
-            dbg
+            dbg,
+            this.options.feeds.length
         );
         this.lineManager = new LineManager(
             this.layers,

src/map-engine/__tests__/MarkerManager.test.ts

@@ -1,3 +1,11 @@
+import {
+    describe,
+    it,
+    expect,
+    jest,
+    beforeEach,
+    afterEach,
+} from '@jest/globals';
 import { MarkerManager } from '../MarkerManager';
 import type { SpotPoint } from '../types';
 
@@ -46,18 +54,7 @@ describe( 'MarkerManager.getPopupHtml', () => {
         expect( html ).not.toContain( '<img' );
     } );
 
-    it( 'shows image tag for MEDIA type', () => {
-        const html = MarkerManager.getPopupHtml(
-            makePoint( {
-                type: 'MEDIA',
-                message: 'https://example.com/photo.jpg',
-            } )
-        );
-        expect( html ).toContain( '<img' );
-        expect( html ).toContain( 'https://example.com/photo.jpg' );
-    } );
-
-    it( 'shows battery warning when status is LOW', () => {
+it( 'shows battery warning when status is LOW', () => {
         const html = MarkerManager.getPopupHtml(
             makePoint( { battery_status: 'LOW' } )
         );
@@ -112,4 +109,72 @@ describe( 'MarkerManager.getPopupHtml', () => {
         );
         expect( html ).not.toContain( 'Local Time' );
     } );
+
+    it( 'shows feed name inline when feedCount > 1', () => {
+        const html = MarkerManager.getPopupHtml(
+            makePoint( { type: 'OK', feed_name: 'Tracker A' } ),
+            2
+        );
+        expect( html ).toContain( 'OK — Tracker A' );
+    } );
+
+    it( 'omits feed name when feedCount is 1', () => {
+        const html = MarkerManager.getPopupHtml(
+            makePoint( { type: 'OK', feed_name: 'Tracker A' } )
+        );
+        expect( html ).toContain( '<b>OK</b>' );
+        expect( html ).not.toContain( 'Tracker A' );
+    } );
+} );
+
+describe( 'MarkerManager instance', () => {
+    beforeEach( () => {
+        const mockMarker = {
+            bindPopup: jest.fn().mockReturnThis(),
+            on: jest.fn().mockReturnThis(),
+        };
+        ( global as Record< string, unknown > ).L = {
+            BeautifyIcon: { icon: jest.fn().mockReturnValue( {} ) },
+            marker: jest.fn().mockReturnValue( mockMarker ),
+        };
+        ( global as Record< string, unknown > ).spotmapjsobj = { marker: {} };
+    } );
+
+    afterEach( () => {
+        delete ( global as Record< string, unknown > ).L;
+        delete ( global as Record< string, unknown > ).spotmapjsobj;
+    } );
+
+    it( 'passes feedCount through to getPopupHtml via addPoint', () => {
+        const mockFeed = {
+            points: [] as SpotPoint[],
+            markers: [] as unknown[],
+            featureGroup: { addLayer: jest.fn() },
+        };
+        // Use `as never` so TypeScript accepts plain objects as mock arguments.
+        const manager = new MarkerManager(
+            {} as never,
+            { feeds: { test: mockFeed } } as never,
+            { getFeedColor: jest.fn().mockReturnValue( 'blue' ) } as never,
+            {} as never,
+            false,
+            2
+        );
+
+        const point = makePoint( { type: 'OK', feed_name: 'test' } );
+        manager.addPoint( point );
+
+        // The marker was created and added to the feed
+        expect( mockFeed.points ).toContain( point );
+        // getPopupHtml was called with feedCount=2, so feed name appears in popup
+        const markerMock = ( global as Record< string, unknown > ).L as {
+            marker: jest.Mock;
+        };
+        const bindPopupCall = (
+            markerMock.marker.mock.results[ 0 ].value as {
+                bindPopup: jest.Mock;
+            }
+        ).bindPopup.mock.calls[ 0 ][ 0 ] as string;
+        expect( bindPopupCall ).toContain( 'OK' );
+    } );
 } );