diff --git a/assets/HypertextPages/chat.nytl.html b/assets/HypertextPages/chat.nytl.html index 3519f47..869e8e9 100644 --- a/assets/HypertextPages/chat.nytl.html +++ b/assets/HypertextPages/chat.nytl.html @@ -19,19 +19,6 @@ {% PUT chat.pass pres userinfo openedchat initial_chatUpdResp %} -
-
- Веб чат - -
-
- -
-
- - -
-
diff --git a/assets/css/chat.css b/assets/css/chat.css index abafc9a..e69de29 100644 --- a/assets/css/chat.css +++ b/assets/css/chat.css @@ -1,202 +0,0 @@ -body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - margin: 0; - background-color: #e5e5e5; -} - -.chat-container { - width: 100%; - max-width: 800px; - height: 90vh; - 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-header { - background-color: #007bb5; - color: white; - padding: 25px; - display: flex; - justify-content: center; - align-items: center; - position: relative; -} -.room-name { - position: absolute; - left: 50%; - font-size: 24px; -} -.members { - border: none; - position: absolute; - left: 80%; - border-radius: 10px; - cursor: pointer; - width: 150px; - background-color: #f7f7f7; - height: 25px; - transition: background-color 0.3s ease; -} -.members:hover { - background-color: #218838; -} -.chat-messages { - flex: 1; - padding: 15px; - overflow-y: auto; - background-color: #f7f7f7; -} - -.chat-message { - display: flex; - align-items: flex-start; - margin-bottom: 15px; -} - -.chat-message .avatar { - width: 40px; - height: 40px; - border-radius: 50%; - overflow: hidden; - margin-right: 10px; -} - -.chat-message .avatar img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.chat-message .message-content { - max-width: 70%; - background-color: white; - padding: 10px; - border-radius: 8px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -} - -.chat-message .message-content .username { - font-weight: bold; - margin-bottom: 5px; -} - -.chat-message .message-content .text { - word-wrap: break-word; -} - -.chat-footer { - display: flex; - padding: 15px; - padding-left: 50px; - border-top: 1px solid #ddd; -} - -.chat-input { - flex: 1; - padding: 10px; - border: 1px solid #ddd; - border-radius: 20px; - margin-right: 10px; - outline: none; -} - -.chat-send-button { - padding: 10px 20px; - border: none; - background-color: #0088cc; - color: white; - border-radius: 20px; - cursor: pointer; - outline: none; -} -.members-list { - display: none; - position: fixed; - background-color: #fff; - margin: 10% auto; - padding: 20px; - border: 1px solid #888; - width: 80%; - max-width: 400px; - border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); -} -.members-list-header { - display: flex; -} -.all-members { - position: absolute; - left: 32%; - top: 0%; - margin-bottom: 30px; - font-family: Arial, sans-serif; -} -.close { - position: absolute; - right: 5%; - font-size: 24px; - font-weight: bold; -} -.members-list span { - cursor: pointer; -} -.members-list-body ul { - list-style-type: none; - left: 0%; -} -.members-list-body img { - margin-top: 10px; - left: 0%; - height: 30px; - width: 30px; - border-radius: 50%; -} -.members-list-body a { - margin-left: 5px; - margin-top: 10px; - text-decoration: none; - color: black; - -} -.members-list-body a:hover { - text-decoration: underline; - color: #0088cc; -} -.members-list-body button { - padding: 5px 10px; - border: none; - background-color: #dc2e45; - color: white; - border-radius: 20px; - position: absolute; - left: 300px; - margin-top: 20px; - cursor: pointer; - transition: background-color 0.3s ease; -} -.members-list-body button:hover { - background-color: #881527; -} -.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; -} -.chat-send-button:hover { - background-color: #007bb5; -} \ No newline at end of file diff --git a/assets/js/chat.js b/assets/js/chat.js index 259c984..e69de29 100644 --- a/assets/js/chat.js +++ b/assets/js/chat.js @@ -1,162 +0,0 @@ -let members = [ - { username: 'Адель', nickname: 'cold_siemens52', avatar: 'https://sun9-59.userapi.com/impg/t8GhZ7FkynVifY1FQCnaf31tGprbV_rfauZzgg/fSq4lyc6V0U.jpg?size=1280x1280&quality=96&sign=e3c309a125cb570d2e18465eba65f940&type=album' }, - { username: 'Антон', nickname: 'antyak_01', avatar: 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png' }, - { username: 'Владимир', nickname: 'kkrkk2006', avatar: 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png' } -]; -let currentHistoryId = 0; -let currentChatID = null; -function renderMembersList() { - const membersListBody = document.getElementById('members-list-body'); - membersListBody.innerHTML = ''; - - members.forEach((member, index) => { - const memberItem = document.createElement('li'); - memberItem.innerHTML = ` - ${member.username} - ${member.username} - - `; - membersListBody.appendChild(memberItem); - }); -} - -function deleteMember(index) { - members.splice(index, 1); - renderMembersList(); -} - -async function sendMessage() { - const chatMessages = document.getElementById('chat-messages'); - const chatInput = document.getElementById('chat-input'); - const message = chatInput.value; - - if (message.trim() !== '') { - const request = { - 'chatId': currentChatID, - 'LocalHistoryId': currentHistoryId, - 'content': { - 'text': message - } - }; - - const response = await fetch("/internalapi/sendMessage", { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(request) - }); - - const res = await response.json(); - - if (res.update) { - const update = res.update[0]; - currentHistoryId = update.HistoryId; - - const messageElement = document.createElement('div'); - messageElement.classList.add('chat-message'); - - const avatarElement = document.createElement('div'); - avatarElement.classList.add('avatar'); - - const avatarImage = document.createElement('img'); - avatarImage.src = 'https://sun9-59.userapi.com/impg/t8GhZ7FkynVifY1FQCnaf31tGprbV_rfauZzgg/fSq4lyc6V0U.jpg?size=1280x1280&quality=96&sign=e3c309a125cb570d2e18465eba65f940&type=album'; - avatarElement.appendChild(avatarImage); - - const messageContentElement = document.createElement('div'); - messageContentElement.classList.add('message-content'); - - const usernameElement = document.createElement('div'); - usernameElement.classList.add('username'); - usernameElement.textContent = await getUserName(); - - const textElement = document.createElement('div'); - textElement.classList.add('text'); - textElement.textContent = message; - - messageContentElement.appendChild(usernameElement); - messageContentElement.appendChild(textElement); - - messageElement.appendChild(avatarElement); - messageElement.appendChild(messageContentElement); - - chatMessages.appendChild(messageElement); - - chatInput.value = ''; - chatMessages.scrollTop = chatMessages.scrollHeight; - } - } -} - -function openMembersList() { - renderMembersList(); - document.getElementById("members-list").style.display = "block"; - document.getElementById("overlay").style.display = "flex"; -} - -function closeMembersList() { - document.getElementById("members-list").style.display = "none"; - document.getElementById("overlay").style.display = "none"; -} - -document.getElementById('chat-input').addEventListener('keydown', function (event) { - if (event.key === 'Enter') { - sendMessage(); - } -}); - -async function getUserID() { - const response = await fetch('/internalapi/mirror', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({}) - }); - - const res = await response.json(); - return res.id; -} -async function getChatID() { - const chatNickname = window.location.pathname.split('/').pop(); - const response = await fetch('/internalapi/getChatList', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({}) - }); - - const res = await response.json(); - for (const chat of res.chats) { - if (chat.content.nickname === chatNickname) { - return chat.id; - } - } - return -1; -} -async function editMessage(new_message) { - const req = { - 'chatId': currentChatID, - 'LocalHistoryId': currentHistoryId, - 'id': getUserID(), - 'content': { - 'text': new_message - } - }; - const res = await fetch('/internalapi/editMessage', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(req) - }); - - const response = await res.json(); - if (response.update) { - currentHistoryId = response.update[0].HistoryId; - } -} -document.addEventListener("DOMContentLoaded", async function() { - currentChatID = await getChatID(); -}); \ No newline at end of file