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

Merged with anton_branch

Browse Source
This commit is contained in:
Андреев Григорий 2024-08-23 16:54:52 +03:00
commit 5314ffef1f
14 changed files with 739 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
assets/HypertextPages/chat.html
View File

@ -1,25 +1,38 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Веб-Чат</title>
<link rel="stylesheet" href="/assets/css/chat.css">
</head>
<body>
<div class="chat-container">
<div class="chat-header">
Веб чат
</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>
<script src="/assets/js/chat.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Веб-Чат</title>
<link rel="stylesheet" href="/assets/css/chat.css">
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<span class="room-name">Веб чат</span>
<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 class="overlay" id="overlay">
<div class="members-list" id="members-list">
<div class="members-list-header">
<span class="close" onclick="closeMembersList()">&times;</span>
<h2 class="all-members">Все участники</h2>
</div>
<div class="members-list-body">
<ul id="members-list-body">
<!-- Список участников будет добавлен динамически -->
</ul>
</div>
</div>
</div>
<script src="/assets/js/chat.js"></script>
</body>
</html>

65
assets/HypertextPages/list-rooms.html Normal file
View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Список Чат-Комнат</title>
<link rel="stylesheet" href="/assets/css/list-rooms.css">
</head>
<body>
<div class="container">
<h1 style="color: white;">Выберите Чат-Комнату</h1>
<ul class="room-list">
<!-- Здесь будет список комнат -->
</ul>
<button class="create-room-button" onclick="openCreateRoomModal()">Создать Комнату</button>
</div>
<!-- Модальное окно для создания комнаты -->
<div id="createRoomModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="closeCreateRoomModal()">&times;</span>
<h2>Создать Комнату</h2>
</div>
<div class="modal-body">
<input type="text" id="newRoomName" placeholder="Название комнаты">
<input type="password" id="newRoomNickname" placeholder="Никнейм комнаты">
</div>
<div id="error"></div>
<div class="modal-footer">
<button class="join-button" onclick="createRoom()">Создать</button>
</div>
</div>
</div>
<!-- Модальное окно для добавления участников -->
<div class="overlay" id="add_members">
<div class="add-members">
<div class="add-members-header">
<span class="close" onclick="closeAdd()">&times;</span>
<h2>Добавить участников</h2>
</div>
<div class="add-members-body">
<input type="text" id="newMemberLogin" placeholder="Логин пользователя">
</div>
<div class="add-members-footer">
<button class="add-member-button" onclick="addMember()">Добавить</button>
</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>
<script src="/assets/js/list-rooms.js"></script>
</body>
</html>

54
assets/HypertextPages/list-rooms.nytl.html
View File

@ -1,54 +0,0 @@
{% ELDEF main JSON pres %}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% WRITE pres.phr.decl.list-of-chat-rooms %}</title>
<link rel="stylesheet" href="/assets/css/list-rooms.css">
</head>
<body>
<div class="container">
<h1 style="color: white;">{% WRITE pres.phr.decl.select-chat-room %}</h1>
<ul class="room-list">
<!-- Здесь будет список комнат -->
</ul>
<button class="create-room-button" onclick="openCreateRoomModal()">{% WRITE pres.phr.act.create-room %}</button>
</div>
<div id="passwordModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="closeModal()">&times;</span>
<h2>VVedite parol</h2> <!-- Nam ne nuzhen parol ot komnat -->
</div>
<div class="modal-body">
<input type="password" id="roomPassword" placeholder="Пароль">
</div>
<div class="modal-footer">
<button class="join-button" onclick="validatePassword()">{% WRITE pres.phr.act.confirm %}</button>
</div>
</div>
</div>
<!-- Модальное окно для создания комнаты -->
<div id="createRoomModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="closeCreateRoomModal()">&times;</span>
<h2>{% WRITE pres.phr.decl.create-room %}</h2>
</div>
<div class="modal-body">
<input type="text" id="newRoomName" placeholder="{% WRITE pres.phr.decl.name-of-room %}">
<input type="password" id="newRoomPassword" placeholder="Пароль"> <!-- Fedya, nam ne nuzhen parol -->
</div>
<div class="modal-footer">
<button class="join-button" onclick="createRoom()">{% WRITE pres.phr.act.create %}</button>
</div>
</div>
</div>
<script src="/assets/js/list-rooms.js"></script>
</body>
</html>
{% ENDELDEF %}

