diff --git a/application/views/bandmap/list.php b/application/views/bandmap/list.php index 9ce18b5ce..e1c129f88 100644 --- a/application/views/bandmap/list.php +++ b/application/views/bandmap/list.php @@ -13,12 +13,12 @@ // Bandmap toast messages var lang_bandmap_popup_blocked = ""; var lang_bandmap_popup_warning = ""; - var lang_bandmap_cat_required = ""; - var lang_bandmap_enable_cat = ""; + var lang_bandmap_cat_required = ""; + var lang_bandmap_enable_cat = ""; var lang_bandmap_clear_filters = ""; - var lang_bandmap_band_preserved = ""; + var lang_bandmap_band_preserved = ""; var lang_bandmap_radio = ""; - var lang_bandmap_radio_none = ""; + var lang_bandmap_radio_none = ""; var lang_bandmap_radio_tuned = ""; var lang_bandmap_tuned_to = ""; var lang_bandmap_tuning_failed = ""; @@ -26,7 +26,7 @@ var lang_bandmap_qso_prepared = ""; var lang_bandmap_callsign_sent = ""; var lang_bandmap_sent_to_form = ""; - var lang_bandmap_cat_control = ""; + var lang_bandmap_cat_control = ""; var lang_bandmap_freq_changed = ""; var lang_bandmap_by_transceiver = ""; var lang_bandmap_freq_filter_set = ""; @@ -34,7 +34,7 @@ var lang_bandmap_waiting_radio = ""; var lang_bandmap_my_favorites = ""; var lang_bandmap_favorites_failed = ""; - var lang_bandmap_modes_applied = ""; + var lang_bandmap_modes_applied = ""; var lang_bandmap_favorites_applied = ""; // Bandmap filter status messages @@ -66,10 +66,10 @@ // Bandmap UI messages var lang_bandmap_exit_fullscreen = ""; var lang_bandmap_toggle_fullscreen = ""; - var lang_bandmap_cat_band_control = ""; + var lang_bandmap_cat_band_control = ""; var lang_bandmap_click_to_qso = ""; var lang_bandmap_ctrl_click_tune = ""; - var lang_bandmap_requires_cat = ""; + var lang_bandmap_requires_cat = ""; var lang_bandmap_spotter = ""; var lang_bandmap_comment = ""; var lang_bandmap_age = ""; @@ -88,6 +88,12 @@ var lang_bandmap_no_spots_filters = ""; var lang_bandmap_error_loading = ""; + // Offline radio status messages + var lang_bandmap_show_all_modes = ""; + var lang_bandmap_show_all_spots = ""; + + // DX Map Visualization + // DX Map translation strings var lang_bandmap_draw_spotters = ""; var lang_bandmap_extend_map = ""; @@ -98,8 +104,8 @@ var lang_bandmap_mode = ""; var lang_bandmap_band = ""; - // Enable compact radio status display for bandmap page - window.CAT_COMPACT_MODE = true; + // Enable ultra-compact radio status display for bandmap page (tooltip only) + window.CAT_COMPACT_MODE = 'ultra-compact'; // Map configuration (matches QSO map settings) var map_tile_server = 'optionslib->get_option('option_map_tile_server');?>'; @@ -149,41 +155,54 @@
- +
- -
+ + - -
+ + + - -
- - - - + +
+ + +
+ +
+ + + + + + + + +
- +
- +
-
- - -
+ +
+
+ + +
@@ -317,47 +336,20 @@ -
- - - -
- - -
- - -
- -
- - - - - - - - -
-
-
- - -
- -
- -
+ + +
@@ -399,31 +391,39 @@
- +
+
+ + +
+
+ + +
+ -
diff --git a/application/views/interface_assets/footer.php b/application/views/interface_assets/footer.php index d0fb2da6e..93877f2bd 100644 --- a/application/views/interface_assets/footer.php +++ b/application/views/interface_assets/footer.php @@ -113,7 +113,7 @@ var lang_qso_gridsquare_help = ""; var lang_cat_live = ""; var lang_cat_polling = ""; - var lang_cat_polling_tooltip = ""; + var lang_cat_polling_tooltip = ""; var lang_cat_tx = ""; var lang_cat_rx = ""; var lang_cat_tx_rx = ""; @@ -132,6 +132,11 @@ var lang_qso_location_is_fetched_from_provided_gridsquare = ""; var lang_qso_location_is_fetched_from_dxcc_coordinates = ""; + // CAT Offline Status Messages + var lang_cat_working_offline = ""; + var lang_cat_offline_cat_disabled = ""; + var lang_cat_offline_no_radio = ""; + // CAT Configuration var cat_timeout_minutes = Math.floor(optionslib->get_option('cat_timeout_interval'); ?> / 60); diff --git a/assets/css/bandmap_list.css b/assets/css/bandmap_list.css index 7d81fef11..233de6573 100644 --- a/assets/css/bandmap_list.css +++ b/assets/css/bandmap_list.css @@ -3,6 +3,16 @@ html { overflow-y: scroll; } +/* Blink animation for radio icon updates */ +@keyframes blink-once { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.3; } +} + +.blink-once { + animation: blink-once 0.6s ease-in-out; +} + /* Reserve space for badge counts to prevent layout shifts */ .band-count-badge, .mode-count-badge, @@ -673,6 +683,45 @@ body.fullscreen-active { overflow: visible; } +/* Compact button padding in menu bar to save horizontal space */ +.menu-bar .btn-sm { + padding-left: 0.4rem; + padding-right: 0.4rem; +} + +/* Ensure radio selector dropdown matches button height */ +.menu-bar .radios.form-select-sm { + height: calc(1.5em + 0.5rem + 2px); /* Match Bootstrap btn-sm height */ + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +/* Ensure radio status container has no extra spacing */ +.menu-bar #radio_status { + margin: 0; + padding: 0; + line-height: 1; + min-height: 0 !important; /* Override the general min-height rule */ + align-self: center; /* Force vertical centering */ +} + +/* Override fullscreen min-height and margin when in menu-bar */ +.bandmap-fullscreen .menu-bar #radio_status { + min-height: 0 !important; + margin: 0 !important; +} + +/* Match radio status to button vertical rhythm */ +.menu-bar #radio_status #radio_cat_state { + line-height: 1.5; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + margin: 0; + display: inline-flex !important; + align-items: center; + vertical-align: middle; /* Ensure inline alignment */ +} + /* Ensure CAT Control and search box stay right-aligned when wrapping */ .menu-bar > div:last-child { justify-content: flex-end; diff --git a/assets/js/cat.js b/assets/js/cat.js index 12ab24f93..2ab6a5146 100644 --- a/assets/js/cat.js +++ b/assets/js/cat.js @@ -71,7 +71,7 @@ $(document).ready(function() { }; // Global setting for radio status display mode (can be set by pages like bandmap) - // Default: false (use card wrapper), can be set to true for compact mode + // Options: false (card wrapper), 'compact' (no card), 'ultra-compact' (tooltip only) window.CAT_COMPACT_MODE = window.CAT_COMPACT_MODE || false; function initializeWebSocketConnection() { @@ -139,10 +139,14 @@ $(document).ready(function() { // Handle radio status updates if (data.type === 'radio_status' && data.radio && ($(".radios option:selected").val() == 'ws')) { - // On bandmap page, only process when CAT Control is enabled + // On bandmap page, check CAT Control state if (typeof window.isCatTrackingEnabled !== 'undefined') { if (!window.isCatTrackingEnabled) { - return; // Skip processing when CAT Control is OFF + // CAT Control is OFF - show offline status and skip processing + if (window.CAT_COMPACT_MODE === 'ultra-compact') { + displayOfflineStatus('cat_disabled'); + } + return; } } @@ -358,12 +362,85 @@ $(document).ready(function() { * Respects global CAT_COMPACT_MODE setting for rendering style * @param {string} state - Display state: 'success', 'error', 'timeout', or 'not_logged_in' * @param {object|string} data - Radio data object (success) or radio name string (error/timeout/not_logged_in) + * CAT_COMPACT_MODE options: + * false - Standard mode with card wrapper + * 'compact' - Compact mode without card wrapper + * 'ultra-compact' - Ultra-compact mode showing only tooltip with info + * @param {string} reason - Optional reason: 'no_radio' (default) or 'cat_disabled' + */ + function displayOfflineStatus(reason) { + // Display "Working offline" message with tooltip in ultra-compact mode + if (window.CAT_COMPACT_MODE !== 'ultra-compact') { + return; + } + + // Default to 'no_radio' for backward compatibility + reason = reason || 'no_radio'; + + // Use translation variable if available, fallback to English + var offlineText = typeof lang_cat_working_offline !== 'undefined' ? lang_cat_working_offline : 'Working without CAT connection'; + + const offlineHtml = '' + + '' + + '' + offlineText + '' + + '' + + ''; + + let tooltipContent; + if (reason === 'cat_disabled') { + // Use translation variable if available, fallback to English + tooltipContent = typeof lang_cat_offline_cat_disabled !== 'undefined' + ? lang_cat_offline_cat_disabled + : 'CAT connection is currently disabled. Enable CAT connection to work in online mode with your radio.'; + } else { + // reason === 'no_radio' (default) + tooltipContent = typeof lang_cat_offline_no_radio !== 'undefined' + ? lang_cat_offline_no_radio + : 'To connect your radio to Wavelog, visit the Wavelog Wiki for setup instructions.'; + } + + // Remove existing radio status if present + $('#radio_cat_state').remove(); + + // Add offline status + $('#radio_status').append(offlineHtml); + + // Initialize tooltip + var tooltipElement = document.querySelector('#radio_status [data-bs-toggle="tooltip"]'); + if (tooltipElement) { + new bootstrap.Tooltip(tooltipElement, { + title: tooltipContent, + html: true, + placement: 'bottom' + }); + } + } + + /** + * Display radio status in the UI + * @param {string} state - One of 'success', 'error', 'timeout', 'not_logged_in' + * @param {object|string} data - Radio data object (success) or radio name string (error/timeout/not_logged_in) + * CAT_COMPACT_MODE options: + * false - Standard mode with card wrapper + * 'compact' - Compact mode without card wrapper + * 'ultra-compact' - Ultra-compact mode showing only tooltip with info */ function displayRadioStatus(state, data) { // On bandmap page, only show radio status when CAT Control is enabled if (typeof window.isCatTrackingEnabled !== 'undefined') { if (!window.isCatTrackingEnabled) { - // CAT Control is OFF on bandmap - don't show radio status + // CAT Control is OFF on bandmap + // In ultra-compact mode, show "Working offline" with CAT disabled message + if (window.CAT_COMPACT_MODE === 'ultra-compact') { + // Check if a radio is selected + var selectedRadio = $('.radios option:selected').val(); + if (selectedRadio && selectedRadio !== '0') { + // Radio selected but CAT disabled + displayOfflineStatus('cat_disabled'); + return; + } + } + // Standard behavior: remove radio status $('#radio_cat_state').remove(); return; } @@ -381,7 +458,7 @@ $(document).ready(function() { connectionType = ' (' + lang_cat_live + ')'; } else { connectionType = ' (' + lang_cat_polling + ')'; - connectionTooltip = ' '; + connectionTooltip = ' '; } // Build radio info line @@ -461,7 +538,95 @@ $(document).ready(function() { var html = baseStyle + icon + content + '
'; // Update DOM based on global CAT_COMPACT_MODE setting - if (window.CAT_COMPACT_MODE) { + if (window.CAT_COMPACT_MODE === 'ultra-compact') { + // Ultra-compact mode: show radio icon, radio name, and question mark with tooltip + var tooltipContent = ''; + var radioName = ''; + + if (state === 'success') { + // Build tooltip content with all radio information + // Use the full dropdown text (includes "Polling - " and "(last updated)" etc.) + radioName = $('select.radios option:selected').text(); + var connectionType = ''; + if ($(".radios option:selected").val() == 'ws') { + connectionType = lang_cat_live; + } else { + connectionType = lang_cat_polling; + } tooltipContent = '' + radioName + ' (' + connectionType + ')'; + + // Add frequency info + if(data.frequency_rx != null && data.frequency_rx != 0) { + tooltipContent += '
' + lang_cat_tx + ': ' + data.frequency_formatted; + data.frequency_rx_formatted = format_frequency(data.frequency_rx); + if (data.frequency_rx_formatted) { + tooltipContent += '
' + lang_cat_rx + ': ' + data.frequency_rx_formatted; + } + } else { + tooltipContent += '
' + lang_cat_tx_rx + ': ' + data.frequency_formatted; + } + + // Add mode + if(data.mode != null) { + tooltipContent += '
' + lang_cat_mode + ': ' + data.mode; + } + + // Add power + if(data.power != null && data.power != 0) { + tooltipContent += '
' + lang_cat_power + ': ' + data.power + 'W'; + } + + // Add polling tooltip if applicable + if ($(".radios option:selected").val() != 'ws') { + tooltipContent += '

