invitations

public/src/components/EventContentPage/EventContentPage.css

@@ -147,4 +147,48 @@
     margin-top: 10px;
     font-weight: bold;
     text-align: center;
+}
+/* Кнопка приглашения */
+.buttonInvite {
+    background: #fff;
+    border: 2px solid #007bff; /* Цвет рамки */
+    color: #007bff; /* Цвет текста */
+    padding: 10px 20px; /* Отступы */
+    border-radius: 20px; /* Скругление углов */
+    font-size: 16px; /* Размер шрифта */
+    cursor: pointer; /* Указатель при наведении */
+    transition: background-color 0.2s ease, color 0.2s ease; /* Плавный переход */
+}
+
+.buttonInvite:hover {
+    background-color: #007bff; /* Цвет фона при наведении */
+    color: #fff; /* Цвет текста при наведении */
+}
+/* Добавьте это в ваш CSS файл */
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* Затемнение */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000; /* Убедитесь, что это выше других элементов */
+}
+
+.invite-container {
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 1001; /* Убедитесь, что это выше overlay */
+}
+.avatar-image {
+    width: 40px; /* Ширина аватарки */
+    height: 40px; /* Высота аватарки */
+    border-radius: 50%; /* Скругление для круглой формы */
+    object-fit: cover; /* Обеспечивает правильное обрезание изображения */
+    margin-right: 10px; /* Отступ справа для разделения с текстом */
 }

public/src/components/EventContentPage/EventContentPage.js

@@ -254,6 +254,31 @@ export class EventContentPage {
             eventActions.appendChild(favoritesAddButton);
         }
 
+        const inviteButton = document.createElement('button');
+        inviteButton.className = 'buttonInvite';
+        inviteButton.textContent = 'Пригласить';
+        inviteButton.addEventListener("click", async () => {
+            // Создаем затемняющий фон
+            const overlay = document.createElement('div');
+            overlay.className = 'overlay';
+            document.body.appendChild(overlay);
+
+            // Создаем контейнер для приглашений
+            const inviteContainer = document.createElement('div');
+            inviteContainer.className = 'invite-container';
+            inviteContainer.style.display = 'block';
+            await this.loadInvitations(inviteContainer); // Загружаем список приглашений
+
+            // Добавляем inviteContainer в overlay
+            overlay.appendChild(inviteContainer);
+
+            // Закрытие модального окна при клике на overlay
+            overlay.addEventListener('click', () => {
+                document.body.removeChild(overlay);
+            });
+        });
+        eventActions.appendChild(inviteButton);
+
         if (event.author == possession) {
             eventActions.appendChild(editButton);
             eventActions.appendChild(deleteButton);
@@ -273,6 +298,80 @@ export class EventContentPage {
         ymaps.ready(() => this.init(eventLocation));
     }
 
+    async loadInvitations(container) {
+        try {
+            const response = await api.get('/profile/subscribe', {
+                credentials: 'include'
+            });
+
+            if (!response.ok) {
+                throw new Error('Ошибка загрузки подписчиков');
+            }
+
+            const invitations = await response.json();
+            container.innerHTML = ''; // Очищаем контейнер
+
+            if (invitations.length === 0) {
+                const emptyMessage = document.createElement('div');
+                emptyMessage.className = 'notification-item';
+                emptyMessage.textContent = 'Нет подписчиков';
+                container.appendChild(emptyMessage);
+                return;
+            }
+
+            invitations.forEach(invitation => {
+                const invitationItem = document.createElement('div');
+                invitationItem.className = 'notification-item';
+
+                // Создаем элемент для аватарки
+                const avatarImage = document.createElement('img');
+                avatarImage.src = invitation.avatar;
+                avatarImage.alt = `${invitation.username}`;
+                avatarImage.className = 'avatar-image';
+                invitationItem.appendChild(avatarImage);
+
+                const usernameText = document.createElement('span');
+                usernameText.textContent = `Пригласить ${invitation.username}`;
+                invitationItem.appendChild(usernameText);
+
+                invitationItem.addEventListener('click', async () => {
+                    const inviterId = await this.checkPossession(); // Получаем текущий user_id
+                    const eventId = window.location.pathname.split('/').pop(); // Получаем ID события из URL
+                    const userId = invitation.user_id;
+
+                    const requestBody = {
+                        event_id: eventId,
+                        user_id: userId,
+                        inviter_id: inviterId
+                    };
+
+                    const request = {
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        credentials: 'include',
+                        body: JSON.stringify(requestBody),
+                    };
+                    console.log(requestBody);
+                    try {
+                        const response = await api.post('/invite', request);
+                        if (response.ok) {
+                            console.log('Приглашение отправлено');
+                        } else {
+                            console.error('Ошибка при отправке приглашения');
+                        }
+                    } catch (error) {
+                        console.error('Ошибка при отправке запроса:', error);
+                    }
+                });
+
+                container.appendChild(invitationItem);
+            });
+        } catch (error) {
+            console.error('Ошибка при загрузке приглашений:', error);
+        }
+    }
+
     async renderTemplate(id) {
         const path = `/events/${id}`;
         const request = { headers: {} };