348 lines
8.9 KiB
JavaScript
348 lines
8.9 KiB
JavaScript
import AbstractView from "./abstracts/AbstractView.js";
|
|
import { client, lang } from "../index.js";
|
|
import {Message} from "../api/chat/Message.js";
|
|
|
|
export default class extends AbstractView {
|
|
constructor(params) {
|
|
super(params, 'SearchWindowTitle');
|
|
}
|
|
|
|
async postInit() {
|
|
|
|
this.logged = await client.isAuthenticated();
|
|
this.profiles = await client.profiles.all();
|
|
|
|
let search = document.getElementById("input_user");
|
|
if (search != undefined)
|
|
search.oninput = () => this.display_users();
|
|
|
|
let chat_input = document.getElementById("input_chat");
|
|
|
|
this.last_add_chat = undefined;
|
|
|
|
this.display_users();
|
|
this.display_chat();
|
|
|
|
}
|
|
|
|
async display_users() {
|
|
|
|
let search = document.getElementById("input_user").value.toLowerCase();
|
|
|
|
let list_users = document.getElementById('list_users');
|
|
list_users.innerHTML = "";
|
|
|
|
this.profiles.filter(user => user.username.toLowerCase().startsWith(search) == true).forEach(async (user) => {
|
|
|
|
if (user.id == null) {
|
|
console.log("list User one with id null;");
|
|
return;
|
|
}
|
|
|
|
var new_user = document.createElement("li");
|
|
|
|
// username
|
|
let username = document.createElement("a");
|
|
username.setAttribute('data-link', '');
|
|
username.id = `username${user.id}`;
|
|
username.href = `/profiles/${user.username}`;
|
|
if (this.logged && user.id == client.me.id)
|
|
username.style.color = "green";
|
|
else {
|
|
let profile = await client.profiles.getProfileId(user.id);
|
|
let online = profile.online;
|
|
if (online == undefined)
|
|
username.style.color = "gray";
|
|
else if (online == true)
|
|
username.style.color = "green";
|
|
else
|
|
username.style.color = "red";
|
|
}
|
|
username.appendChild(document.createTextNode(user.username));
|
|
new_user.appendChild(username);
|
|
|
|
// space
|
|
new_user.appendChild(document.createTextNode(" "));
|
|
|
|
// button chat
|
|
if (this.logged && client.me.id != user.id) {
|
|
let add_chat = document.createElement("a");
|
|
add_chat.id = "add_chat_off";
|
|
add_chat.onclick = async () => {
|
|
if (client.channels.channel != undefined) {
|
|
|
|
// Permet de savoir si c'est le même channel
|
|
// Check to know if it's the same channel
|
|
client.channels.channel.members_id.forEach((member_id) => {
|
|
if (member_id == user.id)
|
|
client.channels.channel = undefined;
|
|
});
|
|
if (client.channels.channel == undefined) {
|
|
add_chat.id = "add_chat_off";
|
|
this.last_add_chat = undefined;
|
|
return await this.hide_chat();
|
|
}
|
|
|
|
await client.channels.channel.disconnect();
|
|
}
|
|
client.channels.channel = await client.channels.createChannel([client.me.id , user.id], () => this.reload_display_messages());
|
|
this.display_chat();
|
|
if (this.last_add_chat != undefined)
|
|
this.last_add_chat.id = "add_chat_off";
|
|
this.last_add_chat = add_chat;
|
|
add_chat.id = "add_chat_on";
|
|
};
|
|
add_chat.appendChild(document.createTextNode("Chat"));
|
|
new_user.appendChild(add_chat);
|
|
|
|
new_user.appendChild(document.createTextNode(" "));
|
|
|
|
}
|
|
|
|
// break line
|
|
new_user.appendChild(document.createElement("br"));
|
|
|
|
// avatar
|
|
var img = document.createElement("img");
|
|
img.src = user.avatar;
|
|
new_user.appendChild(img);
|
|
|
|
|
|
list_users.appendChild(new_user);
|
|
});
|
|
|
|
}
|
|
|
|
async display_specific_user(id) {
|
|
|
|
let user = document.getElementById("username" + id);
|
|
if (user == undefined)
|
|
return ;
|
|
|
|
if (this.logged && id == client.me.id)
|
|
user.style.color = "green";
|
|
else {
|
|
let profile = await client.profiles.getProfileId(id);
|
|
let online = profile.online;
|
|
if (online == undefined)
|
|
user.style.color = "gray";
|
|
else if (online == true)
|
|
user.style.color = "green";
|
|
else
|
|
user.style.color = "red";
|
|
}
|
|
}
|
|
|
|
async display_chat()
|
|
{
|
|
let reloads = ["members", "messages"];
|
|
reloads.forEach(reload => {
|
|
if (document.getElementById(reload) != undefined)
|
|
document.getElementById(reload).remove();
|
|
});
|
|
|
|
if (client.channels.channel === undefined || this.logged === false)
|
|
return ;
|
|
|
|
let chats = document.getElementById("chats");
|
|
|
|
if (document.getElementById("chat") == null) {
|
|
let chat = document.createElement("div");
|
|
chat.id = "chat";
|
|
chats.appendChild(chat);
|
|
}
|
|
|
|
// nom des membres du channel
|
|
let members = await this.display_members(chat);
|
|
|
|
// L'affiche des messages
|
|
let messages = await this.display_messages(chat);
|
|
|
|
// Input pour rentrer un message
|
|
let chat_input = document.getElementById("input_chat") || document.createElement("input");
|
|
chat_input.id="input_chat";
|
|
chat_input.type="text";
|
|
chat_input.name="message";
|
|
chat_input.placeholder="message bozo";
|
|
chat_input.maxLength=255;
|
|
chat.appendChild(chat_input);
|
|
|
|
let members_id = client.channels.channel.members_id;
|
|
|
|
chat_input.onkeydown = async () => {
|
|
if (event.keyCode == 13 && client.channels.channel != undefined) {
|
|
//let chat_input = document.getElementById("input_chat");
|
|
let chat_text = chat_input.value;
|
|
|
|
let receivers_id = [];
|
|
members_id.forEach((member_id) => {
|
|
if (member_id != client.me.id)
|
|
receivers_id.push(this.profiles.filter(user => user.id == member_id)[0].id);
|
|
});
|
|
await client.channels.channel.sendMessageChannel(chat_text, receivers_id);
|
|
// Reset
|
|
chat_input.value = "";
|
|
}
|
|
};
|
|
chat_input.focus();
|
|
|
|
|
|
// Scroll to the bottom of messages
|
|
messages.scrollTop = messages.scrollHeight;
|
|
|
|
this.display_invite();
|
|
|
|
}
|
|
|
|
async display_messages(chat) {
|
|
|
|
let messages = document.createElement("div");
|
|
|
|
messages.id = "messages";
|
|
chat.appendChild(messages);
|
|
|
|
// les messages, réecriture seulement du dernier
|
|
client.channels.channel.messages.forEach((message) => {
|
|
let text = document.createElement("p");
|
|
let date = new Date(message.time);
|
|
text.title = date.toLocaleString("fr-FR");
|
|
text.appendChild(document.createTextNode(message.content));
|
|
text.id = message.author_id === client.me.id ? "you" : "other";
|
|
|
|
messages.appendChild(text);
|
|
});
|
|
|
|
return messages;
|
|
}
|
|
|
|
async reload_display_messages() {
|
|
let messages = document.getElementById("messages");
|
|
|
|
let i = 0;
|
|
client.channels.channel.messages.forEach((message) => {
|
|
if (messages.children[i] == null || message.content != messages.children[i].innerText) {
|
|
let text = document.createElement("p");
|
|
let date = new Date(message.time);
|
|
text.title = date.toLocaleString("fr-FR");
|
|
text.appendChild(document.createTextNode(message.content));
|
|
text.id = message.author_id === client.me.id ? "you" : "other";
|
|
|
|
messages.appendChild(text);
|
|
}
|
|
i++;
|
|
});
|
|
|
|
messages.scrollTop = messages.scrollHeight;
|
|
}
|
|
|
|
async display_members(chat) {
|
|
|
|
let members_id = client.channels.channel.members_id;
|
|
|
|
let members = document.createElement("h2");
|
|
members.id = "members";
|
|
let usernames = "";
|
|
members_id.forEach((member_id) => {
|
|
if (member_id != client.me.id) {
|
|
if (usernames.length > 0)
|
|
usernames += ", ";
|
|
usernames += (this.profiles.filter(user => user.id == member_id)[0].username);
|
|
}
|
|
});
|
|
members.textContent = usernames;
|
|
chat.appendChild(members);
|
|
|
|
|
|
return members;
|
|
}
|
|
|
|
async display_invite() {
|
|
|
|
let chat = document.getElementById("chat");
|
|
|
|
if (chat == undefined)
|
|
return ;
|
|
|
|
let members_id = client.channels.channel.members_id;
|
|
let others = members_id.filter(id => id !== client.me.id);
|
|
|
|
let invite = document.getElementById("invite") || document.createElement("button");
|
|
let yes = document.getElementById("yes") || document.createElement("button");
|
|
let no = document.getElementById("no") || document.createElement("button");
|
|
|
|
let invitedBy;
|
|
|
|
if (invitedBy == undefined) {
|
|
|
|
if (yes && no) {
|
|
yes.remove();
|
|
no.remove();
|
|
}
|
|
|
|
// Button to send invite to play
|
|
invite.id = "invite";
|
|
invite.style.background = "orange";
|
|
invite.innerText = "invite";
|
|
invite.title = "Invite to play a game";
|
|
invite.onclick = async () => {
|
|
await client.notice.send_invite(others);
|
|
};
|
|
chat.appendChild(invite);
|
|
}
|
|
else {
|
|
|
|
if (invite)
|
|
invite.remove();
|
|
|
|
yes.id = "yes";
|
|
yes.style.background = "green";
|
|
yes.title = "Accept to play a game";
|
|
yes.onclick = async () => {
|
|
await client.notice.accept_invite(invitedBy);
|
|
};
|
|
|
|
no.id = "no";
|
|
no.style.background = "red";
|
|
no.title = "Refuse to play a game";
|
|
no.onclick = async () => {
|
|
await client.notice.refuse_invite(invitedBy);
|
|
};
|
|
|
|
chat.appendChild(yes);
|
|
chat.appendChild(no);
|
|
}
|
|
|
|
}
|
|
|
|
async hide_chat() {
|
|
|
|
let closes = ["chat", "invite"];
|
|
closes.forEach(close => {
|
|
if (document.getElementById(close))
|
|
document.getElementById(close).remove();
|
|
|
|
});
|
|
}
|
|
|
|
async leavePage() {
|
|
if (client.channels.channel != undefined)
|
|
client.channels.channel.disconnect();
|
|
client.channels.channel = undefined;
|
|
|
|
}
|
|
|
|
async getHtml() {
|
|
return `
|
|
<link rel="stylesheet" href="/static/css/search.css">
|
|
|
|
<div id="chats">
|
|
<div id="users">
|
|
<input id="input_user" type="text" name="message" placeholder="userbozo"/>
|
|
<ul id="list_users">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|