Public_Tools/wavelog
2
0
Fork 0
mirror of https://github.com/wavelog/wavelog.git synced 2026-03-22 10:24:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Layout update

Browse Source
This commit is contained in:
Szymon Porwolik
2025-11-07 18:35:13 +01:00
parent ff32621180
commit e0be81fa26
5 changed files with 399 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
application/views/bandmap/list.php
View File

@@ -13,12 +13,12 @@
// Bandmap toast messages
var lang_bandmap_popup_blocked = "<?= __("Pop-up Blocked"); ?>";
var lang_bandmap_popup_warning = "<?= __("Pop-up was blocked! Please allow pop-ups for this site permanently."); ?>";
var lang_bandmap_cat_required = "<?= __("CAT Control Required"); ?>";
var lang_bandmap_enable_cat = "<?= __("Enable CAT Control to tune the radio"); ?>";
var lang_bandmap_cat_required = "<?= __("CAT Connection Required"); ?>";
var lang_bandmap_enable_cat = "<?= __("Enable CAT connection to tune the radio"); ?>";
var lang_bandmap_clear_filters = "<?= __("Clear Filters"); ?>";
var lang_bandmap_band_preserved = "<?= __("Band filter preserved (CAT Control is active)"); ?>";
var lang_bandmap_band_preserved = "<?= __("Band filter preserved (CAT connection is active)"); ?>";
var lang_bandmap_radio = "<?= __("Radio"); ?>";
var lang_bandmap_radio_none = "<?= __("Radio set to None - CAT Control disabled"); ?>";
var lang_bandmap_radio_none = "<?= __("Radio set to None - CAT connection disabled"); ?>";
var lang_bandmap_radio_tuned = "<?= __("Radio Tuned"); ?>";
var lang_bandmap_tuned_to = "<?= __("Tuned to"); ?>";
var lang_bandmap_tuning_failed = "<?= __("Tuning Failed"); ?>";
@@ -26,7 +26,7 @@
var lang_bandmap_qso_prepared = "<?= __("QSO Prepared"); ?>";
var lang_bandmap_callsign_sent = "<?= __("Callsign"); ?>";
var lang_bandmap_sent_to_form = "<?= __("sent to logging form"); ?>";
var lang_bandmap_cat_control = "<?= __("CAT Control"); ?>";
var lang_bandmap_cat_control = "<?= __("CAT Connection"); ?>";
var lang_bandmap_freq_changed = "<?= __("Frequency filter changed to"); ?>";
var lang_bandmap_by_transceiver = "<?= __("by transceiver"); ?>";
var lang_bandmap_freq_filter_set = "<?= __("Frequency filter set to"); ?>";
@@ -34,7 +34,7 @@
var lang_bandmap_waiting_radio = "<?= __("Waiting for radio data..."); ?>";
var lang_bandmap_my_favorites = "<?= __("My Favorites"); ?>";
var lang_bandmap_favorites_failed = "<?= __("Failed to load favorites"); ?>";
var lang_bandmap_modes_applied = "<?= __("Modes applied. Band filter preserved (CAT Control is active)"); ?>";
var lang_bandmap_modes_applied = "<?= __("Modes applied. Band filter preserved (CAT connection is active)"); ?>";
var lang_bandmap_favorites_applied = "<?= __("Applied your favorite bands and modes"); ?>";
// Bandmap filter status messages
@@ -66,10 +66,10 @@
// Bandmap UI messages
var lang_bandmap_exit_fullscreen = "<?= __("Exit Fullscreen"); ?>";
var lang_bandmap_toggle_fullscreen = "<?= __("Toggle Fullscreen"); ?>";
var lang_bandmap_cat_band_control = "<?= __("Band filtering is controlled by your radio when CAT Control is enabled"); ?>";
var lang_bandmap_cat_band_control = "<?= __("Band filtering is controlled by your radio when CAT connection is enabled"); ?>";
var lang_bandmap_click_to_qso = "<?= __("Click to prepare logging"); ?>";
var lang_bandmap_ctrl_click_tune = "<?= __("to tune frequency"); ?>";
var lang_bandmap_requires_cat = "<?= __("(requires CAT Control)"); ?>";
var lang_bandmap_requires_cat = "<?= __("(requires CAT connection)"); ?>";
var lang_bandmap_spotter = "<?= __("Spotter"); ?>";
var lang_bandmap_comment = "<?= __("Comment"); ?>";
var lang_bandmap_age = "<?= __("Age"); ?>";
@@ -88,6 +88,12 @@
var lang_bandmap_no_spots_filters = "<?= __("No spots found for selected filters"); ?>";
var lang_bandmap_error_loading = "<?= __("Error loading spots. Please try again."); ?>";
// Offline radio status messages
var lang_bandmap_show_all_modes = "<?= __("Show all modes"); ?>";
var lang_bandmap_show_all_spots = "<?= __("Show all spots"); ?>";
// DX Map Visualization
// DX Map translation strings
var lang_bandmap_draw_spotters = "<?= __("Draw Spotters"); ?>";
var lang_bandmap_extend_map = "<?= __("Extend Map"); ?>";
@@ -98,8 +104,8 @@
var lang_bandmap_mode = "<?= __("Mode"); ?>";
var lang_bandmap_band = "<?= __("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 = '<?php echo $this->optionslib->get_option('option_map_tile_server');?>';
@@ -149,41 +155,54 @@
<!-- Filters Section with darker background and rounded corners -->
<div class="menu-bar">
<!-- Row 1: Radio Status (left) | Radio Selector & CAT Control (right) -->
<!-- Row 1: CAT Connection, Radio Selector, Radio Status (left) | de Continents (right) -->
<div class="d-flex flex-wrap align-items-center gap-2 mb-2">
<!-- Left: Radio Status Panel (dynamically populated by JavaScript) -->
<div id="radio_status" class="flex-shrink-0"></div>
<!-- Left: CAT Connection Button -->
<button class="btn btn-sm btn-secondary flex-shrink-0" type="button" id="toggleCatTracking" title="<?= __("When selected the filters will be set basing on your current radio status"); ?>">
<i class="fas fa-radio"></i> <span class="d-none d-sm-inline"><?= __("CAT Connection"); ?></span>
</button>
<!-- Spacer to push right content to end -->
<div class="flex-grow-1"></div>
<!-- Radio Selector Dropdown -->
<small class="text-muted me-1 flex-shrink-0 d-none d-md-inline"><?= __("Radio:"); ?></small>
<select class="form-select form-select-sm radios flex-shrink-0" id="radio" name="radio" style="width: auto; min-width: 150px;">
<option value="0" selected="selected"><?= __("None"); ?></option>
<option value="ws"<?php if ($this->session->userdata('radio') == 'ws') { echo ' selected="selected"'; } ?>><?= __("Live - ") . __("WebSocket (Requires WLGate>=1.1.10)"); ?></option>
<?php foreach ($radios->result() as $row) { ?>
<option value="<?php echo $row->id; ?>" <?php if($this->session->userdata('radio') == $row->id) { echo "selected=\"selected\""; } ?>><?= __("Polling - ") . $row->radio; ?><?php if ($radio_last_updated->id == $row->id) { echo "(".__("last updated").")"; } else { echo ''; } ?></option>
<?php } ?>
</select>
<!-- Right: Radio Selector and CAT Control -->
<div class="d-flex gap-2 align-items-center">
<small class="text-muted me-1 flex-shrink-0 d-none d-md-inline"><?= __("Radio:"); ?></small>
<select class="form-select form-select-sm radios flex-shrink-0" id="radio" name="radio" style="width: auto; min-width: 150px;">
<option value="0" selected="selected"><?= __("None"); ?></option>
<option value="ws"<?php if ($this->session->userdata('radio') == 'ws') { echo ' selected="selected"'; } ?>><?= __("Live - ") . __("WebSocket (Requires WLGate>=1.1.10)"); ?></option>
<?php foreach ($radios->result() as $row) { ?>
<option value="<?php echo $row->id; ?>" <?php if($this->session->userdata('radio') == $row->id) { echo "selected=\"selected\""; } ?>><?= __("Polling - ") . $row->radio; ?><?php if ($radio_last_updated->id == $row->id) { echo "(".__("last updated").")"; } else { echo ''; } ?></option>
<?php } ?>
</select>
<!-- CAT Control Button -->
<button class="btn btn-sm btn-secondary flex-shrink-0" type="button" id="toggleCatTracking" title="<?= __("When selected the filters will be set basing on your current radio status"); ?>">
<i class="fas fa-radio"></i> <span class="d-none d-sm-inline"><?= __("CAT Control"); ?></span>
</button>
<!-- Radio Status Panel (ultra-compact, dynamically populated by JavaScript) -->
<div id="radio_status" class="d-flex align-items-center" style="flex: 1 1 auto; min-width: 0;"></div>
<!-- Right: de Continent Filter Buttons -->
<div class="d-flex flex-wrap gap-2 align-items-center">
<small class="text-muted me-1 flex-shrink-0"><?= __("de:"); ?></small>
<div class="btn-group flex-shrink-0" role="group">
<button class="btn btn-sm btn-secondary" type="button" id="toggleAllContinentsFilter" title="<?= __("Select all continents"); ?>"><?= __("All"); ?></button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleAfricaFilter" title="<?= __("Toggle Africa continent filter"); ?>">AF</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleAntarcticaFilter" title="<?= __("Toggle Antarctica continent filter"); ?>">AN</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleAsiaFilter" title="<?= __("Toggle Asia continent filter"); ?>">AS</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleEuropeFilter" title="<?= __("Toggle Europe continent filter"); ?>">EU</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleNorthAmericaFilter" title="<?= __("Toggle North America continent filter"); ?>">NA</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleOceaniaFilter" title="<?= __("Toggle Oceania continent filter"); ?>">OC</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleSouthAmericaFilter" title="<?= __("Toggle South America continent filter"); ?>">SA</button>
</div>
</div>
</div>
<!-- Row 2: Advanced Filters, Clear Filters (left) | de Continents (right) -->
<!-- Row 3: Advanced Filters, Favorites, Clear Filters | Band Filters (left) and Mode Filters (right) -->
<div class="d-flex flex-wrap align-items-center gap-2 mb-2">
<!-- Left: Advanced Filters and Clear Filters -->
<!-- Left: Advanced Filters, Favorites, Clear Filters, and Band Filter Buttons -->
<div class="d-flex flex-wrap gap-2 align-items-center">
<div class="dropdown">
<!-- Filter Dropdown Button -->
<button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="filterDropdown" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
<i class="fas fa-filter" id="filterIcon"></i> <?= __("Advanced Filters"); ?>
</button>
<div class="dropdown-menu dropdown-menu-start p-3 mt-2" aria-labelledby="filterDropdown" style="min-width: 1264px; max-width: 95vw; max-height: 98vh; overflow-y: auto;">
<!-- Button Group: Advanced Filters + Favorites + Clear Filters -->
<div class="btn-group flex-shrink-0" role="group">
<div class="dropdown">
<!-- Filter Dropdown Button -->
<button class="btn btn-sm btn-secondary" type="button" id="filterDropdown" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside" title="<?= __("Advanced Filters"); ?>">
<i class="fas fa-filter" id="filterIcon"></i>
</button>
<div class="dropdown-menu dropdown-menu-start p-3 mt-2" aria-labelledby="filterDropdown" style="min-width: 1264px; max-width: 95vw; max-height: 98vh; overflow-y: auto;">
<!-- Filter tip -->
<div class="filter-tip">
<i class="fas fa-info-circle"></i>
@@ -317,47 +336,20 @@
<button type="button" class="btn btn-sm btn-success me-2" id="applyFiltersButtonPopup">
<i class="fas fa-check"></i> <?= __("Apply Filters"); ?>
</button>
<button type="button" class="btn btn-sm btn-secondary" id="clearFiltersButton">
<i class="fas fa-eraser text-danger"></i> <?= __("Clear Filters"); ?>
<button type="button" class="btn btn-sm btn-secondary" id="clearFiltersButton" title="<?= __("Clear Filters"); ?>">
<i class="fas fa-filter-circle-xmark text-danger"></i>
</button>
</div>
</div>
</div>
<!-- Clear Filters Button -->
<button class="btn btn-sm btn-secondary" type="button" id="clearFiltersButtonQuick" title="<?= __("Clear all filters except De Continent"); ?>">
<i class="fas fa-eraser text-danger"></i> <span class="d-none d-sm-inline"><?= __("Clear Filters"); ?></span>
</button>
</div>
<!-- Spacer to push right content to end -->
<div class="flex-grow-1"></div>
<!-- Right: de Continent Filter Buttons -->
<div class="d-flex flex-wrap gap-2 align-items-center">
<small class="text-muted me-1 flex-shrink-0"><?= __("de:"); ?></small>
<div class="btn-group flex-shrink-0" role="group">
<button class="btn btn-sm btn-secondary" type="button" id="toggleAllContinentsFilter" title="<?= __("Select all continents"); ?>"><?= __("All"); ?></button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleAfricaFilter" title="<?= __("Toggle Africa continent filter"); ?>">AF</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleAntarcticaFilter" title="<?= __("Toggle Antarctica continent filter"); ?>">AN</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleAsiaFilter" title="<?= __("Toggle Asia continent filter"); ?>">AS</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleEuropeFilter" title="<?= __("Toggle Europe continent filter"); ?>">EU</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleNorthAmericaFilter" title="<?= __("Toggle North America continent filter"); ?>">NA</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleOceaniaFilter" title="<?= __("Toggle Oceania continent filter"); ?>">OC</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleSouthAmericaFilter" title="<?= __("Toggle South America continent filter"); ?>">SA</button>
</div>
</div>
</div>
<!-- Row 3: My Favorites & Band Filters (left) and Mode Filters (right) -->
<div class="d-flex flex-wrap align-items-center gap-2 mb-2">
<!-- Left: My Favorites and Band Filter Buttons -->
<div class="d-flex flex-wrap gap-2 align-items-center">
<!-- Favorites Button -->
<div class="btn-group flex-shrink-0" role="group">
<!-- Favorites Button (part of button group) -->
<button class="btn btn-sm btn-secondary" type="button" id="toggleFavoritesFilter" title="<?= __("Apply your favorite bands and modes (configured in Band and Mode settings)"); ?>">
<i class="fas fa-star text-warning"></i>
</button>
<!-- Clear Filters Button (part of button group) -->
<button class="btn btn-sm btn-secondary" type="button" id="clearFiltersButtonQuick" title="<?= __("Clear all filters except De Continent"); ?>">
<i class="fas fa-filter-circle-xmark text-danger"></i>
</button>
</div>
<!-- MF Band -->
@@ -399,31 +391,39 @@
<!-- Row 4: Quick Filters -->
<div class="d-flex flex-wrap align-items-center gap-2 mb-2">
<!-- Quick Filter Toggle Buttons -->
<!-- LoTW Users Button (separate) -->
<div class="btn-group flex-shrink-0" role="group">
<button class="btn btn-sm btn-secondary" type="button" id="toggleLotwFilter" title="<?= __("Toggle LoTW User filter"); ?>">
<i class="fas fa-upload"></i> <span class="d-none d-sm-inline"><?= __("LoTW users"); ?></span>
</button>
</div>
<!-- DX Spot, Continent, Country, Callsign Group -->
<div class="btn-group flex-shrink-0" role="group">
<button class="btn btn-sm btn-secondary" type="button" id="toggleDxSpotFilter" title="<?= __("Toggle DX Spot filter (spotted continent ≠ spotter continent)"); ?>">
<i class="fas fa-globe"></i> <span class="d-none d-sm-inline"><?= __("DX Spot"); ?></span>
<i class="fas fa-globe"></i> <span class="d-none d-sm-inline"><?= __("DX Spots"); ?></span>
</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleNewContinentFilter" title="<?= __("Toggle New Continent filter"); ?>">
<i class="fas fa-medal" style="color: #FFD700;"></i> <span class="d-none d-sm-inline"><?= __("Continent"); ?></span>
<i class="fas fa-medal" style="color: #FFD700;"></i> <span class="d-none d-sm-inline"><?= __("New Continents"); ?></span>
</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleDxccNeededFilter" title="<?= __("Toggle New Country filter"); ?>">
<i class="fas fa-medal" style="color: #C0C0C0;"></i> <span class="d-none d-sm-inline"><?= __("Country"); ?></span>
<i class="fas fa-medal" style="color: #C0C0C0;"></i> <span class="d-none d-sm-inline"><?= __("New DXCCs"); ?></span>
</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleNewCallsignFilter" title="<?= __("Toggle New Callsign filter"); ?>">
<i class="fas fa-medal" style="color: #CD7F32;"></i> <span class="d-none d-sm-inline"><?= __("Callsign"); ?></span>
<i class="fas fa-medal" style="color: #CD7F32;"></i> <span class="d-none d-sm-inline"><?= __("New Callsigns"); ?></span>
</button>
</div>
<!-- Fresh, Contest, Ref. Hunter Group -->
<div class="btn-group flex-shrink-0" role="group">
<button class="btn btn-sm btn-secondary" type="button" id="toggleFreshFilter" title="<?= __("Toggle Fresh spots filter (< 5 minutes old)"); ?>">
<i class="fas fa-bolt"></i> <span class="d-none d-sm-inline"><?= __("Fresh Spots"); ?></span>
</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleContestFilter" title="<?= __("Toggle Contest filter"); ?>">
<i class="fas fa-trophy"></i> <span class="d-none d-sm-inline"><?= __("Contest"); ?></span>
<i class="fas fa-trophy"></i> <span class="d-none d-sm-inline"><?= __("Contest Spots"); ?></span>
</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleGeoHunterFilter" title="<?= __("Toggle Geo Hunter (POTA/SOTA/IOTA/WWFF)"); ?>">
<i class="fas fa-hiking"></i> <span class="d-none d-sm-inline"><?= __("Ref. Hunter"); ?></span>
</button>
<button class="btn btn-sm btn-secondary" type="button" id="toggleFreshFilter" title="<?= __("Toggle Fresh spots filter (< 5 minutes old)"); ?>">
<i class="fas fa-bolt"></i> <span class="d-none d-sm-inline"><?= __("Fresh"); ?></span>
<i class="fas fa-hiking"></i> <span class="d-none d-sm-inline"><?= __("Referenced Spots"); ?></span>
</button>
</div>

