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:
@@ -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 '';
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user