Skip to content

Commit 7c58fd3

Browse files
MrAlders0nMrAlders0n
authored
Merge pull request #102 from MrAlders0n/copilot/add-debug-logging-requirements
Fix UI gating, control visibility, and layout issues after overhaul
2 parents 2c6cf20 + 42990c7 commit 7c58fd3

3 files changed

Lines changed: 58 additions & 31 deletions

File tree

‎content/wardrive.js‎

Lines changed: 37 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -490,18 +490,9 @@ function enableControls(connected) {
490490
channelInfoEl.textContent = CHANNEL_NAME;
491491
updateControlsForCooldown();
492492

493-
// Show/hide ping controls based on connection state
494-
const pingControls = document.getElementById("pingControls");
495-
const connectHelperText = document.getElementById("connectHelperText");
496-
if (pingControls && connectHelperText) {
497-
if (connected) {
498-
pingControls.classList.remove("hidden");
499-
connectHelperText.classList.add("hidden");
500-
} else {
501-
pingControls.classList.add("hidden");
502-
connectHelperText.classList.remove("hidden");
503-
}
504-
}
493+
// Keep ping controls always visible but disable when not connected
494+
// This is handled by updateControlsForCooldown() which sets disabled state
495+
// No need to show/hide the controls anymore
505496
}
506497
function updateAutoButton() {
507498
if (state.running) {
@@ -2376,13 +2367,37 @@ document.addEventListener("visibilitychange", async () => {
23762367
}
23772368
});
23782369

2370+
/**
2371+
* Update Connect button state based on radio power selection
2372+
*/
2373+
function updateConnectButtonState() {
2374+
const radioPowerSelected = getCurrentPowerSetting() !== "";
2375+
const isConnected = !!state.connection;
2376+
2377+
if (!isConnected) {
2378+
// Only enable Connect if radio power is selected
2379+
connectBtn.disabled = !radioPowerSelected;
2380+
2381+
// Update dynamic status based on power selection
2382+
if (!radioPowerSelected) {
2383+
debugLog("Radio power not selected - showing message in status bar");
2384+
setDynamicStatus("Select radio power to connect", STATUS_COLORS.idle);
2385+
} else {
2386+
debugLog("Radio power selected - clearing message from status bar");
2387+
setDynamicStatus("Idle");
2388+
}
2389+
}
2390+
}
2391+
23792392
// ---- Bind UI & init ----
23802393
export async function onLoad() {
23812394
debugLog("wardrive.js onLoad() called - initializing");
23822395
setConnStatus("Disconnected", STATUS_COLORS.error);
2383-
setDynamicStatus("Idle");
23842396
enableControls(false);
23852397
updateAutoButton();
2398+
2399+
// Initialize Connect button state based on radio power
2400+
updateConnectButtonState();
23862401

23872402
connectBtn.addEventListener("click", async () => {
23882403
try {
@@ -2429,6 +2444,15 @@ export async function onLoad() {
24292444
});
24302445
}
24312446

2447+
// Add event listeners to radio power options to update Connect button state
2448+
const powerRadios = document.querySelectorAll('input[name="power"]');
2449+
powerRadios.forEach(radio => {
2450+
radio.addEventListener("change", () => {
2451+
debugLog(`Radio power changed to: ${getCurrentPowerSetting()}`);
2452+
updateConnectButtonState();
2453+
});
2454+
});
2455+
24322456
// Prompt location permission early (optional)
24332457
debugLog("Requesting initial location permission");
24342458
try {

‎docs/STATUS_MESSAGES.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -324,6 +324,14 @@ These messages use a hybrid approach: **first display respects 500ms minimum**,
324324

325325
#### 8. Error Messages
326326

327+
##### Select radio power to connect
328+
- **Message**: `"Select radio power to connect"`
329+
- **Color**: Slate (idle)
330+
- **When**: On app load or when disconnected, if no radio power option is selected
331+
- **Terminal State**: Yes (persists until radio power is selected)
332+
- **Notes**: Displayed in Dynamic Status Bar as an informational message (not an error) to guide user that Connect button is disabled. Once radio power is selected, status changes to "Idle" (em dash) and Connect button becomes enabled.
333+
- **Source**: `content/wardrive.js:updateConnectButtonState()`
334+
327335
##### Connection failed
328336
- **Message**: `"Connection failed"` or specific error message
329337
- **Color**: Red (error)

‎index.html‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131

3232
<body class="bg-slate-900 text-slate-100">
3333
<main class="min-h-screen flex items-start justify-center p-4">
34-
<div class="w-full max-w-xl space-y-4">
34+
<div class="w-full max-w-xl space-y-2">
3535

3636
<!-- App Title -->
3737
<header class="flex items-center justify-between">
@@ -144,47 +144,42 @@ <h2 class="text-sm font-medium text-slate-300 uppercase tracking-wide">Settings<
144144
src="https://yow.meshmapper.net/embed.php?cov_grid=1&fail_grid=1&pings=0&repeaters=1&rep_coverage=0&grid_lines=0&lat=45.42150&lon=-75.69720&meters=10000">
145145
</iframe>
146146

147-
<!-- Map Overlays - Horizontal Layout -->
148-
<div class="absolute bottom-2 left-2 right-2 flex gap-2 justify-between items-end">
147+
<!-- Map Overlays - Single Row Horizontal Layout -->
148+
<div class="absolute bottom-2 left-2 right-2 flex gap-2 justify-between items-center">
149149
<!-- GPS Accuracy - Left -->
150-
<div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300 whitespace-nowrap">
150+
<div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300 whitespace-nowrap flex-shrink-0">
151151
<span id="gpsAcc">±-</span>
152152
</div>
153153

154-
<!-- GPS Coordinates - Center (flexible) -->
155-
<div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300 text-center flex-1">
156-
<div id="gpsInfo">-</div>
157-
<div id="mapGpsAge" class="text-slate-500 mt-0.5">-</div>
154+
<!-- GPS Coordinates - Center (flexible but constrained) -->
155+
<div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300 text-center flex-1 min-w-0">
156+
<div id="gpsInfo" class="truncate">-</div>
158157
</div>
159158

160159
<!-- Distance from Last Ping - Right -->
161-
<div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300 whitespace-nowrap">
160+
<div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300 whitespace-nowrap flex-shrink-0">
162161
<span id="distanceInfo">-</span>
163162
</div>
164163
</div>
165164
</section>
166165

167166
<!-- Control Buttons -->
168167
<section class="bg-slate-800/80 border border-slate-700 rounded-xl p-4 space-y-2">
169-
<p id="connectHelperText" class="text-xs text-slate-400 text-center">
170-
Select radio power to connect
171-
</p>
172-
173-
<!-- Ping controls (visible when connected) -->
174-
<div id="pingControls" class="grid grid-cols-2 gap-2 hidden">
168+
<!-- Ping controls (always visible, disabled when not connected) -->
169+
<div id="pingControls" class="w-full flex gap-2">
175170
<button id="sendPingBtn"
176-
class="px-3 py-2 rounded-lg bg-sky-600 hover:bg-sky-500 text-sm font-medium text-white disabled:opacity-40">
171+
class="flex-1 px-3 py-2 rounded-lg bg-sky-600 hover:bg-sky-500 text-sm font-medium text-white disabled:opacity-40 disabled:cursor-not-allowed">
177172
Send Ping
178173
</button>
179174
<button id="autoToggleBtn"
180-
class="px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-sm font-medium text-white disabled:opacity-40">
175+
class="flex-1 px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-sm font-medium text-white disabled:opacity-40 disabled:cursor-not-allowed">
181176
Start Auto Ping
182177
</button>
183178
</div>
184179

185180
<!-- Connect/Disconnect button (always visible, changes text/color) -->
186181
<button id="connectBtn"
187-
class="w-full px-3 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-sm font-medium text-white disabled:opacity-40">
182+
class="w-full px-3 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-sm font-medium text-white disabled:opacity-40 disabled:cursor-not-allowed">
188183
Connect
189184
</button>
190185
</section>

0 commit comments

Comments
 (0)