Add a progress indicator to LoTW manual sync and clear results upon

(re-)click
This commit is contained in:
phl0
2025-03-06 13:23:41 +01:00
parent e4a8209027
commit 8487875b2f
2 changed files with 19 additions and 3 deletions

View File

@@ -139,9 +139,10 @@
<div class="card-body">
<?php if (($next_run ?? '') != '') { echo "<p>".__("The next automatic sync with LoTW will happen at: ").$next_run."</p>"; } ?>
<button class="btn btn-outline-success" hx-get="<?php echo site_url('lotw/lotw_upload'); ?>" hx-target="#lotw_manual_results">
<?= __("Manual Sync"); ?>
<button class="btn btn-outline-success" hx-on:click="document.getElementById('lotw_manual_results').innerHTML = '';" hx-get="<?php echo site_url('lotw/lotw_upload'); ?>" hx-indicator="#lotw-sync-running" hx-target="#lotw_manual_results">
<?= __("Manual Sync"); ?>
</button>
<span style="margin-left: 10px;" id="lotw-sync-running" class="htmx-indicator"> <?php echo __("running..."); ?></span>
<div id="lotw_manual_results"></div>
</div>

View File

@@ -1206,4 +1206,19 @@ svg text.month { fill: #AAA; }
display: flex;
align-items: center; /* Vertically aligns the flag and callsign */
gap: 0.5em; /* Adds space between the flag and callsign */
}
}
.htmx-indicator {
opacity: 0;
animation: blinker 2s linear infinite;
}
.htmx-request.htmx-indicator {
opacity: 1;
}
@keyframes blinker {
50% {
opacity: 0;
}
}