collarbone-annihilation/iu9-ca-web-chat
7
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 1 Wiki Activity

Добавлены кнопки удаления чатов, участников чата, изменен дизайн некоторых элементов, добавлено api

Browse Source
This commit is contained in:
yakovlevanton 2024-08-15 01:07:59 +03:00
parent 40f637a1cf
commit 0e2ed000f9
11 changed files with 514 additions and 364 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/css/chat.css
View File

@ -164,6 +164,26 @@ body {
margin-top: 10px; margin-top: 10px;
text-decoration: none; text-decoration: none;
color: black; 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 { .overlay {
display: none; display: none;

66
assets/css/list-rooms.css
View File

@ -70,13 +70,28 @@ h1 {
border: none; border: none;
border-radius: 5px; border-radius: 5px;
position: absolute; position: absolute;
margin-left: 500px; margin-left: 502px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
.add-members-button:hover { .add-members-button:hover {
background-color: #006509 background-color: #006509
} }
.delete-chat-button {
background-color: #dc2e45;
border: none;
color: white;
font-size: 16px;
border-radius: 5px;
position: absolute;
cursor: pointer;
transition: background-color 0.3s ease;
padding: 10px 15px;
margin-left: 380px;
}
.delete-chat-button:hover {
background-color: #881527;
}
#newMemberLogin { #newMemberLogin {
width: 93.5%; width: 93.5%;
padding: 10px; padding: 10px;
@ -185,13 +200,49 @@ h1 {
height: 18%; height: 18%;
position: fixed; position: fixed;
} }
.overlay .delete-chat {
#error { background-color: white;
color: red; padding: 30px;
font-size: 15px; border-radius: 10px;
margin-top: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 100%;
height: 18%;
position: fixed;
}
.delete-close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.delete-chat-header {
text-align: center; text-align: center;
display: none; }
.confirm {
background-color: #1609ab;
padding: 20px 70px;
font-size: 16px;
color: white;
border: none;
border-radius: 5px;
position: absolute;
margin-left: 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.cancel {
background-color: #1609ab;
padding: 20px 70px;
font-size: 16px;
color: white;
border: none;
border-radius: 5px;
position: absolute;
margin-left: 220px;
cursor: pointer;
transition: background-color 0.3s ease;
} }
.close { .close {
color: #aaa; color: #aaa;
@ -199,3 +250,4 @@ h1 {
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
}

33
assets/css/profile.css
View File

@ -27,17 +27,25 @@ body {
position: relative; position: relative;
} }
.return { .return {
background-image: url("/assets/img/return.svg"); background-color: #f0f0f0;
background-repeat: no-repeat;
cursor: pointer; cursor: pointer;
width: 30px; width: 100px;
text-decoration: none;
color: black;
display: flex;
justify-content: center;
align-items: center;
height: 30px; height: 30px;
border-radius: 10px; border-radius: 10px;
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 30px; top: 25px;
border: none; border: none;
} }
.return:hover{
text-decoration: underline;
color: #0088cc;
}
form { form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -58,14 +66,16 @@ form {
align-items: center; align-items: center;
} }
.add { .add {
background-image: url("/assets/img/add_photo.svg"); width: 100px;
background-size: cover; height: 40px;
width: 30px; border-width: 2px;
height: 30px;
border: none;
cursor: pointer; cursor: pointer;
font-size: 16px;
border-radius: 10px; border-radius: 10px;
} }
.add:hover {
background-color: #007bb5;
}
.image-button:hover { .image-button:hover {
opacity: 0.8; opacity: 0.8;
} }
@ -108,10 +118,11 @@ form {
border-radius: 15px; border-radius: 15px;
border-color: #2F4F4F; border-color: #2F4F4F;
height: 40px; height: 40px;
color: white;
background-color: #0088cc;
width: 150px; width: 150px;
} }
.save:hover {
background-color: #007bb5;
}
.avatar { .avatar {
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;

35
assets/html/chat.html
View File

@ -7,33 +7,32 @@
<link rel="stylesheet" href="/assets/css/chat.css"> <link rel="stylesheet" href="/assets/css/chat.css">
</head> </head>
<body> <body>
<div class="chat-container"> <div class="chat-container">
<div class="chat-header"> <div class="chat-header">
<span class="room-name">Веб чат</span> <span class="room-name">Веб чат</span>
<button class="members" onclick="openMembersList()">Показать участников</button> <button class="members" onclick="openMembersList()">Показать участников</button>
</div>
<div class="chat-messages" id="chat-messages">
<!-- Сообщения чата будут здесь -->
</div>
<div class="chat-footer">
<input type="text" class="chat-input" id="chat-input" placeholder="Введите сообщение...">
<button class="chat-send-button" onclick="sendMessage()">Отправить</button>
</div>
</div> </div>
<div class="overlay" id="overlay"> <div class="chat-messages" id="chat-messages">
<!-- Сообщения чата будут здесь -->
</div>
<div class="chat-footer">
<input type="text" class="chat-input" id="chat-input" placeholder="Введите сообщение...">
<button class="chat-send-button" onclick="sendMessage()">Отправить</button>
</div>
</div>
<div class="overlay" id="overlay">
<div class="members-list" id="members-list"> <div class="members-list" id="members-list">
<div class="members-list-header"> <div class="members-list-header">
<span class="close" onclick="closeMembersList()">&times;</span> <span class="close" onclick="closeMembersList()">&times;</span>
<h2 class="all-members">Все участники</h2> <h2 class="all-members">Все участники</h2>
</div> </div>
<div class="members-list-body"> <div class="members-list-body">
<ul> <ul id="members-list-body">
<li><img src="https://sun9-59.userapi.com/impg/t8GhZ7FkynVifY1FQCnaf31tGprbV_rfauZzgg/fSq4lyc6V0U.jpg?size=1280x1280&quality=96&sign=e3c309a125cb570d2e18465eba65f940&type=album"> <!-- Список участников будет добавлен динамически -->
<a href="profile.html">Адель</a></li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<script src="/assets/js/chat.js"></script> <script src="/assets/js/chat.js"></script>
</body> </body>
</html> </html>

37
assets/html/list-rooms.html
View File

@ -35,20 +35,31 @@
<!-- Модальное окно для добавления участников --> <!-- Модальное окно для добавления участников -->
<div class="overlay" id="add_members"> <div class="overlay" id="add_members">
<div class="add-members"> <div class="add-members">
<div class="add-members-header"> <div class="add-members-header">
<span class="close" onclick="closeAdd()">&times;</span> <span class="close" onclick="closeAdd()">&times;</span>
<h2>Добавить участников</h2> <h2>Добавить участников</h2>
</div> </div>
<div class="add-members-body"> <div class="add-members-body">
<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="addMember()">Добавить</button>
</div> </div>
</div> </div>
</div>
<div class="overlay" id="delete-chat">
<div class="delete-chat">
<div class="delete-chat-header">
<span class="delete-close" onclick="closeConfirm()">&times;</span>
<h2>Вы уверены, что хотите удалить чат?</h2>
</div>
<div class="delete-chat-body">
<button class="confirm" onclick="deleteChat()">Да</button>
<button class="cancel" onclick="closeConfirm()">Нет</button>
</div>
</div>
</div> </div>
<script src="/assets/js/list-rooms.js"></script> <script src="/assets/js/list-rooms.js"></script>
</body> </body>
</html> </html>

10
assets/html/profile.html
View File

@ -8,15 +8,15 @@
<body> <body>
<div class="main-container"> <div class="main-container">
<div class="profile-header"> <div class="profile-header">
<h1 style="color: white; text-align: center;">Профиль пользователя</h1> <h1 style="color: white; text-align: center;">Профиль пользователя</h1>
<button class="return" type="button"></button> <a class="return" href="chat.html">Назад</a>
</div> </div>
<form> <form>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<img class="avatar" src="/assets/img/empty_avatar.png" id="avatar" height="200" width="200"><br> <img class="avatar" src="/assets/img/empty_avatar.png" id="avatar" height="200" width="200"><br>
<input type="file" id="fileInput" style="display:none"> <input type="file" id="fileInput" style="display:none">
<button class="add" type="button" onclick="document.getElementById('fileInput').click();"></button><br> <button class="add" type="button" onclick="document.getElementById('fileInput').click();">Изменить фото</button><br>
</div> </div>
<div class="column"> <div class="column">
<input type="text" name="username" placeholder = "Имя пользователя" value="Some Name" id="username"><br> <input type="text" name="username" placeholder = "Имя пользователя" value="Some Name" id="username"><br>
@ -32,6 +32,6 @@
</div> </div>
<script src="/assets/js/list-rooms.js"> </script> <script src="/assets/js/list-rooms.js"> </script>
</body> </body>
</html> </html>

26
assets/html/registration.html
View File

@ -4,22 +4,22 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Страница Регистрации</title> <title>Страница Регистрации</title>
<link rel="stylesheet" href="assets/css/registration.css"> <link rel="stylesheet" href="/assets/css/registration.css">
</head> </head>
<body> <body>
<div class="form-container"> <div class="form-container">
<h1 class="hide-cursor no-select">Вход</h1> <h1 class="hide-cursor no-select">Вход</h1>
<form action="assets/html/list-rooms.html" method="post"> <form action="assets/html/list-rooms.html" method="post">
<input type="text" name="username" placeholder="Имя пользователя" id="username"><br> <input type="text" name="username" placeholder="Имя пользователя" id="username"><br>
<input type="text" name="login" placeholder="Логин" id="login"><br> <input type="text" name="login" placeholder="Логин" id="login"><br>
<input type="password" name="password" placeholder="Пароль" id="password"><br> <input type="password" name="password" placeholder="Пароль" id="password"><br>
<button type="submit" class="hide-cursor no-select">Зарегистрироваться</button> <button type="submit" class="hide-cursor no-select">Зарегистрироваться</button>
<div id="error"></div> <div id="error"></div>
</form> </form>
</div> </div>
<script src="assets/js/registration.js"></script> <script src="assets/js/registration.js"></script>
</body> </body>
</html> </html>

247
assets/js/chat.js
View File

@ -1,86 +1,45 @@
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 currentHistoryId = 0;
let currentChatID = null; let currentChatID = null;
function renderMembersList() {
const membersListBody = document.getElementById('members-list-body');
membersListBody.innerHTML = '';
document.addEventListener("DOMContentLoaded", async function() { members.forEach((member, index) => {
currentChatID = await getChatID(); const memberItem = document.createElement('li');
memberItem.innerHTML = `
<img src="${member.avatar}" alt="${member.username}">
<a href="profile.html">${member.username}</a>
<button class="delete-member" onclick="deleteMember(${index})">Удалить из чата</button>
`;
membersListBody.appendChild(memberItem);
}); });
}
async function sendMessage() { function deleteMember(index) {
const chatMessages = document.getElementById('chat-messages'); members.splice(index, 1);
const chatInput = document.getElementById('chat-input'); renderMembersList();
const message = chatInput.value; }
if (message.trim() !== '') { async function sendMessage() {
const request = { const chatMessages = document.getElementById('chat-messages');
'chatId': currentChatID, const chatInput = document.getElementById('chat-input');
'LocalHistoryId': currentHistoryId, const message = chatInput.value;
'content': {
'text': message
}
};
const response = await fetch("/internalapi/sendMessage", { if (message.trim() !== '') {
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;
}
}
}
document.getElementById('chat-input').addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
sendMessage();
}
});
async function getUserName() {
const userID = await getUserID();
const request = { const request = {
"id": userID 'chatId': currentChatID,
'LocalHistoryId': currentHistoryId,
'content': {
'text': message
}
}; };
const response = await fetch('/internalapi/getUserInfo', { const response = await fetch("/internalapi/sendMessage", {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@ -89,75 +48,115 @@ let currentHistoryId = 0;
}); });
const res = await response.json(); const res = await response.json();
return res.content.name;
}
async function getUserID() { if (res.update) {
const response = await fetch('/internalapi/mirror', { const update = res.update[0];
method: 'POST', currentHistoryId = update.HistoryId;
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({})
});
const res = await response.json(); const messageElement = document.createElement('div');
return res.id; messageElement.classList.add('chat-message');
}
async function getChatID() { const avatarElement = document.createElement('div');
const chatNickname = window.location.pathname.split('/').pop(); avatarElement.classList.add('avatar');
const response = await fetch('/internalapi/getChatList', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({})
});
const res = await response.json(); const avatarImage = document.createElement('img');
for (const chat of res.chats) { avatarImage.src = 'https://sun9-59.userapi.com/impg/t8GhZ7FkynVifY1FQCnaf31tGprbV_rfauZzgg/fSq4lyc6V0U.jpg?size=1280x1280&quality=96&sign=e3c309a125cb570d2e18465eba65f940&type=album';
if (chat.content.nickname === chatNickname) { avatarElement.appendChild(avatarImage);
return chat.id;
}
}
return -1;
}
async function editMessage(new_message) { const messageContentElement = document.createElement('div');
const req = { messageContentElement.classList.add('message-content');
'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(); const usernameElement = document.createElement('div');
if (response.update) { usernameElement.classList.add('username');
currentHistoryId = response.update[0].HistoryId; 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() { function openMembersList() {
renderMembersList();
document.getElementById("members-list").style.display = "block"; document.getElementById("members-list").style.display = "block";
document.getElementById("overlay").style.display = "flex"; document.getElementById("overlay").style.display = "flex";
} }
function closeMembersList() { function closeMembersList() {
document.getElementById("members-list").style.display = "none"; document.getElementById("members-list").style.display = "none";
document.getElementById("overlay").style.display = "none"; document.getElementById("overlay").style.display = "none";
} }
document.getElementById('chat-input').addEventListener('keydown', function (event) { document.getElementById('chat-input').addEventListener('keydown', function (event) {
if (event.key === 'Enter') { if (event.key === 'Enter') {
sendMessage(); 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();
});

264
assets/js/list-rooms.js
View File

@ -1,113 +1,136 @@
let rooms = {};
let roomToDelete = null;
let currentRoom = null; let currentRoom = null;
let currentHistoryId = 0; let currentHistoryId = 0;
function openModal(roomName) { function openRoom(currentRoom) {
currentRoom = roomName; alert('Вы вошли в комнату: ' + currentRoom);
document.getElementById('passwordModal').style.display = 'block'; }
function closeAdd() {
document.getElementById('add_members').style.display = 'none';
}
function openAdd() {
document.getElementById('add_members').style.display = 'flex';
}
function openConfirm(roomNickname) {
roomToDelete = roomNickname;
document.getElementById("delete-chat").style.display = "flex";
}
function closeConfirm() {
roomToDelete = null;
document.getElementById("delete-chat").style.display = "none";
}
function deleteChat() {
if (roomToDelete && rooms[roomToDelete]) {
delete rooms[roomToDelete];
removeRoomFromList(roomToDelete);
closeConfirm();
} else {
alert("Не удалось найти выбранную комнату.");
}
}
function addMember() {
const login = document.getElementById('newMemberLogin').value;
if (login) {
alert(`Участник с никнеймом '${login}' добавлен`);
closeAdd();
} else {
alert('Пожалуйста, введите логин участника');
}
}
function openCreateRoomModal() {
document.getElementById('createRoomModal').style.display = 'block';
}
function closeCreateRoomModal() {
document.getElementById('createRoomModal').style.display = 'none';
}
async function createRoom() {
const errorElement = document.getElementById('error');
const roomName = document.getElementById('newRoomName').value.trim();
const roomNickname = document.getElementById('newRoomNickname').value.trim();
errorElement.style.display = 'none';
errorElement.textContent = '';
if (roomName === '' || roomNickname === '') {
errorElement.textContent = 'Пожалуйста, заполните все поля';
errorElement.style.display = 'block';
return;
} }
function closeModal() { const request = {
document.getElementById('passwordModal').style.display = 'none'; LocalHistoryId: currentHistoryId,
} content: {
name: roomName,
function openCreateRoomModal() { nickname: roomNickname
document.getElementById('createRoomModal').style.display = 'block';
}
function closeCreateRoomModal() {
document.getElementById('createRoomModal').style.display = 'none';
}
async function createRoom() {
const errorElement = document.getElementById('error');
const roomName = document.getElementById('newRoomName').value.trim();
const roomNickname = document.getElementById('newRoomNickname').value.trim();
errorElement.style.display = 'none';
errorElement.textContent = '';
if (roomName === '' || roomNickname === '') {
errorElement.textContent = 'Пожалуйста, заполните все поля';
errorElement.style.display = 'block';
return;
} }
};
const request = { try {
LocalHistoryId: currentHistoryId, const response = await fetch('/internalapi/createChat', {
content: { method: 'POST',
name: roomName, headers: {
nickname: roomNickname 'Content-Type': 'application/json'
} },
}; body: JSON.stringify(request)
});
try { const res = await response.json();
const response = await fetch('/internalapi/createChat', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(request)
});
const res = await response.json(); if (res.status === 0) {
addRoomToList(roomName, roomNickname);
if (res.status === 0) { rooms[roomNickname] = true;
addRoomToList(roomName, roomNickname); closeCreateRoomModal();
closeCreateRoomModal(); currentHistoryId = res.update.LocalHistoryId;
currentHistoryId = res.update.LocalHistoryId; window.location.href = '/chat/' + roomNickname;
window.location.href = '/chat/' + roomNickname; } else {
} else { throw new Error(res.error || 'Ошибка');
throw new Error(res.error || 'Ошибка');
}
} catch (error) {
alert('Ошибка создания чата: ' + error.message);
} }
} catch (error) {
alert('Ошибка создания чата: ' + error.message);
}
}
function addRoomToList(roomName) {
const roomList = document.querySelector('.room-list');
const existingRoomItem = Array.from(roomList.children).find(item => item.querySelector('.room-name').textContent === roomName);
if (existingRoomItem) {
existingRoomItem.remove();
} }
function addRoomToList(roomName, roomNickname) { const roomItem = document.createElement('li');
const roomList = document.querySelector('.room-list'); roomItem.classList.add('room-item');
const existingRoomItem = Array.from(roomList.children).find(item => item.querySelector('.room-name').textContent === roomName); roomItem.innerHTML = `
if (existingRoomItem) { <span class="room-name">${roomName}</span>
existingRoomItem.remove(); <button class="delete-chat-button" onclick="openConfirm('${roomNickname}')">Удалить чат</button>
} <button class="add-members-button" onclick="openAdd()">Добавить участников</button>
<button class="join-button" onclick="window.location.href = '/chat/${roomNickname}'">Войти</button>
`;
const roomItem = document.createElement('li'); roomList.appendChild(roomItem);
roomItem.classList.add('room-item'); }
roomItem.innerHTML = `
<span class="room-name">${roomName}</span> function removeRoomFromList(roomName, roomNickname) {
<button class="join-button" onclick="window.location.href = '/chat/${roomNickname}'">Войти</button> const roomList = document.querySelector('.room-list');
`; const roomItem = Array.from(roomList.children).find(item => item.querySelector('.room-name').textContent === roomName);
roomList.appendChild(roomItem); if (roomItem) {
roomList.removeChild(roomItem);
} }
}
async function initializeRoomList() { async function initializeRoomList() {
try { try {
const response = await fetch('/internalapi/getChatList', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({})
});
const res = await response.json();
if (res.status === 0) {
res.chats.forEach(chat => {
addRoomToList(chat.content.name, chat.content.nickname);
});
} else {
throw new Error(res.error || 'Неизвестная ошибка');
}
} catch (error) {
alert('Ошибка загрузки списка чатов: ' + error.message);
}
}
async function getChatID() {
const chatNickname = window.location.pathname.split('/').pop();
const response = await fetch('/internalapi/getChatList', { const response = await fetch('/internalapi/getChatList', {
method: 'POST', method: 'POST',
headers: { headers: {
@ -117,12 +140,47 @@ let currentRoom = null;
}); });
const res = await response.json(); const res = await response.json();
for (const chat of res.chats) {
if (chat.content.nickname === chatNickname) {
return chat.id;
}
}
return -1;
}
document.addEventListener('DOMContentLoaded', initializeRoomList); if (res.status === 0) {
res.chats.forEach(chat => {
addRoomToList(chat.content.name, chat.content.nickname);
});
} else {
throw new Error(res.error || 'Неизвестная ошибка');
}
} catch (error) {
alert('Ошибка загрузки списка чатов: ' + error.message);
}
}
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;
}
window.onclick = function(event) {
if (event.target === document.getElementById('createRoomModal')) {
closeCreateRoomModal();
}
}
document.getElementById('newRoomName').addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
createRoom();
}
});
document.addEventListener('DOMContentLoaded', initializeRoomList);

18
assets/js/profile.js
View File

@ -1,10 +1,10 @@
document.getElementById('fileInput').addEventListener('change', function(event) { document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0]; const file = event.target.files[0];
if (file) { if (file) {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = function(e) { reader.onload = function(e) {
document.getElementById('avatar').src = e.target.result; document.getElementById('avatar').src = e.target.result;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
}); });

122
assets/js/registration.js
View File

@ -1,68 +1,68 @@
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form'); const form = document.querySelector('form');
const submitButton = form.querySelector('button[type="submit"]'); const submitButton = form.querySelector('button[type="submit"]');
const errorElement = document.getElementById('error'); const errorElement = document.getElementById('error');
form.addEventListener('keydown', function(event) { form.addEventListener('keydown', function(event) {
const activeElement = document.activeElement; const activeElement = document.activeElement;
const formElements = Array.from(form.elements); const formElements = Array.from(form.elements);
const currentIndex = formElements.indexOf(activeElement); const currentIndex = formElements.indexOf(activeElement);
if (activeElement.tagName === 'INPUT') { if (activeElement.tagName === 'INPUT') {
if (event.key === 'Enter') { if (event.key === 'Enter') {
event.preventDefault(); event.preventDefault();
if (currentIndex === formElements.length - 1) { if (currentIndex === formElements.length - 1) {
submitButton.focus(); submitButton.focus();
} else if (currentIndex !== -1 && formElements[currentIndex + 1]) { } else if (currentIndex !== -1 && formElements[currentIndex + 1]) {
formElements[currentIndex + 1].focus(); formElements[currentIndex + 1].focus();
}
} }
} }
});
submitButton.addEventListener('focus', function() {
submitButton.classList.add('focus-visible');
});
submitButton.addEventListener('blur', function() {
submitButton.classList.remove('focus-visible');
});
form.addEventListener('submit', function(event) {
event.preventDefault();
validateForm();
});
async function validateForm() {
const name = document.getElementById('name').value.trim();
const nickname = document.getElementById('nickname').value.trim();
if (name === '' || nickname === '') {
errorElement.textContent = 'Пожалуйста, заполните все поля';
errorElement.style.display = 'block';
return false;
}
try {
// Отправка данных для регистрации
let response = await fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({name, nickname})
});
const result = await response.json();
if (result.status === 0) {
window.location.href = '/';
} else {
throw Error(result.error);
}
} catch(error) {
errorElement.textContent = 'Попробуйте еще раз';
errorElement.style.display = 'block';
}
} }
}); });
submitButton.addEventListener('focus', function() {
submitButton.classList.add('focus-visible');
});
submitButton.addEventListener('blur', function() {
submitButton.classList.remove('focus-visible');
});
form.addEventListener('submit', function(event) {
event.preventDefault();
validateForm();
});
async function validateForm() {
const name = document.getElementById('name').value.trim();
const nickname = document.getElementById('nickname').value.trim();
if (name === '' || nickname === '') {
errorElement.textContent = 'Пожалуйста, заполните все поля';
errorElement.style.display = 'block';
return false;
}
try {
// Отправка данных для регистрации
let response = await fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({name, nickname})
});
const result = await response.json();
if (result.status === 0) {
window.location.href = '/';
} else {
throw Error(result.error);
}
} catch(error) {
errorElement.textContent = 'Попробуйте еще раз';
errorElement.style.display = 'block';
}
}
});