Skip to content

Commit 72fb4f6

Browse files
PayalLakraPayalLakra
committed
Protocol buttons disabled when stream started through any one.
1 parent 0e65e05 commit 72fb4f6

File tree

1 file changed

+78
-12
lines changed

1 file changed

+78
-12
lines changed

‎templates/index.html

Lines changed: 78 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,15 @@
3131
<section class="px-8 py-4 sticky top-14 z-40 bg-gray-50 dark:bg-gray-900 border-b dark:border-gray-700">
3232
<div class="flex flex-col md:flex-row md:items-center gap-4">
3333
<div class="flex gap-2 flex-wrap">
34-
<button data-protocol="wifi" class="connection-btn h-12 px-4 border-2 border-cyan-500 rounded-lg flex items-center gap-2 hover:bg-cyan-500 hover:text-white transition-colors text-gray-700 dark:text-gray-200">
34+
<button data-protocol="wifi" class="connection-btn h-12 px-4 border-2 border-cyan-500 rounded-lg flex items-center gap-2 hover:bg-cyan-500 hover:text-white transition-colors text-gray-700 dark:text-gray-200 cursor-pointer">
3535
<i class="fas fa-wifi text-lg"></i>
3636
<span class="text-sm font-medium">WiFi</span>
3737
</button>
38-
<button data-protocol="ble" class="connection-btn h-12 px-4 border-2 border-cyan-500 rounded-lg flex items-center gap-2 hover:bg-cyan-500 hover:text-white transition-colors text-gray-700 dark:text-gray-200">
38+
<button data-protocol="ble" class="connection-btn h-12 px-4 border-2 border-cyan-500 rounded-lg flex items-center gap-2 hover:bg-cyan-500 hover:text-white transition-colors text-gray-700 dark:text-gray-200 cursor-pointer">
3939
<i class="fab fa-bluetooth text-lg"></i>
4040
<span class="text-sm font-medium">Bluetooth</span>
4141
</button>
42-
<button data-protocol="usb" class="connection-btn h-12 px-4 border-2 border-cyan-500 rounded-lg flex items-center gap-2 hover:bg-cyan-500 hover:text-white transition-colors text-gray-700 dark:text-gray-200">
42+
<button data-protocol="usb" class="connection-btn h-12 px-4 border-2 border-cyan-500 rounded-lg flex items-center gap-2 hover:bg-cyan-500 hover:text-white transition-colors text-gray-700 dark:text-gray-200 cursor-pointer">
4343
<i class="fas fa-microchip text-lg"></i>
4444
<span class="text-sm font-medium">Serial</span>
4545
</button>
@@ -56,12 +56,14 @@
5656

5757
<div class="hidden md:block self-stretch w-px bg-gray-300 dark:bg-gray-700 mx-4"></div>
5858

59-
<input type="text" id="filename"
60-
class="flex-1 h-12 px-4 border-r-0 rounded-l-lg focus:outline-none focus:ring-0 bg-gray-100 border border-gray-110 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
61-
placeholder="Enter recording name">
62-
<span class="h-12 px-4 bg-gray-200 text-gray-500 rounded-r-lg dark:bg-gray-700 dark:text-gray-400 inline-flex items-center justify-center text-base">
63-
.csv
64-
</span>
59+
<div class="flex flex-1">
60+
<input type="text" id="filename"
61+
class="flex-1 h-10 px-4 rounded-l-lg focus:outline-none focus:ring-1 border border-gray-600 dark:text-white dark:bg-gray-800"
62+
placeholder="Enter recording name">
63+
<span class="h-10 px-4 bg-gray-100 border border-l-0 border-gray-800 text-gray-500 rounded-r-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 inline-flex items-center justify-center text-sm">
64+
.csv
65+
</span>
66+
</div>
6567

6668
<button id="record-btn" class="h-12 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors font-semibold px-6">
6769
Start Recording
@@ -221,6 +223,32 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">${app.ti
221223
return `${year}${month}${day}_${hours}${minutes}${seconds}`;
222224
}
223225

