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:33:19 +01:00
parent b75efecb18
commit 07a8a07a68
3 changed files with 103 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
static/js/global-period.js Normal file
View File

@@ -0,0 +1,63 @@
document.addEventListener('DOMContentLoaded', function() {
const radios = document.querySelectorAll('input[name="global-period"]');
const selectMobile = document.getElementById('global-period-select');
const hiddenInput = document.getElementById('global-period-hidden');
function getCurrentPeriod() {
const checkedRadio = document.querySelector('input[name="global-period"]:checked');
return checkedRadio ? checkedRadio.value : '1h';
}
function setPeriod(value) {
const targetRadio = document.querySelector(`input[name="global-period"][value="${value}"]`);
if (targetRadio) {
targetRadio.checked = true;
targetRadio.dispatchEvent(new Event('change', { bubbles: true }));
}
if (selectMobile) {
selectMobile.value = value;
}
if (hiddenInput) {
hiddenInput.value = value;
}
}
radios.forEach(radio => {
radio.addEventListener('change', function() {
const value = this.value;
if (selectMobile) selectMobile.value = value;
if (hiddenInput) hiddenInput.value = value;
if (typeof updateAllCharts === 'function') {
updateAllCharts(value);
} else {
document.dispatchEvent(new CustomEvent('globalPeriodChange', {
detail: { period: value }
}));
}
});
});
if (selectMobile) {
selectMobile.addEventListener('change', function() {
const value = this.value;
setPeriod(value);
if (typeof updateAllCharts === 'function') {
updateAllCharts(value);
} else {
document.dispatchEvent(new CustomEvent('globalPeriodChange', {
detail: { period: value }
}));
}
});
}
const initialValue = getCurrentPeriod();
if (selectMobile) selectMobile.value = initialValue;
if (hiddenInput) hiddenInput.value = initialValue;
console.log('Global Period Selector initialized');
});

7
templates/base.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}GPON Monitor{% endblock %}</title> <title>{% block title %}Leox GPON Monitor{% endblock %}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
@@ -15,7 +15,7 @@
<nav class="navbar navbar-expand-lg navbar-dark bg-dark border-bottom"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark border-bottom">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="/"> <a class="navbar-brand" href="/">
<i class="bi bi-diagram-3"></i> GPON Monitor <i class="bi bi-diagram-3"></i> Leox GPON Monitor
</a> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@@ -24,7 +24,7 @@
<ul class="navbar-nav ms-auto"> <ul class="navbar-nav ms-auto">
<li class="nav-item"> <li class="nav-item">
<span class="nav-link" id="status-indicator"> <span class="nav-link" id="status-indicator">
<i class="bi bi-circle-fill text-secondary"></i> Checking... <i class="bi bi-circle-fill text-secondary"></i> Loading...
</span> </span>
</li> </li>
</ul> </ul>
@@ -44,6 +44,7 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script> <script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
<script src="{{ url_for('static', filename='js/charts.js') }}"></script> <script src="{{ url_for('static', filename='js/charts.js') }}"></script>
<script src="{{ url_for('static', filename='js/global-period.js') }}"></script>
{% block extra_js %}{% endblock %} {% block extra_js %}{% endblock %}
</body> </body>

89
templates/index.html
View File

@@ -4,61 +4,42 @@
<!-- Alerts Container --> <!-- Alerts Container -->
<div id="alerts-container" class="mb-4"></div> <div id="alerts-container" class="mb-4"></div>
<!-- Global Period Selector --> <!-- Global Period Selector - Responsive -->
<div class="row mb-3"> <div class="card-body py-3">
<div class="col-md-12"> <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
<div class="card"> <div>
<div class="card-body py-3"> <i class="bi bi-calendar-range me-2"></i>
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2"> <strong>Global Time Range</strong>
<div> </div>
<i class="bi bi-calendar-range me-2"></i> <div class="d-flex flex-wrap gap-1" style="min-width: 200px;">
<strong>Global Time Range</strong> <!-- Quick pickers - ukryte na mobile -->
</div> <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" role="group" id="global-period-selector"> <input type="radio" class="btn-check" name="global-period" id="period-1h" value="1h" checked>
<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-1h">1h</label>
<label class="btn btn-outline-primary" for="period-1h">1h</label> <input type="radio" class="btn-check" name="global-period" id="period-6h" value="6h">
<label class="btn btn-outline-primary px-2 py-1" for="period-6h">6h</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-24h" value="24h">
<label class="btn btn-outline-primary" for="period-6h">6h</label> <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-7d" value="7d">
<input type="radio" class="btn-check" name="global-period" id="period-12h" value="12h"> <label class="btn btn-outline-primary px-2 py-1" for="period-7d">7d</label>
<label class="btn btn-outline-primary" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" for="period-5y">5Y</label>
</div>
</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;">
<option value="1h">1h</option>
<option value="6h">6h</option>
<option value="12h">12h</option>
<option value="24h">24h</option>
<option value="3d">3d</option>
<option value="7d">7d</option>
<option value="14d">14d</option>
<option value="30d">30d</option>
<option value="60d">60d</option>
<option value="90d">90d</option>
<option value="120d">120d</option>
<option value="1y">1Y</option>
<option value="2y">2Y</option>
<option value="5y">5Y</option>
</select>
<input type="hidden" id="global-period-hidden" name="global-period" value="1h">
</div> </div>
</div> </div>
</div> </div>