lelo/bethaus-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup backend gui

Browse Source
This commit is contained in:
lelo 2025-04-02 20:09:50 +02:00
parent 1c0a1a0182
commit 262a31e65a
4 changed files with 389 additions and 370 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
analytics.py
View File

@ -145,13 +145,12 @@ def dashboard():
now = datetime.now() now = datetime.now()
# Determine which file type we're filtering by. # default filetype if not found
filetype = 'other' filetype = 'other'
# Some simplistic sets to decide how we match the MIME type # Some simplistic sets to decide how we match the MIME type
audio_list = ['mp3', 'wav', 'audio'] audio_list = ['mp3', 'wav', 'ton', 'audio']
image_list = ['jpg', 'jpeg', 'image', 'photo'] image_list = ['jpg', 'jpeg', 'image', 'photo', 'bild', 'foto']
video_list = ['mp4', 'mov', 'wmv', 'avi'] video_list = ['mp4', 'mov', 'wmv', 'avi', 'film', 'video']
if session['filetype'].lower() in audio_list: if session['filetype'].lower() in audio_list:
filetype = 'audio/' filetype = 'audio/'
@ -292,9 +291,9 @@ def dashboard():
dict(bucket=r[0], count=r[1]) for r in timeframe_data_rows dict(bucket=r[0], count=r[1]) for r in timeframe_data_rows
] ]
# 4. User agent distribution # 4. User agent distribution: Count user_agent once per device_id
query = f''' query = f'''
SELECT user_agent, COUNT(*) AS count SELECT user_agent, COUNT(DISTINCT device_id) AS count
FROM file_access_log FROM file_access_log
WHERE timestamp >= ? {filetype_filter_sql} WHERE timestamp >= ? {filetype_filter_sql}
GROUP BY user_agent GROUP BY user_agent

