ft_transcendence/frontend/static/js/views/Search.js

import AbstractView from "./abstracts/AbstractView.js";
import {client} from "../index.js";
import {Message} from "../api/chat/message.js"

export default class extends AbstractView {
    constructor(params) {
        super(params, "Search");
    }

	async postInit() {

		let search = document.getElementById("input_user");
		search.oninput = this.users;

		let chat_input = document.getElementById("input_chat");
		//chat_input.addEventListener("keydown", this.chat_manager)

		this.last_add_chat = undefined;
		this.users();
		this.chat();

	}

	async users() {

		let search = document.getElementById("input_user").value.toLowerCase();
		
		let logged = await client.isAuthentificate();

		let users = await client.profiles.all();
		let list_users = document.getElementById('list_users');
		list_users.innerHTML = "";

		users.filter(user => user.username.toLowerCase().startsWith(search) == true).forEach((user) => {

			if (user.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.href = `/profiles/${user.user_id}`;
			username.appendChild(document.createTextNode(user.username));
			new_user.appendChild(username);

			// space
			new_user.appendChild(document.createTextNode(" "));

			// chat
			if (logged && client.me.user_id != user.user_id) {
				let add_chat = document.createElement("a");
				add_chat.id = "add_chat_off";
				add_chat.onclick = async () => {
					if (client.channel != undefined) {
						client.channel.members_id.forEach((member_id) => {
							if (member_id == user.user_id)
								client.channel = undefined;
						});

						if (client.channel == undefined) {
							add_chat.id = "add_chat_off";
							this.last_add_chat = undefined;
							return this.hideChat();
						}

						client.channel.disconnect();
					}

					client.channel = await client.channels.createChannel([client.me.user_id , user.user_id], this.chat);
					this.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_url;
			new_user.appendChild(img);


			list_users.appendChild(new_user);
		});
		//console.log(list_users);

	}

	async chat() {

		let users = await client.profiles.all();
		let logged = await client.isAuthentificate();
		/*let reload = document.getElementById("messages");
		if (reload != null)
			reload.remove();*/

		let reload = document.getElementById("members");
		if (reload != null)
			reload.remove();

		if (client.channel == undefined || !logged)
			return ;

		let chats = document.getElementById("chats");

		if (document.getElementById("chat") == null) {
			let chat = document.createElement("div");
			chat.id = "chat";
			chats.appendChild(chat);
		}

		
		// div des messages
		let messages = document.getElementById("messages");
		if (messages == null) {
			messages = document.createElement("div");
			messages.id = "messages";
			if (document.getElementById("input_chat") == null)
				chat.appendChild(messages);
			else
				document.getElementById("input_chat").before(messages);
		}

		// les messages, réecriture seulement du dernier 
		let i = 0;
		client.channel.messages.forEach((message) => {
			if (messages.children[i] == null || message.content != messages.children[i].innerText) {
				let text = document.createElement("p");
				text.appendChild(document.createTextNode(message.content));
				if (message.author_id == client.me.user_id)
					text.id = "you";
				else
					text.id = "other";

				messages.appendChild(text);
			}
			i++;
		});

		// Input pour rentrer un message
		if (document.getElementById("input_chat") == null) {
			let chat_input = 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);
			
			chat_input.onkeydown = async () => {
				if (event.keyCode == 13 && client.channel != undefined) {
					//let chat_input = document.getElementById("input_chat");
					let chat_text = chat_input.value;

					let receivers_id = [];
					client.channel.members_id.forEach((member_id) => {
						if (member_id != client.me.user_id)
							receivers_id.push(users.filter(user => user.user_id == member_id)[0].user_id);
					});
					await client.channel.sendMessageChannel(chat_text, receivers_id)

					// Reset
					chat_input.value = "";
				}
			};
		}

		// nom des membres du chat
		let members = document.createElement("h2");
		members.id = "members";
		let usernames = "";
		client.channel.members_id.forEach((member_id) => {
			if (member_id != client.me.user_id) {
				if (usernames.length > 0)
					usernames += ", ";
				usernames += (users.filter(user => user.user_id == member_id)[0].username);
			}
		});
		members.appendChild(document.createTextNode(usernames));
		messages.before(members);


		// Scroll to the bottom of messages
		messages.scrollTop = messages.scrollHeight;

	}

	async hideChat() {

		let close = document.getElementById("chat");
		if (close != null)
			close.remove();

	}

	async leavePage() {
		if (client.channel != undefined)
			client.channel.disconnect();
		client.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>
        `;
    }
}