functions and interface

This commit is contained in:
Mateusz Gruszczyński
2025-02-26 14:29:36 +01:00
parent 5d47549c19
commit c89c1efd67
11 changed files with 850 additions and 82 deletions

View File

@ -1,5 +1,26 @@
{% extends "base.html" %}
{% block title %}Szczegóły urządzenia - RouterOS Update{% endblock %}
{% block extra_head %}
<style>
/* Stylizacja kart w trybie ciemnym */
body.dark-mode .card {
background-color: #1e1e1e;
color: #e0e0e0;
border-color: #444;
}
/* Stylizacja bloku logów przewijalny, z odpowiednim tłem i kolorem tekstu */
.log-block {
background-color: inherit;
color: inherit;
padding: 1rem;
border: 1px solid #ccc;
border-radius: 0.25rem;
max-height: 300px;
overflow-y: auto;
white-space: pre-wrap;
}
</style>
{% endblock %}
{% block content %}
<div class="container">
<div class="my-4">
@ -11,19 +32,10 @@
</ol>
</nav>
</div>
<!-- Zakładki dla danych urządzenia i informacji o systemie -->
<ul class="nav nav-tabs mb-3" id="deviceTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="device-data-tab" data-bs-toggle="tab" data-bs-target="#device-data" type="button" role="tab" aria-controls="device-data" aria-selected="true">Dane urządzenia</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="system-info-tab" data-bs-toggle="tab" data-bs-target="#system-info" type="button" role="tab" aria-controls="system-info" aria-selected="false">Informacje o systemie</button>
</li>
</ul>
<div class="tab-content" id="deviceTabContent">
<!-- Dane urządzenia -->
<div class="tab-pane fade show active" id="device-data" role="tabpanel" aria-labelledby="device-data-tab">
<!-- Dwukolumnowy układ: dane urządzenia i informacje o systemie -->
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-header bg-primary text-white">
Dane urządzenia
@ -55,10 +67,9 @@
</div>
</div>
</div>
<!-- Informacje o systemie -->
<div class="tab-pane fade" id="system-info" role="tabpanel" aria-labelledby="system-info-tab">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-header bg-info text-white">
<div class="card-header bg-primary text-white">
Informacje o systemie
</div>
<div class="card-body">
@ -85,19 +96,19 @@
</div>
</div>
<!-- Logi urządzenia w formie accordion -->
<div class="accordion mb-3" id="logsAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingLogs">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLogs" aria-expanded="false" aria-controls="collapseLogs">
Logi urządzenia
</button>
</h2>
<div id="collapseLogs" class="accordion-collapse collapse" aria-labelledby="headingLogs" data-bs-parent="#logsAccordion">
<div class="accordion-body">
<pre class="bg-light p-3" style="white-space: pre-wrap;">{{ device.last_log or 'Brak logów' }}</pre>
<!-- Logi urządzenia jako pojedynczy blok tekstu -->
<div class="card mb-3">
<div class="card-header bg-secondary text-white">
Logi urządzenia
</div>
<div class="card-body">
{% if device.last_log %}
<div class="log-block">
{{ device.last_log }}
</div>
</div>
{% else %}
<p>Brak logów</p>
{% endif %}
</div>
</div>