cloudlog/application/views/activators/index.php
Peter Goodhall 91ff3f51b0 Add HTMX activators endpoint and table view
Introduce an HTMX-driven activators UI: add Activators::component_activators() to serve the activators table, create a new view activators/component_table.php to render the activators list (merging VUCC grids and sorting/counting grids), and update activators/index.php to use an HTMX form/target for dynamic filtering. Also improve the filters UI (band, LEO/GEO toggle, min count), add a Reset button, and include client-side JS to show/hide the LEO/GEO control when SAT is selected. Date format handling and empty-result messages are preserved.
2026-04-26 21:55:55 +01:00

113 lines
5.7 KiB
PHP

<div class="container">
<div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
<div>
<h1 class="mb-0"><?php echo lang('gridsquares_gridsquare_activators'); ?></h1>
<p class="text-muted mb-0">View activators and their activated gridsquares by band and satellite type.</p>
</div>
</div>
<div class="card shadow-sm mb-4">
<div class="card-header py-3">
<h2 class="h5 mb-0">Filters</h2>
</div>
<div class="card-body">
<form class="form" hx-post="<?php echo site_url('activators/component_activators'); ?>" hx-target="#activatorsResults" hx-swap="innerHTML">
<div class="row g-3 align-items-end">
<div class="col-md-3">
<label class="form-label" for="band"><?php echo lang('gen_hamradio_band'); ?></label>
<select id="band" name="band" class="form-select" hx-trigger="change" hx-post="<?php echo site_url('activators/component_activators'); ?>" hx-target="#activatorsResults" hx-swap="innerHTML">
<option value="All" <?php if ($this->input->post('band') == "All" || $this->input->method() !== 'post') echo ' selected'; ?> ><?php echo lang('general_word_all'); ?></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="col-md-3" id="leogeoContainer" style="<?php if ($this->input->post('band') != 'SAT' && $this->input->post('band') != NULL) echo 'display:none;'; ?>">
<label class="form-label" for="leogeo">LEO/GEO</label>
<select id="leogeo" name="leogeo" class="form-select" hx-trigger="change" hx-post="<?php echo site_url('activators/component_activators'); ?>" hx-target="#activatorsResults" hx-swap="innerHTML">
<option value="both" <?php if ($this->input->post('leogeo') == "both" || $this->input->method() !== 'post') echo ' selected'; ?> >Both</option>
<option value="leo" <?php if ($this->input->post('leogeo') == "leo") echo ' selected'; ?>>LEO</option>
<option value="geo" <?php if ($this->input->post('leogeo') == "geo") echo ' selected'; ?>>GEO</option>
</select>
</div>
<div class="col-md-3">
<label class="form-label" for="mincount"><?php echo lang('gridsquares_minimum_count'); ?></label>
<select id="mincount" name="mincount" class="form-select" hx-trigger="change" hx-post="<?php echo site_url('activators/component_activators'); ?>" hx-target="#activatorsResults" hx-swap="innerHTML">
<?php
$i = 1;
do {
echo '<option value="'.$i.'"';
if ($this->input->post('mincount') == $i || ($this->input->method() !== 'post' && $i == 2)) echo ' selected';
echo '>'.$i.'</option>'."\n";
$i++;
} while ($i <= $maxactivatedgrids);
?>
</select>
</div>
<div class="col-md-3 d-flex justify-content-end gap-2">
<a href="<?php echo site_url('activators'); ?>" class="btn btn-outline-secondary">Reset</a>
<button id="button1id" type="submit" class="btn btn-primary"><?php echo lang('filter_options_show'); ?></button>
</div>
</div>
</form>
</div>
</div>
<?php
// Get Date format
if($this->session->userdata('user_date_format')) {
// If Logged in and session exists
$custom_date_format = $this->session->userdata('user_date_format');
} else {
// Get Default date format from /config/cloudlog.php
$custom_date_format = $this->config->item('qso_date_format');
}
?>
<!-- Results container for HTMX -->
<div id="activatorsResults">
<?php
// Load initial results if form was submitted
if( $this->input->post('band') != NULL) {
$vucc_grids = array();
if ($activators_vucc_array) {
foreach ($activators_vucc_array as $line) {
$vucc_grids[$line->call] = $line->vucc_grids;
}
}
if ($activators_array) {
$this->load->view('activators/component_table', array(
'activators_array' => $activators_array,
'vucc_grids' => $vucc_grids,
'custom_date_format' => $custom_date_format,
'band' => $this->input->post('band'),
'leogeo' => $this->input->post('leogeo')
));
}
else {
echo '<div class="alert alert-info" role="alert">No activators found for the selected filters.</div>';
}
}
?>
</div>
</div>
<script>
document.getElementById('band').addEventListener('change', function() {
const leogeoContainer = document.getElementById('leogeoContainer');
if (this.value === 'SAT') {
leogeoContainer.style.display = 'block';
} else {
leogeoContainer.style.display = 'none';
}
});
</script>
</div>
</div>