Skip to content

Commit 6fb69b1

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

File tree

1 file changed

+70
-6
lines changed

1 file changed

+70
-6
lines changed

‎templates/index.html

Lines changed: 70 additions & 6 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>
@@ -221,6 +221,32 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">${app.ti
221221
return `${year}${month}${day}_${hours}${minutes}${seconds}`;
222222
}
223223

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

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

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

510-
// Reset UI
551+
// Reset all protocol buttons
511552
connectionBtns.forEach(btn => {
512553
btn.disabled = false;
513-
btn.classList.remove('bg-cyan-500', 'text-white');
554+
btn.classList.remove(
555+
'bg-cyan-500', 'bg-cyan-600', 'dark:bg-cyan-700',
556+
'text-white', 'cursor-not-allowed', 'cursor-default',
557+
'text-gray-400', 'dark:text-gray-500'
558+
);
559+
btn.classList.add(
560+
'hover:bg-cyan-500', 'hover:text-white',
561+
'text-gray-700', 'dark:text-gray-200',
562+
'cursor-pointer'
563+
);
514564
});
515565

516566
statusDiv.classList.add('hidden');
@@ -640,6 +690,8 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">${app.ti
640690
connectBtn.classList.add('hidden');
641691
connectingBtn.classList.add('hidden');
642692
disconnectBtn.classList.remove('hidden');
693+
// Disable all protocol buttons
694+
setProtocolButtonsDisabled(true);
643695
startConsoleUpdates();
644696
}
645697
} else {
@@ -650,6 +702,9 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">${app.ti
650702
connectingBtn.classList.add('hidden');
651703
connectBtn.classList.remove('hidden');
652704

705+
// Re-enable protocol buttons
706+
setProtocolButtonsDisabled(false);
707+
653708
// Stop recording if active
654709
if (isRecording) {
655710
toggleRecording();
@@ -684,7 +739,16 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">${app.ti
684739
</script>
685740
<script src="https://cdn.tailwindcss.com"></script>
686741
<script>
687-
tailwind.config = {darkMode: 'class'}
742+
tailwind.config = {
743+
darkMode: 'class',
744+
theme: {
745+
extend: {
746+
cursor: {
747+
'not-allowed': 'not-allowed',
748+
}
749+
}
750+
}
751+
}
688752
</script>
689753
</body>
690754
</html>

0 commit comments

Comments
 (0)