master #6
@ -19,19 +19,6 @@
|
|||||||
<body>
|
<body>
|
||||||
{% PUT chat.pass pres userinfo openedchat initial_chatUpdResp %}
|
{% PUT chat.pass pres userinfo openedchat initial_chatUpdResp %}
|
||||||
<!-- TODO AAAAA-->
|
<!-- 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>
|
<script src="/assets/js/chat.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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