From d6c3a7ba03907fe574667d4a3cacd9caae377474 Mon Sep 17 00:00:00 2001
From: Eugene Burmakin <iamfrey@gmail.com>
Date: Sun, 3 Nov 2024 19:28:33 +0100
Subject: [PATCH] Show popup with timestamp when new point is added

---
 .app_version                                  |  2 +-
 CHANGELOG.md                                  |  9 ++++++
 app/javascript/controllers/maps_controller.js | 31 ++++++++++++++++++-
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/.app_version b/.app_version
index 18eaa035..04a373ef 100644
--- a/.app_version
+++ b/.app_version
@@ -1 +1 @@
-0.15.13
+0.16.0
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1fde85df..54c78efe 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js
index 6ca50260..99b72664 100644
--- a/app/javascript/controllers/maps_controller.js
+++ b/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]]);