cloudlog/application/views/radio/index.php
Peter Goodhall 8131bbb62d Improve radio status loading and UI feedback
Radio status now loads immediately on page load and updates every 2 seconds, with a loading spinner shown until data is available. The radio index page UI has been enhanced for better clarity, accessibility, and user feedback, including improved alert styling and more informative icons.
2025-11-22 17:36:26 +00:00

51 lines
2 KiB
PHP

<div class="container">
<!-- Page Header -->
<div class="row mt-4 mb-4">
<div class="col-md-12">
<div class="d-flex justify-content-between align-items-center">
<h2><i class="fas fa-broadcast-tower me-2"></i><?php echo $page_title; ?></h2>
<a href="<?php echo site_url('commands'); ?>" class="btn btn-primary">
<i class="fas fa-terminal me-2"></i>Radio Commands
</a>
</div>
</div>
</div>
<?php if($this->session->flashdata('message')) { ?>
<!-- Display Message -->
<div class="alert alert-info alert-dismissible fade show" role="alert">
<i class="fas fa-info-circle me-2"></i><?php echo $this->session->flashdata('message'); ?>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php } ?>
<!-- Active Radios Card -->
<div class="card">
<div class="card-header bg-light">
<h5 class="mb-0"><i class="fas fa-signal me-2"></i>Active Radios</h5>
</div>
<div class="card-body">
<p class="card-text"><i class="fas fa-info-circle me-2"></i>Below is a list of active radios that are connected to Cloudlog.</p>
<p class="card-text"><i class="fas fa-lightbulb me-2"></i>If you haven't connected any radios yet, see the API page to generate API keys.</p>
<div class="table-responsive">
<!-- Loading indicator -->
<div id="radio-loading" class="text-center py-4">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-2 text-muted">Loading radio status...</p>
</div>
<!-- Display Radio Statuses -->
<table class="table table-striped status" style="display: none;"></table>
</div>
<p class="card-text mt-3">
<span class="badge text-bg-info"><i class="fas fa-book me-1"></i>Info</span>
You can find out how to use the <a href="https://github.com/magicbug/Cloudlog/wiki/Radio-Interface" target="_blank">radio functions <i class="fas fa-external-link-alt ms-1"></i></a> in the wiki.
</p>
</div>
</div>
</div>