226+
function setProtocolButtonsDisabled(disabled) {
227+
connectionBtns.forEach(btn => {
228+
btn.disabled = disabled;
229+
// Add/remove cursor-not-allowed class based on disabled state
230+
if (disabled) {
231+
btn.classList.add('cursor-not-allowed');
232+
// Only keep the connected protocol button highlighted
233+
if (btn.dataset.protocol !== selectedProtocol) {
234+
btn.classList.remove('bg-cyan-500', 'text-white');
235+
// Set to original colors (dark mode aware)
236+
btn.classList.add('text-gray-700', 'dark:text-gray-200');
237+
btn.classList.remove('hover:bg-cyan-500', 'hover:text-white');
238+
} else {
239+
// Make connected protocol button darker
240+
btn.classList.remove('bg-cyan-500');
241+
btn.classList.add('bg-cyan-600', 'dark:bg-cyan-700');
242+
}
243+
} else {
244+
btn.classList.remove('cursor-not-allowed');
245+
// Restore hover effects
246+
btn.classList.add('hover:bg-cyan-500', 'hover:text-white');
247+
btn.classList.remove('bg-cyan-600', 'dark:bg-cyan-700');
248+
}
249+
});
250+
}
251+
224252
// Initialize filename with default value
225253
function initializeFilename() {
226254
const defaultName = `ChordsPy_${getTimestamp()}`;
@@ -465,6 +493,21 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">${app.ti
465493
connectingBtn.classList.add('hidden');
466494
disconnectBtn.classList.remove('hidden');
467495

496+
// Highlight the connected protocol and disable others
497+
connectionBtns.forEach(btn => {
498+
if (btn.dataset.protocol === selectedProtocol) {
499+
// Connected protocol - make it darker
500+
btn.classList.remove('bg-cyan-500', 'hover:bg-cyan-500');
501+
btn.classList.add('bg-cyan-600', 'dark:bg-cyan-700', 'cursor-default');
502+
btn.classList.add('text-white');
503+
} else {
504+
// Other protocols - disable and make less prominent
505+
btn.classList.remove('bg-cyan-500', 'text-white', 'hover:bg-cyan-500', 'hover:text-white');
506+
btn.classList.add('cursor-not-allowed', 'text-gray-400', 'dark:text-gray-500');
507+
}
508+
btn.disabled = true;
509+
});
510+
468511
showStatus(`Connected via ${selectedProtocol.toUpperCase()}`, 'fa-check-circle', 'text-green-500');
469512

470513
// Start console updates
@@ -507,10 +550,19 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">${app.ti
507550
connectingBtn.classList.add('hidden');
508551
connectBtn.classList.remove('hidden');
509552

510-
// Reset UI
553+
// Reset all protocol buttons
511554
connectionBtns.forEach(btn => {
512555
btn.disabled = false;
513-
btn.classList.remove('bg-cyan-500', 'text-white');
556+
btn.classList.remove(
557+
'bg-cyan-500', 'bg-cyan-600', 'dark:bg-cyan-700',
558+
'text-white', 'cursor-not-allowed', 'cursor-default',
559+
'text-gray-400', 'dark:text-gray-500'
560+
);
561+
btn.classList.add(
562+
'hover:bg-cyan-500', 'hover:text-white',
563+
'text-gray-700', 'dark:text-gray-200',
564+
'cursor-pointer'
565+
);
514566
});
515567

516568
statusDiv.classList.add('hidden');
@@ -640,6 +692,8 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">${app.ti
640692
connectBtn.classList.add('hidden');
641693
connectingBtn.classList.add('hidden');
642694
disconnectBtn.classList.remove('hidden');
695+
// Disable all protocol buttons
696+
setProtocolButtonsDisabled(true);
643697
startConsoleUpdates();
644698
}
645699
} else {
@@ -650,6 +704,9 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">${app.ti
650704
connectingBtn.classList.add('hidden');
651705
connectBtn.classList.remove('hidden');
652706

707+
// Re-enable protocol buttons
708+
setProtocolButtonsDisabled(false);
709+
653710
// Stop recording if active
654711
if (isRecording) {
655712
toggleRecording();
@@ -684,7 +741,16 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">${app.ti
684741
</script>
685742
<script src="https://cdn.tailwindcss.com"></script>
686743
<script>
687-
tailwind.config = {darkMode: 'class'}
744+
tailwind.config = {
745+
darkMode: 'class',
746+
theme: {
747+
extend: {
748+
cursor: {
749+
'not-allowed': 'not-allowed',
750+
}
751+
}
752+
}
753+
}
688754
</script>
689755
</body>
690756
</html>

0 commit comments

Comments
 (0)