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="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 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;">
|
<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>
|
<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="detailGpsCoords" style="font-size:12px;color:var(--text2);font-family:monospace;"></span>
|
||||||
<span id="detailGpsStatus" style="font-size:11px;color:var(--text3);"></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) {
|
function statusBadge(status) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user