287 lines
10 KiB
HTML
287 lines
10 KiB
HTML
{# templates/dashboard.html #}
|
|
{% extends 'base.html' %}
|
|
|
|
{# page title #}
|
|
{% block title %}Dashboard{% endblock %}
|
|
{% block page_id %}dashboard{% endblock %}
|
|
|
|
{% block head_extra %}
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" data-page-head />
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" data-page-head></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js" data-page-head></script>
|
|
<style data-page-head>
|
|
#dashboard-map {
|
|
width: 100%;
|
|
height: 420px;
|
|
min-height: 320px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
#dashboard-map-modal {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 480px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{# page content #}
|
|
{% block content %}
|
|
|
|
<!-- Main Container -->
|
|
<div class="container">
|
|
<h2>Auswertung-Downloads</h2>
|
|
<!-- Dropdown Controls -->
|
|
<div class="mb-4 d-flex flex-wrap gap-2">
|
|
<!-- Timeframe Dropdown -->
|
|
<div class="dropdown">
|
|
<button class="btn btn-secondary dropdown-toggle"
|
|
type="button" id="timeframeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
|
{% if session['timeframe'] == 'last24hours' %}
|
|
Last 24 Hours
|
|
{% elif session['timeframe'] == '7days' %}
|
|
Last 7 Days
|
|
{% elif session['timeframe'] == '14days' %}
|
|
Last 14 Days
|
|
{% elif session['timeframe'] == '30days' %}
|
|
Last 30 Days
|
|
{% elif session['timeframe'] == '365days' %}
|
|
Last 365 Days
|
|
{% else %}
|
|
Select Timeframe
|
|
{% endif %}
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="timeframeDropdown">
|
|
<li>
|
|
<a class="dropdown-item {% if session['timeframe'] == 'last24hours' %}active{% endif %}"
|
|
href="{{ url_for('dashboard', timeframe='last24hours') }}">
|
|
Last 24 Hours
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item {% if session['timeframe'] == '7days' %}active{% endif %}"
|
|
href="{{ url_for('dashboard', timeframe='7days') }}">
|
|
Last 7 Days
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item {% if session['timeframe'] == '14days' %}active{% endif %}"
|
|
href="{{ url_for('dashboard', timeframe='14days') }}">
|
|
Last 14 Days
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item {% if session['timeframe'] == '30days' %}active{% endif %}"
|
|
href="{{ url_for('dashboard', timeframe='30days') }}">
|
|
Last 30 Days
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item {% if session['timeframe'] == '365days' %}active{% endif %}"
|
|
href="{{ url_for('dashboard', timeframe='365days') }}">
|
|
Last 365 Days
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Filetype Dropdown -->
|
|
<div class="dropdown">
|
|
<button class="btn btn-secondary dropdown-toggle"
|
|
type="button" id="filetypeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
|
{% if session['filetype'] == 'audio' %}
|
|
Audio
|
|
{% elif session['filetype'] == 'video' %}
|
|
Video
|
|
{% elif session['filetype'] == 'photo' %}
|
|
Photo
|
|
{% elif session['filetype'] == 'other' %}
|
|
Other
|
|
{% else %}
|
|
Select File Type
|
|
{% endif %}
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="filetypeDropdown">
|
|
<li>
|
|
<a class="dropdown-item {% if session['filetype'] == 'audio' %}active{% endif %}"
|
|
href="{{ url_for('dashboard', filetype='audio') }}">
|
|
Audio
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item {% if session['filetype'] == 'video' %}active{% endif %}"
|
|
href="{{ url_for('dashboard', filetype='video') }}">
|
|
Video
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item {% if session['filetype'] == 'photo' %}active{% endif %}"
|
|
href="{{ url_for('dashboard', filetype='photo') }}">
|
|
Photo
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item {% if session['filetype'] == 'other' %}active{% endif %}"
|
|
href="{{ url_for('dashboard', filetype='other') }}">
|
|
Other
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Summary Cards -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card bg-info text-white">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Alle Downloads</h5>
|
|
<p class="card-text display-6">{{ total_accesses }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card bg-success text-white">
|
|
<div class="card-body">
|
|
<h5 class="card-title">unterschiedliche Dateien</h5>
|
|
<p class="card-text display-6">{{ unique_files }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card bg-warning text-white">
|
|
<div class="card-body">
|
|
<h5 class="card-title">unterschiedliche Nutzer</h5>
|
|
<p class="card-text display-6">{{ unique_user }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card bg-secondary text-white">
|
|
<div class="card-body">
|
|
<h5 class="card-title">beschleunigte Downloads</h5>
|
|
<p class="card-text display-6">{{ cached_percentage }} %</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Section -->
|
|
<div class="row mb-4">
|
|
<!-- Access Trend Chart -->
|
|
<div class="col-md-6 mb-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Anzahl Geräte</h5>
|
|
<canvas id="distinctDeviceChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Timeframe Breakdown Chart -->
|
|
<div class="col-md-6 mb-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Anzahl Downloads</h5>
|
|
<canvas id="downloadTimeframeChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- User Agent Distribution Chart -->
|
|
<div class="col-md-6 mb-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Endgeräte der Nutzer</h5>
|
|
<canvas id="userAgentChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Folder Distribution Chart -->
|
|
<div class="col-md-6 mb-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Verteilung auf Ordner</h5>
|
|
<canvas id="folderChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map + Location Distribution -->
|
|
<div class="row mb-4">
|
|
<div class="col-lg-7 mb-3">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="card-title mb-0">Zugriffe auf der Karte</h5>
|
|
<button id="mapFullscreenToggle" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#mapModal">Vollbild</button>
|
|
</div>
|
|
<div id="dashboard-map" class="mt-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5 mb-3">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
Verteilung der Zugriffe
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Anzahl Downloads</th>
|
|
<th>Stadt</th>
|
|
<th>Land</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for loc in location_data %}
|
|
<tr>
|
|
<td>{{ loc.count }}</td>
|
|
<td>{{ loc.city }}</td>
|
|
<td>{{ loc.country }}</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="3">No access data available for the selected timeframe.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Map fullscreen modal -->
|
|
<div class="modal fade" id="mapModal" tabindex="-1" aria-labelledby="mapModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="mapModalLabel">Karte im Vollbild</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<div id="dashboard-map-modal"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="application/json" id="dashboard-page-data">
|
|
{{ {
|
|
'map_data': map_data,
|
|
'distinct_device_data': distinct_device_data,
|
|
'timeframe_data': timeframe_data,
|
|
'user_agent_data': user_agent_data,
|
|
'folder_data': folder_data,
|
|
'timeframe': timeframe
|
|
} | tojson }}
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}{% endblock %}
|