97 lines
4.7 KiB
HTML
97 lines
4.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Benachrichtigungen{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container" style="max-width: 1080px; margin: 18px auto 32px;">
|
|
<div style="display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:16px; flex-wrap:wrap;">
|
|
<div>
|
|
<h1 style="margin:0;">Benachrichtigungen</h1>
|
|
<p style="margin:6px 0 0; color:#64748b;">Rueckgabe-Erinnerungen und wichtige Hinweise fuer Benutzer und Verwaltung.</p>
|
|
</div>
|
|
<form method="post" action="{{ url_for('mark_all_notifications_read') }}">
|
|
<button class="btn btn-outline-secondary" type="submit">Alle als gelesen markieren</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="push-notification-settings" style="margin-bottom: 24px;"></div>
|
|
|
|
<div style="display:grid; grid-template-columns:1fr; gap:14px;">
|
|
<section style="background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px;">
|
|
<h2 style="margin:0 0 12px; font-size:1.15rem;">Meine Benachrichtigungen</h2>
|
|
{% if user_notifications %}
|
|
<div style="display:grid; gap:10px;">
|
|
{% for n in user_notifications %}
|
|
<article style="border:1px solid #e5e7eb; border-left:5px solid {% if n.severity == 'danger' %}#dc2626{% elif n.severity == 'warning' %}#d97706{% else %}#2563eb{% endif %}; border-radius:10px; padding:12px 12px 10px; background:{% if n.is_read %}#f8fafc{% else %}#ffffff{% endif %};">
|
|
<div style="display:flex; justify-content:space-between; gap:10px; align-items:flex-start; flex-wrap:wrap;">
|
|
<div>
|
|
<div style="font-weight:800; color:#0f172a;">{{ n.title }}</div>
|
|
<div style="font-size:0.9rem; color:#475569; margin-top:2px;">{{ n.message }}</div>
|
|
{% if n.type == 'damage_reported' %}
|
|
<div style="margin-top:8px;">
|
|
<a class="btn btn-sm btn-outline-danger" href="{{ url_for('admin_damaged_items') }}">Zu Defekte-Items Verwaltung</a>
|
|
</div>
|
|
{% endif %}
|
|
<div style="font-size:0.78rem; color:#64748b; margin-top:6px;">
|
|
{% if n.created_at %}{{ n.created_at.strftime('%d.%m.%Y %H:%M') }}{% else %}-{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if not n.is_read %}
|
|
<form method="post" action="{{ url_for('mark_notification_read', notification_id=n.id) }}">
|
|
<button class="btn btn-sm btn-primary" type="submit">Als gelesen</button>
|
|
</form>
|
|
{% else %}
|
|
<span style="font-size:0.8rem; color:#16a34a; font-weight:700;">Gelesen</span>
|
|
{% endif %}
|
|
</div>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p style="color:#64748b; margin:0;">Keine Benachrichtigungen vorhanden.</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
{% if is_admin_user %}
|
|
<section style="background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px;">
|
|
<h2 style="margin:0 0 12px; font-size:1.15rem;">Admin-Benachrichtigungen</h2>
|
|
{% if admin_notifications %}
|
|
<div style="display:grid; gap:10px;">
|
|
{% for n in admin_notifications %}
|
|
<article style="border:1px solid #e5e7eb; border-left:5px solid {% if n.severity == 'danger' %}#dc2626{% elif n.severity == 'warning' %}#d97706{% else %}#2563eb{% endif %}; border-radius:10px; padding:12px 12px 10px; background:{% if n.is_read %}#f8fafc{% else %}#ffffff{% endif %};">
|
|
<div style="display:flex; justify-content:space-between; gap:10px; align-items:flex-start; flex-wrap:wrap;">
|
|
<div>
|
|
<div style="font-weight:800; color:#0f172a;">{{ n.title }}</div>
|
|
<div style="font-size:0.9rem; color:#475569; margin-top:2px;">{{ n.message }}</div>
|
|
<div style="font-size:0.78rem; color:#64748b; margin-top:6px;">
|
|
{% if n.created_at %}{{ n.created_at.strftime('%d.%m.%Y %H:%M') }}{% else %}-{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if not n.is_read %}
|
|
<form method="post" action="{{ url_for('mark_notification_read', notification_id=n.id) }}">
|
|
<button class="btn btn-sm btn-primary" type="submit">Als gelesen</button>
|
|
</form>
|
|
{% else %}
|
|
<span style="font-size:0.8rem; color:#16a34a; font-weight:700;">Gelesen</span>
|
|
{% endif %}
|
|
</div>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<p style="color:#64748b; margin:0;">Keine Admin-Benachrichtigungen vorhanden.</p>
|
|
{% endif %}
|
|
</section>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (typeof showPushNotificationSettings === 'function') {
|
|
showPushNotificationSettings();
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|