From 4fc8992f731cba83a4295082e0c2fc40ebf6d0ab Mon Sep 17 00:00:00 2001
From: Eugene Burmakin <iamfrey@gmail.com>
Date: Mon, 13 Jan 2025 22:05:25 +0100
Subject: [PATCH] Rename Polylines to Routes in the interface

---
 app/controllers/api/v1/settings_controller.rb |  2 +-
 app/javascript/controllers/maps_controller.js | 34 ++++++++-----------
 app/javascript/maps/polylines.js              |  4 +--
 app/views/map/_settings_modals.html.erb       |  4 +--
 4 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/app/controllers/api/v1/settings_controller.rb b/app/controllers/api/v1/settings_controller.rb
index b15bad16..316c201e 100644
--- a/app/controllers/api/v1/settings_controller.rb
+++ b/app/controllers/api/v1/settings_controller.rb
@@ -28,7 +28,7 @@ class Api::V1::SettingsController < ApiController
       :time_threshold_minutes, :merge_threshold_minutes, :route_opacity,
       :preferred_map_layer, :points_rendering_mode, :live_map_enabled,
       :immich_url, :immich_api_key, :photoprism_url, :photoprism_api_key,
-      :speed_colored_polylines
+      :speed_colored_routes
     )
   end
 end
diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js
index 7a12d565..fa2ef5e1 100644
--- a/app/javascript/controllers/maps_controller.js
+++ b/app/javascript/controllers/maps_controller.js
@@ -65,7 +65,7 @@ export default class extends Controller {
     this.pointsRenderingMode = this.userSettings.points_rendering_mode || "raw";
     this.liveMapEnabled = this.userSettings.live_map_enabled || false;
     this.countryCodesMap = countryCodesMap();
-    this.speedColoredPolylines = this.userSettings.speed_colored_polylines || false;
+    this.speedColoredPolylines = this.userSettings.speed_colored_routes || false;
 
     this.center = this.markers[this.markers.length - 1] || [52.514568, 13.350111];
 
@@ -96,7 +96,7 @@ export default class extends Controller {
 
     const controlsLayer = {
       Points: this.markersLayer,
-      Polylines: this.polylinesLayer,
+      Routes: this.polylinesLayer,
       Heatmap: this.heatmapLayer,
       "Fog of War": this.fogOverlay,
       "Scratch map": this.scratchLayer,
@@ -476,7 +476,7 @@ export default class extends Controller {
         this.map.removeControl(this.layerControl);
         const controlsLayer = {
           Points: this.markersLayer,
-          Polylines: this.polylinesLayer,
+          Routes: this.polylinesLayer,
           Heatmap: this.heatmapLayer,
           "Fog of War": this.fogOverlay,
           "Scratch map": this.scratchLayer,
@@ -714,10 +714,10 @@ export default class extends Controller {
             <input type="checkbox" id="live_map_enabled" name="live_map_enabled" class='w-4' style="width: 20px;" value="false" ${this.liveMapEnabledChecked(true)} />
           </label>
 
-          <label for="speed_colored_polylines">
+          <label for="speed_colored_routes">
             Speed-colored routes
-            <label for="speed_colored_polylines_info" class="btn-xs join-item inline">?</label>
-            <input type="checkbox" id="speed_colored_polylines" name="speed_colored_polylines" class='w-4' style="width: 20px;" ${this.speedColoredPolylinesChecked()} />
+            <label for="speed_colored_routes_info" class="btn-xs join-item inline">?</label>
+            <input type="checkbox" id="speed_colored_routes" name="speed_colored_routes" class='w-4' style="width: 20px;" ${this.speedColoredRoutesChecked()} />
           </label>
 
           <button type="submit">Update</button>
@@ -760,8 +760,8 @@ export default class extends Controller {
     }
   }
 
-  speedColoredPolylinesChecked() {
-    return this.userSettings.speed_colored_polylines ? 'checked' : '';
+  speedColoredRoutesChecked() {
+    return this.userSettings.speed_colored_routes ? 'checked' : '';
   }
 
   updateSettings(event) {
@@ -781,7 +781,7 @@ export default class extends Controller {
           merge_threshold_minutes: event.target.merge_threshold_minutes.value,
           points_rendering_mode: event.target.points_rendering_mode.value,
           live_map_enabled: event.target.live_map_enabled.checked,
-          speed_colored_polylines: event.target.speed_colored_polylines.checked
+          speed_colored_routes: event.target.speed_colored_routes.checked
         },
       }),
     })
@@ -813,10 +813,6 @@ export default class extends Controller {
       isVisible: this.polylinesLayer && this.map.hasLayer(this.polylinesLayer)
     });
 
-    // Store current visibility state
-    const wasPolylinesVisible = this.polylinesLayer && this.map.hasLayer(this.polylinesLayer);
-    const currentLayerStates = this.getLayerControlStates();
-
     // Show loading indicator
     const loadingDiv = document.createElement('div');
     loadingDiv.className = 'map-loading-overlay';
@@ -826,12 +822,12 @@ export default class extends Controller {
     // Debounce the heavy operations
     const updateLayers = debounce(() => {
       try {
-        // Check if speed_colored_polylines setting has changed
-        if (newSettings.speed_colored_polylines !== this.userSettings.speed_colored_polylines) {
+        // Check if speed_colored_routes setting has changed
+        if (newSettings.speed_colored_routes !== this.userSettings.speed_colored_routes) {
           if (this.polylinesLayer) {
             updatePolylinesColors(
               this.polylinesLayer,
-              newSettings.speed_colored_polylines
+              newSettings.speed_colored_routes
             );
           }
         }
@@ -853,7 +849,7 @@ export default class extends Controller {
         this.map.removeControl(this.layerControl);
         const controlsLayer = {
           Points: this.markersLayer,
-          Polylines: this.polylinesLayer,
+          Routes: this.polylinesLayer,
           Heatmap: this.heatmapLayer,
           "Fog of War": this.fogOverlay,
           "Scratch map": this.scratchLayer,
@@ -893,7 +889,7 @@ export default class extends Controller {
   getLayerName(layer) {
     const controlLayers = {
       Points: this.markersLayer,
-      Polylines: this.polylinesLayer,
+      Routes: this.polylinesLayer,
       Heatmap: this.heatmapLayer,
       "Fog of War": this.fogOverlay,
       Areas: this.areasLayer,
@@ -917,7 +913,7 @@ export default class extends Controller {
 
     const layerControl = {
       Points: this.markersLayer,
-      Polylines: this.polylinesLayer,
+      Routes: this.polylinesLayer,
       Heatmap: this.heatmapLayer,
       "Fog of War": this.fogOverlay,
       Areas: this.areasLayer,
diff --git a/app/javascript/maps/polylines.js b/app/javascript/maps/polylines.js
index b2f1e94a..e78f0223 100644
--- a/app/javascript/maps/polylines.js
+++ b/app/javascript/maps/polylines.js
@@ -209,7 +209,7 @@ export function addHighlightOnHover(polylineGroup, map, polylineCoordinates, use
         };
 
         // Only change color to yellow if speed colors are disabled
-        if (!userSettings.speed_colored_polylines) {
+        if (!userSettings.speed_colored_routes) {
           highlightStyle.color = '#ffff00';
         }
 
@@ -299,7 +299,7 @@ export function createPolylinesLayer(markers, map, timezone, routeOpacity, userS
       for (let i = 0; i < polylineCoordinates.length - 1; i++) {
         const speed = calculateSpeed(polylineCoordinates[i], polylineCoordinates[i + 1]);
 
-        const color = getSpeedColor(speed, userSettings.speed_colored_polylines);
+        const color = getSpeedColor(speed, userSettings.speed_colored_routes);
 
         const segment = L.polyline(
           [
diff --git a/app/views/map/_settings_modals.html.erb b/app/views/map/_settings_modals.html.erb
index 5376a585..5a36b807 100644
--- a/app/views/map/_settings_modals.html.erb
+++ b/app/views/map/_settings_modals.html.erb
@@ -113,7 +113,7 @@
   <label class="modal-backdrop" for="points_rendering_mode_info">Close</label>
 </div>
 
-<input type="checkbox" id="speed_colored_polylines_info" class="modal-toggle" />
+<input type="checkbox" id="speed_colored_routes_info" class="modal-toggle" />
 <div class="modal focus:z-99" role="dialog">
   <div class="modal-box">
     <h3 class="text-lg font-bold">Speed-colored routes</h3>
@@ -139,5 +139,5 @@
       </code>
     </p>
   </div>
-  <label class="modal-backdrop" for="speed_colored_polylines_info">Close</label>
+  <label class="modal-backdrop" for="speed_colored_routes_info">Close</label>
 </div>