Dateien
Hetzner-Backup/v2_adminpanel/templates/backups.html
2025-06-28 22:52:43 +00:00

494 Zeilen
22 KiB
HTML

{% extends "base.html" %}
{% block title %}Backup-Verwaltung{% endblock %}
{% block extra_css %}
<style>
.status-success { color: #28a745; }
.status-failed { color: #dc3545; }
.status-in_progress { color: #ffc107; }
.backup-actions { white-space: nowrap; }
.backup-tabs { margin-bottom: 20px; }
.github-indicator {
display: inline-block;
margin-left: 10px;
}
.github-indicator.uploaded { color: #28a745; }
.github-indicator.not-uploaded { color: #6c757d; }
.backup-type-badge {
margin-left: 5px;
}
</style>
{% endblock %}
{% block content %}
<div class="container py-5">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>💾 Backup-Verwaltung</h2>
<div>
<span class="text-muted">Automatische Backups: Täglich um 03:00 Uhr</span>
</div>
</div>
<!-- Backup-Info -->
<div class="row mb-4">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">📅 Letztes DB-Backup</h5>
{% set last_db_backup = backups | selectattr('backup_type', 'ne', 'server') | selectattr('status', 'eq', 'success') | first %}
{% if last_db_backup %}
<p class="mb-1"><strong>Zeitpunkt:</strong> {{ last_db_backup.created_at.strftime('%d.%m.%Y %H:%M:%S') }}</p>
<p class="mb-1"><strong>Größe:</strong> {{ (last_db_backup.filesize / 1024 / 1024)|round(2) }} MB</p>
{% if last_db_backup.github_uploaded %}
<p class="mb-0"><span class="badge bg-success">✅ GitHub gesichert</span></p>
{% endif %}
{% else %}
<p class="text-muted mb-0">Noch kein Backup vorhanden</p>
{% endif %}
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">🖥️ Letztes Server-Backup</h5>
{% set last_server_backup = backups | selectattr('is_server_backup', 'eq', True) | selectattr('status', 'eq', 'success') | first %}
{% if last_server_backup %}
<p class="mb-1"><strong>Zeitpunkt:</strong> {{ last_server_backup.created_at.strftime('%d.%m.%Y %H:%M:%S') }}</p>
<p class="mb-1"><strong>Größe:</strong> {{ (last_server_backup.filesize / 1024 / 1024)|round(2) }} MB</p>
{% if last_server_backup.github_uploaded %}
<p class="mb-0"><span class="badge bg-success">✅ GitHub gesichert</span></p>
{% endif %}
{% else %}
<p class="text-muted mb-0">Noch kein Server-Backup vorhanden</p>
{% endif %}
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">🔧 Backup-Aktionen</h5>
<div class="d-grid gap-2">
<button class="btn btn-primary" onclick="createBackup('database')">
💾 Datenbank-Backup
</button>
<button class="btn btn-success" onclick="createBackup('server')">
🖥️ Server-Backup
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Tabs für lokale und GitHub Backups -->
<ul class="nav nav-tabs backup-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="local-tab" data-bs-toggle="tab" data-bs-target="#local" type="button">
📁 Lokale Backups
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="github-tab" data-bs-toggle="tab" data-bs-target="#github" type="button">
<i class="fab fa-github"></i> GitHub Backups
</button>
</li>
</ul>
<div class="tab-content">
<!-- Lokale Backups Tab -->
<div class="tab-pane fade show active" id="local" role="tabpanel">
<div class="card">
<div class="card-header">
<h5 class="mb-0">📋 Backup-Historie</h5>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover sortable-table">
<thead>
<tr>
<th class="sortable" data-type="date">Zeitstempel</th>
<th class="sortable">Dateiname</th>
<th class="sortable" data-type="numeric">Größe</th>
<th class="sortable">Typ</th>
<th class="sortable">Status</th>
<th class="sortable">Erstellt von</th>
<th>GitHub</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
{% for backup in backups %}
<tr>
<td>{{ backup.created_at.strftime('%d.%m.%Y %H:%M:%S') }}</td>
<td>
<small>{{ backup.filename or 'N/A' }}</small>
{% if backup.is_encrypted %}
<span class="badge bg-info ms-1">🔒</span>
{% endif %}
{% if backup.is_server_backup %}
<span class="badge bg-success backup-type-badge">Server</span>
{% else %}
<span class="badge bg-primary backup-type-badge">DB</span>
{% endif %}
</td>
<td>
{% if backup.filesize %}
{{ (backup.filesize / 1024 / 1024)|round(2) }} MB
{% else %}
-
{% endif %}
</td>
<td>
{% if backup.backup_type == 'manual' %}
<span class="badge bg-primary">Manuell</span>
{% elif backup.backup_type == 'server' %}
<span class="badge bg-success">Server</span>
{% else %}
<span class="badge bg-secondary">Automatisch</span>
{% endif %}
</td>
<td>
{% if backup.status == 'success' %}
<span class="status-success">✅ Erfolgreich</span>
{% elif backup.status == 'failed' %}
<span class="status-failed" title="{{ backup.error_message }}">❌ Fehlgeschlagen</span>
{% else %}
<span class="status-in_progress">⏳ In Bearbeitung</span>
{% endif %}
</td>
<td>{{ backup.created_by }}</td>
<td>
{% if backup.github_uploaded %}
<span class="github-indicator uploaded" title="Auf GitHub gesichert">
<i class="fab fa-github"></i>
</span>
{% else %}
<span class="github-indicator not-uploaded" title="Nicht auf GitHub">
<i class="fab fa-github"></i>
</span>
{% endif %}
</td>
<td class="backup-actions">
{% if backup.status == 'success' %}
<div class="btn-group btn-group-sm" role="group">
{% if backup.file_exists or backup.github_uploaded %}
<a href="{{ url_for('admin.download_backup', backup_id=backup.id) }}"
class="btn btn-outline-primary"
title="Backup herunterladen">
📥
</a>
{% endif %}
{% if not backup.github_uploaded and backup.file_exists %}
<button class="btn btn-outline-success"
onclick="pushToGitHub({{ backup.id }})"
title="Zu GitHub hochladen">
<i class="fab fa-github"></i>
</button>
{% endif %}
{% if not backup.is_server_backup %}
<button class="btn btn-outline-warning"
onclick="restoreBackup({{ backup.id }}, '{{ backup.filename }}')"
title="Backup wiederherstellen">
🔄
</button>
{% endif %}
<button class="btn btn-outline-danger"
onclick="deleteBackup({{ backup.id }}, '{{ backup.filename }}')"
title="Backup löschen">
🗑️
</button>
</div>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if not backups %}
<div class="text-center py-5">
<p class="text-muted">Noch keine Backups vorhanden.</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<!-- GitHub Backups Tab -->
<div class="tab-pane fade" id="github" role="tabpanel">
<div class="card">
<div class="card-header">
<h5 class="mb-0"><i class="fab fa-github"></i> GitHub Backup-Archiv</h5>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Dateiname</th>
<th>Typ</th>
<th>Pfad</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
{% for backup in github_backups %}
<tr>
<td>{{ backup.filename }}</td>
<td>
{% if backup.type == 'server' %}
<span class="badge bg-success">Server</span>
{% else %}
<span class="badge bg-primary">Datenbank</span>
{% endif %}
</td>
<td><small>{{ backup.path }}</small></td>
<td>
<button class="btn btn-sm btn-outline-primary"
onclick="downloadFromGitHub('{{ backup.path }}', '{{ backup.filename }}')"
title="Von GitHub herunterladen">
📥 Download
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if not github_backups %}
<div class="text-center py-5">
<p class="text-muted">Keine Backups auf GitHub gefunden.</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Wiederherstellungs-Modal -->
<div class="modal fade" id="restoreModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">🔄 Backup wiederherstellen</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="alert alert-warning">
<strong>⚠️ Warnung:</strong> Bei der Wiederherstellung werden alle aktuellen Daten überschrieben!
</div>
<p>Backup: <strong id="restoreFilename"></strong></p>
<form id="restoreForm">
<input type="hidden" id="restoreBackupId">
<div class="mb-3">
<label for="encryptionKey" class="form-label">Verschlüsselungs-Passwort (optional)</label>
<input type="password" class="form-control" id="encryptionKey"
placeholder="Leer lassen für Standard-Passwort">
<small class="text-muted">
Falls das Backup mit einem anderen Passwort verschlüsselt wurde
</small>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
<button type="button" class="btn btn-danger" onclick="confirmRestore()">
⚠️ Wiederherstellen
</button>
</div>
</div>
</div>
</div>
<!-- Backup Options Modal -->
<div class="modal fade" id="backupOptionsModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="backupOptionsTitle">💾 Backup erstellen</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="backupOptionsForm">
<input type="hidden" id="backupType">
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="pushToGitHub" checked>
<label class="form-check-label" for="pushToGitHub">
<i class="fab fa-github"></i> Automatisch zu GitHub hochladen
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="deleteLocal" checked>
<label class="form-check-label" for="deleteLocal">
🗑️ Lokale Kopie nach Upload löschen (Speicherplatz sparen)
</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
<button type="button" class="btn btn-primary" onclick="confirmCreateBackup()">
💾 Backup erstellen
</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
function createBackup(type) {
document.getElementById('backupType').value = type;
document.getElementById('backupOptionsTitle').textContent =
type === 'server' ? '🖥️ Server-Backup erstellen' : '💾 Datenbank-Backup erstellen';
const modal = new bootstrap.Modal(document.getElementById('backupOptionsModal'));
modal.show();
}
function confirmCreateBackup() {
const type = document.getElementById('backupType').value;
const pushToGitHub = document.getElementById('pushToGitHub').checked;
const deleteLocal = document.getElementById('deleteLocal').checked;
// Modal schließen
bootstrap.Modal.getInstance(document.getElementById('backupOptionsModal')).hide();
// Loading anzeigen
const loadingDiv = document.createElement('div');
loadingDiv.className = 'position-fixed top-50 start-50 translate-middle text-center';
loadingDiv.innerHTML = `
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="mt-2">Backup wird erstellt...</div>
`;
document.body.appendChild(loadingDiv);
fetch('{{ url_for('admin.create_backup_route') }}', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
type: type,
push_to_github: pushToGitHub,
delete_local: deleteLocal
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('✅ ' + data.message);
location.reload();
} else {
alert('❌ ' + data.message);
}
})
.catch(error => {
alert('❌ Fehler beim Erstellen des Backups: ' + error);
})
.finally(() => {
document.body.removeChild(loadingDiv);
});
}
function pushToGitHub(backupId) {
if (!confirm('Backup zu GitHub hochladen?')) {
return;
}
// TODO: Implement push to GitHub for existing backup
alert('Diese Funktion wird noch implementiert.');
}
function downloadFromGitHub(path, filename) {
// TODO: Implement download from GitHub
alert('Download von GitHub: ' + filename + '\n\nDiese Funktion wird noch implementiert.');
}
function restoreBackup(backupId, filename) {
document.getElementById('restoreBackupId').value = backupId;
document.getElementById('restoreFilename').textContent = filename;
document.getElementById('encryptionKey').value = '';
const modal = new bootstrap.Modal(document.getElementById('restoreModal'));
modal.show();
}
function confirmRestore() {
if (!confirm('Wirklich wiederherstellen? Alle aktuellen Daten werden überschrieben!')) {
return;
}
const backupId = document.getElementById('restoreBackupId').value;
const encryptionKey = document.getElementById('encryptionKey').value;
const formData = new FormData();
if (encryptionKey) {
formData.append('encryption_key', encryptionKey);
}
// Modal schließen
bootstrap.Modal.getInstance(document.getElementById('restoreModal')).hide();
// Loading anzeigen
const loadingDiv = document.createElement('div');
loadingDiv.className = 'position-fixed top-50 start-50 translate-middle';
loadingDiv.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>';
document.body.appendChild(loadingDiv);
fetch(`/backup/restore/${backupId}`, {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('✅ ' + data.message + '\n\nDie Seite wird neu geladen...');
window.location.href = '{{ url_for('admin.dashboard') }}';
} else {
alert('❌ ' + data.message);
}
})
.catch(error => {
alert('❌ Fehler bei der Wiederherstellung: ' + error);
})
.finally(() => {
document.body.removeChild(loadingDiv);
});
}
function deleteBackup(backupId, filename) {
if (!confirm(`Soll das Backup "${filename}" wirklich gelöscht werden?\n\nDieser Vorgang kann nicht rückgängig gemacht werden!`)) {
return;
}
fetch(`/backup/delete/${backupId}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('✅ ' + data.message);
location.reload();
} else {
alert('❌ ' + data.message);
}
})
.catch(error => {
alert('❌ Fehler beim Löschen des Backups: ' + error);
});
}
</script>
{% endblock %}