132 lines
5.7 KiB
HTML
132 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>InfluxDB Series Manager</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
|
|
</head>
|
|
<body class="bg-dark text-light">
|
|
<div class="container">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2 class="mb-0">InfluxDB Series Manager</h2>
|
|
<i class="bi bi-moon-stars-fill theme-switch" onclick="toggleTheme()"></i>
|
|
</div>
|
|
|
|
<div class="card bg-dark border-secondary mb-4">
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="db-select" class="form-label">Wybierz bazę danych</label>
|
|
<select id="db-select" class="form-select bg-dark text-light border-secondary" onchange="fetchSeries()">
|
|
<option value="">Wybierz bazę danych...</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="series-filter" class="form-label">Filtruj serie</label>
|
|
<input type="text" id="series-filter" class="form-control bg-dark text-light border-secondary" placeholder="Wpisz nazwę serii..." oninput="filterSeries()">
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center mb-3">
|
|
<button class="btn btn-danger me-3" onclick="deleteSelected()">
|
|
<i class="bi bi-trash"></i> Usuń zaznaczone
|
|
</button>
|
|
<button class="btn btn-warning me-3" onclick="openTimeDeleteModalForMany()">
|
|
<i class="bi bi-clock-history"></i> Usuń dane z zaznaczonych wg zakresu
|
|
</button>
|
|
<button style="display:none">
|
|
<i class="bi bi-trash"></i> Usuń zaznaczone
|
|
</button>
|
|
<span class="text-muted" id="selected-count">Zaznaczono: 0</span>
|
|
</div>
|
|
|
|
<div class="alert alert-info d-none" id="info-message"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-dark border-secondary">
|
|
<div class="card-body table-container">
|
|
<table class="table table-dark table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th width="50px"><input type="checkbox" class="form-check-input" id="select-all" onchange="toggleSelectAll()"></th>
|
|
<th>Seria</th>
|
|
<th width="100px">Akcje</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="series-list">
|
|
<tr><td colspan="3" class="text-center py-4">Wybierz bazę danych, aby załadować serie...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal potwierdzenia -->
|
|
<div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content bg-dark text-light border border-secondary">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Potwierdzenie usunięcia</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="confirmMessage"></p>
|
|
<pre class="bg-black p-2 text-light small" id="queryPreview"></pre>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Anuluj</button>
|
|
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">Usuń</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- Modal usuwania danych z zakresu czasu -->
|
|
<div class="modal fade" id="timeDeleteModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content bg-dark text-light border border-secondary">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Usuń dane z zakresu czasu</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
|
|
<div class="mb-3">
|
|
<label>Zakres czasu:</label>
|
|
<select class="form-select mb-2" onchange="setPredefinedRange(this.value)">
|
|
<option value="">-- wybierz --</option>
|
|
<option value="1h">Ostatnia godzina</option>
|
|
<option value="1d">Ostatni dzień</option>
|
|
<option value="7d">Ostatni tydzień</option>
|
|
<option value="30d">Ostatni miesiąc</option>
|
|
<option value="365d">Ostatni rok</option>
|
|
|
|
<option value="before-current-year">Wszystko poza bieżącym rokiem</option>
|
|
<option value="keep-2y">Pozostaw 2 ostatnie lata</option>
|
|
<option value="keep-3y">Pozostaw 3 ostatnie lata</option>
|
|
|
|
</select>
|
|
</div>
|
|
<label for="time-from">Od (możesz też ustawić ręcznie):</label>
|
|
|
|
<input type="datetime-local" id="time-from" class="form-control mb-2">
|
|
<label for="time-to">Do:</label>
|
|
<input type="datetime-local" id="time-to" class="form-control mb-2">
|
|
<p class="small text-muted" id="time-query-preview"></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Anuluj</button>
|
|
<button type="button" class="btn btn-danger me-2" onclick="confirmTimeDelete()">Usuń dane tej serii</button>
|
|
<button type="button" class="btn btn-warning" onclick="deleteRangeForSelected()">Usuń z zaznaczonych</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |