From 58d7eeeef3636ed14aad1af8f196e985fffa88fa Mon Sep 17 00:00:00 2001
From: Peter Goodhall <peter@magicbug.co.uk>
Date: Wed, 7 Jan 2026 16:07:14 +0000
Subject: [PATCH] Redesign IOTA awards page UI and add search

Improves the IOTA awards page with a modernized layout, enhanced filter section, and updated tab navigation. Adds a search box for filtering IOTA table entries by island group name or IOTA number, and refines summary table presentation. Improves accessibility and user experience with better styling and responsive design.
---
 application/views/awards/iota/index.php | 433 +++++++++++++++---------
 1 file changed, 270 insertions(+), 163 deletions(-)

diff --git a/application/views/awards/iota/index.php b/application/views/awards/iota/index.php
index fba689c50..6118085ce 100644
--- a/application/views/awards/iota/index.php
+++ b/application/views/awards/iota/index.php
@@ -30,13 +30,65 @@
   margin: 0 8px 0 0;
   opacity: 0.7;
 }
+
+.stats-card {
+  border-left: 4px solid #007bff;
+  padding: 20px;
+  margin-bottom: 15px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+}
+
+.stats-card h5 {
+  margin: 0 0 10px 0;
+  color: #333;
+  font-weight: 600;
+}
+
+.stats-number {
+  font-size: 28px;
+  font-weight: bold;
+  color: #007bff;
+  margin: 10px 0;
+}
+
+.filter-section {
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+  border: 1px solid #dee2e6;
+}
+
+.filter-section .form-label {
+  font-weight: 600;
+  color: #495057;
+}
+
+.table-iota {
+  font-size: 0.9rem;
+}
+
+.table-iota thead th {
+  background-color: #e9ecef;
+  font-weight: 600;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
 </style>
 
 
 <div class="container">
-        <!-- Award Info Box -->
-        <br>
-        <div id="awardInfoButton">
+    <div class="row">
+        <div class="col-lg-12">
+            <!-- Award Info Box -->
+            <div class="d-flex justify-content-between align-items-center mb-4 mt-3">
+                <h2><?php echo $page_title; ?></h2>
+                <button type="button" class="btn btn-primary" id="displayAwardInfo">
+                    <i class="fas fa-info-circle"></i> <?php echo lang('awards_info_button'); ?>
+                </button>
+            </div>
             <script>
             var lang_awards_info_button = "<?php echo lang('awards_info_button'); ?>";
             var lang_award_info_ln1 = "<?php echo lang('awards_iota_description_ln1'); ?>";
@@ -44,212 +96,267 @@
             var lang_award_info_ln3 = "<?php echo lang('awards_iota_description_ln3'); ?>";
             var lang_award_info_ln4 = "<?php echo lang('awards_iota_description_ln4'); ?>";
             </script>
-            <h2><?php echo $page_title; ?></h2>
-            <button type="button" class="btn btn-sm btn-primary me-1" id="displayAwardInfo"><?php echo lang('awards_info_button'); ?></button>
-        </div>
-        <!-- End of Award Info Box -->
-    <form class="form" action="<?php echo site_url('awards/iota'); ?>" method="post" enctype="multipart/form-data">
+            <!-- End of Award Info Box -->
+
+    <form class="form filter-section" action="<?php echo site_url('awards/iota'); ?>" method="post" enctype="multipart/form-data">
         <fieldset>
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="mb-3">
+                        <label class="form-label fw-bold">Deleted IOTA</label>
+                        <div>
+                            <div class="form-check form-check-inline">
+                                <input class="form-check-input" type="checkbox" name="includedeleted" id="includedeleted" value="1" <?php if ($this->input->post('includedeleted')) echo ' checked="checked"'; ?> >
+                                <label class="form-check-label" for="includedeleted">Include deleted</label>
+                            </div>
+                        </div>
+                    </div>
 
-            <div class="mb-3 row">
-                <div class="col-md-2 control-label" for="checkboxes">Deleted IOTA</div>
-                <div class="col-md-10">
-                    <div class="form-check-inline">
-                        <input class="form-check-input" type="checkbox" name="includedeleted" id="includedeleted" value="1" <?php if ($this->input->post('includedeleted')) echo ' checked="checked"'; ?> >
-                        <label class="form-check-label" for="includedeleted">Include deleted</label>
+                    <div class="mb-3">
+                        <label class="form-label fw-bold">Worked / Confirmed</label>
+                        <div>
+                            <div class="form-check form-check-inline">
+                                <input class="form-check-input" type="checkbox" name="worked" id="worked" value="1" <?php if ($this->input->post('worked') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
+                                <label class="form-check-label" for="worked">Show worked</label>
+                            </div>
+                            <div class="form-check form-check-inline">
+                                <input class="form-check-input" type="checkbox" name="confirmed" id="confirmed" value="1" <?php if ($this->input->post('confirmed') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
+                                <label class="form-check-label" for="confirmed">Show confirmed</label>
+                            </div>
+                            <div class="form-check form-check-inline">
+                                <input class="form-check-input" type="checkbox" name="notworked" id="notworked" value="1" <?php if ($this->input->post('notworked') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
+                                <label class="form-check-label" for="notworked">Show not worked</label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label class="form-label fw-bold">Continents</label>
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" name="Antarctica" id="Antarctica" value="1" <?php if ($this->input->post('Antarctica') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
+                                    <label class="form-check-label" for="Antarctica">Antarctica</label>
+                                </div>
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" name="Africa" id="Africa" value="1" <?php if ($this->input->post('Africa') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
+                                    <label class="form-check-label" for="Africa">Africa</label>
+                                </div>
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" name="Asia" id="Asia" value="1" <?php if ($this->input->post('Asia') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
+                                    <label class="form-check-label" for="Asia">Asia</label>
+                                </div>
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" name="Europe" id="Europe" value="1" <?php if ($this->input->post('Europe') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
+                                    <label class="form-check-label" for="Europe">Europe</label>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" name="NorthAmerica" id="NorthAmerica" value="1" <?php if ($this->input->post('NorthAmerica') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
+                                    <label class="form-check-label" for="NorthAmerica">North America</label>
+                                </div>
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" name="SouthAmerica" id="SouthAmerica" value="1" <?php if ($this->input->post('SouthAmerica') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
+                                    <label class="form-check-label" for="SouthAmerica">South America</label>
+                                </div>
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" name="Oceania" id="Oceania" value="1" <?php if ($this->input->post('Oceania') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
+                                    <label class="form-check-label" for="Oceania">Oceania</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-md-6">
+                    <div class="mb-3">
+                        <label class="form-label fw-bold" for="band">Band</label>
+                        <select id="band2" name="band" class="form-select">
+                            <option value="All" <?php if ($this->input->post('band') == "All" || $this->input->method() !== 'post') echo ' selected'; ?> >Every band</option>
+                            <?php foreach($worked_bands as $band) {
+                                echo '<option value="' . $band . '"';
+                                if ($this->input->post('band') == $band) echo ' selected';
+                                echo '>' . $band . '</option>'."\n";
+                            } ?>
+                        </select>
+                    </div>
+
+                    <div class="mb-3">
+                        <label class="form-label fw-bold" for="mode">Mode</label>
+                        <select id="mode" name="mode" class="form-select">
+                            <option value="All" <?php if ($this->input->post('mode') == "All" || $this->input->method() !== 'mode') echo ' selected'; ?>>All</option>
+                            <?php
+                            foreach($modes->result() as $mode){
+                                if ($mode->submode == null) {
+                                    echo '<option value="' . $mode->mode . '"';
+                                    if ($this->input->post('mode') == $mode->mode) echo ' selected';
+                                    echo '>'. $mode->mode . '</option>'."\n";
+                                } else {
+                                    echo '<option value="' . $mode->submode . '"';
+                                    if ($this->input->post('mode') == $mode->submode) echo ' selected';
+                                    echo '>' . $mode->submode . '</option>'."\n";
+                                }
+                            }
+                            ?>
+                        </select>
+                    </div>
+
+                    <div class="mb-3">
+                        <label class="form-label fw-bold">Actions</label>
+                        <div class="d-flex gap-2">
+                            <button id="button1id" type="submit" name="button1id" class="btn btn-primary">
+                                <i class="fas fa-search"></i> Show Results
+                            </button>
+                            <button id="button2id" type="reset" name="button2id" class="btn btn-secondary">
+                                <i class="fas fa-redo"></i> Reset
+                            </button>
+                            <?php if ($iota_array) { ?>
+                                <button type="button" onclick="load_iota_map();" class="btn btn-info">
+                                    <i class="fas fa-globe-americas"></i> Show Map
+                                </button>
+                            <?php } ?>
+                        </div>
                     </div>
                 </div>
             </div>
-
-            <div class="mb-3 row">
-                <div class="col-md-2" for="checkboxes">Worked / Confirmed</div>
-                <div class="col-md-10">
-                    <div class="form-check-inline">
-                        <input class="form-check-input" type="checkbox" name="worked" id="worked" value="1" <?php if ($this->input->post('worked') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
-                        <label class="form-check-label" for="worked">Show worked</label>
-                    </div>
-                    <div class="form-check-inline">
-                        <input class="form-check-input" type="checkbox" name="confirmed" id="confirmed" value="1" <?php if ($this->input->post('confirmed') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
-                        <label class="form-check-label" for="confirmed">Show confirmed</label>
-                    </div>
-                    <div class="form-check-inline">
-                        <input class="form-check-input" type="checkbox" name="notworked" id="notworked" value="1" <?php if ($this->input->post('notworked') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
-                        <label class="form-check-label" for="notworked">Show not worked</label>
-                    </div>
-                </div>
-            </div>
-
-            <div class="mb-3 row">
-                <div class="col-md-2">Continents</div>
-                <div class="col-md-10">
-                    <div class="form-check-inline">
-                        <input class="form-check-input" type="checkbox" name="Antarctica" id="Antarctica" value="1" <?php if ($this->input->post('Antarctica') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
-                        <label class="form-check-label" for="Antarctica">Antarctica</label>
-                    </div>
-                    <div class="form-check-inline">
-                        <input class="form-check-input"  type="checkbox" name="Africa" id="Africa" value="1" <?php if ($this->input->post('Africa') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
-                        <label class="form-check-label" for="Africa">Africa</label>
-                    </div>
-                    <div class="form-check-inline">
-                        <input class="form-check-input"  type="checkbox" name="Asia" id="Asia" value="1" <?php if ($this->input->post('Asia') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
-                        <label class="form-check-label" for="Asia">Asia</label>
-                    </div>
-                    <div class="form-check-inline">
-                        <input class="form-check-input"  type="checkbox" name="Europe" id="Europe" value="1" <?php if ($this->input->post('Europe') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
-                        <label class="form-check-label" for="Europe">Europe</label>
-                    </div>
-                    <div class="form-check-inline">
-                        <input class="form-check-input"  type="checkbox" name="NorthAmerica" id="NorthAmerica" value="1" <?php if ($this->input->post('NorthAmerica') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
-                        <label class="form-check-label" for="NorthAmerica">North America</label>
-                    </div>
-                    <div class="form-check-inline">
-                        <input class="form-check-input"  type="checkbox" name="SouthAmerica" id="SouthAmerica" value="1" <?php if ($this->input->post('SouthAmerica') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
-                        <label class="form-check-label" for="SouthAmerica">South America</label>
-                    </div>
-                    <div class="form-check-inline">
-                        <input class="form-check-input"  type="checkbox" name="Oceania" id="Oceania" value="1" <?php if ($this->input->post('Oceania') || $this->input->method() !== 'post') echo ' checked="checked"'; ?> >
-                        <label class="form-check-label" for="Oceania">Oceania</label>
-                    </div>
-                </div>
-            </div>
-
-            <div class="mb-3 row">
-                <label class="col-md-2 control-label" for="band">Band</label>
-                <div class="col-md-2">
-                    <select id="band2" name="band" class="form-select form-select-sm">
-                        <option value="All" <?php if ($this->input->post('band') == "All" || $this->input->method() !== 'post') echo ' selected'; ?> >Every band</option>
-                        <?php foreach($worked_bands as $band) {
-                            echo '<option value="' . $band . '"';
-                            if ($this->input->post('band') == $band) echo ' selected';
-                            echo '>' . $band . '</option>'."\n";
-                        } ?>
-                    </select>
-                </div>
-            </div>
-
-			<div class="mb-3 row">
-				<label class="col-md-2 control-label" for="mode">Mode</label>
-				<div class="col-md-2">
-					<select id="mode" name="mode" class="form-select form-select-sm">
-						<option value="All" <?php if ($this->input->post('mode') == "All" || $this->input->method() !== 'mode') echo ' selected'; ?>>All</option>
-						<?php
-						foreach($modes->result() as $mode){
-							if ($mode->submode == null) {
-								echo '<option value="' . $mode->mode . '"';
-								if ($this->input->post('mode') == $mode->mode) echo ' selected';
-								echo '>'. $mode->mode . '</option>'."\n";
-							} else {
-								echo '<option value="' . $mode->submode . '"';
-								if ($this->input->post('mode') == $mode->submode) echo ' selected';
-								echo '>' . $mode->submode . '</option>'."\n";
-							}
-						}
-						?>
-					</select>
-				</div>
-			</div>
-
-            <div class="mb-3 row">
-                <label class="col-md-2 control-label" for="button1id"></label>
-                <div class="col-md-10">
-                    <button id="button2id" type="reset" name="button2id" class="btn btn-sm btn-warning">Reset</button>
-                    <button id="button1id" type="submit" name="button1id" class="btn btn-sm btn-primary">Show</button>
-                    <?php if ($iota_array) {
-                        ?><button type="button" onclick="load_iota_map();" class="btn btn-info btn-sm"><i class="fas fa-globe-americas"></i> Show IOTA Map</button>
-                    <?php }?>
-                </div>
-            </div>
-
         </fieldset>
     </form>
 
-    <ul class="nav nav-tabs" id="myTab" role="tablist">
-        <li class="nav-item">
-            <a class="nav-link active" id="table-tab" data-bs-toggle="tab" href="#table" role="tab" aria-controls="table" aria-selected="true">Table</a>
+    <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
+        <li class="nav-item" role="presentation">
+            <button class="nav-link active" id="table-tab" data-bs-toggle="tab" data-bs-target="#table" type="button" role="tab" aria-controls="table" aria-selected="true">
+                <i class="fas fa-table"></i> Table View
+            </button>
         </li>
-        <li class="nav-item">
-            <a class="nav-link" id="map-tab" onclick="load_iota_map();" data-bs-toggle="tab" href="#iotamaptab" role="tab" aria-controls="home" aria-selected="false">Map</a>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="map-tab" onclick="load_iota_map();" data-bs-toggle="tab" data-bs-target="#iotamaptab" type="button" role="tab" aria-controls="iotamaptab" aria-selected="false">
+                <i class="fas fa-map-marked-alt"></i> Map View
+            </button>
         </li>
     </ul>
-    <br />
 
     <div class="tab-content" id="myTabContent">
-        <div class="tab-pane fade" id="iotamaptab" role="tabpanel" aria-labelledby="home-tab">
-    <br />
-
-    <div id="iotamap" class="map-leaflet" ></div>
-
-    </div>
+        <div class="tab-pane fade" id="iotamaptab" role="tabpanel" aria-labelledby="map-tab">
+            <div id="iotamap" class="map-leaflet"></div>
+        </div>
 
         <div class="tab-pane fade show active" id="table" role="tabpanel" aria-labelledby="table-tab">
+    
+    <!-- Table Search Box -->
+    <?php if ($iota_array): ?>
+    <div class="table-search mb-3">
+        <input type="text" id="searchInput" class="form-control" placeholder="Search IOTA by island group name or IOTA number...">
+    </div>
+    <?php endif; ?>
 
     <?php
-    $i = 1;
     if ($iota_array) {
         echo '
-
-                <table style="width:100%;" class="table table-sm tableiota table-bordered table-hover table-striped table-condensed text-center">
-                    <thead>
+        <div class="table-responsive">
+            <table class="table table-iota table-bordered table-hover table-striped text-center" id="iota_table">
+                <thead class="table-light">
                     <tr>
-                        <td>#</td>
-                        <td>IOTA</td>
-                        <td>Prefix</td>
-                        <td>Name</td>';
+                        <th scope="col">IOTA</th>
+                        <th scope="col">Prefix</th>
+                        <th scope="col">Name</th>';
         if ($this->input->post('includedeleted'))
-            echo '      <td>Deleted</td>';
+            echo '      <th scope="col">Deleted</th>';
 
         foreach($bands as $band) {
-            echo '<td>' . $band . '</td>';
+            echo '<th scope="col">' . $band . '</th>';
         }
         echo '</tr>
-                    </thead>
-                    <tbody>';
+                </thead>
+                <tbody>';
         foreach ($iota_array as $iota => $value) {
             echo '<tr>
-                            <td>'. $i++ .'</td>
-                            <td>'. $iota .'</td>';
+                        <td class="fw-bold">'. $iota .'</td>';
             foreach ($value  as $key) {
                 echo '<td>' . $key . '</td>';
             }
             echo '</tr>';
         }
 
-        echo '</table>
-        <h2>Summary</h2>
+        echo '</tbody>
+            </table>
+        </div>
 
-        <table class="table-sm tablesummary table table-bordered table-hover table-striped table-condensed text-center">
-        <thead>
-        <tr><td></td>';
+        <div class="mt-4">
+            <h3 class="mb-3">
+                <i class="fas fa-chart-bar"></i> Summary
+            </h3>
+
+            <div class="table-responsive">
+                <table class="table table-bordered table-hover table-striped text-center">
+                    <thead class="table-light">
+                        <tr>
+                            <th scope="col">Category</th>';
 
         foreach($bands as $band) {
-            echo '<td>' . $band . '</td>';
+            echo '<th scope="col">' . $band . '</th>';
         }
-        echo '<td>Total</td></tr>';
+        echo '<th scope="col" class="table-primary fw-bold">Total</th></tr>
+                    </thead>
+                    <tbody>
+                        <tr class="table-success">
+                            <th scope="row" class="text-start">
+                                <i class="fas fa-check-circle text-success"></i> Total worked
+                            </th>';
 
-        echo '</thead>
-        <tbody>
-
-        <tr><td>Total worked</td>';
-
-        foreach ($iota_summary['worked'] as $dxcc) {      // Fills the table with the data
-            echo '<td style="text-align: center">' . $dxcc . '</td>';
-        }
-
-        echo '</tr><tr>
-        <td>Total confirmed</td>';
-        foreach ($iota_summary['confirmed'] as $dxcc) {      // Fills the table with the data
-            echo '<td style="text-align: center">' . $dxcc . '</td>';
+        foreach ($iota_summary['worked'] as $dxcc) {
+            echo '<td>' . $dxcc . '</td>';
         }
 
         echo '</tr>
-        </table>
+                        <tr class="table-info">
+                            <th scope="row" class="text-start">
+                                <i class="fas fa-certificate text-info"></i> Total confirmed
+                            </th>';
+        foreach ($iota_summary['confirmed'] as $dxcc) {
+            echo '<td>' . $dxcc . '</td>';
+        }
+
+        echo '</tr>
+                    </tbody>
+                </table>
+            </div>
         </div>';
 
     }
     else {
-        echo '<div class="alert alert-danger" role="alert">Nothing found!</div>';
+        echo '<div class="alert alert-warning d-flex align-items-center" role="alert">
+                <i class="fas fa-exclamation-triangle me-2"></i>
+                <div>No IOTA data found! Please adjust your filters and try again.</div>
+              </div>';
     }
     ?>
-                    </div>
         </div>
+    </div>
+        </div>
+    </div>
 </div>
+
+<script>
+// Table search functionality
+const searchInput = document.getElementById('searchInput');
+if (searchInput) {
+    searchInput.addEventListener('keyup', function() {
+        const searchTerm = this.value.toLowerCase();
+        const table = document.getElementById('iota_table');
+        const rows = table.querySelectorAll('tbody tr');
+
+        rows.forEach(row => {
+            const iotaNumber = row.querySelectorAll('td')[0].textContent.toLowerCase();
+            const prefix = row.querySelectorAll('td')[1].textContent.toLowerCase();
+            const name = row.querySelectorAll('td')[2].textContent.toLowerCase();
+            
+            if (iotaNumber.includes(searchTerm) || prefix.includes(searchTerm) || name.includes(searchTerm)) {
+                row.style.display = '';
+            } else {
+                row.style.display = 'none';
+            }
+        });
+    });
+}
+</script>