135 lines
4.3 KiB
HTML
135 lines
4.3 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Logi - Aplikacja Updatera{% endblock %}
|
||
|
||
{% block extra_head %}
|
||
<!-- 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 %}
|
||
<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>
|
||
<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>
|
||
{% endblock %}
|
||
|
||
{% block extra_scripts %}
|
||
<!-- 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 %}
|