Better dashboard cards

This commit is contained in:
2025-06-06 09:53:50 +02:00
parent d7c1305dae
commit e4238d9fdb
2 changed files with 61 additions and 69 deletions

View File

@@ -3,88 +3,80 @@
<div class="card shadow-sm">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="card-title mb-0"><i class="fas fa-bell me-2"></i>Notifications</h5>
<h5 class="card-title mb-0">
<i class="fas fa-bell me-2"></i>
Notifications
</h5>
<a href="{{ url_for('main.notifications') }}" class="btn btn-primary btn-sm">View All</a>
</div>
<div class="d-flex flex-column">
<div class="d-flex justify-content-between align-items-center mb-3">
<div class="d-flex align-items-center">
<i class="fas fa-envelope me-2 icon-primary"></i>
<span class="text-muted">Unread:</span>
</div>
<div class="fw-bold text-primary">{{ unread_count }}</div>
</div>
</div>
{% if recent_notifications %}
<hr class="my-3">
<div class="d-flex justify-content-between align-items-center mb-2">
<h6 class="mb-0 text-muted">Recent Notifications</h6>
</div>
<div class="list-group list-group-flush">
{% for notification in recent_notifications %}
<div class="list-group-item list-group-item-action px-0">
<div class="list-group-item px-0">
<div class="d-flex justify-content-between align-items-center">
<div>
{% if notification.notif_type == 'account_created' %}
<div class="fw-bold {% if not notification.read %}text-primary{% endif %}">
<i class="fas fa-user-plus me-1"></i>Account Created
</div>
<small class="text-muted">
Welcome to DocuPulse! Your account has been created successfully.
</small>
{% elif notification.notif_type == 'room_invite' %}
<div class="fw-bold {% if not notification.read %}text-primary{% endif %}">
<i class="fas fa-door-open me-1"></i>Room Invitation
</div>
<small class="text-muted">
{% if notification.sender %}
{{ notification.sender.username }} invited you to join room "{{ notification.details.room_name }}"
<div class="d-flex align-items-center">
<div>
<div class="fw-bold text-primary">
{% if notification.notif_type == 'account_created' %}
<i class="fas fa-user-plus me-1"></i>Account Created
{% elif notification.notif_type == 'room_invite' %}
<i class="fas fa-door-open me-1"></i>Room Invitation
{% elif notification.notif_type == 'room_invite_removed' %}
<i class="fas fa-door-closed me-1"></i>Room Invitation Removed
{% elif notification.notif_type == 'conversation_invite' %}
<i class="fas fa-comments me-1"></i>Conversation Invitation
{% elif notification.notif_type == 'conversation_invite_removed' %}
<i class="fas fa-comment-slash me-1"></i>Conversation Invitation Removed
{% elif notification.notif_type == 'conversation_message' %}
<i class="fas fa-comment me-1"></i>New Message
{% else %}
{{ notification.notif_type|replace('_', ' ')|title }}
{% endif %}
</small>
{% elif notification.notif_type == 'conversation_invite' %}
<div class="fw-bold {% if not notification.read %}text-primary{% endif %}">
<i class="fas fa-comments me-1"></i>Conversation Invitation
</div>
<small class="text-muted">
{% if notification.sender %}
{{ notification.sender.username }} invited you to a conversation
{% endif %}
</small>
{% elif notification.notif_type == 'conversation_message' %}
<div class="fw-bold {% if not notification.read %}text-primary{% endif %}">
<i class="fas fa-comment me-1"></i>New Message
</div>
<small class="text-muted">
{% if notification.sender %}
{{ notification.sender.username }} sent a message in "{{ notification.details.conversation_name }}"
{% endif %}
</small>
{% else %}
<div class="fw-bold {% if not notification.read %}text-primary{% endif %}">
{{ notification.notif_type|replace('_', ' ')|title }}
</div>
<small class="text-muted">
{% if notification.details and notification.details.message %}
{% if notification.notif_type == 'account_created' %}
Welcome to DocuPulse! Your account has been created successfully.
{% elif notification.notif_type == 'room_invite' and notification.sender and notification.details %}
{{ notification.sender.username }} {{ notification.sender.last_name }} invited you to join room "{{ notification.details.room_name }}"
{% elif notification.notif_type == 'room_invite_removed' and notification.sender and notification.details %}
{{ notification.sender.username }} {{ notification.sender.last_name }} removed your invitation to room "{{ notification.details.room_name }}"
{% elif notification.notif_type == 'conversation_invite' and notification.sender and notification.details %}
{{ notification.sender.username }} {{ notification.sender.last_name }} invited you to conversation "{{ notification.details.conversation_name }}"
{% elif notification.notif_type == 'conversation_invite_removed' and notification.sender and notification.details %}
{{ notification.sender.username }} {{ notification.sender.last_name }} removed your invitation to conversation "{{ notification.details.conversation_name }}"
{% elif notification.notif_type == 'conversation_message' and notification.sender and notification.details %}
{{ notification.sender.username }} {{ notification.sender.last_name }} sent a message in conversation "{{ notification.details.conversation_name }}"
{% elif notification.details and notification.details.message %}
{{ notification.details.message }}
{% endif %}
</small>
{% endif %}
<div class="mt-1">
<small class="text-muted">
{{ notification.timestamp.strftime('%Y-%m-%d %H:%M') }}
</small>
<div class="mt-1">
<small class="text-muted">
{{ notification.timestamp.strftime('%Y-%m-%d %H:%M') }}
</small>
</div>
</div>
</div>
{% if not notification.read %}
<span class="badge bg-primary rounded-pill">New</span>
{% if notification.notif_type in ['room_invite', 'room_invite_removed'] and notification.details and notification.details.room_id %}
<a href="{{ url_for('rooms.room', room_id=notification.details.room_id) }}" class="btn btn-sm btn-outline-primary" style="background-color: white; border: 1px solid var(--primary-color); color: var(--primary-color);" onmouseover="this.style.backgroundColor='var(--primary-color)'; this.querySelector('i').style.color='white'" onmouseout="this.style.backgroundColor='white'; this.querySelector('i').style.color='var(--primary-color)'">
<i class="fas fa-external-link-alt"></i>
</a>
{% elif notification.notif_type in ['conversation_invite', 'conversation_invite_removed', 'conversation_message'] and notification.details and notification.details.conversation_id %}
<a href="{{ url_for('conversations.conversation', conversation_id=notification.details.conversation_id) }}" class="btn btn-sm btn-outline-primary" style="background-color: white; border: 1px solid var(--primary-color); color: var(--primary-color);" onmouseover="this.style.backgroundColor='var(--primary-color)'; this.querySelector('i').style.color='white'" onmouseout="this.style.backgroundColor='white'; this.querySelector('i').style.color='var(--primary-color)'">
<i class="fas fa-external-link-alt"></i>
</a>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="text-muted small text-center mt-3">No recent notifications</div>
<div class="text-center text-muted py-3">
<i class="fas fa-info-circle mb-2"></i>
<p class="mb-0">No recent notifications</p>
</div>
{% endif %}
</div>
</div>

