Rename Polylines to Routes in the interface

This commit is contained in:
Eugene Burmakin 2025-01-13 22:05:25 +01:00
parent cebc4950e6
commit 4fc8992f73
4 changed files with 20 additions and 24 deletions

View file

@ -28,7 +28,7 @@ class Api::V1::SettingsController < ApiController
:time_threshold_minutes, :merge_threshold_minutes, :route_opacity, :time_threshold_minutes, :merge_threshold_minutes, :route_opacity,
:preferred_map_layer, :points_rendering_mode, :live_map_enabled, :preferred_map_layer, :points_rendering_mode, :live_map_enabled,
:immich_url, :immich_api_key, :photoprism_url, :photoprism_api_key, :immich_url, :immich_api_key, :photoprism_url, :photoprism_api_key,
:speed_colored_polylines :speed_colored_routes
) )
end end
end end

View file

@ -65,7 +65,7 @@ export default class extends Controller {
this.pointsRenderingMode = this.userSettings.points_rendering_mode || "raw"; this.pointsRenderingMode = this.userSettings.points_rendering_mode || "raw";
this.liveMapEnabled = this.userSettings.live_map_enabled || false; this.liveMapEnabled = this.userSettings.live_map_enabled || false;
this.countryCodesMap = countryCodesMap(); 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]; this.center = this.markers[this.markers.length - 1] || [52.514568, 13.350111];
@ -96,7 +96,7 @@ export default class extends Controller {
const controlsLayer = { const controlsLayer = {
Points: this.markersLayer, Points: this.markersLayer,
Polylines: this.polylinesLayer, Routes: this.polylinesLayer,
Heatmap: this.heatmapLayer, Heatmap: this.heatmapLayer,
"Fog of War": this.fogOverlay, "Fog of War": this.fogOverlay,
"Scratch map": this.scratchLayer, "Scratch map": this.scratchLayer,
@ -476,7 +476,7 @@ export default class extends Controller {
this.map.removeControl(this.layerControl); this.map.removeControl(this.layerControl);
const controlsLayer = { const controlsLayer = {
Points: this.markersLayer, Points: this.markersLayer,
Polylines: this.polylinesLayer, Routes: this.polylinesLayer,
Heatmap: this.heatmapLayer, Heatmap: this.heatmapLayer,
"Fog of War": this.fogOverlay, "Fog of War": this.fogOverlay,
"Scratch map": this.scratchLayer, "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)} /> <input type="checkbox" id="live_map_enabled" name="live_map_enabled" class='w-4' style="width: 20px;" value="false" ${this.liveMapEnabledChecked(true)} />
</label> </label>
<label for="speed_colored_polylines"> <label for="speed_colored_routes">
Speed-colored routes Speed-colored routes
<label for="speed_colored_polylines_info" class="btn-xs join-item inline">?</label> <label for="speed_colored_routes_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()} /> <input type="checkbox" id="speed_colored_routes" name="speed_colored_routes" class='w-4' style="width: 20px;" ${this.speedColoredRoutesChecked()} />
</label> </label>
<button type="submit">Update</button> <button type="submit">Update</button>
@ -760,8 +760,8 @@ export default class extends Controller {
} }
} }
speedColoredPolylinesChecked() { speedColoredRoutesChecked() {
return this.userSettings.speed_colored_polylines ? 'checked' : ''; return this.userSettings.speed_colored_routes ? 'checked' : '';
} }
updateSettings(event) { updateSettings(event) {
@ -781,7 +781,7 @@ export default class extends Controller {
merge_threshold_minutes: event.target.merge_threshold_minutes.value, merge_threshold_minutes: event.target.merge_threshold_minutes.value,
points_rendering_mode: event.target.points_rendering_mode.value, points_rendering_mode: event.target.points_rendering_mode.value,
live_map_enabled: event.target.live_map_enabled.checked, 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) 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 // Show loading indicator
const loadingDiv = document.createElement('div'); const loadingDiv = document.createElement('div');
loadingDiv.className = 'map-loading-overlay'; loadingDiv.className = 'map-loading-overlay';
@ -826,12 +822,12 @@ export default class extends Controller {
// Debounce the heavy operations // Debounce the heavy operations
const updateLayers = debounce(() => { const updateLayers = debounce(() => {
try { try {
// Check if speed_colored_polylines setting has changed // Check if speed_colored_routes setting has changed
if (newSettings.speed_colored_polylines !== this.userSettings.speed_colored_polylines) { if (newSettings.speed_colored_routes !== this.userSettings.speed_colored_routes) {
if (this.polylinesLayer) { if (this.polylinesLayer) {
updatePolylinesColors( updatePolylinesColors(
this.polylinesLayer, this.polylinesLayer,
newSettings.speed_colored_polylines newSettings.speed_colored_routes
); );
} }
} }
@ -853,7 +849,7 @@ export default class extends Controller {
this.map.removeControl(this.layerControl); this.map.removeControl(this.layerControl);
const controlsLayer = { const controlsLayer = {
Points: this.markersLayer, Points: this.markersLayer,
Polylines: this.polylinesLayer, Routes: this.polylinesLayer,
Heatmap: this.heatmapLayer, Heatmap: this.heatmapLayer,
"Fog of War": this.fogOverlay, "Fog of War": this.fogOverlay,
"Scratch map": this.scratchLayer, "Scratch map": this.scratchLayer,
@ -893,7 +889,7 @@ export default class extends Controller {
getLayerName(layer) { getLayerName(layer) {
const controlLayers = { const controlLayers = {
Points: this.markersLayer, Points: this.markersLayer,
Polylines: this.polylinesLayer, Routes: this.polylinesLayer,
Heatmap: this.heatmapLayer, Heatmap: this.heatmapLayer,
"Fog of War": this.fogOverlay, "Fog of War": this.fogOverlay,
Areas: this.areasLayer, Areas: this.areasLayer,
@ -917,7 +913,7 @@ export default class extends Controller {
const layerControl = { const layerControl = {
Points: this.markersLayer, Points: this.markersLayer,
Polylines: this.polylinesLayer, Routes: this.polylinesLayer,
Heatmap: this.heatmapLayer, Heatmap: this.heatmapLayer,
"Fog of War": this.fogOverlay, "Fog of War": this.fogOverlay,
Areas: this.areasLayer, Areas: this.areasLayer,

View file

@ -209,7 +209,7 @@ export function addHighlightOnHover(polylineGroup, map, polylineCoordinates, use
}; };
// Only change color to yellow if speed colors are disabled // Only change color to yellow if speed colors are disabled
if (!userSettings.speed_colored_polylines) { if (!userSettings.speed_colored_routes) {
highlightStyle.color = '#ffff00'; highlightStyle.color = '#ffff00';
} }
@ -299,7 +299,7 @@ export function createPolylinesLayer(markers, map, timezone, routeOpacity, userS
for (let i = 0; i < polylineCoordinates.length - 1; i++) { for (let i = 0; i < polylineCoordinates.length - 1; i++) {
const speed = calculateSpeed(polylineCoordinates[i], polylineCoordinates[i + 1]); 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( const segment = L.polyline(
[ [

View file

@ -113,7 +113,7 @@
<label class="modal-backdrop" for="points_rendering_mode_info">Close</label> <label class="modal-backdrop" for="points_rendering_mode_info">Close</label>
</div> </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 focus:z-99" role="dialog">
<div class="modal-box"> <div class="modal-box">
<h3 class="text-lg font-bold">Speed-colored routes</h3> <h3 class="text-lg font-bold">Speed-colored routes</h3>
@ -139,5 +139,5 @@
</code> </code>
</p> </p>
</div> </div>
<label class="modal-backdrop" for="speed_colored_polylines_info">Close</label> <label class="modal-backdrop" for="speed_colored_routes_info">Close</label>
</div> </div>