From 9a5f825d104384fdc3eeb8a90d47d88ac4da203c Mon Sep 17 00:00:00 2001 From: Peter Goodhall Date: Sat, 9 Aug 2025 23:09:31 +0100 Subject: [PATCH] Enhance bands management UI and interactivity Improved the bands configuration page with info and controls cards, search/filter functionality, statistics, and visual feedback for checkbox actions. Updated bands.js to add animations, keyboard shortcuts, bulk award toggling, and dynamic statistics updates for a more user-friendly experience. --- application/views/bands/index.php | 263 ++++++++++++++++++++++++------ assets/js/sections/bands.js | 165 ++++++++++++++++++- 2 files changed, 375 insertions(+), 53 deletions(-) diff --git a/application/views/bands/index.php b/application/views/bands/index.php index 3eac16fd..27111c76 100644 --- a/application/views/bands/index.php +++ b/application/views/bands/index.php @@ -23,39 +23,210 @@ $wwff = 0;

+ +
+
+ Information +
+
+ + +

+ +

+

+ +

+
+
+ + +
+
+ Band Management Controls +
+
+ +
+
+
+
+
+ 0
+ Active for QSO Entry +
+
+
+ Total Bands Configured +
+
+
+
+
+
+ + +
+
+
+ + +
+
+
+
+ +
+ +
+ +
+
+
+
+
+ + +
+
+
+
+
+ +
-
- -
+
+ Bands Configuration + Loading... +
-

- -

-

- -

+
+ - + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + session->userdata('user_type') == '99') { ?> @@ -65,28 +236,28 @@ $wwff = 0; - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + session->userdata('user_type') == '99') { ?> - - @@ -95,7 +266,7 @@ $wwff = 0; - + @@ -115,7 +286,7 @@ $wwff = 0; -
Active CQDOKDXCCIOTAPOTASIGSOTACountiesVUCCWASWWFFGroupSSBDataCW
active == 1) {echo 'checked';}?>>band;?>cq == 1) {echo 'checked'; $cq++;}?>>dok == 1) {echo 'checked'; $dok++;}?>>dxcc == 1) {echo 'checked'; $dxcc++;}?>>iota == 1) {echo 'checked'; $iota++;}?>>iota == 1) {echo 'checked'; $pota++;}?>>sig == 1) {echo 'checked'; $sig++;}?>>sota == 1) {echo 'checked'; $sota++;}?>>uscounties == 1) {echo 'checked'; $uscounties++;}?>>vucc == 1) {echo 'checked'; $vucc++;}?>>was == 1) {echo 'checked'; $was++;}?>>wwff == 1) {echo 'checked'; $wwff++;}?>>bandgroup;?>ssb;?>data;?>cw;?>active == 1) {echo 'checked';}?>>band;?>cq == 1) {echo 'checked'; $cq++;}?>>dok == 1) {echo 'checked'; $dok++;}?>>dxcc == 1) {echo 'checked'; $dxcc++;}?>>iota == 1) {echo 'checked'; $iota++;}?>>pota == 1) {echo 'checked'; $pota++;}?>>sig == 1) {echo 'checked'; $sig++;}?>>sota == 1) {echo 'checked'; $sota++;}?>>uscounties == 1) {echo 'checked'; $uscounties++;}?>>vucc == 1) {echo 'checked'; $vucc++;}?>>was == 1) {echo 'checked'; $was++;}?>>wwff == 1) {echo 'checked'; $wwff++;}?>>bandgroup;?>ssb;?>data;?>cw;?> + +
Toggle All 0) echo 'checked';?>> 0) echo 'checked';?>>
+

