templates/contacts.html

{% extends 'base.html' %}

{% block title %}Контакты{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <h6>Мои контакты</h6>
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addContactModal">
                                <i class="fas fa-user-plus"></i> Добавить контакт
                            </button>
                        </div>
                        <div class="input-group w-50">
                            <input type="text" id="searchInput" class="form-control" placeholder="Поиск контактов...">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                        </div>
                    </div>
                </div>
                <div class="card-body px-0 pt-0 pb-2">
                    <div class="table-responsive p-0">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Пользователь</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Статус</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Действия</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% if contacts|length > 0 %}
                                    {% for contact in contacts %}
                                    <tr>
                                        <td>
                                            <div class="d-flex px-2 py-1">
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="mb-0 text-sm">{{ contact.username }}</h6>
                                                    <p class="text-xs text-secondary mb-0">{{ contact.email }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="{{ url_for('messages', contact_id=contact.contact_id) }}" class="btn btn-sm btn-primary">
                                                <i class="fas fa-comments"></i> Сообщения
                                                {% if contact.unread_count > 0 %}
                                                <span class="badge bg-danger ms-1">{{ contact.unread_count }}</span>
                                                {% endif %}
                                            </a>
                                        </td>
                                        <td>
                                            <form action="{{ url_for('remove_contact', contact_id=contact.id) }}" method="post" class="d-inline">
                                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Вы уверены, что хотите удалить этот контакт?')">
                                                    <i class="fas fa-user-minus"></i> Удалить
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                {% else %}
                                    <tr>
                                        <td colspan="3" class="text-center py-4">
                                            <p class="text-secondary mb-0">У вас пока нет контактов</p>
                                            <button type="button" class="btn btn-primary btn-sm mt-2" data-bs-toggle="modal" data-bs-target="#addContactModal">
                                                <i class="fas fa-user-plus"></i> Добавить контакт
                                            </button>
                                        </td>
                                    </tr>
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if incoming_requests|length > 0 %}
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <h6>Входящие запросы <span class="badge bg-primary">{{ incoming_requests|length }}</span></h6>
                </div>
                <div class="card-body px-0 pt-0 pb-2">
                    <div class="table-responsive p-0">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Пользователь</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Действия</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for request in incoming_requests %}
                                <tr>
                                    <td>
                                        <div class="d-flex px-2 py-1">
                                            <div class="d-flex flex-column justify-content-center">
                                                <h6 class="mb-0 text-sm">{{ request.username }}</h6>
                                                <p class="text-xs text-secondary mb-0">{{ request.email }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <form action="{{ url_for('accept_contact', contact_id=request.id) }}" method="post" class="d-inline">
                                            <button type="submit" class="btn btn-sm btn-success">
                                                <i class="fas fa-check"></i> Принять
                                            </button>
                                        </form>
                                        <form action="{{ url_for('reject_contact', contact_id=request.id) }}" method="post" class="d-inline">
                                            <button type="submit" class="btn btn-sm btn-danger">
                                                <i class="fas fa-times"></i> Отклонить
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {% if outgoing_requests|length > 0 %}
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <h6>Исходящие запросы <span class="badge bg-primary">{{ outgoing_requests|length }}</span></h6>
                </div>
                <div class="card-body px-0 pt-0 pb-2">
                    <div class="table-responsive p-0">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Пользователь</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Статус</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for request in outgoing_requests %}
                                <tr>
                                    <td>
                                        <div class="d-flex px-2 py-1">
                                            <div class="d-flex flex-column justify-content-center">
                                                <h6 class="mb-0 text-sm">{{ request.username }}</h6>
                                                <p class="text-xs text-secondary mb-0">{{ request.email }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-warning">Ожидает подтверждения</span>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Модальное окно добавления контакта -->
<div class="modal fade" id="addContactModal" tabindex="-1" aria-labelledby="addContactModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addContactModalLabel">Добавить контакт</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ url_for('add_contact') }}" method="post" id="addContactForm">
                    <div class="mb-3">
                        <label for="username_or_email" class="form-label">Имя пользователя или Email</label>
                        <input type="text" class="form-control" id="username_or_email" name="username_or_email" required>
                    </div>
                    <div id="searchResults" class="list-group mb-3" style="display: none;"></div>
                    <button type="submit" class="btn btn-primary">Добавить</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('username_or_email');
        const searchResults = document.getElementById('searchResults');
        
        searchInput.addEventListener('input', function() {
            const query = this.value.trim();
            
            if (query.length < 3) {
                searchResults.style.display = 'none';
                return;
            }
            
            fetch(`/search_users?q=${encodeURIComponent(query)}`)
                .then(response => response.json())
                .then(data => {
                    searchResults.innerHTML = '';
                    
                    if (data.length === 0) {
                        searchResults.style.display = 'none';
                        return;
                    }
                    
                    data.forEach(user => {
                        const item = document.createElement('a');
                        item.href = '#';
                        item.className = 'list-group-item list-group-item-action';
                        
                        let statusBadge = '';
                        if (user.status === 'accepted') {
                            statusBadge = '<span class="badge bg-success float-end">В контактах</span>';
                        } else if (user.status === 'pending') {
                            statusBadge = '<span class="badge bg-warning float-end">Запрос отправлен</span>';
                        }
                        
                        item.innerHTML = `
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">${user.username}</h6>
                                ${statusBadge}
                            </div>
                            <small>${user.email}</small>
                        `;
                        
                        item.addEventListener('click', function(e) {
                            e.preventDefault();
                            searchInput.value = user.username;
                            searchResults.style.display = 'none';
                        });
                        
                        searchResults.appendChild(item);
                    });
                    
                    searchResults.style.display = 'block';
                })
                .catch(error => console.error('Ошибка при поиске пользователей:', error));
        });
    });
</script>
{% endblock %}