' + lang_cat_polling_tooltip + ''; + } + } else if (state === 'error') { + radioName = typeof data === 'string' ? data : $('select.radios option:selected').text(); + tooltipContent = lang_cat_connection_error + ': ' + radioName + '
' + lang_cat_connection_lost; + } else if (state === 'timeout') { + radioName = typeof data === 'string' ? data : $('select.radios option:selected').text(); + tooltipContent = lang_cat_connection_timeout + ': ' + radioName + '
' + lang_cat_data_stale; + } else if (state === 'not_logged_in') { + radioName = ''; + tooltipContent = lang_cat_not_logged_in; + } + + var ultraCompactHtml = '' + + '' + + '' + radioName + '' + + '' + + ''; + + if (!$('#radio_cat_state').length) { + $('#radio_status').append(ultraCompactHtml); + } else { + // Dispose of existing tooltips before updating content + $('#radio_cat_state [data-bs-toggle="tooltip"]').each(function() { + var tooltipInstance = bootstrap.Tooltip.getInstance(this); + if (tooltipInstance) { + tooltipInstance.dispose(); + } + }); + $('#radio_cat_state').replaceWith(ultraCompactHtml); + } + + // Initialize tooltip with dynamic content + var tooltipElement = document.querySelector('#radio_status [data-bs-toggle="tooltip"]'); + if (tooltipElement) { + new bootstrap.Tooltip(tooltipElement, { + title: tooltipContent, + html: true, + placement: 'bottom' + }); + } + + // Add blink animation to radio icon on update + $('#radio_status .fa-radio').addClass('blink-once'); + setTimeout(function() { + $('#radio_status .fa-radio').removeClass('blink-once'); + }, 600); + + + } else if (window.CAT_COMPACT_MODE === 'compact' || window.CAT_COMPACT_MODE === true) { // Compact mode: inject directly without card wrapper if (!$('#radio_cat_state').length) { $('#radio_status').prepend('
' + html + '
'); @@ -493,10 +658,12 @@ $(document).ready(function() { } } - // Initialize Bootstrap tooltips for any new tooltip elements in the radio panel - $('#radio_cat_state [data-bs-toggle="tooltip"]').each(function() { - new bootstrap.Tooltip(this); - }); + // Initialize Bootstrap tooltips for any new tooltip elements in the radio panel (except ultra-compact which handles its own) + if (window.CAT_COMPACT_MODE !== 'ultra-compact') { + $('#radio_cat_state [data-bs-toggle="tooltip"]').each(function() { + new bootstrap.Tooltip(this); + }); + } // Trigger blink animation on successful updates if (state === 'success') { @@ -744,6 +911,10 @@ $(document).ready(function() { if (typeof dxwaterfall_cat_state !== 'undefined') { dxwaterfall_cat_state = "none"; } + // Disable CAT Control button when no radio is selected + $('#toggleCatTracking').prop('disabled', true).addClass('disabled'); + // Display offline status when no radio selected (always show, not just in ultra-compact) + displayOfflineStatus('no_radio'); } else if (selectedRadioId == 'ws') { websocketIntentionallyClosed = false; // Reset flag when opening WebSocket reconnectAttempts = 0; // Reset reconnect attempts @@ -751,17 +922,33 @@ $(document).ready(function() { if (typeof dxwaterfall_cat_state !== 'undefined') { dxwaterfall_cat_state = "websocket"; } + // Enable CAT Control button when radio is selected + $('#toggleCatTracking').prop('disabled', false).removeClass('disabled'); + // Always initialize WebSocket connection initializeWebSocketConnection(); + // In ultra-compact mode, show offline status if CAT Control is disabled + if (window.CAT_COMPACT_MODE === 'ultra-compact' && typeof window.isCatTrackingEnabled !== 'undefined' && !window.isCatTrackingEnabled) { + displayOfflineStatus('cat_disabled'); + } } else { // Set DX Waterfall CAT state to polling if variable exists if (typeof dxwaterfall_cat_state !== 'undefined') { dxwaterfall_cat_state = "polling"; } - // Update frequency at configured interval + // Enable CAT Control button when radio is selected + $('#toggleCatTracking').prop('disabled', false).removeClass('disabled'); + // Always start polling CATInterval=setInterval(updateFromCAT, CAT_CONFIG.POLL_INTERVAL); + // In ultra-compact mode, show offline status if CAT Control is disabled + if (window.CAT_COMPACT_MODE === 'ultra-compact' && typeof window.isCatTrackingEnabled !== 'undefined' && !window.isCatTrackingEnabled) { + displayOfflineStatus('cat_disabled'); + } } }); // Trigger initial radio change to start monitoring selected radio $('.radios').change(); + + // Expose displayOfflineStatus globally for other components (e.g., bandmap CAT Control toggle) + window.displayOfflineStatus = displayOfflineStatus; }); diff --git a/assets/js/sections/bandmap_list.js b/assets/js/sections/bandmap_list.js index 499de2c28..3de6a6098 100644 --- a/assets/js/sections/bandmap_list.js +++ b/assets/js/sections/bandmap_list.js @@ -174,14 +174,19 @@ $(function() { } /** - * Update filter icon based on whether filters are active + * Update filter icon and button colors based on whether filters are active */ function updateFilterIcon() { if (areFiltersApplied()) { - $('#filterIcon').removeClass('fa-filter').addClass('fa-filter-circle-xmark text-success'); + // When filters are active: + // - Advanced Filters button: colored (btn-success/greenish) with filter icon only + $('#filterDropdown').removeClass('btn-secondary').addClass('btn-success'); } else { - $('#filterIcon').removeClass('fa-filter-circle-xmark text-success').addClass('fa-filter'); + // When no filters are active: + // - Advanced Filters button: secondary color with filter icon + $('#filterDropdown').removeClass('btn-success').addClass('btn-secondary'); } + // Note: Clear Filters buttons always keep their reddish eraser icon (set in HTML) } /** @@ -3174,8 +3179,15 @@ $(function() { window.isCatTrackingEnabled = false; // Update window variable for cat.js - // Hide radio status when CAT Control is disabled - $('#radio_cat_state').remove(); + // Check if we need to show offline status (radio selected but CAT disabled) + const selectedRadio = $('.radios option:selected').val(); + if (selectedRadio && selectedRadio !== '0' && typeof window.displayOfflineStatus === 'function') { + // Radio is selected but CAT Control disabled - show offline status + window.displayOfflineStatus('cat_disabled'); + } else { + // No radio selected - just hide radio status + $('#radio_cat_state').remove(); + } // Re-enable band filter controls enableBandFilterControls(); @@ -3473,7 +3485,7 @@ $(function() { addUserHomeMarker(); addSpottersControl(); - + // Initialize terminator (enabled by default) updateTerminator(); } @@ -3689,6 +3701,28 @@ $(function() { return '#dc3545'; // Bootstrap danger red (new/not worked) } + /** + * Get darker border color for map markers (30% darker than fill) + */ + function getDarkerBorderColor(fillColor) { + // Convert hex to RGB + const hex = fillColor.replace('#', ''); + const r = parseInt(hex.substring(0, 2), 16); + const g = parseInt(hex.substring(2, 4), 16); + const b = parseInt(hex.substring(4, 6), 16); + + // Make 30% darker + const darkerR = Math.floor(r * 0.7); + const darkerG = Math.floor(g * 0.7); + const darkerB = Math.floor(b * 0.7); + + // Convert back to hex + return '#' + [darkerR, darkerG, darkerB].map(x => { + const hex = x.toString(16); + return hex.length === 1 ? '0' + hex : hex; + }).join(''); + } + /** * Scroll to spot in the main DataTable */ @@ -3824,11 +3858,13 @@ $(function() { const borderColor = getContinentStatusColor(bestContinentConfirmed, bestContinentWorked); const fillColor = getDxccStatusColor(bestDxccConfirmed, bestDxccWorked); + // Use darker border to ensure visibility even when border and fill are the same + const darkerBorder = getDarkerBorderColor(fillColor); const marker = L.marker([lat, lng], { icon: L.divIcon({ className: 'dx-dxcc-marker', - html: `
+ html: `
${prefix}${countText}
`, iconSize: [45, 18], @@ -4359,6 +4395,28 @@ $(function() { } }; + // Initial check: Display offline status if radio selected but CAT Control disabled + // This handles page load state + setTimeout(function() { + const selectedRadio = $('.radios option:selected').val(); + if (selectedRadio === '0') { + // No radio selected - disable CAT Control button + $('#toggleCatTracking').prop('disabled', true).addClass('disabled'); + if (typeof window.displayOfflineStatus === 'function') { + window.displayOfflineStatus('no_radio'); + } + } else if (selectedRadio && selectedRadio !== '0' && !isCatTrackingEnabled) { + // Radio is selected but CAT Control is disabled on page load + $('#toggleCatTracking').prop('disabled', false).removeClass('disabled'); + if (typeof window.displayOfflineStatus === 'function') { + window.displayOfflineStatus('cat_disabled'); + } + } else if (selectedRadio && selectedRadio !== '0') { + // Radio is selected and CAT Control is enabled + $('#toggleCatTracking').prop('disabled', false).removeClass('disabled'); + } + }, 100); // Small delay to ensure cat.js has loaded and exposed the function + });