212 Zeilen
9.7 KiB
HTML
212 Zeilen
9.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Resource Report Generator{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mt-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1>Resource Report Generator</h1>
|
|
<a href="{{ url_for('resources.resources') }}" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left"></i> Zurück
|
|
</a>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-8 mx-auto">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Report-Einstellungen</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="get" action="{{ url_for('resources.resource_report') }}">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label for="report_type" class="form-label">Report-Typ</label>
|
|
<select name="type" id="report_type" class="form-select" required>
|
|
<option value="usage">Auslastungsreport</option>
|
|
<option value="performance">Performance-Report</option>
|
|
<option value="compliance">Compliance-Report</option>
|
|
<option value="inventory">Bestands-Report</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="format" class="form-label">Export-Format</label>
|
|
<select name="format" id="format" class="form-select" required>
|
|
<option value="excel">Excel (.xlsx)</option>
|
|
<option value="csv">CSV (.csv)</option>
|
|
<option value="pdf">PDF (Vorschau)</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="date_from" class="form-label">Von</label>
|
|
<input type="date" name="from" id="date_from" class="form-control"
|
|
value="{{ (datetime.now() - timedelta(days=30)).strftime('%Y-%m-%d') }}" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="date_to" class="form-label">Bis</label>
|
|
<input type="date" name="to" id="date_to" class="form-control"
|
|
value="{{ datetime.now().strftime('%Y-%m-%d') }}" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<h6>Report-Beschreibungen:</h6>
|
|
<div id="report_descriptions">
|
|
<div class="alert alert-info report-desc" data-type="usage">
|
|
<h6><i class="fas fa-chart-line"></i> Auslastungsreport</h6>
|
|
<p class="mb-0">Zeigt die Nutzung aller Ressourcen im gewählten Zeitraum.
|
|
Enthält Allokations-Historie, durchschnittliche Auslastung und Trends.</p>
|
|
</div>
|
|
<div class="alert alert-warning report-desc" data-type="performance" style="display: none;">
|
|
<h6><i class="fas fa-tachometer-alt"></i> Performance-Report</h6>
|
|
<p class="mb-0">Analysiert die Performance-Metriken aller Ressourcen.
|
|
Enthält ROI-Berechnungen, Issue-Tracking und Performance-Scores.</p>
|
|
</div>
|
|
<div class="alert alert-success report-desc" data-type="compliance" style="display: none;">
|
|
<h6><i class="fas fa-shield-alt"></i> Compliance-Report</h6>
|
|
<p class="mb-0">Überprüft Compliance-Aspekte wie Quarantäne-Gründe,
|
|
Sicherheitsvorfälle und Policy-Verletzungen.</p>
|
|
</div>
|
|
<div class="alert alert-primary report-desc" data-type="inventory" style="display: none;">
|
|
<h6><i class="fas fa-boxes"></i> Bestands-Report</h6>
|
|
<p class="mb-0">Aktueller Bestand aller Ressourcen mit Status-Übersicht,
|
|
Verfügbarkeit und Zuordnungen.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between mt-4">
|
|
<button type="button" class="btn btn-outline-secondary" onclick="previewReport()">
|
|
<i class="fas fa-eye"></i> Vorschau
|
|
</button>
|
|
<button type="submit" class="btn btn-primary" name="download" value="true">
|
|
<i class="fas fa-download"></i> Report generieren
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Letzte Reports -->
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Letzte generierte Reports</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="list-group">
|
|
<div class="list-group-item">
|
|
<div class="d-flex w-100 justify-content-between">
|
|
<h6 class="mb-1">Auslastungsreport_2025-06-01.xlsx</h6>
|
|
<small>vor 5 Tagen</small>
|
|
</div>
|
|
<p class="mb-1">Zeitraum: 01.05.2025 - 01.06.2025</p>
|
|
<small>Generiert von: {{ username }}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vorschau Modal -->
|
|
<div class="modal fade" id="previewModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Report-Vorschau</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body" id="previewContent">
|
|
<p class="text-center">
|
|
<i class="fas fa-spinner fa-spin"></i> Lade Vorschau...
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Report-Typ Beschreibungen
|
|
document.getElementById('report_type').addEventListener('change', function() {
|
|
const selectedType = this.value;
|
|
document.querySelectorAll('.report-desc').forEach(desc => {
|
|
desc.style.display = desc.dataset.type === selectedType ? 'block' : 'none';
|
|
});
|
|
});
|
|
|
|
// Datum-Validierung
|
|
document.getElementById('date_from').addEventListener('change', function() {
|
|
document.getElementById('date_to').min = this.value;
|
|
});
|
|
|
|
document.getElementById('date_to').addEventListener('change', function() {
|
|
document.getElementById('date_from').max = this.value;
|
|
});
|
|
|
|
// Report-Vorschau
|
|
function previewReport() {
|
|
const modal = new bootstrap.Modal(document.getElementById('previewModal'));
|
|
const content = document.getElementById('previewContent');
|
|
|
|
// Simuliere Lade-Vorgang
|
|
content.innerHTML = '<p class="text-center"><i class="fas fa-spinner fa-spin"></i> Generiere Vorschau...</p>';
|
|
modal.show();
|
|
|
|
setTimeout(() => {
|
|
// Beispiel-Vorschau
|
|
content.innerHTML = `
|
|
<h5>Report-Vorschau</h5>
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Ressourcentyp</th>
|
|
<th>Gesamt</th>
|
|
<th>Verfügbar</th>
|
|
<th>Zugeteilt</th>
|
|
<th>Auslastung</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Domain</td>
|
|
<td>150</td>
|
|
<td>45</td>
|
|
<td>100</td>
|
|
<td>66.7%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>IPv4</td>
|
|
<td>100</td>
|
|
<td>20</td>
|
|
<td>75</td>
|
|
<td>75.0%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Phone</td>
|
|
<td>50</td>
|
|
<td>15</td>
|
|
<td>30</td>
|
|
<td>60.0%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p class="text-muted">Dies ist eine vereinfachte Vorschau. Der vollständige Report enthält weitere Details.</p>
|
|
`;
|
|
}, 1000);
|
|
}
|
|
|
|
// Initialisierung
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const today = new Date();
|
|
const thirtyDaysAgo = new Date(today);
|
|
thirtyDaysAgo.setDate(today.getDate() - 30);
|
|
|
|
document.getElementById('date_from').value = thirtyDaysAgo.toISOString().split('T')[0];
|
|
document.getElementById('date_to').value = today.toISOString().split('T')[0];
|
|
});
|
|
</script>
|
|
{% endblock %} |