7
application/views/interface_assets/footer.php
View File

@@ -113,7 +113,7 @@
var lang_qso_gridsquare_help = "<?= __("Enter multiple (4-digit) grids separated with commas. For example: IO77,IO78"); ?>";
var lang_cat_live = "<?= __("live"); ?>";
var lang_cat_polling = "<?= __("polling"); ?>";
var lang_cat_polling_tooltip = "<?= __("Periodic polling is slow. When operating locally, WebSockets are a more convenient way to control your radio in real-time."); ?>";
var lang_cat_polling_tooltip = "<?= __("Note: Periodic polling is slow. When operating locally, WebSockets are a more convenient way to control your radio in real-time."); ?>";
var lang_cat_tx = "<?= __("TX"); ?>";
var lang_cat_rx = "<?= __("RX"); ?>";
var lang_cat_tx_rx = "<?= __("TX/RX"); ?>";
@@ -132,6 +132,11 @@
var lang_qso_location_is_fetched_from_provided_gridsquare = "<?= __("Location is fetched from provided gridsquare"); ?>";
var lang_qso_location_is_fetched_from_dxcc_coordinates = "<?= __("Location is fetched from DXCC coordinates (no gridsquare provided)"); ?>";
// CAT Offline Status Messages
var lang_cat_working_offline = "<?= __("Working without CAT connection"); ?>";
var lang_cat_offline_cat_disabled = "<?= __("CAT connection is currently disabled. Enable CAT connection to work in online mode with your radio."); ?>";
var lang_cat_offline_no_radio = "<?= __("To connect your radio to Wavelog, visit the Wavelog Wiki for setup instructions."); ?>";
// CAT Configuration
var cat_timeout_minutes = Math.floor(<?php echo $this->optionslib->get_option('cat_timeout_interval'); ?> / 60);
</script>