View File

@@ -39,9 +39,9 @@
{% elif event.event_type == 'room_update' %}
Updated room "{{ event.details.get('room_name', 'a room') }}"
{% elif event.event_type == 'room_member_add' %}
Added {{ event.details.get('added_user_name', 'a user') }} to room "{{ event.details.get('room_name', 'a room') }}"
Added {{ event.details.get('added_user_name', 'a user') }} {{ event.details.get('added_user_last_name', '') }} to room "{{ event.details.get('room_name', 'a room') }}"
{% elif event.event_type == 'room_member_remove' %}
Removed {{ event.details.get('removed_user_name', 'a user') }} from room "{{ event.details.get('room_name', 'a room') }}"
Removed {{ event.details.get('removed_user_name', 'a user') }} {{ event.details.get('removed_user_last_name', '') }} from room "{{ event.details.get('room_name', 'a room') }}"
{% elif event.event_type == 'conversation_create' %}
Started conversation "{{ event.details.get('name', 'a conversation') }}"
{% elif event.event_type == 'conversation_open' %}
@@ -49,22 +49,22 @@
{% elif event.event_type == 'conversation_update' %}
Updated conversation "{{ event.details.get('conversation_name', 'a conversation') }}"
{% elif event.event_type == 'conversation_member_add' %}
Added {{ event.details.get('added_user_name', 'a user') }} to conversation "{{ event.details.get('conversation_name', 'a conversation') }}"
Added {{ event.details.get('added_user_name', 'a user') }} {{ event.details.get('added_user_last_name', '') }} to conversation "{{ event.details.get('conversation_name', 'a conversation') }}"
{% elif event.event_type == 'conversation_member_remove' %}
Removed {{ event.details.get('removed_user_name', 'a user') }} from conversation "{{ event.details.get('conversation_name', 'a conversation') }}"
Removed {{ event.details.get('removed_user_name', 'a user') }} {{ event.details.get('removed_user_last_name', '') }} from conversation "{{ event.details.get('conversation_name', 'a conversation') }}"
{% elif event.event_type == 'message_create' %}
Sent a message in "{{ event.details.get('conversation_name', 'a conversation') }}"
{% elif event.event_type == 'user_create' %}
Created user account for {{ event.details.get('user_name', 'a user') }}
Created user account for {{ event.details.get('user_name', 'a user') }} {{ event.details.get('user_last_name', '') }}
{% elif event.event_type == 'user_update' %}
Updated user account for {{ event.details.get('user_name', 'a user') }}
Updated user account for {{ event.details.get('user_name', 'a user') }} {{ event.details.get('user_last_name', '') }}
{% else %}
{{ event.event_type|replace('_', ' ')|title }}
{% endif %}
</div>
<small class="text-muted">
{% if is_admin %}
by {{ event.user.username }}
by {{ event.user.username }} {{ event.user.last_name }}
{% endif %}
{{ event.timestamp.strftime('%Y-%m-%d %H:%M') }}
</small>