From 31ecedb851d846d51c5a2e879c192a36789e9270 Mon Sep 17 00:00:00 2001 From: Eugene Burmakin Date: Thu, 7 Nov 2024 13:30:58 +0100 Subject: [PATCH] Enable subscription only when Live Mode is enabled --- CHANGELOG.md | 2 ++ app/javascript/channels/imports_channel.js | 2 +- .../channels/notifications_channel.js | 2 +- .../controllers/imports_controller.js | 20 +++++++++---------- app/javascript/controllers/maps_controller.js | 13 +++++++----- .../controllers/notifications_controller.js | 14 ++++++------- 6 files changed, 29 insertions(+), 24 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 54c78efe..61e618b6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/). - 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. +- User can now enable or disable Live Mode in the map controls. When Live Mode is enabled, the map will automatically scroll to the new points as they are being added to the map. +- Scale on the map now shows the distance both in kilometers and miles. # 0.15.13 - 2024-11-01 diff --git a/app/javascript/channels/imports_channel.js b/app/javascript/channels/imports_channel.js index 45749452..fc4157a6 100644 --- a/app/javascript/channels/imports_channel.js +++ b/app/javascript/channels/imports_channel.js @@ -2,7 +2,7 @@ import consumer from "./consumer" consumer.subscriptions.create("ImportsChannel", { connected() { - console.log("Connected to the imports channel!"); + // console.log("Connected to the imports channel!"); }, disconnected() { diff --git a/app/javascript/channels/notifications_channel.js b/app/javascript/channels/notifications_channel.js index 49875762..d462f498 100644 --- a/app/javascript/channels/notifications_channel.js +++ b/app/javascript/channels/notifications_channel.js @@ -2,7 +2,7 @@ import consumer from "./consumer" consumer.subscriptions.create("NotificationsChannel", { connected() { - console.log("Connected to the notifications channel!"); + // console.log("Connected to the notifications channel!"); }, disconnected() { diff --git a/app/javascript/controllers/imports_controller.js b/app/javascript/controllers/imports_controller.js index f6259a03..b4817c23 100644 --- a/app/javascript/controllers/imports_controller.js +++ b/app/javascript/controllers/imports_controller.js @@ -10,31 +10,31 @@ export default class extends Controller { return } - console.log("Imports controller connected", { - hasIndexTarget: this.hasIndexTarget, - element: this.element, - userId: this.element.dataset.userId - }); + // console.log("Imports controller connected", { + // hasIndexTarget: this.hasIndexTarget, + // element: this.element, + // userId: this.element.dataset.userId + // }); this.setupSubscription(); } setupSubscription() { const userId = this.element.dataset.userId; - console.log("Setting up subscription with userId:", userId); + // console.log("Setting up subscription with userId:", userId); this.channel = consumer.subscriptions.create( { channel: "ImportsChannel" }, { connected: () => { - console.log("Successfully connected to ImportsChannel"); + // console.log("Successfully connected to ImportsChannel"); // Test that we can receive messages - console.log("Subscription object:", this.channel); + // console.log("Subscription object:", this.channel); }, disconnected: () => { - console.log("Disconnected from ImportsChannel"); + // console.log("Disconnected from ImportsChannel"); }, received: (data) => { - console.log("Received data:", data); + // console.log("Received data:", data); const row = this.element.querySelector(`tr[data-import-id="${data.import.id}"]`); if (row) { diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js index 404d8f69..24b0dfba 100644 --- a/app/javascript/controllers/maps_controller.js +++ b/app/javascript/controllers/maps_controller.js @@ -12,7 +12,6 @@ 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"; @@ -44,7 +43,7 @@ export default class extends Controller { this.routeOpacity = parseFloat(this.userSettings.route_opacity) || 0.6; this.distanceUnit = this.element.dataset.distance_unit || "km"; this.pointsRenderingMode = this.userSettings.points_rendering_mode || "raw"; - this.liveMapEnabled = this.userSettings.liveMapEnabled || false; + this.liveMapEnabled = this.userSettings.live_map_enabled || false; this.countryCodesMap = countryCodesMap(); this.center = this.markers[this.markers.length - 1] || [52.514568, 13.350111]; @@ -85,7 +84,7 @@ export default class extends Controller { .scale({ position: "bottomright", metric: true, - imperial: false, + imperial: true, maxWidth: 120, }) .addTo(this.map); @@ -142,7 +141,9 @@ export default class extends Controller { } }); - this.setupSubscription(); // Add this line + if (this.liveMapEnabled) { + this.setupSubscription(); + } } disconnect() { @@ -155,7 +156,9 @@ export default class extends Controller { // TODO: // Only append the point if its timestamp is within current // timespan - this.appendPoint(data); + if (this.map && this.map._loaded) { + this.appendPoint(data); + } } }); } diff --git a/app/javascript/controllers/notifications_controller.js b/app/javascript/controllers/notifications_controller.js index 6463c90c..ccdfbed4 100644 --- a/app/javascript/controllers/notifications_controller.js +++ b/app/javascript/controllers/notifications_controller.js @@ -10,11 +10,11 @@ export default class extends Controller { } connect() { - console.log("[Stimulus] Notifications controller connecting...") + // console.log("[Stimulus] Notifications controller connecting...") // Clean up any existing subscription if (this.subscription) { - console.log("[Stimulus] Cleaning up existing subscription") + // console.log("[Stimulus] Cleaning up existing subscription") this.subscription.unsubscribe() this.subscription = null } @@ -24,7 +24,7 @@ export default class extends Controller { } disconnect() { - console.log("[Stimulus] Notifications controller disconnecting...") + // console.log("[Stimulus] Notifications controller disconnecting...") if (this.subscription) { this.subscription.unsubscribe() this.subscription = null @@ -32,16 +32,16 @@ export default class extends Controller { } createSubscription() { - console.log("[Stimulus] Creating new notification subscription") + // console.log("[Stimulus] Creating new notification subscription") this.subscription = consumer.subscriptions.create("NotificationsChannel", { connected: () => { - console.log("[WebSocket] Connected to NotificationsChannel") + // console.log("[WebSocket] Connected to NotificationsChannel") }, disconnected: () => { - console.log("[WebSocket] Disconnected from NotificationsChannel") + // console.log("[WebSocket] Disconnected from NotificationsChannel") }, received: (data) => { - console.log("[WebSocket] Received notification:", data) + // console.log("[WebSocket] Received notification:", data) this.animateBadge() } })