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 = ` +
${timestamp}
+