jasonhirsch/dev-manufaktur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dashboard v2 erstellt

Browse Source
This commit is contained in:
Till Tomczak
2025-02-19 14:23:44 +01:00
parent c17d39df24
commit 14423e0497
280 changed files with 18902 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
Dashboard_V2/templates/admin.html Normal file
View File

@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="de" class="dark">
<head>
<meta charset="UTF-8">
<title>Admin-Bereich</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-white p-6">
<h1 class="text-3xl font-bold mb-4">Admin-Bereich</h1>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="bg-{{category}}-500 text-white p-2 rounded mb-2">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<!-- Neuen Benutzer anlegen -->
<div class="mb-8 p-4 rounded bg-white dark:bg-gray-800">
<h2 class="text-xl font-semibold mb-2">Neuen Benutzer anlegen</h2>
<form method="POST">
<div class="mb-2">
<label class="block mb-1" for="new_username">Benutzername</label>
<input type="text" name="new_username" id="new_username" class="p-2 border rounded w-full" required>
</div>
<div class="mb-2">
<label class="block mb-1" for="new_password">Passwort</label>
<input type="password" name="new_password" id="new_password" class="p-2 border rounded w-full" required>
</div>
<div class="mb-4">
<label class="inline-flex items-center">
<input type="checkbox" name="new_is_admin" class="form-checkbox h-5 w-5 text-blue-600">
<span class="ml-2">Als Admin markieren</span>
</label>
</div>
<button type="submit" class="bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">Anlegen</button>
</form>
</div>
<!-- Benutzer-Übersicht oder einzelner Benutzer für Bookmarks -->
{% if users is not none %}
<div class="mb-8 p-4 rounded bg-white dark:bg-gray-800">
<h2 class="text-xl font-semibold mb-2">Benutzerverwaltung</h2>
<table class="table-auto w-full">
<thead>
<tr>
<th class="px-2 py-1 border-b">ID</th>
<th class="px-2 py-1 border-b">Benutzername</th>
<th class="px-2 py-1 border-b">Admin?</th>
<th class="px-2 py-1 border-b">Aktion</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td class="px-2 py-1 border-b">{{ user.id }}</td>
<td class="px-2 py-1 border-b">{{ user.username }}</td>
<td class="px-2 py-1 border-b">{{ 'Ja' if user.is_admin else 'Nein' }}</td>
<td class="px-2 py-1 border-b">
<form action="{{ url_for('delete_user', user_id=user.id) }}" method="POST" class="inline-block" onsubmit="return confirm('Benutzer wirklich löschen?')">
<button class="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600 text-sm">Löschen</button>
</form>
<a href="{{ url_for('manage_bookmarks', user_id=user.id) }}" class="bg-blue-500 text-white px-2 py-1 rounded hover:bg-blue-600 text-sm ml-2">Lesezeichen</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% if single_user is defined and single_user %}
<!-- Bookmarks verwalten für einen User -->
<div class="mb-8 p-4 rounded bg-white dark:bg-gray-800">
<h2 class="text-xl font-semibold mb-2">Lesezeichen für {{ single_user.username }}</h2>
<form method="POST">
<div class="mb-2">
<label class="block mb-1" for="title">Titel</label>
<input type="text" name="title" id="title" class="p-2 border rounded w-full" required>
</div>
<div class="mb-2">
<label class="block mb-1" for="url">URL</label>
<input type="text" name="url" id="url" class="p-2 border rounded w-full" required>
</div>
<div class="mb-2">
<label class="block mb-1" for="icon_class">Icon (FontAwesome Klasse)</label>
<input type="text" name="icon_class" id="icon_class" class="p-2 border rounded w-full" placeholder="z.B. fas fa-bookmark">
</div>
<button type="submit" class="bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">Hinzufügen</button>
</form>
<!-- Bookmark-Liste -->
<ul class="mt-4 space-y-2">
{% for bm in bookmarks %}
<li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-2 rounded">
<div>
<i class="{{ bm.icon_class }} mr-2"></i>
<a href="{{ bm.url }}" target="_blank" class="text-blue-600 hover:underline">{{ bm.title }}</a>
</div>
<form action="{{ url_for('delete_bookmark', bookmark_id=bm.id, user_id=single_user.id) }}" method="POST" onsubmit="return confirm('Lesezeichen wirklich löschen?')">
<button class="text-red-500 hover:text-red-700"><i class="fas fa-trash-alt"></i></button>
</form>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
<!-- Benachrichtigungen für einzelne User oder für alle -->
<div class="mb-8 p-4 rounded bg-white dark:bg-gray-800">
<h2 class="text-xl font-semibold mb-2">Benachrichtigung erstellen</h2>
<form action="{{ url_for('add_notification') }}" method="POST">
<div class="mb-2">
<label class="block mb-1" for="message">Nachricht</label>
<textarea name="message" id="message" rows="2" class="p-2 border rounded w-full" required></textarea>
</div>
<div class="mb-4">
<label class="block mb-1" for="user_id">Für Benutzer</label>
<select name="user_id" id="user_id" class="p-2 border rounded w-full">
<option value="all">Alle</option>
{% if users %}
{% for u in users %}
<option value="{{ u.id }}">{{ u.username }}</option>
{% endfor %}
{% endif %}
</select>
</div>
<button type="submit" class="bg-purple-500 text-white py-2 px-4 rounded hover:bg-purple-600">Senden</button>
</form>
</div>
<a href="{{ url_for('dashboard') }}" class="inline-block bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
Zurück zum Dashboard
</a>
</body>
</html>