49
assets/css/bandmap_list.css
View File

@@ -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;

209
assets/js/cat.js
View File

@@ -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 = '<span id="radio_cat_state" style="display: inline-flex; align-items: center; font-size: 0.875rem;">' +
'<i class="fas fa-unlink text-warning" style="margin-right: 5px;"></i>' +
'<span style="margin-right: 5px;">' + offlineText + '</span>' +
'<i id="radio-status-icon" class="fas fa-info-circle" style="cursor: help;" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom"></i>' +
'</span>';
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 = ' <i class="fas fa-question-circle" style="font-size: 0.9em; cursor: help;" data-bs-toggle="tooltip" title="' + lang_cat_polling_tooltip + '"></i>';
connectionTooltip = ' <span class="fas fa-question-circle" style="font-size: 0.9em; cursor: help;" data-bs-toggle="tooltip" title="' + lang_cat_polling_tooltip + '"></span>';
}
// Build radio info line
@@ -461,7 +538,95 @@ $(document).ready(function() {
var html = baseStyle + icon + content + '</div>';
// 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 = '<b>' + radioName + '</b> (' + connectionType + ')';
// Add frequency info
if(data.frequency_rx != null && data.frequency_rx != 0) {
tooltipContent += '<br><b>' + lang_cat_tx + ':</b> ' + data.frequency_formatted;
data.frequency_rx_formatted = format_frequency(data.frequency_rx);
if (data.frequency_rx_formatted) {
tooltipContent += '<br><b>' + lang_cat_rx + ':</b> ' + data.frequency_rx_formatted;
}
} else {
tooltipContent += '<br><b>' + lang_cat_tx_rx + ':</b> ' + data.frequency_formatted;
}
// Add mode
if(data.mode != null) {
tooltipContent += '<br><b>' + lang_cat_mode + ':</b> ' + data.mode;
}
// Add power
if(data.power != null && data.power != 0) {
tooltipContent += '<br><b>' + lang_cat_power + ':</b> ' + data.power + 'W';
}
// Add polling tooltip if applicable
if ($(".radios option:selected").val() != 'ws') {
tooltipContent += '<br><br><i>' + lang_cat_polling_tooltip + '</i>';
}
} else if (state === 'error') {
radioName = typeof data === 'string' ? data : $('select.radios option:selected').text();
tooltipContent = lang_cat_connection_error + ': <b>' + radioName + '</b><br>' + lang_cat_connection_lost;
} else if (state === 'timeout') {
radioName = typeof data === 'string' ? data : $('select.radios option:selected').text();
tooltipContent = lang_cat_connection_timeout + ': <b>' + radioName + '</b><br>' + lang_cat_data_stale;
} else if (state === 'not_logged_in') {
radioName = '';
tooltipContent = lang_cat_not_logged_in;
}
var ultraCompactHtml = '<span id="radio_cat_state" style="display: inline-flex; align-items: center; font-size: 0.875rem;">' +
'<i class="fas fa-radio ' + iconClass + '" style="margin-right: 5px;"></i>' +
'<span style="margin-right: 5px;">' + radioName + '</span>' +
'<i id="radio-status-icon" class="fas fa-info-circle" style="cursor: help;" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom"></i>' +
'</span>';
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('<div id="radio_cat_state">' + html + '</div>');
@@ -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;
});

72
assets/js/sections/bandmap_list.js
View File

@@ -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: `<div class="dx-marker-label" data-dxcc-id="${dxccInfo.dxccId}" style="text-align: center; font-size: 10px; font-weight: bold; color: #000; background: ${fillColor}; padding: 1px 4px; border-radius: 2px; border: 1px solid ${borderColor}; box-shadow: 0 1px 2px rgba(0,0,0,0.3); white-space: nowrap;">
html: `<div class="dx-marker-label" data-dxcc-id="${dxccInfo.dxccId}" style="text-align: center; font-size: 10px; font-weight: bold; color: #000; background: ${fillColor}; padding: 1px 4px; border-radius: 2px; border: 2px solid ${darkerBorder}; box-shadow: 0 1px 2px rgba(0,0,0,0.3); white-space: nowrap;">
${prefix}${countText}
</div>`,
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
});