cloudlog/application/views/timeplotter/index.php
Peter Goodhall bdd72588a6 Add HTMX-driven Timeplot UI and JS refactor
Introduce an HTMX-powered results component and refactor Timeplotter flow: add component_timeplot_results controller action that supplies band/dxcc/cqzone defaults and renders a new timeplotter/component_results view. Revamp the index view to use Bootstrap cards, a filter form wired to HTMX (hx-post/hx-target/hx-trigger) and a results container that auto-loads on page load. Refactor assets/js/sections/timeplot.js: separate loading state, implement timeplotRender/timeplot helper functions, improve AJAX error handling, and add renderTimeplotFromComponent + htmx:afterSwap hook to initialize charts when the component is swapped in. Also update getTimes controller to rely on the model to output JSON directly.
2026-04-26 22:10:29 +01:00

78 lines
No EOL
3.5 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 $page_title; ?></h1>
<p class="text-muted mb-0">Analyze when your QSOs happen across the day by band, DXCC, and CQ zone.</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 id="timeplotterFiltersForm"
class="form"
hx-post="<?php echo site_url('timeplotter/component_timeplot_results'); ?>"
hx-target="#timeplotterResults"
hx-swap="innerHTML"
hx-trigger="change from:select, submit">
<div class="row g-3 align-items-end">
<div class="col-md-4">
<label class="form-label" for="band">Band</label>
<select id="band" name="band" class="form-select">
<option value="All">All</option>
<?php foreach ($worked_bands as $band) {
echo '<option value="' . $band . '">' . $band . '</option>' . "\n";
} ?>
</select>
</div>
<div class="col-md-4">
<label class="form-label" for="dxcc">DXCC</label>
<select id="dxcc" name="dxcc" class="form-select">
<option value="All">All</option>
<?php
if ($dxcc_list->num_rows() > 0) {
foreach ($dxcc_list->result() as $dxcc) {
echo '<option value="' . $dxcc->adif . '">' . ucwords(strtolower($dxcc->name)) . ' - ' . $dxcc->prefix;
if ($dxcc->end != null) {
echo ' (' . lang('gen_hamradio_deleted_dxcc') . ')';
}
echo '</option>';
}
}
?>
</select>
</div>
<div class="col-md-4">
<label class="form-label" for="cqzone">CQ Zone</label>
<select id="cqzone" name="cqzone" class="form-select">
<option value="All">All</option>
<?php
for ($i = 1; $i <= 40; $i++) {
echo '<option value="' . $i . '">' . $i . '</option>';
}
?>
</select>
</div>
<div class="col-md-12 d-flex justify-content-md-end gap-2">
<button id="timeplotShowButton" type="submit" class="btn btn-primary ld-ext-right">
Show
<div class="ld ld-ring ld-spin"></div>
</button>
</div>
</div>
</form>
</div>
</div>
<div id="timeplotterResults"
hx-post="<?php echo site_url('timeplotter/component_timeplot_results'); ?>"
hx-target="this"
hx-swap="innerHTML"
hx-include="#timeplotterFiltersForm"
hx-trigger="load"></div>
</div>