26
templates/connections.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Recent Connections</title> <title>Recent Connections</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
@ -11,13 +11,11 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* Use full width */
.container-fluid { .container-fluid {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
/* Header area takes as much room as needed; the table container fills the rest */
.table-container { .table-container {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
@ -25,17 +23,25 @@
</style> </style>
</head> </head>
<body> <body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary mb-3">
<div class="container-fluid"> <div class="container-fluid">
<h1 class="mb-4">Downloads in den letzten 10 Minute</h1> <a class="navbar-brand" href="#">Downloads der letzten 10 Minuten</a>
<div class="mb-3"> <div class="navbar-collapse" id="navbarNav">
<a href="{{ url_for('index') }}" class="btn btn-primary mt-1">App</a> <ul class="navbar-nav ms-auto">
<a href="{{ url_for('mylinks') }}" class="btn btn-primary mt-1">Meine Links</a> <li class="nav-item"><a href="{{ url_for('index') }}" class="nav-link">App</a></li>
<a href="{{ url_for('connections') }}" class="btn btn-primary mt-1">Verbindungen</a> <li class="nav-item"><a href="{{ url_for('mylinks') }}" class="nav-link">Meine Links</a></li>
<a href="{{ url_for('dashboard') }}" class="btn btn-primary mt-1">Auswertung</a> <li class="nav-item"><a href="{{ url_for('connections') }}" class="nav-link">Verbindungen</a></li>
<li class="nav-item"><a href="{{ url_for('dashboard') }}" class="nav-link">Auswertung</a></li>
</ul>
</div> </div>
</div>
</nav>
<div class="container-fluid">
<div class="table-responsive table-container"> <div class="table-responsive table-container">
<table class="table table-hover"> <table class="table table-hover">
<thead class="table-info"> <thead class="table-secondary">
<tr> <tr>
<th>Timestamp</th> <th>Timestamp</th>
<th>IP Address</th> <th>IP Address</th>

131
templates/dashboard.html
View File

@ -11,28 +11,39 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* Use full width */
.container-fluid { .container-fluid {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.card { margin-bottom: 20px; } .card {
margin-bottom: 1.5rem;
}
</style> </style>
</head> </head>
<body> <body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary mb-3">
<div class="container-fluid"> <div class="container-fluid">
<h1 class="mb-4">Dashboard - Verbindungsanalyse ({{ timeframe }})</h1> <a class="navbar-brand" href="#">Dashboard - Verbindungsanalyse</a>
<div class="mb-3"> <div class="navbar-collapse" id="navbarNav">
<a href="{{ url_for('index') }}" class="btn btn-primary mt-1">App</a> <ul class="navbar-nav ms-auto">
<a href="{{ url_for('mylinks') }}" class="btn btn-primary mt-1">Meine Links</a> <li class="nav-item"><a href="{{ url_for('index') }}" class="nav-link">App</a></li>
<a href="{{ url_for('connections') }}" class="btn btn-primary mt-1">Verbindungen</a> <li class="nav-item"><a href="{{ url_for('mylinks') }}" class="nav-link">Meine Links</a></li>
<a href="{{ url_for('dashboard') }}" class="btn btn-primary mt-1">Auswertung</a> <li class="nav-item"><a href="{{ url_for('connections') }}" class="nav-link">Verbindungen</a></li>
<li class="nav-item"><a href="{{ url_for('dashboard') }}" class="nav-link">Auswertung</a></li>
</ul>
</div> </div>
</div>
</nav>
<!-- Main Container -->
<div class="container-fluid px-4">
<!-- Dropdown Controls -->
<div class="mb-4 d-flex flex-wrap gap-2">
<!-- Timeframe Dropdown --> <!-- Timeframe Dropdown -->
<div class="mb-3">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-sm mt-1 dropdown-toggle btn-secondary" <button class="btn btn-secondary dropdown-toggle"
type="button" id="timeframeDropdown" data-bs-toggle="dropdown" aria-expanded="false"> type="button" id="timeframeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
{% if session['timeframe'] == 'last24hours' %} {% if session['timeframe'] == 'last24hours' %}
Last 24 Hours Last 24 Hours
@ -72,8 +83,11 @@
</a> </a>
</li> </li>
</ul> </ul>
</div>
<!-- Filetype Dropdown --> <!-- Filetype Dropdown -->
<button class="btn btn-sm mt-1 dropdown-toggle btn-secondary" <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle"
type="button" id="filetypeDropdown" data-bs-toggle="dropdown" aria-expanded="false"> type="button" id="filetypeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
{% if session['filetype'] == 'audio' %} {% if session['filetype'] == 'audio' %}
Audio Audio
@ -115,73 +129,74 @@
</ul> </ul>
</div> </div>
</div> </div>
<!-- Summary Cards --> <!-- Summary Cards -->
<div class="row mb-4"> <div class="row mb-4">
<div class="col-md-3"> <div class="col-md-3 mb-3">
<div class="card text-white bg-info"> <div class="card bg-info text-white">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Alle Downloads</h5> <h5 class="card-title">Alle Downloads</h5>
<p class="card-text">{{ total_accesses }}</p> <p class="card-text display-6">{{ total_accesses }}</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3 mb-3">
<div class="card text-white bg-success"> <div class="card bg-success text-white">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">eindeutige Dateien</h5> <h5 class="card-title">unterschiedliche Dateien</h5>
<p class="card-text">{{ unique_files }}</p> <p class="card-text display-6">{{ unique_files }}</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3 mb-3">
<div class="card text-white bg-warning"> <div class="card bg-warning text-white">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">eindeutige Nutzer</h5> <h5 class="card-title">unterschiedliche Nutzer</h5>
<p class="card-text">{{ unique_user }}</p> <p class="card-text display-6">{{ unique_user }}</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3 mb-3">
<div class="card text-white bg-secondary"> <div class="card bg-secondary text-white">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">beschleunigte Downloads</h5> <h5 class="card-title">beschleunigte Downloads</h5>
<p class="card-text">{{ cached_percentage }} %</p> <p class="card-text display-6">{{ cached_percentage }} %</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Charts Section --> <!-- Charts Section -->
<div class="row"> <div class="row mb-4">
<!-- Access Trend Chart --> <!-- Access Trend Chart -->
<div class="col-md-6 mb-4"> <div class="col-md-6 mb-3">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">eindeutige Nutzer nach Zeit</h5> <h5 class="card-title">Anzahl Nutzer</h5>
<canvas id="distinctDeviceChart"></canvas> <canvas id="distinctDeviceChart"></canvas>
</div> </div>
</div> </div>
</div> </div>
<!-- Timeframe Breakdown Chart (Bar Chart) --> <!-- Timeframe Breakdown Chart -->
<div class="col-md-6 mb-4"> <div class="col-md-6 mb-3">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Downloads nach Zeit</h5> <h5 class="card-title">Anzahl Downloads</h5>
<canvas id="downloadTimeframeChart"></canvas> <canvas id="downloadTimeframeChart"></canvas>
</div> </div>
</div> </div>
</div> </div>
<!-- User Agent Distribution Chart --> <!-- User Agent Distribution Chart -->
<div class="col-md-6 mb-4"> <div class="col-md-6 mb-3">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Verwendete Endgeräte</h5> <h5 class="card-title">Endgeräte der Nutzer</h5>
<canvas id="userAgentChart"></canvas> <canvas id="userAgentChart"></canvas>
</div> </div>
</div> </div>
</div> </div>
<!-- Folder Distribution Chart --> <!-- Folder Distribution Chart -->
<div class="col-md-6 mb-4"> <div class="col-md-6 mb-3">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Verteilung auf Ordner</h5> <h5 class="card-title">Verteilung auf Ordner</h5>
@ -191,12 +206,13 @@
</div> </div>
</div> </div>
<!-- New Section: IP Address Access Data --> <!-- IP Address Access Data -->
<div class="card"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
Verteilung der Zugriffe Verteilung der Zugriffe
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="table-responsive">
<table class="table table-bordered"> <table class="table table-bordered">
<thead> <thead>
<tr> <tr>
@ -214,20 +230,22 @@
</tr> </tr>
{% else %} {% else %}
<tr> <tr>
<td colspan="4">No access data available for the selected timeframe.</td> <td colspan="3">No access data available for the selected timeframe.</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div>
<!-- Detailed Table of Top File Accesses --> <!-- Detailed Table of Top File Accesses -->
<div class="card mb-4"> <div class="card mb-4">
<div class="card-header"> <div class="card-header">
Detailierte Dateizugriffe (Top 20) Detaillierte Dateizugriffe (Top 20)
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="table-responsive">
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
@ -250,10 +268,10 @@
</table> </table>
</div> </div>
</div> </div>
</div>
</div> </div>
<!-- Load Chart.js from CDN --> <!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script> <script>
@ -267,25 +285,18 @@
distinctDeviceData = distinctDeviceData.slice(1); distinctDeviceData = distinctDeviceData.slice(1);
timeframeData = timeframeData.slice(1); timeframeData = timeframeData.slice(1);
// shift the labels to local time zone // Shift the labels to local time zone
const timeframe = "{{ timeframe }}"; // e.g., 'last24hours', '7days', '30days', or '365days' const timeframe = "{{ timeframe }}"; // e.g., 'last24hours', '7days', '30days', or '365days'
const shiftedLabels = timeframeData.map((item, index) => { const shiftedLabels = timeframeData.map((item) => {
if (timeframe === 'last24hours') { if (timeframe === 'last24hours') {
// item.bucket is now in the format "YYYY-MM-DDTHH:00:00Z"
const bucketDate = new Date(item.bucket); const bucketDate = new Date(item.bucket);
const now = new Date(); const now = new Date();
// Check if this bucket corresponds to the current hour (in client's local time)
const isCurrentHour = const isCurrentHour =
bucketDate.getFullYear() === now.getFullYear() && bucketDate.getFullYear() === now.getFullYear() &&
bucketDate.getMonth() === now.getMonth() && bucketDate.getMonth() === now.getMonth() &&
bucketDate.getDate() === now.getDate() && bucketDate.getDate() === now.getDate() &&
bucketDate.getHours() === now.getHours(); bucketDate.getHours() === now.getHours();
// For the current hour, use the current time as the bucket end.
const bucketEnd = isCurrentHour ? now : new Date(bucketDate.getTime() + 3600 * 1000); const bucketEnd = isCurrentHour ? now : new Date(bucketDate.getTime() + 3600 * 1000);
return `${bucketDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - ${bucketEnd.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`; return `${bucketDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - ${bucketEnd.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
} else if (timeframe === '7days' || timeframe === '30days') { } else if (timeframe === '7days' || timeframe === '30days') {
const localDate = new Date(item.bucket); const localDate = new Date(item.bucket);
@ -319,15 +330,13 @@
y: { y: {
title: { display: true, text: 'Device Count' }, title: { display: true, text: 'Device Count' },
beginAtZero: true, beginAtZero: true,
ticks: { ticks: { stepSize: 1 }
stepSize: 1
}
} }
} }
} }
}); });
// Timeframe Breakdown Chart - Bar Chart (for 'last24hours' timeframe) // Timeframe Breakdown Chart
const ctxTimeframe = document.getElementById('downloadTimeframeChart').getContext('2d'); const ctxTimeframe = document.getElementById('downloadTimeframeChart').getContext('2d');
new Chart(ctxTimeframe, { new Chart(ctxTimeframe, {
type: 'bar', type: 'bar',
@ -347,15 +356,13 @@
y: { y: {
title: { display: true, text: 'Download Count' }, title: { display: true, text: 'Download Count' },
beginAtZero: true, beginAtZero: true,
ticks: { ticks: { stepSize: 1 }
stepSize: 1
}
} }
} }
} }
}); });
// User Agent Distribution - Pie Chart (using aggregated device data) // User Agent Distribution Chart - Pie Chart
const ctxUserAgent = document.getElementById('userAgentChart').getContext('2d'); const ctxUserAgent = document.getElementById('userAgentChart').getContext('2d');
new Chart(ctxUserAgent, { new Chart(ctxUserAgent, {
type: 'pie', type: 'pie',
@ -368,9 +375,9 @@
options: { responsive: true } options: { responsive: true }
}); });
// folder Distribution - Pie Chart (with shortened folders) // Folder Distribution Chart - Pie Chart
const ctxfolder = document.getElementById('folderChart').getContext('2d'); const ctxFolder = document.getElementById('folderChart').getContext('2d');
new Chart(ctxfolder, { new Chart(ctxFolder, {
type: 'pie', type: 'pie',
data: { data: {
labels: folderData.map(item => item.folder), labels: folderData.map(item => item.folder),
@ -381,5 +388,5 @@
options: { responsive: true } options: { responsive: true }
}); });
</script> </script>
</body> </body>
</html> </html>

29
templates/mylinks.html
View File

@ -1,17 +1,16 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="UTF-8">
<title>Meine Links</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Meine Links</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style> <style>
html, body { html, body {
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* Use full width */
.container-fluid { .container-fluid {
height: 100%; height: 100%;
display: flex; display: flex;
@ -25,14 +24,22 @@
</style> </style>
</head> </head>
<body> <body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary mb-3">
<div class="container-fluid"> <div class="container-fluid">
<h1 class="mb-4">Übersicht deiner gültigen Links</h1> <a class="navbar-brand" href="#">Übersicht deiner gültigen Links</a>
<div class="mb-3"> <div class="navbar-collapse" id="navbarNav">
<a href="{{ url_for('index') }}" class="btn btn-primary mt-1">App</a> <ul class="navbar-nav ms-auto">
<a href="{{ url_for('mylinks') }}" class="btn btn-primary mt-1">Meine Links</a> <li class="nav-item"><a href="{{ url_for('index') }}" class="nav-link">App</a></li>
<a href="{{ url_for('connections') }}" class="btn btn-primary mt-1">Verbindungen</a> <li class="nav-item"><a href="{{ url_for('mylinks') }}" class="nav-link">Meine Links</a></li>
<a href="{{ url_for('dashboard') }}" class="btn btn-primary mt-1">Auswertung</a> <li class="nav-item"><a href="{{ url_for('connections') }}" class="nav-link">Verbindungen</a></li>
<li class="nav-item"><a href="{{ url_for('dashboard') }}" class="nav-link">Auswertung</a></li>
</ul>
</div> </div>
</div>
</nav>
<div class="container-fluid">
{% if allowed_secrets %} {% if allowed_secrets %}
<div class="row"> <div class="row">
{% for secret in allowed_secrets %} {% for secret in allowed_secrets %}