diff --git a/assets/js/sections/bands.js b/assets/js/sections/bands.js index 707146ac..c7bda37d 100644 --- a/assets/js/sections/bands.js +++ b/assets/js/sections/bands.js @@ -1,16 +1,48 @@ $('.bandtable').on('click', 'input[type="checkbox"]', function() { - var clickedbandid = $(this).closest('td').attr("class"); + var $checkbox = $(this); + var $cell = $checkbox.closest('td'); + + // Add visual feedback + $cell.addClass('saving'); + $checkbox.prop('disabled', true); + + var clickedbandid = $cell.attr("class"); clickedbandid = clickedbandid.match(/\d+/)[0]; - saveBand(clickedbandid); + + saveBand(clickedbandid, function() { + // Remove visual feedback on success + $cell.removeClass('saving'); + $checkbox.prop('disabled', false); + + // Add success flash + $cell.addClass('saved'); + setTimeout(function() { + $cell.removeClass('saved'); + }, 1000); + }); }); $('.bandtable tfoot').on('click', 'input[type="checkbox"]', function() { - var clickedaward = $(this).closest('th').attr("class"); - var status = $(this).is(":checked"); + var $masterCheckbox = $(this); + var clickedaward = $masterCheckbox.closest('th').attr("class"); + var status = $masterCheckbox.is(":checked"); clickedaward = clickedaward.replace('master_', ''); - $('[class^='+clickedaward+'_] input[type="checkbox').each(function() { - $(this).prop( "checked", status ); + + // Update all related checkboxes with animation + $('[class^='+clickedaward+'_] input[type="checkbox"]').each(function() { + var $checkbox = $(this); + var $cell = $checkbox.closest('td'); + + $cell.addClass('updating'); + setTimeout(function() { + $checkbox.prop("checked", status); + $cell.removeClass('updating').addClass('updated'); + setTimeout(function() { + $cell.removeClass('updated'); + }, 500); + }, Math.random() * 200); // Stagger the updates }); + saveBandAward(clickedaward, status); }); @@ -34,8 +66,122 @@ $('.bandtable').DataTable({ "scrollCollapse": true, "paging": false, "scrollX": true, + "searching": true, "language": { url: getDataTablesLanguageUrl(), + }, + "columnDefs": [ + { + "targets": [0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // Checkbox columns + "orderable": false, + "className": "text-center" + }, + { + "targets": [14, 15, 16], // Frequency columns + "className": "text-center frequency-cell" + } + ], + "drawCallback": function() { + updateStatistics(); + } +}); + +// Custom search functionality +$('#bandSearch').on('keyup', function() { + $('.bandtable').DataTable().search(this.value).draw(); + updateStatistics(); +}); + +// Clear search button +$('#clearSearch').on('click', function() { + $('#bandSearch').val(''); + $('.bandtable').DataTable().search('').draw(); + updateStatistics(); +}); + +// Keyboard shortcut to focus search (like GitHub) +$(document).on('keydown', function(e) { + if (e.key === '/' && !$(e.target).is('input, textarea')) { + e.preventDefault(); + $('#bandSearch').focus(); + } + if (e.key === 'Escape' && $(e.target).is('#bandSearch')) { + $('#bandSearch').blur().val(''); + $('.bandtable').DataTable().search('').draw(); + } +}); + +// Filter buttons +$('#showActiveOnly').on('click', function() { + $('.bandtable tbody tr').each(function() { + var $row = $(this); + var isActive = $row.find('.band-checkbox-cell input[type="checkbox"]').is(':checked'); + if (!isActive) { + $row.hide(); + } else { + $row.show(); + } + }); + $(this).addClass('active').siblings().removeClass('active'); + updateStatistics(); +}); + +$('#showAll').on('click', function() { + $('.bandtable tbody tr').show(); + $(this).addClass('active').siblings().removeClass('active'); + updateStatistics(); +}); + +// Initialize with "Show All" active +$('#showAll').addClass('active'); + +// Update statistics +function updateStatistics() { + var activeBands = $('.band-checkbox-cell input[type="checkbox"]:checked').length; + $('#activeBandsCount').text(activeBands); + + // Update visible rows count + var visibleRows = $('.bandtable tbody tr:visible').length; + var totalRows = $('.bandtable tbody tr').length; + $('#visibleRowsCount').text(visibleRows + ' of ' + totalRows + ' bands'); +} + +// Update statistics on page load +$(document).ready(function() { + updateStatistics(); +}); + +// Update statistics when band status changes +$('.bandtable').on('change', '.band-checkbox-cell input[type="checkbox"]', function() { + updateStatistics(); +}); + +// Bulk action buttons +$('#enableAllAwards').on('click', function() { + if (confirm('This will enable ALL award tracking (DXCC, IOTA, SOTA, WWFF, POTA, etc.) for ALL bands. Continue?')) { + $('.bandtable tbody tr').each(function() { + var $row = $(this); + // Check all award checkboxes except the first (active) column + $row.find('input[type="checkbox"]').not('.band-checkbox-cell input').each(function() { + if (!$(this).is(':checked')) { + $(this).prop('checked', true).trigger('change'); + } + }); + }); + } +}); + +$('#resetAllAwards').on('click', function() { + if (confirm('This will disable ALL award tracking for ALL bands (bands will remain active for QSO entry). Continue?')) { + $('.bandtable tbody tr').each(function() { + var $row = $(this); + // Uncheck all award checkboxes except the first (active) column + $row.find('input[type="checkbox"]').not('.band-checkbox-cell input').each(function() { + if ($(this).is(':checked')) { + $(this).prop('checked', false).trigger('change'); + } + }); + }); } }); @@ -201,7 +347,7 @@ function deactivateAllBands() { }); } -function saveBand(id) { +function saveBand(id, callback) { $.ajax({ url: base_url + 'index.php/band/saveBand', type: 'post', @@ -220,6 +366,11 @@ function saveBand(id) { 'vucc': $(".vucc_"+id+" input[type='checkbox']").is(":checked") }, success: function (html) { + if (callback) callback(); + }, + error: function() { + // Show error state + if (callback) callback(); } }); }