core/Projektarbeit-MYP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

"feat: Implement new notification system in frontend

Browse Source
This commit is contained in:
Till Tomczak
2025-05-29 10:04:55 +02:00
parent 08c922d8f5
commit c256848d59
6 changed files with 478 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
backend/app/templates/base.html
View File

@@ -252,6 +252,41 @@
</div>
{% if current_user.is_authenticated %}
<!-- Benachrichtigungen -->
<div class="relative">
<button
id="notificationToggle"
class="relative p-2 rounded-full text-slate-700 dark:text-slate-300 hover:bg-slate-100/80 dark:hover:bg-slate-800/50 transition-all duration-200"
aria-label="Benachrichtigungen anzeigen"
title="Benachrichtigungen"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
</svg>
<!-- Badge für ungelesene Benachrichtigungen -->
<span id="notificationBadge" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium hidden">
0
</span>
</button>
<!-- Benachrichtigungs-Dropdown -->
<div id="notificationDropdown" class="absolute right-0 mt-2 w-80 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-slate-200 dark:border-slate-600 z-50 hidden">
<div class="p-4 border-b border-slate-200 dark:border-slate-600">
<h3 class="text-lg font-semibold text-slate-900 dark:text-white">Benachrichtigungen</h3>
</div>
<div id="notificationList" class="max-h-96 overflow-y-auto">
<div class="p-4 text-center text-slate-500 dark:text-slate-400">
Keine neuen Benachrichtigungen
</div>
</div>
<div class="p-3 border-t border-slate-200 dark:border-slate-600">
<button id="markAllRead" class="w-full text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors">
Alle als gelesen markieren
</button>
</div>
</div>
</div>
<!-- User Profile Dropdown - neues Design -->
<div class="relative" id="user-menu-container">
<button
@@ -436,6 +471,9 @@
<!-- JavaScript -->
<script src="{{ url_for('static', filename='js/ui-components.js') }}"></script>
<script src="{{ url_for('static', filename='js/dark-mode-fix.js') }}"></script>
{% if current_user.is_authenticated %}
<script src="{{ url_for('static', filename='js/notifications.js') }}"></script>
{% endif %}
{% block scripts %}{% endblock %}
</body>