68 lines
5.6 KiB
HTML
68 lines
5.6 KiB
HTML
{% extends 'base.html' %}
|
|
{% block content %}
|
|
<div class="page-toolbar">
|
|
<div>
|
|
<h1 class="h3 mb-1">Chat</h1>
|
|
<p class="text-muted mb-0">Mensajería privada, grupos y archivos entre administración, recepción y profesionales.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row g-4">
|
|
<div class="col-lg-4">
|
|
<div class="card table-panel mb-4"><div class="card-header"><strong>Nuevo chat privado</strong></div><div class="card-body"><form method="post" class="row g-3"><input type="hidden" name="action" value="start_private"><div class="col-12"><label class="form-label">Usuario</label><select class="form-select searchable-select" name="target_user_id" data-placeholder="Seleccionar usuario" required><option value="">Seleccionar</option>{% for user in available_users %}<option value="{{ user.id }}">{{ user.full_name }} · {{ user.role }}</option>{% endfor %}</select></div><div class="col-12 d-grid"><button class="btn btn-primary">Abrir chat</button></div></form></div></div>
|
|
<div class="card table-panel mb-4"><div class="card-header"><strong>Nuevo grupo</strong></div><div class="card-body"><form method="post" class="row g-3"><input type="hidden" name="action" value="create_group"><div class="col-12"><label class="form-label">Nombre del grupo</label><input class="form-control" name="title" placeholder="Ej. Guardia mañana" required></div><div class="col-12"><label class="form-label">Integrantes</label><select class="form-select searchable-select" name="member_ids" data-placeholder="Seleccionar integrantes" multiple>{% for user in available_users %}<option value="{{ user.id }}">{{ user.full_name }} · {{ user.role }}</option>{% endfor %}</select></div><div class="col-12 d-grid"><button class="btn btn-outline-primary">Crear grupo</button></div></form></div></div>
|
|
<div class="card table-panel"><div class="card-header"><strong>Conversaciones</strong></div><div class="list-group list-group-flush">
|
|
{% for item in conversations %}
|
|
<a class="list-group-item list-group-item-action {% if active_conversation and active_conversation.id == item.conversation.id %}active{% endif %}" href="{{ url_for('admin_chat', conversation_id=item.conversation.id) }}">
|
|
<div class="d-flex justify-content-between align-items-start gap-3">
|
|
<div>
|
|
<div class="fw-semibold">{{ item.display_name }}</div>
|
|
<div class="small {% if active_conversation and active_conversation.id == item.conversation.id %}text-white-50{% else %}text-muted{% endif %}">{{ item.last_message.body if item.last_message and item.last_message.body else 'Sin mensajes' }}</div>
|
|
</div>
|
|
{% if item.unread %}<span class="badge text-bg-danger">{{ item.unread }}</span>{% endif %}
|
|
</div>
|
|
</a>
|
|
{% else %}
|
|
<div class="p-4 text-muted text-center">Todavía no hay conversaciones.</div>
|
|
{% endfor %}
|
|
</div></div>
|
|
</div>
|
|
<div class="col-lg-8">
|
|
<div class="card table-panel h-100 d-flex flex-column">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<strong>{{ active_chat_title if active_conversation else 'Seleccioná una conversación' }}</strong>
|
|
{% if active_conversation %}<div class="small text-muted">{{ active_conversation.members|length }} integrante(s)</div>{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="card-body d-flex flex-column" style="min-height: 520px;">
|
|
{% if active_conversation %}
|
|
<div class="flex-grow-1 overflow-auto pe-1" style="max-height: 420px;">
|
|
{% for message in active_messages %}
|
|
<div class="mb-3 {% if message.sender_id == current_user.id %}text-end{% endif %}">
|
|
<div class="d-inline-block p-3 rounded-4 shadow-sm {% if message.sender_id == current_user.id %}bg-primary text-white{% else %}bg-light{% endif %}" style="max-width: 85%; text-align: left;">
|
|
<div class="small fw-semibold mb-1">{{ message.sender.full_name if message.sender else 'Sistema' }}</div>
|
|
{% if message.body %}<div>{{ message.body|replace('\n','<br>')|safe }}</div>{% endif %}
|
|
{% for att in message.attachments %}
|
|
<div class="mt-2"><a href="{{ url_for('static', filename=att.file_path) }}" target="_blank" class="btn btn-sm {% if message.sender_id == current_user.id %}btn-light{% else %}btn-outline-secondary{% endif %}"><i class="bi bi-paperclip"></i> {{ att.filename }}</a></div>
|
|
{% endfor %}
|
|
<div class="small mt-2 {% if message.sender_id == current_user.id %}text-white-50{% else %}text-muted{% endif %}">{{ message.created_at.strftime('%d/%m/%Y %H:%M') if message.created_at else '' }}</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<form method="post" enctype="multipart/form-data" class="row g-3 pt-3 border-top mt-3">
|
|
<input type="hidden" name="action" value="send_message">
|
|
<input type="hidden" name="conversation_id" value="{{ active_conversation.id }}">
|
|
<div class="col-12"><label class="form-label">Mensaje</label><textarea class="form-control" name="body" rows="4" placeholder="Escribí tu mensaje..."></textarea></div>
|
|
<div class="col-md-8"><label class="form-label">Archivo</label><input type="file" class="form-control" name="chat_file"></div>
|
|
<div class="col-md-4 d-grid align-items-end"><button class="btn btn-primary mt-md-4"><i class="bi bi-send"></i> Enviar</button></div>
|
|
</form>
|
|
{% else %}
|
|
<div class="empty-state my-auto"><i class="bi bi-chat-dots"></i><h3>Seleccioná una conversación</h3><p>Podés abrir un chat privado o crear un grupo desde el panel lateral.</p></div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|