dockered
This commit is contained in:
AdrienLSH
350
django/frontend/static/js/views/Search.js
Normal file
350
django/frontend/static/js/views/Search.js
Normal file
@ -0,0 +1,350 @@
|
||||
import AbstractView from "./abstracts/AbstractView.js";
|
||||
import { client, lang } from "../index.js";
|
||||
import Channels from '../api/chat/Channels.js'
|
||||
|
||||
export default class extends AbstractView {
|
||||
constructor(params) {
|
||||
super(params, 'SearchWindowTitle');
|
||||
this.channelManager = new Channels(client);
|
||||
}
|
||||
|
||||
async postInit() {
|
||||
this.profiles = await client.profiles.all();
|
||||
this.logged = await client.isAuthenticated();
|
||||
|
||||
this.logged = await client.isAuthenticated();
|
||||
this.profiles = await client.profiles.all();
|
||||
|
||||
document.getElementById('username-input').oninput = () => this.display_users(this.logged, this.profiles);
|
||||
|
||||
let search = document.getElementById("input_user");
|
||||
if (search != undefined)
|
||||
search.oninput = () => this.display_users();
|
||||
|
||||
this.last_add_chat = undefined;
|
||||
|
||||
this.display_users();
|
||||
this.display_chat();
|
||||
}
|
||||
|
||||
async display_users() {
|
||||
|
||||
const search = document.getElementById("username-input").value.toLowerCase();
|
||||
|
||||
let list_users = document.getElementById('user-list');
|
||||
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 (this.channelManager.channel != undefined) {
|
||||
|
||||
// Permet de savoir si c'est le même channel
|
||||
// Check to know if it's the same channel
|
||||
this.channelManager.channel.members_id.forEach((member_id) => {
|
||||
if (member_id == user.id)
|
||||
this.channelManager.channel = undefined;
|
||||
});
|
||||
if (this.channelManager.channel == undefined) {
|
||||
add_chat.id = "add_chat_off";
|
||||
this.last_add_chat = undefined;
|
||||
return await this.hide_chat();
|
||||
}
|
||||
|
||||
await this.channelManager.channel.disconnect();
|
||||
}
|
||||
await this.channelManager.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 (this.channelManager.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("chat-input") || document.createElement("input");
|
||||
chat_input.id="chat_input";
|
||||
chat_input.type="text";
|
||||
chat_input.name="message";
|
||||
chat_input.placeholder="message bozo";
|
||||
chat_input.maxLength=255;
|
||||
chat.appendChild(chat_input);
|
||||
|
||||
let members_id = this.channelManager.channel.members_id;
|
||||
|
||||
chat_input.onkeydown = async () => {
|
||||
if (event.keyCode == 13 && this.channelManager.channel != undefined) {
|
||||
//let chat_input = document.getElementById("chat-input");
|
||||
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 this.channelManager.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
|
||||
this.channelManager.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));
|
||||
console.log(message.author, client.me.id)
|
||||
text.id = message.author === client.me.id ? "you" : "other";
|
||||
|
||||
messages.appendChild(text);
|
||||
});
|
||||
|
||||
return messages;
|
||||
}
|
||||
|
||||
async reload_display_messages() {
|
||||
let messages = document.getElementById("messages");
|
||||
|
||||
let i = 0;
|
||||
this.channelManager.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 === client.me.id ? "you" : "other";
|
||||
|
||||
messages.appendChild(text);
|
||||
}
|
||||
i++;
|
||||
});
|
||||
|
||||
messages.scrollTop = messages.scrollHeight;
|
||||
}
|
||||
|
||||
async display_members(chat) {
|
||||
|
||||
let members_id = this.channelManager.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 = this.channelManager.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 (this.channelManager.channel != undefined)
|
||||
this.channelManager.channel.disconnect();
|
||||
this.channelManager.channel = undefined;
|
||||
|
||||
}
|
||||
|
||||
async getHtml() {
|
||||
return `
|
||||
<link rel="stylesheet" href="/static/css/search.css">
|
||||
|
||||
<div id="chats">
|
||||
<div id="users">
|
||||
<input id="username-input" type="text" name="message" placeholder="userbozo"/>
|
||||
<ul id='user-list'>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user