From ae37d0f095e59769ab8b6e9daf9f00eedb81364a Mon Sep 17 00:00:00 2001 From: Rassmagin Alexander Date: Mon, 16 Dec 2024 08:56:43 +0300 Subject: [PATCH] invitations --- .../EventContentPage/EventContentPage.css | 44 +++++++++ .../EventContentPage/EventContentPage.js | 99 +++++++++++++++++++ 2 files changed, 143 insertions(+) diff --git a/public/src/components/EventContentPage/EventContentPage.css b/public/src/components/EventContentPage/EventContentPage.css index 854227f..50019b2 100644 --- a/public/src/components/EventContentPage/EventContentPage.css +++ b/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; /* Отступ справа для разделения с текстом */ } \ No newline at end of file diff --git a/public/src/components/EventContentPage/EventContentPage.js b/public/src/components/EventContentPage/EventContentPage.js index 48461c7..31cd1ac 100644 --- a/public/src/components/EventContentPage/EventContentPage.js +++ b/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: {} };