master #6
@ -19,19 +19,6 @@
|
||||
<body>
|
||||
{% PUT chat.pass pres userinfo openedchat initial_chatUpdResp %}
|
||||
<!-- TODO AAAAA-->
|
||||
<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>
|
||||
<script src="/assets/js/chat.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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 = `
|
||||
<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 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();
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user