From 91d88dc06c14cf6c9d36dd5386c2c8ea9bc10fcf Mon Sep 17 00:00:00 2001 From: Fedor_Kitanin Date: Sat, 31 Aug 2024 21:26:12 +0300 Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D1=8B=20=D0=BD=D0=BE=D0=B2=D1=8B=D0=B5=20=D1=84=D0=B0?= =?UTF-8?q?=D0=B9=D0=BB=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/HypertextPages/chatSettings.nytl.html | 46 ++++++ assets/css/chatSettings.css | 163 +++++++++++++++++++ assets/js/chatSettings.js | 146 +++++++++++++++++ 3 files changed, 355 insertions(+) create mode 100644 assets/HypertextPages/chatSettings.nytl.html create mode 100644 assets/css/chatSettings.css create mode 100644 assets/js/chatSettings.js diff --git a/assets/HypertextPages/chatSettings.nytl.html b/assets/HypertextPages/chatSettings.nytl.html new file mode 100644 index 0000000..71269c7 --- /dev/null +++ b/assets/HypertextPages/chatSettings.nytl.html @@ -0,0 +1,46 @@ +{% ELDEF main JSON pres JSON userinfo %} + + + + + + + Настройки комнаты + + +
+
+ + +
+
+
    + +
  • Участник 1
    • +
  • Участник 2
    • +
  • Участник 3
    • +
+
+
+ +
+
+ +
+
+
+ × +

Добавить участников

+
+
+ +
+
+ +
+
+
+ + + +{% ENDELDEF%} \ No newline at end of file diff --git a/assets/css/chatSettings.css b/assets/css/chatSettings.css new file mode 100644 index 0000000..ab8da39 --- /dev/null +++ b/assets/css/chatSettings.css @@ -0,0 +1,163 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #e5e5e5; +} + +.chat-settings-container { + width: 100%; + max-width: 800px; + background-color: white; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + border-radius: 8px; + overflow: hidden; +} + +.chat-settings-container-header { + background-color: #007bb5; + color: white; + padding: 25px; + display: flex; + justify-content: center; + align-items: center; +} + +.room-name { + font-size: 24px; + width: 80%; + text-align: center; + border-radius: 10px; + border: none; +} +.changeName { + padding: 8px 10px; + background-color: #28a745; + color: white; + border-radius: 20px; + border: none; + cursor: pointer; +} +.changeName:hover { + background-color: #005f8c; +} +.chat-settings-container-body { + padding: 15px; + background-color: #f7f7f7; + flex: 1; +} + +#chat-settings-container-body { + list-style-type: none; + padding: 0; +} + +#chat-settings-container-body li { + margin-bottom: 10px; + background-color: white; + padding: 10px; + border-radius: 8px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} +.remove-member-button { + background-color: red; + color: white; + border: none; + padding: 5px 10px; + cursor: pointer; + margin-left: 10px; + border-radius: 4px; +} +.remove-member-button:hover { + background-color: darkred; +} +.chat-settings-container-invite { + padding: 15px; + background-color: white; + text-align: center; +} + +.invite-member { + padding: 10px 20px; + border: none; + background-color: #28a745; + color: white; + border-radius: 20px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.invite-member:hover { + background-color: #218838; +} + +.overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + justify-content: center; + align-items: center; + z-index: 1000; +} + +.add-members { + background-color: white; + padding: 30px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + width: 100%; + max-width: 400px; + text-align: center; +} + +.add-members-header { + position: relative; + margin-bottom: 20px; +} + +.add-members-header h2 { + margin: 0; +} + +.close { + position: absolute; + right: 10px; + top: 0; + font-size: 24px; + font-weight: bold; + cursor: pointer; +} + +.add-members-body input { + width: 95%; + padding: 10px; + margin-bottom: 20px; + border: 1px solid #ddd; + border-radius: 4px; + margin-right: 15%; + outline: none; +} + +.add-member-button { + padding: 10px 20px; + border: none; + background-color: #007bb5; + color: white; + border-radius: 20px; + cursor: pointer; + outline: none; + transition: background-color 0.3s ease; +} + +.add-member-button:hover { + background-color: #005f8c; +} \ No newline at end of file diff --git a/assets/js/chatSettings.js b/assets/js/chatSettings.js new file mode 100644 index 0000000..337bc00 --- /dev/null +++ b/assets/js/chatSettings.js @@ -0,0 +1,146 @@ +const chatId = 123; +let localHistoryId = 0; + +function handleChangeName() { + const newName = document.getElementById('room-name').value; + changeChatName(chatId, localHistoryId, newName).then(() => { + }); +} +function handleAddMember() { + const login = document.getElementById('newMemberLogin').value; + if (login) { + addMemberToChat(chatId, localHistoryId, login).then(() => { + const list = document.getElementById("chat-settings-container-body"); + const listItem = document.createElement("li"); + listItem.textContent = login; + list.appendChild(listItem); + closeAdd(); + }); + } +} +function handleRemoveMember(userId) { + removeMemberFromChat(chatId, localHistoryId, userId).then(() => { + const listItem = document.getElementById(`member-${userId}`); + if (listItem) { + listItem.remove(); + } + }); +} +function openInvite() { + document.getElementById("add_members").style.display = "flex"; +} + +function closeAdd() { + document.getElementById("add_members").style.display = "none"; +} + +function updateChat() { + pollChatEvents(chatId, localHistoryId).then(() => { + }); +} +document.addEventListener('DOMContentLoaded', () => { + updateChat(); +}); +async function changeChatName(chatId, localHistoryId, newName) { + try { + const response = await fetch('/api/changeChatName', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + chatUpdReq: { + chatId: chatId, + LocalHistoryId: localHistoryId + }, + content: { + name: newName + } + }) + }); + const data = await response.json(); + if (data.status === 0) { + console.log('Название комнаты успешно изменено'); + } else { + console.error('Ошибка при изменении названия комнаты:', data.error); + } + } catch (error) { + console.error('Ошибка сети при изменении названия комнаты:', error); + } +} +async function addMemberToChat(chatId, localHistoryId, nickname) { + try { + const response = await fetch('/api/addMemberToChat', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + chatUpdReq: { + chatId: chatId, + LocalHistoryId: localHistoryId + }, + nickname: nickname + }) + }); + const data = await response.json(); + if (data.status === 0) { + console.log('Участник успешно добавлен'); + } else { + console.error('Ошибка при добавлении участника:', data.error); + } + } catch (error) { + console.error('Ошибка сети при добавлении участника:', error); + } +} + +async function removeMemberFromChat(chatId, localHistoryId, userId) { + try { + const response = await fetch('/api/removeMemberFromChat', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + chatUpdReq: { + chatId: chatId, + LocalHistoryId: localHistoryId + }, + userId: userId + }) + }); + const data = await response.json(); + if (data.status === 0) { + console.log('Участник успешно удален'); + } else { + console.error('Ошибка при удалении участника:', data.error); + } + } catch (error) { + console.error('Ошибка сети при удалении участника:', error); + } +} + +async function pollChatEvents(chatId, localHistoryId) { + try { + const response = await fetch('/api/chatPollEvents', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + chatUpdReq: { + chatId: chatId, + LocalHistoryId: localHistoryId + } + }) + }); + const data = await response.json(); + if (data.status === 0) { + console.log('События чата успешно обновлены'); + } else { + console.error('Ошибка при обновлении событий чата:', data.error); + } + } catch (error) { + console.error('Ошибка сети при обновлении событий чата:', error); + } +} \ No newline at end of file