Fix point updating in the database

This commit is contained in:
Eugene Burmakin 2025-01-19 17:14:09 +01:00
parent f85fd9e4d0
commit 94e08d56e1

View file

@ -9,9 +9,8 @@ export function createMarkersArray(markersData, userSettings, apiKey) {
} else { } else {
return markersData.map((marker, index) => { return markersData.map((marker, index) => {
const [lat, lon] = marker; const [lat, lon] = marker;
const pointId = marker[2]; const pointId = marker[6]; // ID is at index 6
const popupContent = createPopupContent(marker, userSettings.timezone, userSettings.distanceUnit); const markerColor = marker[5] < 0 ? "orange" : "blue";
let markerColor = marker[5] < 0 ? "orange" : "blue";
return L.marker([lat, lon], { return L.marker([lat, lon], {
icon: L.divIcon({ icon: L.divIcon({
@ -26,10 +25,10 @@ export function createMarkersArray(markersData, userSettings, apiKey) {
pointId: pointId, pointId: pointId,
originalLat: lat, originalLat: lat,
originalLng: lon, originalLng: lon,
markerData: marker, // Store the complete marker data
renderer: renderer renderer: renderer
}).bindPopup(popupContent) }).bindPopup(createPopupContent(marker, userSettings.timezone, userSettings.distanceUnit))
.on('dragstart', function(e) { .on('dragstart', function(e) {
console.log('Drag started', { index: this.options.pointIndex });
this.closePopup(); this.closePopup();
}) })
.on('drag', function(e) { .on('drag', function(e) {
@ -38,13 +37,6 @@ export function createMarkersArray(markersData, userSettings, apiKey) {
const pointIndex = e.target.options.pointIndex; const pointIndex = e.target.options.pointIndex;
const originalLat = e.target.options.originalLat; const originalLat = e.target.options.originalLat;
const originalLng = e.target.options.originalLng; const originalLng = e.target.options.originalLng;
console.log('Dragging point', {
pointIndex,
newPosition: newLatLng,
originalPosition: { lat: originalLat, lng: originalLng }
});
// Find polylines by iterating through all map layers // Find polylines by iterating through all map layers
map.eachLayer((layer) => { map.eachLayer((layer) => {
// Check if this is a LayerGroup containing polylines // Check if this is a LayerGroup containing polylines
@ -60,10 +52,6 @@ export function createMarkersArray(markersData, userSettings, apiKey) {
// Check and update start point // Check and update start point
if (Math.abs(coords[0].lat - originalLat) < tolerance && if (Math.abs(coords[0].lat - originalLat) < tolerance &&
Math.abs(coords[0].lng - originalLng) < tolerance) { Math.abs(coords[0].lng - originalLng) < tolerance) {
console.log('Updating start point of segment', {
from: coords[0],
to: newLatLng
});
coords[0] = newLatLng; coords[0] = newLatLng;
updated = true; updated = true;
} }
@ -71,10 +59,6 @@ export function createMarkersArray(markersData, userSettings, apiKey) {
// Check and update end point // Check and update end point
if (Math.abs(coords[1].lat - originalLat) < tolerance && if (Math.abs(coords[1].lat - originalLat) < tolerance &&
Math.abs(coords[1].lng - originalLng) < tolerance) { Math.abs(coords[1].lng - originalLng) < tolerance) {
console.log('Updating end point of segment', {
from: coords[1],
to: newLatLng
});
coords[1] = newLatLng; coords[1] = newLatLng;
updated = true; updated = true;
} }
@ -96,19 +80,11 @@ export function createMarkersArray(markersData, userSettings, apiKey) {
e.target.options.originalLng = newLatLng.lng; e.target.options.originalLng = newLatLng.lng;
}) })
.on('dragend', function(e) { .on('dragend', function(e) {
console.log('Drag ended', {
finalPosition: e.target.getLatLng(),
pointIndex: e.target.options.pointIndex
});
const newLatLng = e.target.getLatLng(); const newLatLng = e.target.getLatLng();
const pointId = e.target.options.pointId; const pointId = e.target.options.pointId;
const pointIndex = e.target.options.pointIndex; const pointIndex = e.target.options.pointIndex;
const originalMarkerData = e.target.options.markerData;
// Update the marker's position
this.setLatLng(newLatLng);
this.openPopup();
// Send API request to update point position
fetch(`/api/v1/points/${pointId}`, { fetch(`/api/v1/points/${pointId}`, {
method: 'PATCH', method: 'PATCH',
headers: { headers: {
@ -118,68 +94,56 @@ export function createMarkersArray(markersData, userSettings, apiKey) {
}, },
body: JSON.stringify({ body: JSON.stringify({
point: { point: {
latitude: newLatLng.lat, latitude: newLatLng.lat.toString(),
longitude: newLatLng.lng longitude: newLatLng.lng.toString()
} }
}) })
}) })
.then(response => { .then(response => {
if (!response.ok) { if (!response.ok) {
throw new Error('Failed to update point position'); throw new Error(`HTTP error! status: ${response.status}`);
} }
return response.json(); return response.json();
}) })
.then(data => { .then(data => {
// Update the markers array in the controller
const map = e.target._map; const map = e.target._map;
const mapsController = map.mapsController; if (map && map.mapsController && map.mapsController.markers) {
if (mapsController && mapsController.markers) { const markers = map.mapsController.markers;
mapsController.markers[pointIndex][0] = newLatLng.lat; if (markers[pointIndex]) {
mapsController.markers[pointIndex][1] = newLatLng.lng; markers[pointIndex][0] = parseFloat(data.latitude);
markers[pointIndex][1] = parseFloat(data.longitude);
// Store current polylines visibility state
const wasPolyLayerVisible = map.hasLayer(mapsController.polylinesLayer);
// Remove old polylines layer
if (mapsController.polylinesLayer) {
map.removeLayer(mapsController.polylinesLayer);
}
// Create new polylines layer with updated coordinates
mapsController.polylinesLayer = createPolylinesLayer(
mapsController.markers,
map,
mapsController.timezone,
mapsController.routeOpacity,
mapsController.userSettings,
mapsController.distanceUnit
);
// Restore polylines visibility if it was visible before
if (wasPolyLayerVisible) {
mapsController.polylinesLayer.addTo(map);
} }
} }
// Update popup content with new data // Create updated marker data array
const updatedPopupContent = createPopupContent( const updatedMarkerData = [
[ parseFloat(data.latitude),
data.latitude, parseFloat(data.longitude),
data.longitude, originalMarkerData[2], // battery
data.id, originalMarkerData[3], // altitude
data.altitude, originalMarkerData[4], // timestamp
data.timestamp, originalMarkerData[5], // velocity
data.velocity || 0 data.id, // id
], originalMarkerData[7] // country
userSettings.timezone, ];
userSettings.distanceUnit
); // Update the marker's stored data
this.setPopupContent(updatedPopupContent); e.target.options.markerData = updatedMarkerData;
// Update the popup content
if (this._popup) {
const updatedPopupContent = createPopupContent(
updatedMarkerData,
userSettings.timezone,
userSettings.distanceUnit
);
this.setPopupContent(updatedPopupContent);
}
}) })
.catch(error => { .catch(error => {
console.error('Error updating point position:', error); console.error('Error updating point:', error);
// Revert the marker position on error this.setLatLng([e.target.options.originalLat, e.target.options.originalLng]);
this.setLatLng([lat, lon]); alert('Failed to update point position. Please try again.');
}); });
}); });
}); });