Redesign station management page UI
Revamped the station profile management page with improved Bootstrap-based layout, enhanced alert and card components, and a more user-friendly table for station locations. Added new CSS styles for the station management page, including custom card, badge, button, and DataTable styling for a modern, consistent look.
这个提交包含在：
Peter Goodhall
父节点
8039d41fb4
当前提交
f9b02c51b6
共有 2 个文件被更改，包括 281 次插入 和 86 次删除
|
|
@ -1,99 +1,228 @@
|
||||||
<div class="container">
|
<div class="container station-management">
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<?php if($this->session->flashdata('message')) { ?>
|
<?php if($this->session->flashdata('message')) { ?>
|
||||||
<!-- Display Message -->
|
<!-- Display Message -->
|
||||||
<div class="alert-message error">
|
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||||
<p><?php echo $this->session->flashdata('message'); ?></p>
|
<i class="fas fa-check-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>
|
</div>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
|
||||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
<!-- Page Header -->
|
||||||
<h2><?php echo $page_title; ?></h2>
|
<div class="row mb-4">
|
||||||
<a href="<?php echo site_url('station/create'); ?>" class="btn btn-primary"><i class="fas fa-plus"></i> <?php echo lang('station_location_create'); ?></a>
|
<div class="col-md-12">
|
||||||
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
|
<div>
|
||||||
|
<h2><i class="fas fa-tower-broadcast me-2"></i><?php echo $page_title; ?></h2>
|
||||||
|
<p class="text-muted mb-0">Manage your station locations and profiles</p>
|
||||||
|
</div>
|
||||||
|
<a href="<?php echo site_url('station/create'); ?>" class="btn btn-primary">
|
||||||
|
<i class="fas fa-plus me-2"></i><?php echo lang('station_location_create'); ?>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Information Card -->
|
||||||
|
<div class="row mb-4">
|
||||||
|
<div class="col-md-12">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
|
<div class="card-header bg-light">
|
||||||
|
<h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>About Station Locations</h5>
|
||||||
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-text"><?php echo lang('station_location_header_ln1'); ?></p>
|
<div class="row">
|
||||||
<p class="card-text"><?php echo lang('station_location_header_ln2'); ?></p>
|
<div class="col-md-4">
|
||||||
<p class="card-text"><?php echo lang('station_location_header_ln3'); ?></p>
|
<div class="d-flex align-items-start mb-3">
|
||||||
|
<i class="fas fa-map-marker-alt text-primary me-2 mt-1"></i>
|
||||||
<?php if ($stations->num_rows() > 0) { ?>
|
<div>
|
||||||
|
<h6 class="mb-1">Location Management</h6>
|
||||||
|
<p class="mb-0 text-muted small"><?php echo lang('station_location_header_ln1'); ?></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="d-flex align-items-start mb-3">
|
||||||
|
<i class="fas fa-radio text-primary me-2 mt-1"></i>
|
||||||
|
<div>
|
||||||
|
<h6 class="mb-1">Multiple Profiles</h6>
|
||||||
|
<p class="mb-0 text-muted small"><?php echo lang('station_location_header_ln2'); ?></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="d-flex align-items-start mb-3">
|
||||||
|
<i class="fas fa-cog text-primary me-2 mt-1"></i>
|
||||||
|
<div>
|
||||||
|
<h6 class="mb-1">Active Profile</h6>
|
||||||
|
<p class="mb-0 text-muted small"><?php echo lang('station_location_header_ln3'); ?></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Warnings Section -->
|
||||||
|
<?php if($current_active == 0 || (($is_there_qsos_with_no_station_id >= 1) && ($is_admin))) { ?>
|
||||||
|
<div class="row mb-4">
|
||||||
|
<div class="col-md-12">
|
||||||
<?php if($current_active == 0) { ?>
|
<?php if($current_active == 0) { ?>
|
||||||
<div class="alert alert-danger" role="alert">
|
<div class="alert alert-danger d-flex align-items-center" role="alert">
|
||||||
<?php echo lang('station_location_warning'); ?>
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
||||||
|
<div><?php echo lang('station_location_warning'); ?></div>
|
||||||
</div>
|
</div>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
|
||||||
<?php if (($is_there_qsos_with_no_station_id >= 1) && ($is_admin)) { ?>
|
<?php if (($is_there_qsos_with_no_station_id >= 1) && ($is_admin)) { ?>
|
||||||
<div class="alert alert-danger" role="alert">
|
<div class="alert alert-warning d-flex align-items-center" role="alert">
|
||||||
<span class="badge rounded-pill text-bg-warning"><?php echo lang('general_word_warning'); ?></span> <?php echo lang('station_location_warning_reassign'); ?> <br>
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
||||||
<?php echo lang('station_location_reassign_at'); ?> <a href="<?php echo site_url('maintenance/'); ?>" class="btn btn-warning"><i class="fas fa-sync"></i><?php echo lang('account_word_admin') . "/" . lang('general_word_maintenance'); ?></a>
|
<div>
|
||||||
|
<strong><?php echo lang('general_word_warning'); ?>:</strong> <?php echo lang('station_location_warning_reassign'); ?><br>
|
||||||
|
<div class="mt-2">
|
||||||
|
<?php echo lang('station_location_reassign_at'); ?>
|
||||||
|
<a href="<?php echo site_url('maintenance/'); ?>" class="btn btn-warning btn-sm">
|
||||||
|
<i class="fas fa-sync me-1"></i><?php echo lang('account_word_admin') . "/" . lang('general_word_maintenance'); ?>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php } ?>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
|
||||||
|
<!-- Station Locations Table -->
|
||||||
|
<?php if ($stations->num_rows() > 0) { ?>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header bg-light">
|
||||||
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
|
<h5 class="mb-0"><i class="fas fa-list me-2"></i>Station Locations (<?php echo $stations->num_rows(); ?>)</h5>
|
||||||
|
<small class="text-muted">Click on a station name to set it as active</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body p-3">
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<table id="station_locations_table" class="table table-sm table-striped">
|
<table id="station_locations_table" class="table table-hover">
|
||||||
<thead>
|
<thead class="table-light">
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col"><?php echo lang('station_location_name'); ?></th>
|
<th scope="col"><i class="fas fa-tag me-1"></i><?php echo lang('station_location_name'); ?></th>
|
||||||
<th scope="col"><?php echo lang('station_location_callsign'); ?></th>
|
<th scope="col"><i class="fas fa-microphone me-1"></i><?php echo lang('station_location_callsign'); ?></th>
|
||||||
<th scope="col"><?php echo lang('general_word_country'); ?></th>
|
<th scope="col"><i class="fas fa-flag me-1"></i><?php echo lang('general_word_country'); ?></th>
|
||||||
<th scope="col"><?php echo lang('gen_hamradio_gridsquare'); ?></th>
|
<th scope="col"><i class="fas fa-th me-1"></i><?php echo lang('gen_hamradio_gridsquare'); ?></th>
|
||||||
<th></th>
|
<th scope="col" class="text-center"><i class="fas fa-power-off me-1"></i>Status</th>
|
||||||
<th scope="col"><?php echo lang('admin_edit'); ?></th>
|
<th scope="col" class="text-center"><i class="fas fa-tools me-1"></i>Actions</th>
|
||||||
<th scope="col"><?php echo lang('admin_copy'); ?></th>
|
|
||||||
<th scope="col"><?php echo lang('station_location_emptylog'); ?></th>
|
|
||||||
<th scope="col"><?php echo lang('admin_delete'); ?></th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<?php foreach ($stations->result() as $row) { ?>
|
<?php foreach ($stations->result() as $row) { ?>
|
||||||
<tr>
|
<tr <?php if($row->station_active == 1) { echo 'class="table-success"'; } ?>>
|
||||||
<td style="text-align: center; vertical-align: middle;">
|
<td class="align-middle">
|
||||||
<?php echo $row->station_profile_name;?><br>
|
<div class="d-flex align-items-center">
|
||||||
</td>
|
<div>
|
||||||
<td style="text-align: center; vertical-align: middle;"><?php echo $row->station_callsign;?></td>
|
<strong><?php echo $row->station_profile_name;?></strong>
|
||||||
<td style="text-align: center; vertical-align: middle;"><?php echo $row->station_country == '' ? '- NONE -' : $row->station_country; if ($row->dxcc_end != NULL) { echo ' <span class="badge text-bg-danger">'.lang('gen_hamradio_deleted_dxcc').'</span>'; } ?></td>
|
<?php if($row->station_active == 1) { ?>
|
||||||
<td style="text-align: center; vertical-align: middle;"><?php echo $row->station_gridsquare;?></td>
|
<span class="badge bg-success ms-2">
|
||||||
<td style="text-align: center" data-order="<?php echo $row->station_id;?>">
|
<i class="fas fa-check me-1"></i><?php echo lang('station_location_active'); ?>
|
||||||
<?php if($row->station_active != 1) { ?>
|
</span>
|
||||||
<a href="<?php echo site_url('station/set_active/').$current_active."/".$row->station_id; ?>" class="btn btn-outline-secondary btn-sm" onclick="return confirm('<?php echo lang('station_location_confirm_active'); ?> <?php echo $row->station_profile_name; ?>');"><?php echo lang('station_location_set_active'); ?></a>
|
|
||||||
<?php } else { ?>
|
|
||||||
<span class="badge text-bg-success"><?php echo lang('station_location_active'); ?></span>
|
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<span class="badge text-bg-info">ID: <?php echo $row->station_id;?></span>
|
<small class="text-muted">
|
||||||
<span class="badge text-bg-light"><?php echo $row->qso_total;?> <?php echo lang('gen_hamradio_qso'); ?></span>
|
ID: <?php echo $row->station_id;?> •
|
||||||
|
<?php echo $row->qso_total;?> <?php echo lang('gen_hamradio_qso'); ?>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td style="text-align: center; vertical-align: middle;">
|
<td class="align-middle">
|
||||||
<?php if($row->user_id == "") { ?>
|
<strong><?php echo $row->station_callsign;?></strong>
|
||||||
<a href="<?php echo site_url('station/claim_user')."/".$row->station_id; ?>" class="btn btn-outline-primary btn-sm"><i class="fas fa-user-plus"></i> <?php echo lang('station_location_claim_ownership'); ?></a>
|
|
||||||
<?php } ?>
|
|
||||||
<a href="<?php echo site_url('station/edit')."/".$row->station_id; ?>" title="<?php echo lang('admin_edit'); ?>" class="btn btn-outline-primary btn-sm"><i class="fas fa-edit"></i></a>
|
|
||||||
</td>
|
</td>
|
||||||
<td style="text-align: center; vertical-align: middle;">
|
<td class="align-middle">
|
||||||
<a href="<?php echo site_url('station/copy')."/".$row->station_id; ?>" title="<?php echo lang('admin_copy'); ?>" class="btn btn-outline-primary btn-sm"><i class="fas fa-copy"></i></a>
|
<?php echo $row->station_country == '' ? '<span class="text-muted">- NONE -</span>' : $row->station_country; ?>
|
||||||
|
<?php if ($row->dxcc_end != NULL) { echo '<br><span class="badge bg-danger">'.lang('gen_hamradio_deleted_dxcc').'</span>'; } ?>
|
||||||
</td>
|
</td>
|
||||||
<td style="text-align: center; vertical-align: middle;"> <a href="<?php echo site_url('station/deletelog')."/".$row->station_id; ?>" class="btn btn-danger btn-sm" title="<?php echo lang('station_location_emptylog'); ?>" onclick="return confirm('<?php echo lang('station_location_confirm_del_qso'); ?>');"><i class="fas fa-trash-alt"></i></a>
|
<td class="align-middle">
|
||||||
|
<?php echo $row->station_gridsquare == '' ? '<span class="text-muted">-</span>' : $row->station_gridsquare;?>
|
||||||
</td>
|
</td>
|
||||||
<td style="text-align: center; vertical-align: middle;">
|
<td class="align-middle text-center" data-order="<?php echo $row->station_id;?>">
|
||||||
<?php if($row->station_active != 1) { ?>
|
<?php if($row->station_active != 1) { ?>
|
||||||
<a href="<?php echo site_url('station/delete')."/".$row->station_id; ?>" class="btn btn-danger btn-sm" title="<?php echo lang('admin_delete'); ?>" onclick="return confirm('<?php echo lang('station_location_confirm_del_stationlocation'); ?> <?php echo $row->station_profile_name; ?> <?php echo lang('station_location_confirm_del_stationlocation_qso'); ?>');"><i class="fas fa-trash-alt"></i></a>
|
<a href="<?php echo site_url('station/set_active/').$current_active."/".$row->station_id; ?>"
|
||||||
|
class="btn btn-outline-success btn-sm"
|
||||||
|
onclick="return confirm('<?php echo lang('station_location_confirm_active'); ?> <?php echo $row->station_profile_name; ?>');",
|
||||||
|
title="<?php echo lang('station_location_set_active'); ?>">
|
||||||
|
<i class="fas fa-power-off me-1"></i><?php echo lang('station_location_set_active'); ?>
|
||||||
|
</a>
|
||||||
|
<?php } else { ?>
|
||||||
|
<span class="badge bg-success">
|
||||||
|
<i class="fas fa-check me-1"></i><?php echo lang('station_location_active'); ?>
|
||||||
|
</span>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
</td>
|
</td>
|
||||||
|
<td class="align-middle text-center">
|
||||||
|
<div class="d-flex justify-content-center gap-1">
|
||||||
|
<?php if($row->user_id == "") { ?>
|
||||||
|
<a href="<?php echo site_url('station/claim_user')."/".$row->station_id; ?>"
|
||||||
|
class="btn btn-info btn-sm"
|
||||||
|
title="<?php echo lang('station_location_claim_ownership'); ?>">
|
||||||
|
<i class="fas fa-user-plus"></i>
|
||||||
|
</a>
|
||||||
|
<?php } ?>
|
||||||
|
<a href="<?php echo site_url('station/edit')."/".$row->station_id; ?>"
|
||||||
|
title="<?php echo lang('admin_edit'); ?>"
|
||||||
|
class="btn btn-primary btn-sm">
|
||||||
|
<i class="fas fa-edit"></i>
|
||||||
|
</a>
|
||||||
|
<a href="<?php echo site_url('station/copy')."/".$row->station_id; ?>"
|
||||||
|
title="<?php echo lang('admin_copy'); ?>"
|
||||||
|
class="btn btn-secondary btn-sm">
|
||||||
|
<i class="fas fa-copy"></i>
|
||||||
|
</a>
|
||||||
|
<a href="<?php echo site_url('station/deletelog')."/".$row->station_id; ?>"
|
||||||
|
class="btn btn-warning btn-sm"
|
||||||
|
title="<?php echo lang('station_location_emptylog'); ?>"
|
||||||
|
onclick="return confirm('<?php echo lang('station_location_confirm_del_qso'); ?>');">
|
||||||
|
<i class="fas fa-broom"></i>
|
||||||
|
</a>
|
||||||
|
<?php if($row->station_active != 1) { ?>
|
||||||
|
<a href="<?php echo site_url('station/delete')."/".$row->station_id; ?>"
|
||||||
|
class="btn btn-danger btn-sm"
|
||||||
|
title="<?php echo lang('admin_delete'); ?>"
|
||||||
|
onclick="return confirm('<?php echo lang('station_location_confirm_del_stationlocation'); ?> <?php echo $row->station_profile_name; ?> <?php echo lang('station_location_confirm_del_stationlocation_qso'); ?>');">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
</a>
|
||||||
|
<?php } ?>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php } else { ?>
|
||||||
|
<!-- Empty State -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body text-center py-5">
|
||||||
|
<i class="fas fa-tower-broadcast text-muted mb-3" style="font-size: 3rem;"></i>
|
||||||
|
<h5 class="text-muted mb-3">No Station Locations</h5>
|
||||||
|
<p class="text-muted mb-4">You haven't created any station locations yet. Create your first station location to get started.</p>
|
||||||
|
<a href="<?php echo site_url('station/create'); ?>" class="btn btn-primary btn-lg">
|
||||||
|
<i class="fas fa-plus me-2"></i><?php echo lang('station_location_create'); ?>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -159,6 +159,72 @@ thead>tr>td {
|
||||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Station Management Page Styling */
|
||||||
|
.station-management {
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.station-management .table-success {
|
||||||
|
background-color: rgba(25, 135, 84, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.station-management .card {
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||||
|
}
|
||||||
|
|
||||||
|
.station-management .card-header {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border-bottom: 1px solid #dee2e6;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.station-management .badge {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.station-management .btn-sm {
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* DataTable styling within cards */
|
||||||
|
.station-management .dataTables_wrapper {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.station-management .dataTables_length,
|
||||||
|
.station-management .dataTables_filter {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.station-management .dataTables_info,
|
||||||
|
.station-management .dataTables_paginate {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.station-management .dataTables_length label,
|
||||||
|
.station-management .dataTables_filter label {
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.station-management .dataTables_filter input {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
border: 1px solid #ced4da;
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.station-management .dataTables_length select {
|
||||||
|
margin: 0 0.5rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
border: 1px solid #ced4da;
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.api .alert p {
|
.api .alert p {
|
||||||
margin-bottom: 0rem;
|
margin-bottom: 0rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
正在加载…
在新工单中引用