fix: use GPS utility for location, compact dashboard layout

Replace broken app.gps_state lookup with utils.gps.get_current_position()
and return GPS metadata (fix quality, satellites, accuracy). Shrink location
card to single-column with 200px globe, move System Info into row 2.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-02-26 23:51:26 +00:00
parent bad2110b92
commit 71598d2b2c
5 changed files with 118 additions and 36 deletions
+41 -12
View File
@@ -282,16 +282,17 @@
color: var(--accent-cyan, #00d4ff);
}
/* Globe container */
/* Globe container — compact vertical layout */
.sys-location-inner {
display: flex;
gap: 16px;
align-items: stretch;
flex-direction: column;
gap: 10px;
align-items: center;
}
.sys-globe-wrap {
width: 300px;
height: 300px;
width: 200px;
height: 200px;
flex-shrink: 0;
background: #000;
border-radius: 8px;
@@ -300,10 +301,42 @@
}
.sys-location-details {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
gap: 6px;
}
/* GPS status indicator */
.sys-gps-status {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
color: var(--text-dim, #8888aa);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sys-gps-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
}
.sys-gps-dot.fix-3d {
background: var(--accent-green, #00ff88);
box-shadow: 0 0 4px rgba(0, 255, 136, 0.4);
}
.sys-gps-dot.fix-2d {
background: var(--accent-yellow, #ffcc00);
box-shadow: 0 0 4px rgba(255, 204, 0, 0.4);
}
.sys-gps-dot.no-fix {
background: var(--text-dim, #555);
}
.sys-location-coords {
@@ -515,13 +548,9 @@
grid-column: 1;
}
.sys-location-inner {
flex-direction: column;
}
.sys-globe-wrap {
width: 100%;
height: 250px;
height: 180px;
}
.sys-process-grid {
+16 -3
View File
@@ -390,14 +390,27 @@ const SystemHealth = (function () {
// Globe container
html += '<div class="sys-globe-wrap" id="sysGlobeContainer"></div>';
// Details column
// Details below globe
html += '<div class="sys-location-details">';
if (locationData && locationData.lat != null) {
html += '<div class="sys-location-coords">' +
locationData.lat.toFixed(4) + '&deg;' + (locationData.lat >= 0 ? 'N' : 'S') + '<br>' +
locationData.lat.toFixed(4) + '&deg;' + (locationData.lat >= 0 ? 'N' : 'S') + ', ' +
locationData.lon.toFixed(4) + '&deg;' + (locationData.lon >= 0 ? 'E' : 'W') + '</div>';
html += '<div class="sys-location-source">Source: ' + escHtml(locationData.source || 'unknown') + '</div>';
// GPS status indicator
if (locationData.source === 'gps' && locationData.gps) {
var gps = locationData.gps;
var fixLabel = gps.fix_quality === 3 ? '3D Fix' : '2D Fix';
var dotCls = gps.fix_quality === 3 ? 'fix-3d' : 'fix-2d';
html += '<div class="sys-gps-status">' +
'<span class="sys-gps-dot ' + dotCls + '"></span> ' + fixLabel;
if (gps.satellites != null) html += ' &middot; ' + gps.satellites + ' sats';
if (gps.accuracy != null) html += ' &middot; &plusmn;' + gps.accuracy + 'm';
html += '</div>';
} else {
html += '<div class="sys-location-source">Source: ' + escHtml(locationData.source || 'unknown') + '</div>';
}
} else {
html += '<div class="sys-location-coords" style="color:var(--text-dim)">No location</div>';
}