gru/leox-gpon-monitoring
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

period picker

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-01-03 19:38:06 +01:00
parent 07a8a07a68
commit 16e4c48197
1 changed files with 53 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
templates/index.html
View File

@@ -4,26 +4,64 @@
<!-- Alerts Container --> <!-- Alerts Container -->
<div id="alerts-container" class="mb-4"></div> <div id="alerts-container" class="mb-4"></div>
<!-- Global Period Selector - Responsive --> <!-- Global Period Selector -->
<div class="card-body py-3"> <div class="card-body py-3">
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2"> <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
<div> <div>
<i class="bi bi-calendar-range me-2"></i> <i class="bi bi-calendar-range me-2"></i>
<strong>Global Time Range</strong> <strong>Global Time Range</strong>
</div> </div>
<div class="d-flex flex-wrap gap-1" style="min-width: 200px;"> <div class="d-flex gap-2 flex-grow-1 min-w-0">
<!-- Quick pickers - ukryte na mobile --> <div class="flex-grow-1 d-flex">
<div class="btn-group btn-group-sm d-none d-md-flex" role="group" id="global-quick-pickers"> <div class="btn-group btn-group-sm flex-grow-1 d-none d-sm-flex"
<input type="radio" class="btn-check" name="global-period" id="period-1h" value="1h" checked> role="group" id="global-quick-pickers"
<label class="btn btn-outline-primary px-2 py-1" for="period-1h">1h</label> style="overflow-x: auto; scrollbar-width: thin; white-space: nowrap;">
<input type="radio" class="btn-check" name="global-period" id="period-6h" value="6h"> <input type="radio" class="btn-check" name="global-period" id="period-1h" value="1h" checked>
<label class="btn btn-outline-primary px-2 py-1" for="period-6h">6h</label> <label class="btn btn-outline-primary px-2 py-1 me-0" for="period-1h">1h</label>
<input type="radio" class="btn-check" name="global-period" id="period-24h" value="24h">
<label class="btn btn-outline-primary px-2 py-1" for="period-24h">24h</label> <input type="radio" class="btn-check" name="global-period" id="period-6h" value="6h">
<input type="radio" class="btn-check" name="global-period" id="period-7d" value="7d"> <label class="btn btn-outline-primary px-2 py-1 me-0" for="period-6h">6h</label>
<label class="btn btn-outline-primary px-2 py-1" for="period-7d">7d</label>
<input type="radio" class="btn-check" name="global-period" id="period-12h" value="12h">
<label class="btn btn-outline-primary px-2 py-1 me-0" for="period-12h">12h</label>
<input type="radio" class="btn-check" name="global-period" id="period-24h" value="24h">
<label class="btn btn-outline-primary px-2 py-1 me-0" for="period-24h">24h</label>
<input type="radio" class="btn-check" name="global-period" id="period-3d" value="3d">
<label class="btn btn-outline-primary px-2 py-1 me-0" for="period-3d">3d</label>
<input type="radio" class="btn-check" name="global-period" id="period-7d" value="7d">
<label class="btn btn-outline-primary px-2 py-1 me-0" for="period-7d">7d</label>
<input type="radio" class="btn-check" name="global-period" id="period-14d" value="14d">
<label class="btn btn-outline-primary px-2 py-1 me-0" for="period-14d">14d</label>
<input type="radio" class="btn-check" name="global-period" id="period-30d" value="30d">
<label class="btn btn-outline-primary px-2 py-1 me-0" for="period-30d">30d</label>
<input type="radio" class="btn-check" name="global-period" id="period-60d" value="60d">
<label class="btn btn-outline-primary px-2 py-1 me-0" for="period-60d">60d</label>
<input type="radio" class="btn-check" name="global-period" id="period-90d" value="90d">
<label class="btn btn-outline-primary px-2 py-1 me-0" for="period-90d">90d</label>
<input type="radio" class="btn-check" name="global-period" id="period-120d" value="120d">
<label class="btn btn-outline-primary px-2 py-1 me-0" for="period-120d">120d</label>
<input type="radio" class="btn-check" name="global-period" id="period-1y" value="1y">
<label class="btn btn-outline-primary px-2 py-1 me-0" for="period-1y">1Y</label>
<input type="radio" class="btn-check" name="global-period" id="period-2y" value="2y">
<label class="btn btn-outline-primary px-2 py-1 me-0" for="period-2y">2Y</label>
<input type="radio" class="btn-check" name="global-period" id="period-5y" value="5y">
<label class="btn btn-outline-primary px-2 py-1" for="period-5y">5Y</label>
</div>
</div> </div>
<select class="form-select form-select-sm flex-grow-1 flex-grow-0 d-md-none w-auto min-w-120px" id="global-period-select" style="min-width: 120px;">
<select class="form-select form-select-sm d-md-none ms-2 w-auto min-w-120px"
id="global-period-select" style="min-width: 120px;">
<option value="1h">1h</option> <option value="1h">1h</option>
<option value="6h">6h</option> <option value="6h">6h</option>
<option value="12h">12h</option> <option value="12h">12h</option>
@@ -39,11 +77,13 @@
<option value="2y">2Y</option> <option value="2y">2Y</option>
<option value="5y">5Y</option> <option value="5y">5Y</option>
</select> </select>
<input type="hidden" id="global-period-hidden" name="global-period" value="1h"> <input type="hidden" id="global-period-hidden" name="global-period" value="1h">
</div> </div>
</div> </div>
</div> </div>
<!-- Main Metrics Row --> <!-- Main Metrics Row -->
<div class="row g-3 mb-4"> <div class="row g-3 mb-4">
<div class="col-md-3"> <div class="col-md-3">