gru/routeros_update
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

git add templates/! REFACOR INTERFEJSU git add templates/

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2025-02-28 13:12:29 +01:00
parent 4e965195f5
commit d0f1d25063
16 changed files with 1335 additions and 771 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
templates/logs.html
View File

@ -1,65 +1,134 @@
{% extends "base.html" %}
{% block title %}Logi - Aplikacja Updatera{% endblock %}
{% block extra_head %}
<!-- Dołącz styl CSS biblioteki Vanilla‑DataTables -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.css">
<!-- Styl Vanilla‑DataTables -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.css">
<style>
/* =======================================
Dostosowanie do trybu ciemnego
(jeśli w base.html używasz body.dark-mode)
======================================= */
/* Karta w trybie ciemnym */
body.dark-mode .card {
background-color: #1e1e1e;
color: #cccccc;
border-color: #444;
}
/* Nagłówek karty w trybie ciemnym */
body.dark-mode .card .card-header.bg-light {
background-color: #333 !important;
border-bottom: 1px solid #444;
}
/* Tabela w trybie ciemnym
- wyjaśnienie: thead.table-dark w trybie jasnym ma swoje domyślne kolory,
więc w ciemnym je nadpisujemy, żeby był czytelny. */
body.dark-mode .table thead.table-dark {
background-color: #2a2a2a !important;
color: #ccc !important;
border-color: #444 !important;
}
body.dark-mode .table-hover tbody tr:hover {
background-color: #2f2f2f;
}
/* Obramowania w trybie ciemnym */
body.dark-mode .table.table-bordered > :not(caption) > * > * {
border-color: #444 !important;
}
/* Tabela DataTables – drobne poprawki w trybie ciemnym */
body.dark-mode .dataTable-wrapper .dataTable-info,
body.dark-mode .dataTable-wrapper .dataTable-pagination,
body.dark-mode .dataTable-wrapper .dataTable-dropdown label,
body.dark-mode .dataTable-wrapper .dataTable-input {
color: #ccc;
}
</style>
{% endblock %}
{% block content %}
<h2>Logi</h2>
<!-- Formularz kasowania logów starszych niż podana liczba dni -->
<div class="mt-4">
<h4>Usuń logi starsze niż podana liczba dni</h4>
<form method="POST" action="{{ url_for('clean_logs') }}">
<div class="mb-3">
<label for="days" class="form-label">Liczba dni</label>
<input type="number" class="form-control" name="days" id="days" placeholder="Podaj liczbę dni">
<div class="container">
<!-- Nagłówek strony -->
<h2 class="mb-4">Logi</h2>
<!-- Karta: Formularz kasowania logów -->
<div class="card border-0 shadow mb-4">
<div class="card-header bg-light">
<h5 class="mb-0">Usuń logi starsze niż podana liczba dni</h5>
</div>
<button type="submit" class="btn btn-danger">Usuń logi</button>
</form>
<div class="card-body">
<form method="POST" action="{{ url_for('clean_logs') }}">
<div class="mb-3">
<label for="days" class="form-label">Liczba dni</label>
<input type="number" class="form-control" name="days" id="days" placeholder="Podaj liczbę dni">
</div>
<button type="submit" class="btn btn-danger">Usuń logi</button>
</form>
</div>
</div>
<!-- Karta: Tabela logów -->
<div class="card border-0 shadow">
<div class="card-header bg-light">
<h5 class="mb-0">Wszystkie logi systemu</h5>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-striped table-hover table-sm align-middle mb-0" id="logsTable">
<thead class="table-dark">
<tr>
<th style="white-space: nowrap;">Data i czas</th>
<th>Urządzenie</th>
<th>Wiadomość</th>
</tr>
</thead>
<tbody>
{% for log in logs %}
<tr>
<td style="white-space: nowrap;">{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
<td>
{% if log.device_id %}
<a href="{{ url_for('device_detail', device_id=log.device.id) }}">
{{ log.device.name if log.device.name else "Urządzenie #" ~ log.device.id }}
</a>
{% else %}
<span class="text-muted">Ogólne</span>
{% endif %}
</td>
<!-- Treść logu w <pre> z white-space: pre-wrap, żeby łamać długie linie -->
<td><pre style="white-space: pre-wrap; margin:0;">{{ log.message }}</pre></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
<hr>
<table class="table table-striped" id="logsTable">
<thead class="table-dark">
<tr>
<th>Data i czas</th>
<th>Urządzenie</th>
<th>Wiadomość</th>
</tr>
</thead>
<tbody>
{% for log in logs %}
<tr>
<td>{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
<td>
{% if log.device_id %}
<a href="{{ url_for('device_detail', device_id=log.device.id) }}">
{{ log.device.name if log.device.name else "Urządzenie #" ~ log.device.id }}
</a>
{% else %}
Ogólne
{% endif %}
</td>
<td><pre style="white-space: pre-wrap;">{{ log.message }}</pre></td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
{% block extra_scripts %}
<!-- Dołącz skrypt biblioteki Vanilla‑DataTables -->
<script src="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.js"></script>
<script>
// Inicjalizacja Vanilla‑DataTables dla tabeli logów
const dataTable = new DataTable("#logsTable", {
searchable: true,
sortable: true,
perPage: 10,
labels: {
placeholder: "Szukaj...", // placeholder dla pola wyszukiwania
perPage: "{select} wpisów na stronę", // etykieta przy wyborze liczby wierszy
noRows: "Brak logów.", // komunikat, gdy tabela jest pusta
info: "Wyświetlono {start} - {end} z {rows} logów" // tekst z informacją o paginacji
}
});
</script>
<!-- Vanilla‑DataTables -->
<script src="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.js"></script>
<script>
// Inicjalizacja Vanilla‑DataTables dla tabeli logów
const dataTable = new DataTable("#logsTable", {
searchable: true,
sortable: true,
perPage: 10,
labels: {
placeholder: "Szukaj...", // placeholder dla pola wyszukiwania
perPage: "{select} wpisów na stronę", // tekst przy select
noRows: "Brak logów.", // gdy tabela jest pusta
info: "Wyświetlono {start} - {end} z {rows} logów" // info paginacja
}
});
</script>
{% endblock %}