Show popup with timestamp when new point is added

.app_version

@@ -1 +1 @@
-0.15.13
+0.16.0

CHANGELOG.md

@@ -5,6 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+# 0.16.0 - 2024-11-03
+
+## The Websockets release
+
+### Added
+
+- New notifications are now being indicated with a blue-ish dot in the top right corner of the screen. Clicking on the bell icon will show you all your notifications.
+- New points on the map will now be shown in real-time. No need to reload the map to see new points.
+
 # 0.15.13 - 2024-11-01
 
 ### Added

app/javascript/controllers/maps_controller.js

@@ -12,6 +12,7 @@ import { fetchAndDrawAreas } from "../maps/areas";
 import { handleAreaCreated } from "../maps/areas";
 
 import { showFlashMessage } from "../maps/helpers";
+import { formatDate } from "../maps/helpers";
 
 import { osmMapLayer } from "../maps/layers";
 import { osmHotMapLayer } from "../maps/layers";
@@ -150,6 +151,9 @@ export default class extends Controller {
   setupSubscription() {
     consumer.subscriptions.create("PointsChannel", {
       received: (data) => {
+        // TODO:
+        // Only append the point if its timestamp is within current
+        // timespan
         this.appendPoint(data);
       }
     });
@@ -157,7 +161,6 @@ export default class extends Controller {
 
   appendPoint(data) {
     // Parse the received point data
-    console.log(data)
     const newPoint = data;
 
     // Add the new point to the markers array
@@ -205,9 +208,35 @@ export default class extends Controller {
         this.map.removeLayer(layer);
       }
     });
+
     this.addLastMarker(this.map, this.markers);
+
+    this.openNewMarkerPopup(newPoint);
   }
 
+  openNewMarkerPopup(point) {
+    // Create a temporary marker just for displaying the timestamp
+    const timestamp = formatDate(point[4], this.timezone);
+
+    const tempMarker = L.marker([point[0], point[1]]);
+    const popupContent = `
+      <div>
+        <p><strong>${timestamp}</strong></p>
+      </div>
+    `;
+
+    tempMarker
+      .bindPopup(popupContent)
+      .addTo(this.map)
+      .openPopup();
+
+      // Remove the temporary marker after 5 seconds
+    setTimeout(() => {
+      this.map.removeLayer(tempMarker);
+    }, 300);
+  }
+
+
   createMarker(point, options) {
     const marker = L.marker([point[0], point[1]]);