feat: add My GPS button to asset detail GPS editor

Adds a '📍 My GPS' button to the GPS Map Editor card in the asset
detail screen that:
- Grabs device GPS via navigator.geolocation.getCurrentPosition
- Places map marker at current device position
- Auto-unlocks the GPS editor if locked, shows Save button
- Displays accuracy in status text
- Provides clear error messages for denied/timed-out/unavailable

Includes enableHighAccuracy: true, 15s timeout, 60s cache.
This commit is contained in:
2026-05-31 09:53:23 -04:00
parent 2a92c4e71b
commit 8713169e84
+64
View File
@@ -1303,6 +1303,7 @@
<div id="detailGpsInfo" style="font-size:12px;color:var(--text2);margin-bottom:6px;"></div>
<div id="detailGpsMap" style="height:300px;border-radius:8px;margin-bottom:8px;border:1px solid var(--border);"></div>
<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
<button id="detailGpsMyGpsBtn" class="btn btn-outline btn-sm" onclick="getCurrentGps()" title="Get device GPS coordinates"><svg class="gi" aria-hidden="true"><use href="#gi-bullseye"/></svg> My GPS</button>
<button id="detailGpsSaveBtn" class="btn btn-green btn-sm" onclick="saveGpsCoords()" style="display:none;"><svg class="gi" aria-hidden="true"><use href="#gi-save"/></svg> Save GPS</button>
<span id="detailGpsCoords" style="font-size:12px;color:var(--text2);font-family:monospace;"></span>
<span id="detailGpsStatus" style="font-size:11px;color:var(--text3);"></span>
@@ -4280,6 +4281,69 @@
}
}
async function getCurrentGps() {
// Check browser geolocation support
if (!navigator.geolocation) {
showToast('GPS not supported on this device', true);
return;
}
const myGpsBtn = document.getElementById('detailGpsMyGpsBtn');
myGpsBtn.textContent = '⏳ Getting GPS...';
myGpsBtn.disabled = true;
navigator.geolocation.getCurrentPosition(
function(pos) {
const lat = Math.round(pos.coords.latitude * 1000000) / 1000000;
const lng = Math.round(pos.coords.longitude * 1000000) / 1000000;
// Update the marker on the GPS editor map
if (_gpsState.marker) {
_gpsState.marker.setLatLng([lat, lng]);
} else {
showToast('GPS map not initialized yet', true);
myGpsBtn.textContent = '📍 My GPS';
myGpsBtn.disabled = false;
return;
}
// Update coords display
document.getElementById('detailGpsCoords').textContent =
`${lat.toFixed(6)}, ${lng.toFixed(6)}`;
// Auto-unlock if currently locked
if (!_gpsState.unlocked) {
toggleGpsLock();
}
// Show save button and update status/info
document.getElementById('detailGpsSaveBtn').style.display = '';
document.getElementById('detailGpsStatus').textContent =
`📍 Device GPS (accuracy: ${Math.round(pos.coords.accuracy)}m)`;
showToast(`📍 GPS position set: ${lat}, ${lng}`, false);
myGpsBtn.textContent = '📍 My GPS';
myGpsBtn.disabled = false;
},
function(err) {
const msgs = {
1: 'GPS permission denied — allow location access in your browser settings',
2: 'GPS position unavailable — try moving to an open area',
3: 'GPS request timed out — try again',
};
showToast('GPS error: ' + (msgs[err.code] || err.message), true);
myGpsBtn.textContent = '📍 My GPS';
myGpsBtn.disabled = false;
},
{
enableHighAccuracy: true,
timeout: 15000,
maximumAge: 60000,
}
);
}
function statusBadge(status) {
return '';
}