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

api update

Browse Source
This commit is contained in:
vladimir 2024-08-11 15:17:53 +03:00
parent 6b0770844c
commit 9dfe013cc6
5 changed files with 319 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -186,6 +186,13 @@ h1 {
position: fixed;
}
#error {
color: red;
font-size: 15px;
margin-top: 10px;
text-align: center;
display: none;
}
.close {
color: #aaa;
float: right;

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

@ -24,29 +24,14 @@
</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>
<script src="/assets/js/list-rooms.js"></script>
</body>
</html>

115
assets/js/chat.js
View File

@ -1,8 +1,38 @@
function sendMessage() {
let currentHistoryId = 0;
let currentChatID = null;
document.addEventListener("DOMContentLoaded", async function() {
currentChatID = await getChatID();
});
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');
@ -18,7 +48,7 @@ function sendMessage() {
const usernameElement = document.createElement('div');
usernameElement.classList.add('username');
usernameElement.textContent = 'Адель';
usernameElement.textContent = await getUserName();
const textElement = document.createElement('div');
textElement.classList.add('text');
@ -36,6 +66,87 @@ function sendMessage() {
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 = {
"id": userID
};
const response = await fetch('/internalapi/getUserInfo', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(request)
});
const res = await response.json();
return res.content.name;
}
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;
}
}
function openMembersList() {
document.getElementById("members-list").style.display = "block";
document.getElementById("overlay").style.display = "flex";

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

@ -1,25 +1,13 @@
let rooms = {};
let currentRoom = null;
let currentHistoryId = 0;
function openRoom(currentRoom) {
alert('Вы вошли в комнату: ' + currentRoom);
function openModal(roomName) {
currentRoom = roomName;
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 addMember() {
const login = document.getElementById('newMemberLogin').value;
if (login) {
alert(`Участник с никнеймом '${login}' добавлен`);
closeAdd();
} else {
alert('Пожалуйста, введите логин участника');
}
function closeModal() {
document.getElementById('passwordModal').style.display = 'none';
}
function openCreateRoomModal() {
@ -30,23 +18,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();
if (roomName === '') {
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;
}
rooms[roomName] = true;
addRoomToList(roomName);
closeCreateRoomModal();
}
function addRoomToList(roomName) {
const request = {
LocalHistoryId: currentHistoryId,
content: {
name: roomName,
nickname: roomNickname
}
};
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);
closeCreateRoomModal();
currentHistoryId = res.update.LocalHistoryId;
window.location.href = '/chat/' + roomNickname;
} else {
throw new Error(res.error || 'Ошибка');
}
} catch (error) {
alert('Ошибка создания чата: ' + error.message);
}
}
function addRoomToList(roomName, roomNickname) {
const roomList = document.querySelector('.room-list');
const existingRoomItem = Array.from(roomList.children).find(item => item.querySelector('.room-name').textContent === roomName);
if (existingRoomItem) {
existingRoomItem.remove();
@ -54,32 +75,54 @@ function addRoomToList(roomName) {
const roomItem = document.createElement('li');
roomItem.classList.add('room-item');
roomItem.innerHTML = `
<span class="room-name">${roomName}</span>
<button class="add-members-button" onclick="openAdd()">Добавить участников</button>
<button class="join-button" onclick="openRoom('${roomName}')">Войти</button>
<button class="join-button" onclick="window.location.href = '/chat/${roomNickname}'">Войти</button>
`;
roomList.appendChild(roomItem);
}
function initializeRoomList() {
Object.keys(rooms).forEach(roomName => {
addRoomToList(roomName);
async function initializeRoomList() {
try {
const response = await fetch('/internalapi/getChatList', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({})
});
}
initializeRoomList();
const res = await response.json();
window.onclick = function(event) {
if (event.target === document.getElementById('createRoomModal')) {
closeCreateRoomModal();
}
}
document.getElementById('newRoomName').addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
createRoom();
}
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;
}
document.addEventListener('DOMContentLoaded', initializeRoomList);

34
assets/js/registration.js
View File

@ -29,22 +29,40 @@ document.addEventListener('DOMContentLoaded', function() {
});
form.addEventListener('submit', function(event) {
if (!validateForm()) {
event.preventDefault();
}
validateForm();
});
function validateForm() {
const username = document.getElementById('username').value.trim();
const login = document.getElementById('login').value.trim();
const password = document.getElementById('password').value.trim();
async function validateForm() {
const name = document.getElementById('name').value.trim();
const nickname = document.getElementById('nickname').value.trim();
if (username === '' || login === '' || password === '') {
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';
}
return true;
}
});