master #6
| @ -10,20 +10,19 @@ | |||||||
| <body> | <body> | ||||||
| <div class="chat-settings-container"> | <div class="chat-settings-container"> | ||||||
|     <div class="chat-settings-container-header"> |     <div class="chat-settings-container-header"> | ||||||
|         <input class="room-name" placeholder="Введите название комнаты..." value="Название комнаты"></input> |         <input class="room-name" id="room-name" placeholder="Введите название комнаты..." value="Название комнаты"> | ||||||
|         <button class="changeName">Изменить название</button> |         <button class="changeName" onclick="handleChangeName()">Изменить название</button> | ||||||
|     </div> |     </div> | ||||||
|     <div class="chat-settings-container-body"> |     <div class="chat-settings-container-body"> | ||||||
|         <ul id="chat-settings-container-body"> |         <ul id="chat-settings-container-body"> | ||||||
|             <li>Участник 1</li> |             <!-- Пример списка участников --> | ||||||
|             <li>Участник 2</li> |             <li id="member-1">Участник 1<button class="remove-member-button" onclick="handleRemoveMember(1)">Удалить</button></li> | ||||||
|             <li>Участник 3</li> |             <li id="member-2">Участник 2<button class="remove-member-button" onclick="handleRemoveMember(2)">Удалить</button></li> | ||||||
|  |             <li id="member-3">Участник 3<button class="remove-member-button" onclick="handleRemoveMember(3)">Удалить</button></li> | ||||||
|         </ul> |         </ul> | ||||||
|     </div> |     </div> | ||||||
|     <div class="chat-settings-container-invite"> |     <div class="chat-settings-container-invite"> | ||||||
|         <button class="invite-member" onclick="openInvite()"> |         <button class="invite-member" onclick="openInvite()">Добавить участника</button> | ||||||
|             Добавить участника |  | ||||||
|         </button> |  | ||||||
|     </div> |     </div> | ||||||
| </div> | </div> | ||||||
| 
 | 
 | ||||||
| @ -37,7 +36,7 @@ | |||||||
|             <input type="text" id="newMemberLogin" placeholder="Логин пользователя"> |             <input type="text" id="newMemberLogin" placeholder="Логин пользователя"> | ||||||
|         </div> |         </div> | ||||||
|         <div class="add-members-footer"> |         <div class="add-members-footer"> | ||||||
|             <button class="add-member-button" onclick="addMember()">Добавить</button> |             <button class="add-member-button" onclick="handleAddMember()">Добавить</button> | ||||||
|         </div> |         </div> | ||||||
|     </div> |     </div> | ||||||
| </div> | </div> | ||||||
|  | |||||||
| @ -41,6 +41,10 @@ body { | |||||||
|     color: white; |     color: white; | ||||||
|     border-radius: 20px; |     border-radius: 20px; | ||||||
|     border: none; |     border: none; | ||||||
|  |     cursor: pointer; | ||||||
|  | } | ||||||
|  | .changeName:hover { | ||||||
|  |     background-color: #005f8c; | ||||||
| } | } | ||||||
| .chat-settings-container-body { | .chat-settings-container-body { | ||||||
|     padding: 15px; |     padding: 15px; | ||||||
| @ -60,7 +64,18 @@ body { | |||||||
|     border-radius: 8px; |     border-radius: 8px; | ||||||
|     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |     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 { | .chat-settings-container-invite { | ||||||
|     padding: 15px; |     padding: 15px; | ||||||
|     background-color: white; |     background-color: white; | ||||||
|  | |||||||
| @ -1,3 +1,31 @@ | |||||||
|  | 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() { | function openInvite() { | ||||||
|     document.getElementById("add_members").style.display = "flex"; |     document.getElementById("add_members").style.display = "flex"; | ||||||
| } | } | ||||||
| @ -6,13 +34,113 @@ function closeAdd() { | |||||||
|     document.getElementById("add_members").style.display = "none"; |     document.getElementById("add_members").style.display = "none"; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| function addMember() { | function updateChat() { | ||||||
|     const login = document.getElementById("newMemberLogin").value; |     pollChatEvents(chatId, localHistoryId).then(() => { | ||||||
|     if (login) { |     }); | ||||||
|         const list = document.getElementById("chat-settings-container-body"); | } | ||||||
|         const listItem = document.createElement("li"); | document.addEventListener('DOMContentLoaded', () => { | ||||||
|         listItem.textContent = login; |     updateChat(); | ||||||
|         list.appendChild(listItem); | }); | ||||||
|         closeAdd(); | 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); | ||||||
|     } |     } | ||||||
| } | } | ||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user