9
assets/HypertextPages/profile.html
View File

@ -8,14 +8,15 @@
<body>
<div class="main-container">
<div class="profile-header">
<h1 style="color: white; text-align: center;">Профиль пользователя</h1>
<h1 style="color: white; text-align: center;">Профиль пользователя</h1>
<a class="return" href="chat.html">Назад</a>
</div>
<form>
<div class="columns">
<div class="column">
<img class="avatar" src="/assets/img/empty_avatar.png" id="avatar" height="200" width="200"><br>
<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 class="column">
<input type="text" name="username" placeholder = "Имя пользователя" value="Some Name" id="username"><br>
@ -31,6 +32,6 @@
</div>
<script src="/assets/js/list-rooms.js"> </script>
</body>
</html>
</html>

26
assets/HypertextPages/registration.html
View File

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

109
assets/css/chat.css
View File

@ -21,13 +21,33 @@ body {
}
.chat-header {
background-color: #0088cc;
background-color: #007bb5;
color: white;
padding: 15px;
text-align: center;
font-size: 20px;
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;
@ -97,7 +117,86 @@ body {
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;
}

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

@ -7,7 +7,7 @@ body {
.container {
max-width: 800px;
margin: 30px auto;
margin: 30px auto;
padding: 20px;
background-color: #007bff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@ -16,7 +16,7 @@ body {
h1 {
text-align: center;
color: #fff;
color: #fff;
}
.room-list {
@ -55,7 +55,62 @@ h1 {
cursor: pointer;
transition: background-color 0.3s ease;
}
.add-members-header {
text-align: center;
}
.add-members-footer {
text-align: right;
margin-top: 5px;
}
.add-members-button {
background-color: #218838;
padding: 10px 15px;
font-size: 16px;
color: white;
border: none;
border-radius: 5px;
position: absolute;
margin-left: 502px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.add-members-button:hover {
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 {
width: 93.5%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
.add-member-button {
background-color: #218838;
padding: 10px 15px;
font-size: 16px;
color: white;
border: none;
border-radius: 5px;
position: absolute;
margin-left: -105px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.join-button:hover {
background-color: #0056b3;
}
@ -74,7 +129,7 @@ h1 {
.modal-content {
background-color: #fff;
margin: 10% auto;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
@ -96,19 +151,6 @@ h1 {
text-align: right;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.modal input {
width: 93.5%;
padding: 10px;
@ -134,3 +176,78 @@ h1 {
.create-room-button: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;
}
.overlay .add-members {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 100%;
height: 18%;
position: fixed;
}
.overlay .delete-chat {
background-color: white;
padding: 30px;
border-radius: 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;
}
.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 {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}

38
assets/css/profile.css
View File

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

1
assets/img/add_photo.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="-63 313 512 640" style="enable-background:new -63 313 512 512;" xml:space="preserve"><g><path d="M163.9,571.5l63.7,47.8l31.9-15.9l63.7,38.2v25.5H132v-63.7L163.9,571.5z"/><path d="M323.3,563.5c0,13.2-10.7,23.9-23.9,23.9c-13.2,0-23.9-10.7-23.9-23.9c0-13.2,10.7-23.9,23.9-23.9 C312.6,539.6,323.3,550.3,323.3,563.5z"/><g><path d="M63,407.2h42.7v170.7H63L63,407.2L63,407.2z"/><path d="M-1,471.2h170.7v42.7H-1V471.2L-1,471.2z"/></g><path d="M355.2,475.9H206.3v31.9h148.9V699h-255v-84.1H68.3V699c0,17.5,14.3,31.9,31.9,31.9h255c17.5,0,31.9-14.3,31.9-31.9V507.7 C387,490.2,372.7,475.9,355.2,475.9z"/></g><text x="-63" y="840" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by VM</text><text x="-63" y="845" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

164
assets/js/chat.js
View File

@ -1,44 +1,162 @@
function sendMessage() {
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 = `
<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);
});
}
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 messageElement = document.createElement('div');
messageElement.classList.add('chat-message');
const request = {
'chatId': currentChatID,
'LocalHistoryId': currentHistoryId,
'content': {
'text': message
}
};
const avatarElement = document.createElement('div');
avatarElement.classList.add('avatar');
const response = await fetch("/internalapi/sendMessage", {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(request)
});
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 res = await response.json();
const messageContentElement = document.createElement('div');
messageContentElement.classList.add('message-content');
if (res.update) {
const update = res.update[0];
currentHistoryId = update.HistoryId;
const usernameElement = document.createElement('div');
usernameElement.classList.add('username');
usernameElement.textContent = 'Адель';
const messageElement = document.createElement('div');
messageElement.classList.add('chat-message');
const textElement = document.createElement('div');
textElement.classList.add('text');
textElement.textContent = message;
const avatarElement = document.createElement('div');
avatarElement.classList.add('avatar');
messageContentElement.appendChild(usernameElement);
messageContentElement.appendChild(textElement);
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);
messageElement.appendChild(avatarElement);
messageElement.appendChild(messageContentElement);
const messageContentElement = document.createElement('div');
messageContentElement.classList.add('message-content');
chatMessages.appendChild(messageElement);
const usernameElement = document.createElement('div');
usernameElement.classList.add('username');
usernameElement.textContent = await getUserName();
chatInput.value = '';
chatMessages.scrollTop = chatMessages.scrollHeight;
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();
});

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

@ -1,21 +1,47 @@
let rooms = {};
let roomToDelete = null;
let currentRoom = null;
let currentHistoryId = 0;
function openModal(roomName) {
currentRoom = roomName;
document.getElementById('passwordModal').style.display = 'block';
function openRoom(currentRoom) {
alert('Вы вошли в комнату: ' + currentRoom);
}
function closeModal() {
document.getElementById('passwordModal').style.display = 'none';
function closeAdd() {
document.getElementById('add_members').style.display = 'none';
}
function validatePassword() {
const enteredPassword = document.getElementById('roomPassword').value;
if (enteredPassword === rooms[currentRoom]) {
alert('Вы вошли в комнату: ' + currentRoom);
closeModal();
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('Неверный пароль. Попробуйте снова.');
alert("Не удалось найти выбранную комнату.");
}
}
function addMember() {
const login = document.getElementById('newMemberLogin').value;
if (login) {
alert(`Участник с никнеймом '${login}' добавлен`);
closeAdd();
} else {
alert('Пожалуйста, введите логин участника');
}
}
@ -27,28 +53,56 @@ function closeCreateRoomModal() {
document.getElementById('createRoomModal').style.display = 'none';
}
function createRoom() {
async function createRoom() {
const errorElement = document.getElementById('error');
const roomName = document.getElementById('newRoomName').value.trim();
const roomPassword = document.getElementById('newRoomPassword').value.trim();
if (roomName === '' || roomPassword === '') {
alert('Пожалуйста, заполните все поля.');
const roomNickname = document.getElementById('newRoomNickname').value.trim();
errorElement.style.display = 'none';
errorElement.textContent = '';
if (roomName === '' || roomNickname === '') {
errorElement.textContent = 'Пожалуйста, заполните все поля';
errorElement.style.display = 'block';
return;
}
if (rooms[roomName]) {
alert('Комната с таким названием уже существует.');
return;
}
const request = {
LocalHistoryId: currentHistoryId,
content: {
name: roomName,
nickname: roomNickname
}
};
rooms[roomName] = roomPassword;
addRoomToList(roomName);
closeCreateRoomModal();
try {
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);
rooms[roomNickname] = true;
closeCreateRoomModal();
currentHistoryId = res.update.LocalHistoryId;
window.location.href = '/chat/' + roomNickname;
} else {
throw new Error(res.error || 'Ошибка');
}
} 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();
@ -59,25 +113,74 @@ function addRoomToList(roomName) {
roomItem.innerHTML = `
<span class="room-name">${roomName}</span>
<button class="join-button" onclick="openModal('${roomName}')">Войти</button>
<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>
`;
roomList.appendChild(roomItem);
}
function initializeRoomList() {
Object.keys(rooms).forEach(roomName => {
addRoomToList(roomName);
});
function removeRoomFromList(roomName, roomNickname) {
const roomList = document.querySelector('.room-list');
const roomItem = Array.from(roomList.children).find(item => item.querySelector('.room-name').textContent === roomName);
if (roomItem) {
roomList.removeChild(roomItem);
}
}
initializeRoomList();
async function initializeRoomList() {
try {
const response = await fetch('/internalapi/getChatList', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({})
});
window.onclick = function(event) {
if (event.target === document.getElementById('passwordModal')) {
closeModal();
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', {
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) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('avatar').src = e.target.result;
};
reader.readAsDataURL(file);
}
});
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('avatar').src = e.target.result;
};
reader.readAsDataURL(file);
}
});

104
assets/js/registration.js
View File

@ -1,50 +1,68 @@
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form');
const submitButton = form.querySelector('button[type="submit"]');
const errorElement = document.getElementById('error');
const form = document.querySelector('form');
const submitButton = form.querySelector('button[type="submit"]');
const errorElement = document.getElementById('error');
form.addEventListener('keydown', function(event) {
const activeElement = document.activeElement;
const formElements = Array.from(form.elements);
const currentIndex = formElements.indexOf(activeElement);
form.addEventListener('keydown', function(event) {
const activeElement = document.activeElement;
const formElements = Array.from(form.elements);
const currentIndex = formElements.indexOf(activeElement);
if (activeElement.tagName === 'INPUT') {
if (event.key === 'Enter') {
event.preventDefault();
if (currentIndex === formElements.length - 1) {
submitButton.focus();
} else if (currentIndex !== -1 && formElements[currentIndex + 1]) {
formElements[currentIndex + 1].focus();
}
if (activeElement.tagName === 'INPUT') {
if (event.key === 'Enter') {
event.preventDefault();
if (currentIndex === formElements.length - 1) {
submitButton.focus();
} else if (currentIndex !== -1 && formElements[currentIndex + 1]) {
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) {
if (!validateForm()) {
event.preventDefault();
}
});
function validateForm() {
const username = document.getElementById('username').value.trim();
const login = document.getElementById('login').value.trim();
const password = document.getElementById('password').value.trim();
if (username === '' || login === '' || password === '') {
errorElement.textContent = 'Пожалуйста, заполните все поля';
errorElement.style.display = 'block';
return false;
}
return true;
}
});
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';
}
}
});

4
src/web_chat/iu9_ca_web_chat_lib/run.cpp
View File

@ -29,7 +29,7 @@ namespace iu9cawebchat {
een9::StaticAssetManagerSlaveModule samI;
samI.update({
een9::StaticAssetManagerRule{assets_dir + "/css", "/assets/css", {{".css", "text/css"}} },
een9::StaticAssetManagerRule{assets_dir + "/js", "/assets/js", {{".js", "text/js"}} },
een9::StaticAssetManagerRule{assets_dir + "/js", "/assets/js", {{".js", "text/javascript"}} },
een9::StaticAssetManagerRule{assets_dir + "/img", "/assets/img", {
{".jpg", "image/jpg"}, {".png", "image/png"}, {".svg", "image/svg+xml"}
} },
@ -70,7 +70,7 @@ namespace iu9cawebchat {
return een9::form_http_server_response_200("text/html", page);
};
if (req.uri_path == "/" || req.uri_path == "/list-rooms") {
return rteee("list-rooms", true);
return rteee("list-rooms", false);
}
if (req.uri_path == "/chat") {
return rteee("chat", false);