206 lines
7.1 KiB
HTML
206 lines
7.1 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Changelog RouterOS{% endblock %}
|
||
|
||
{% block extra_head %}
|
||
<!-- PRISM.JS (temat okaidia lub dowolny inny) -->
|
||
<link rel="stylesheet"
|
||
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css"
|
||
id="prism-style">
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
|
||
|
||
<style>
|
||
/*
|
||
1) Mniejszy rozmiar fontu w bloczku <code>
|
||
2) Łamanie linii, max-width, itp.
|
||
3) Tło w jasnym/ciemnym trybie
|
||
*/
|
||
|
||
/* Mniejszy rozmiar i ograniczenie linii */
|
||
pre code[class*="language-"] {
|
||
font-size: 0.85rem !important; /* dopasuj do gustu, np. 0.9rem lub 0.8rem */
|
||
line-height: 1.3 !important;
|
||
}
|
||
|
||
/* Łamanie linii i scroll w razie potrzeby */
|
||
pre {
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
overflow-wrap: break-word;
|
||
max-width: 100%;
|
||
overflow-x: auto;
|
||
margin: 0;
|
||
padding: 1rem;
|
||
}
|
||
|
||
/* Tło w trybie jasnym */
|
||
body.light-mode pre {
|
||
background-color: #ffffff !important;
|
||
color: #212529 !important;
|
||
}
|
||
/* Tło w trybie ciemnym */
|
||
body.dark-mode pre {
|
||
background-color: #2b2b2b !important;
|
||
color: #e0e0e0 !important;
|
||
}
|
||
|
||
body.dark-mode .card {
|
||
background-color: #1e1e1e !important;
|
||
color: #ccc !important;
|
||
border-color: #444 !important;
|
||
}
|
||
|
||
body.dark-mode .card-header {
|
||
background-color: #333 !important;
|
||
color: #fff !important;
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container py-4">
|
||
|
||
<!-- Karta z cieniowaniem, nagłówek i ciało -->
|
||
<div class="card border-0 shadow">
|
||
<div class="card-header d-flex justify-content-between align-items-center">
|
||
<h4 class="mb-0">Changelog RouterOS</h4>
|
||
<!-- Przycisk do wywołania aktualizacji changelogów -->
|
||
<a href="#" id="updateChangelog" class="btn btn-danger btn-sm">
|
||
Aktualizuj changelogi
|
||
</a>
|
||
</div>
|
||
<div class="card-body">
|
||
|
||
<!-- Nawigacja kanałów (stable / rc / beta) -->
|
||
<ul class="nav nav-tabs mb-3">
|
||
<li class="nav-item">
|
||
<a class="nav-link {% if channel=='stable' %}active{% endif %}"
|
||
href="{{ url_for('routeros_changelog', channel='stable', series=series) }}">
|
||
Stable
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link {% if channel=='rc' %}active{% endif %}"
|
||
href="{{ url_for('routeros_changelog', channel='rc', series=series) }}">
|
||
RC
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link {% if channel=='beta' %}active{% endif %}"
|
||
href="{{ url_for('routeros_changelog', channel='beta', series=series) }}">
|
||
Beta
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Nawigacja serii (7.x / 6.x) -->
|
||
<ul class="nav nav-pills mb-3">
|
||
<li class="nav-item">
|
||
<a class="nav-link {% if series=='7.x' %}active{% endif %}"
|
||
href="{{ url_for('routeros_changelog', channel=channel, series='7.x') }}">
|
||
7.x
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link {% if series=='6.x' %}active{% endif %}"
|
||
href="{{ url_for('routeros_changelog', channel=channel, series='6.x') }}">
|
||
6.x
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Prezentacja wybranego changeloga -->
|
||
{% if selected_entry %}
|
||
<div class="mb-3">
|
||
<h5 class="fw-bold">
|
||
{{ selected_entry.version | format_version }}
|
||
<small class="text-muted">({{ selected_entry.timestamp.strftime('%Y-%b-%d') }})</small>
|
||
</h5>
|
||
<pre><code class="language-plaintext">{{ selected_entry.details }}</code></pre>
|
||
</div>
|
||
{% else %}
|
||
<div class="alert alert-warning mb-3">
|
||
Brak wpisów dla wybranych ustawień (kanał: {{ channel }}, seria: {{ series }}).
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Wybór innej wersji, jeśli mamy >1 wpis -->
|
||
{% if entries|length > 1 %}
|
||
<form method="GET" action="{{ url_for('routeros_changelog') }}">
|
||
<input type="hidden" name="channel" value="{{ channel }}">
|
||
<input type="hidden" name="series" value="{{ series }}">
|
||
|
||
<div class="input-group mb-3">
|
||
<select name="version" class="form-select">
|
||
{% for entry in entries %}
|
||
<option value="{{ entry.version }}"
|
||
{% if selected_entry and entry.version == selected_entry.version %}selected{% endif %}>
|
||
{{ entry.version | format_version }} ({{ entry.timestamp.strftime('%Y-%b-%d') }})
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
<button class="btn btn-primary" type="submit">Pokaż</button>
|
||
</div>
|
||
</form>
|
||
{% endif %}
|
||
|
||
<div class="mt-4">
|
||
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Powrót do dashboardu</a>
|
||
</div>
|
||
|
||
</div> <!-- /card-body -->
|
||
</div> <!-- /card -->
|
||
</div>
|
||
|
||
<!-- Modal z progressem -->
|
||
<div class="modal fade" id="progressModal" tabindex="-1" role="dialog" aria-labelledby="progressModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="progressModalLabel">Pobieranie changelogów</h5>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="spinner-border" role="status">
|
||
<span class="visually-hidden">Ładowanie...</span>
|
||
</div>
|
||
<p>Proszę czekać, trwa pobieranie changelogów...</p>
|
||
<!-- Możesz dodać miejsce na logi, jeśli chcesz wyświetlać szczegóły postępu -->
|
||
<div id="progressLog" style="max-height:200px; overflow-y:auto;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Upewnij się, że Bootstrap JS jest załadowany (np. przez CDN)
|
||
document.getElementById("updateChangelog").addEventListener("click", function(e) {
|
||
e.preventDefault();
|
||
// Pokaż modal
|
||
var progressModalEl = document.getElementById("progressModal");
|
||
var progressModal = new bootstrap.Modal(progressModalEl);
|
||
progressModal.show();
|
||
|
||
// Opcjonalnie wyczyść poprzednie logi
|
||
document.getElementById("progressLog").innerHTML = "";
|
||
|
||
// Wywołanie endpointu force_fetch_changelogs
|
||
fetch("{{ url_for('force_fetch_changelogs') }}")
|
||
.then(response => response.text())
|
||
.then(data => {
|
||
// Aktualizacja logu – możesz dodać otrzymane dane, jeśli są potrzebne
|
||
document.getElementById("progressLog").innerHTML += "<p>Pobieranie zakończone.</p>";
|
||
// Po krótkiej chwili zamknij modal i odśwież całą stronę
|
||
setTimeout(() => {
|
||
progressModal.hide();
|
||
location.reload();
|
||
}, 1000);
|
||
})
|
||
.catch(error => {
|
||
document.getElementById("progressLog").innerHTML += "<p>Błąd: " + error + "</p>";
|
||
setTimeout(() => {
|
||
progressModal.hide();
|
||
}, 2000);
|
||
});
|
||
});
|
||
</script>
|
||
{% endblock %}
|