Fix shaped devices editor paging and UI (FIXES #919)

This commit is contained in:
Herbert Wolverson committed 2026-02-25 10:20:48 -06:00
1 parent 9edad2f145
commit 6baebeab5d
2 files changed
+920 -484

No files matched your search

File diff suppressed because it is too large. Load diff
@@ -6,12 +6,153 @@
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<button id="btnSaveDevices" class="btn btn-outline-primary mb-3">
<i class="fa fa-save"></i> Save Changes
</button>
<div id="shapedDeviceTable"></div>
<div class="card">
<div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-3">
<div>
<h5 class="mb-0">Shaped Devices</h5>
<div class="small text-body-secondary" id="sdSummary">Loading devices...</div>
</div>
<div class="d-flex flex-wrap gap-2">
<button id="btnAddDevice" class="btn btn-primary">
<i class="fa fa-plus"></i> Add Device
</button>
<button id="btnSaveDevices" class="btn btn-outline-primary">
<i class="fa fa-save"></i> Save Changes
</button>
</div>
</div>
<div class="card-body">
<div class="row g-2 align-items-center mb-3">
<div class="col-12 col-lg-6">
<div class="input-group">
<span class="input-group-text"><i class="fa fa-search"></i></span>
<input id="sdSearch" type="text" class="form-control" placeholder="Search device/circuit/parent/MAC/IP...">
</div>
</div>
<div class="col-12 col-md-4 col-lg-3">
<select id="sdPageSize" class="form-select">
<option value="25" selected>25 rows</option>
<option value="50">50 rows</option>
<option value="100">100 rows</option>
</select>
</div>
</div>
<div class="alert alert-info py-2 small mb-3">
SQM overrides can be set per direction. Leave a side blank to use the global default; set to "none" to disable that side.
</div>
<nav class="mt-3" aria-label="Shaped devices pages (top)">
<ul id="sdPaginationTop" class="pagination pagination-sm mb-0"></ul>
</nav>
<div id="sdTableContainer" class="table-responsive" style="max-height: 65vh; overflow-y: auto;">
<div class="text-center py-5">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<nav class="mt-3" aria-label="Shaped devices pages">
<ul id="sdPagination" class="pagination pagination-sm mb-0"></ul>
</nav>
</div>
</div>
</div>
</div>
<div class="modal fade" id="sdEditModal" tabindex="-1" aria-labelledby="sdEditModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="sdEditModalLabel">Edit Device</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="sdEditForm">
<div class="row g-3">
<div class="col-md-6">
<label for="sdModalCircuitId" class="form-label">Circuit ID</label>
<input type="text" class="form-control" id="sdModalCircuitId">
</div>
<div class="col-md-6">
<label for="sdModalCircuitName" class="form-label">Circuit Name</label>
<input type="text" class="form-control" id="sdModalCircuitName">
</div>
<div class="col-md-6">
<label for="sdModalDeviceId" class="form-label">Device ID</label>
<input type="text" class="form-control" id="sdModalDeviceId">
</div>
<div class="col-md-6">
<label for="sdModalDeviceName" class="form-label">Device Name</label>
<input type="text" class="form-control" id="sdModalDeviceName">
</div>
<div class="col-md-6">
<label for="sdModalParentNode" class="form-label">Parent Node</label>
<select class="form-select" id="sdModalParentNode"></select>
</div>
<div class="col-md-6">
<label for="sdModalMac" class="form-label">MAC</label>
<input type="text" class="form-control" id="sdModalMac">
</div>
<div class="col-md-6">
<label for="sdModalIpv4" class="form-label">IPv4 (one per line)</label>
<textarea class="form-control" id="sdModalIpv4" rows="3" placeholder="192.168.0.1/32"></textarea>
</div>
<div class="col-md-6">
<label for="sdModalIpv6" class="form-label">IPv6 (one per line)</label>
<textarea class="form-control" id="sdModalIpv6" rows="3" placeholder="2001:db8::1/128"></textarea>
</div>
<div class="col-md-6">
<label for="sdModalDownloadMin" class="form-label">Download Min Mbps</label>
<input type="number" step="0.1" class="form-control" id="sdModalDownloadMin">
</div>
<div class="col-md-6">
<label for="sdModalUploadMin" class="form-label">Upload Min Mbps</label>
<input type="number" step="0.1" class="form-control" id="sdModalUploadMin">
</div>
<div class="col-md-6">
<label for="sdModalDownloadMax" class="form-label">Download Max Mbps</label>
<input type="number" step="0.1" class="form-control" id="sdModalDownloadMax">
</div>
<div class="col-md-6">
<label for="sdModalUploadMax" class="form-label">Upload Max Mbps</label>
<input type="number" step="0.1" class="form-control" id="sdModalUploadMax">
</div>
<div class="col-md-6">
<label for="sdModalSqmDown" class="form-label">SQM Down</label>
<select class="form-select" id="sdModalSqmDown">
<option value="">(default)</option>
<option value="cake">cake</option>
<option value="fq_codel">fq_codel</option>
<option value="none">none</option>
</select>
</div>
<div class="col-md-6">
<label for="sdModalSqmUp" class="form-label">SQM Up</label>
<select class="form-select" id="sdModalSqmUp">
<option value="">(default)</option>
<option value="cake">cake</option>
<option value="fq_codel">fq_codel</option>
<option value="none">none</option>
</select>
</div>
<div class="col-12">
<label for="sdModalComment" class="form-label">Comment</label>
<textarea class="form-control" id="sdModalComment" rows="2"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="sdModalSave">Save changes</button>
</div>
</div>
</div>
</div>