77
Dashboard_V2/templates/base.html Normal file
View File

@@ -0,0 +1,77 @@
<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>{% block title %}Meine App{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Tailwind + FontAwesome + GSAP -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<!-- Tailwind Dark-Mode-Konfiguration -->
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#10b981',
}
}
}
}
</script>
<!-- Globale Styles -->
<style>
body {
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.glassmorphism {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
}
.dark .glassmorphism {
background: rgba(0, 0, 0, 0.2);
}
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark textarea,
.dark select {
background-color: #374151;
color: #fff;
}
.dock-icon {
transition: all 0.3s ease;
}
.dock-icon:hover {
transform: scale(1.1);
}
</style>
</head>
<body class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-100 transition-colors duration-300"
style="background-image: url('{{ url_for('static', filename='24.png') }}');">
{% block content %}{% endblock %}
<script>
// Dark mode per localStorage
if (localStorage.getItem('darkMode') === 'true' ||
(!('darkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
}
</script>
</body>
</html>

276
Dashboard_V2/templates/dashboard.html Normal file
View File

@@ -0,0 +1,276 @@
<!-- templates/dashboard.html -->
{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<div class="container mx-auto p-4 sm:p-6 lg:p-8 pb-20 flex flex-col items-center">
<!-- Dark Mode Toggle (Button oben rechts) -->
<button id="darkModeToggle"
class="fixed top-4 right-4 w-12 h-12 rounded-xl bg-gray-200 dark:bg-gray-800 z-10 transition-colors duration-300">
<i class="fas fa-sun text-yellow-400 dark:hidden text-xl"></i>
<i class="fas fa-moon text-blue-200 hidden dark:inline text-xl"></i>
</button>
<!-- Logo / User Greeting -->
<div class="flex flex-col items-center justify-center space-y-4 text-center mb-6">
<a id="logo-link" href="https://{{ domain }}" target="_blank">
<img id="logo-img" src="{{ logo_path }}" alt="Firmenlogo" class="w-20 h-auto mb-2">
</a>
<h1 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-white transition-colors duration-300">
Willkommen zurück, {{ user }}
</h1>
<div id="clock" class="text-xl sm:text-2xl font-semibold"></div>
</div>
<!-- Websuche unter dem Datum -->
<div class="glassmorphism p-4 shadow-lg mb-6 w-full max-w-lg">
<form id="searchForm" class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 items-center justify-center">
<input type="text" id="searchInput" placeholder="Suche..."
class="flex-grow p-2 border rounded text-gray-800" />
<select id="searchEngine" class="p-2 border rounded text-gray-800">
<option value="qwant">Qwant</option>
<option value="google">Google</option>
</select>
<button type="submit" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
Los
</button>
</form>
</div>
<!-- Flash-Messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="mb-4 w-full max-w-lg">
{% for category, message in messages %}
<div class="alert flex items-center bg-{{ category }}-500 text-white text-sm font-bold px-4 py-3 mb-2"
role="alert">
<p>{{ message }}</p>
<svg class="fill-current h-6 w-6 text-white ml-auto close-flash" role="button"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<title>Schließen</title>
<path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029
a1.2 1.2 0 1 1-1.697-1.697L8.302 10 5.651 7.349
a1.2 1.2 0 1 1 1.697-1.697L10 8.181l2.651-2.529
a1.2 1.2 0 1 1 1.697 1.697L11.698 10l2.651 2.651
a1.2 1.2 0 0 1 0 1.698z"/>
</svg>
</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
<!-- Widgets: Benachrichtigungen / Zeiterfassung -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6 w-full max-w-3xl">
<!-- Benachrichtigungen -->
<div class="glassmorphism p-4 shadow-lg rounded">
<h2 class="text-lg font-semibold mb-2">Benachrichtigungen</h2>
{% if notifications %}
<ul class="space-y-2 max-h-56 overflow-auto">
{% for note in notifications %}
<li class="bg-gray-100 dark:bg-gray-700 p-2 rounded">
{{ note.message }}<br>
<span class="text-xs text-gray-500">{{ note.created_at }}</span>
</li>
{% endfor %}
</ul>
{% else %}
<p class="text-sm">Keine neuen Benachrichtigungen</p>
{% endif %}
</div>
<!-- Zeiterfassung -->
<div class="glassmorphism p-4 shadow-lg sm:col-span-2 rounded">
<h2 class="text-lg font-semibold mb-2">Zeiterfassung</h2>
<form action="{{ url_for('time_tracking') }}" method="POST"
class="mb-4 flex flex-col sm:flex-row items-center">
<input type="text" name="activity" placeholder="Aktivität"
class="p-2 border rounded mb-2 sm:mb-0 sm:mr-2 flex-1 text-gray-800" />
<button type="submit" name="action" value="start"
class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 mr-2">
Start
</button>
<button type="submit" name="action" value="stop"
class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">
Stopp
</button>
</form>
<div class="max-h-40 overflow-auto">
{% for entry in time_entries %}
<div class="bg-gray-100 dark:bg-gray-700 p-2 mb-2 rounded">
<strong>{{ entry.activity }}</strong><br>
Start: {{ entry.start_time }}<br>
Ende: {% if entry.end_time %}{{ entry.end_time }}{% else %}<em>läuft</em>{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
<!-- App Carousel (für Lesezeichen) -->
<div class="glassmorphism p-4 mb-12 relative w-full max-w-3xl rounded">
<div id="appCarousel" class="overflow-hidden">
<div class="flex transition-transform duration-300 ease-in-out">
<div class="w-full flex-shrink-0">
<div class="grid grid-cols-3 sm:grid-cols-5 gap-4">
{% for bm in user_bookmarks %}
<a href="{{ bm.url }}" class="flex flex-col items-center" title="{{ bm.title }}" target="_blank">
<div class="w-12 h-12 flex items-center justify-center bg-blue-500 rounded-xl mb-1
transition-transform hover:scale-110">
<i class="{{ bm.icon_class }} text-white text-xl"></i>
</div>
<p class="text-center text-xs font-medium">{{ bm.title }}</p>
</a>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Dock -->
<div class="fixed bottom-4 left-1/2 transform -translate-x-1/2 glassmorphism p-2 flex space-x-4 rounded">
<!-- Home Modal -->
<button class="dock-icon w-12 h-12 flex items-center justify-center bg-blue-500 hover:bg-blue-600 rounded-xl
transition-colors duration-200" data-modal="homeModal">
<i class="fas fa-home text-white text-xl"></i>
</button>
<!-- Falls du trotzdem einen "Support" willst, kannst du es hier lassen -->
<button class="dock-icon w-12 h-12 flex items-center justify-center bg-purple-500 hover:bg-purple-600 rounded-xl
transition-colors duration-200" data-modal="supportModal">
<i class="fas fa-question-circle text-white text-xl"></i>
</button>
<!-- Admin-Button nur zeigen, wenn is_admin == 1 -->
{% if session.is_admin == 1 %}
<a href="{{ url_for('admin_panel') }}"
class="dock-icon w-12 h-12 flex items-center justify-center bg-yellow-500 hover:bg-yellow-600 rounded-xl
transition-colors duration-200">
<i class="fas fa-user-shield text-white text-xl"></i>
</a>
{% endif %}
</div>
<!-- Modals (z.B. Home, Support usw.) -->
<div id="homeModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
<div class="glassmorphism bg-white dark:bg-gray-800 p-6 rounded max-w-md w-full mx-auto">
<h2 class="text-2xl font-bold mb-4">Willkommen Zuhause!</h2>
<p class="mb-4">Schneller Zugriff auf wichtige Einstellungen.</p>
<!-- z.B. Logout oder Konto löschen -->
<form action="{{ url_for('logout') }}" method="POST" class="mb-3 mt-2">
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Abmelden
</button>
</form>
<button class="mt-4 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-800 text-gray-800 dark:text-white
font-bold py-2 px-4 rounded close-modal">
Schließen
</button>
</div>
</div>
<div id="supportModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
<div class="glassmorphism bg-white dark:bg-gray-800 p-6 rounded max-w-md w-full mx-auto">
<h2 class="text-2xl font-bold mb-4">Support</h2>
<p class="mb-4">Beschreiben Sie Ihr Problem</p>
<!-- ... -->
<button class="mt-4 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-800 text-gray-800 dark:text-white
font-bold py-2 px-4 rounded close-modal">
Schließen
</button>
</div>
</div>
<!-- JavaScript fürs Dashboard -->
<script>
// Dark Mode Button
const darkModeToggle = document.getElementById('darkModeToggle');
darkModeToggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
});
// Uhrzeit
function updateClock() {
const now = new Date();
const timeString = now.toLocaleTimeString('de-DE');
const dateString = now.toLocaleDateString('de-DE', {
weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
});
document.getElementById('clock').innerHTML =
`${timeString}<br><span class="text-sm font-normal">${dateString}</span>`;
}
setInterval(updateClock, 1000);
updateClock();
// GSAP-Effekte
gsap.from(".glassmorphism", {
duration: 1, opacity: 0, y: 50, stagger: 0.2, ease: "power3.out"
});
gsap.from(".dock-icon", {
duration: 0.5, opacity: 0, y: 20, stagger: 0.1, ease: "back.out(1.7)", delay: 1
});
// Flash-Meldungen schließen
document.addEventListener('DOMContentLoaded', function () {
const closeButtons = document.querySelectorAll('.close-flash');
closeButtons.forEach(button => {
button.addEventListener('click', function () {
const alertBox = this.closest('.alert');
alertBox.style.transition = 'opacity 0.5s ease';
alertBox.style.opacity = '0';
setTimeout(() => alertBox.remove(), 500);
});
});
});
// Modals (Home, Support)
const modals = document.querySelectorAll('[id$="Modal"]');
const modalTriggers = document.querySelectorAll('[data-modal]');
const closeModalButtons = document.querySelectorAll('.close-modal');
modalTriggers.forEach(trigger => {
trigger.addEventListener('click', () => {
const modalId = trigger.getAttribute('data-modal');
const modal = document.getElementById(modalId);
modal.classList.remove('hidden');
modal.classList.add('flex');
});
});
closeModalButtons.forEach(btn => {
btn.addEventListener('click', () => {
const modal = btn.closest('[id$="Modal"]');
modal.classList.remove('flex');
modal.classList.add('hidden');
});
});
modals.forEach(m => {
m.addEventListener('click', (e) => {
if (e.target === m) {
m.classList.remove('flex');
m.classList.add('hidden');
}
});
});
// Websuche
const searchForm = document.getElementById('searchForm');
const searchInput = document.getElementById('searchInput');
const searchEngine = document.getElementById('searchEngine');
searchForm.addEventListener('submit', (evt) => {
evt.preventDefault();
const query = searchInput.value.trim();
if (!query) return;
let url = '';
if (searchEngine.value === 'qwant') {
url = `https://www.qwant.com/?q=${encodeURIComponent(query)}`;
} else {
url = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
}
window.open(url, '_blank');
});
</script>
{% endblock content %}

30
Dashboard_V2/templates/forgot_password.html Normal file
View File

@@ -0,0 +1,30 @@
<!-- templates/forgot_password.html -->
{% extends "base.html" %}
{% block title %}Passwort vergessen{% endblock %}
{% block content %}
<div class="container mx-auto p-4 sm:p-6 lg:p-8 flex flex-col items-center">
<div class="glassmorphism p-6 rounded shadow-lg w-full max-w-md">
<h1 class="text-2xl font-bold mb-4">Passwort vergessen</h1>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="bg-{{category}}-500 text-white p-2 rounded mb-2">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<form method="POST" action="{{ url_for('forgot_password') }}">
<label for="username" class="block mb-2">Benutzername oder E-Mail</label>
<input type="text" name="username_or_email" id="username" class="w-full p-2 border rounded text-gray-800 mb-4" required>
<button type="submit" class="bg-green-500 text-white px-4 py-2 rounded w-full hover:bg-green-600">
Anfordern
</button>
</form>
</div>
</div>
{% endblock content %}

42
Dashboard_V2/templates/login.html Normal file
View File

@@ -0,0 +1,42 @@
{% extends "base.html" %}
{% block title %}Login{% endblock %}
{% block content %}
<div class="glassmorphism p-6 rounded shadow-lg w-full max-w-md mx-auto">
<h1 class="text-2xl font-bold mb-4">Anmelden</h1>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="bg-{{category}}-500 text-white p-2 rounded mb-2">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<form method="POST" action="{{ url_for('login') }}">
<div class="mb-4">
<label for="username" class="block mb-1">Benutzername</label>
<input type="text" name="username" id="username"
class="w-full p-2 border rounded text-gray-800" required>
</div>
<div class="mb-4">
<label for="password" class="block mb-1">Passwort</label>
<input type="password" name="password" id="password"
class="w-full p-2 border rounded text-gray-800" required>
</div>
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded w-full hover:bg-blue-600">
Login
</button>
</form>
<div class="mt-4 text-center">
<span class="text-sm text-gray-700 dark:text-gray-300">Noch kein Konto?</span>
<a href="{{ url_for('register') }}"
class="inline-block bg-green-500 text-white px-3 py-2 rounded hover:bg-green-600 ml-2 text-sm">
Registrieren
</a>
</div>
</div>
{% endblock content %}

37
Dashboard_V2/templates/register.html Normal file
View File

@@ -0,0 +1,37 @@
{% extends "base.html" %}
{% block title %}Registrieren{% endblock %}
{% block content %}
<div class="glassmorphism p-6 rounded shadow-lg w-full max-w-md mx-auto">
<h1 class="text-2xl font-bold mb-4">Registrieren</h1>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="bg-{{category}}-500 text-white p-2 rounded mb-2">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<form action="{{ url_for('register') }}" method="POST">
<label for="username" class="block mb-2">Benutzername</label>
<input type="text" name="username" id="username"
class="p-2 border rounded w-full mb-4 text-gray-800" required>
<label for="email" class="block mb-2">E-Mail</label>
<input type="email" name="email" id="email"
class="p-2 border rounded w-full mb-4 text-gray-800" required>
<label for="password" class="block mb-2">Passwort</label>
<input type="password" name="password" id="password"
class="p-2 border rounded w-full mb-4 text-gray-800" required>
<button type="submit"
class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
Registrieren
</button>
</form>
</div>
{% endblock content %}