Merge with Xamora

frontend/static/js/views/Search.js

@@ -10,12 +10,12 @@ export default class extends AbstractView {
 	async wait_get_online_users() {
 		return new Promise((resolve) => {
 			const checkInterval = setInterval(() => {
-				//console.log(client.notice.data["online"].length);
-				if (client.notice.data["online"].length > 0) {
+				console.log(client.notice.data["online"]);
+				if (Object.keys(client.notice.data["online"]).length > 0) {
 					clearInterval(checkInterval);
 					resolve();
 				}
-			}, 100);
+			}, 1);
 		});
 	}
 
@@ -29,11 +29,13 @@ export default class extends AbstractView {
 			return console.log("Error");
 
 		//await client.notice.getOnlineUser();
-		await this.wait_get_online_users();
+		//await this.wait_get_online_users();
 		client.notice.rewrite_usernames = this.rewrite_usernames;
+		client.notice.rewrite_invite = this.display_invite;
 
 		let search = document.getElementById("input_user");
-		search.oninput = () => this.display_users(logged, profiles);
+		if (search != undefined)
+			search.oninput = () => this.display_users(logged, profiles);
 
 		let chat_input = document.getElementById("input_chat");
 		//chat_input.addEventListener("keydown", this.display_chat_manager)
@@ -66,7 +68,12 @@ export default class extends AbstractView {
 			username.setAttribute('data-link', '');
 			username.id = `username${user.id}`
 			username.href = `/profiles/${user.username}`;
-			username.style.color = client.notice.data["online"].includes(user.id.toString()) ? "green" : "red";
+			if (user.id == client.me.id)
+				username.style.color = "green";
+			else {
+				let online = client.notice.data["online"][user.id];
+				username.style.color = online !== undefined ? online : "gray";
+			}
 			username.appendChild(document.createTextNode(user.username));
 			new_user.appendChild(username);
 
@@ -135,8 +142,14 @@ export default class extends AbstractView {
 
 		profiles.filter(user => user.username.toLowerCase().startsWith(search) == true).forEach((user) => {
 			let username = document.getElementById(`username${user.id}`);
-			if (username !== null)
-				username.style.color = client.notice.data["online"].includes(user.id.toString()) ? "green" : "red";
+			if (username !== null) {
+				if (user.id == client.me.id)
+					username.style.color = "green";
+				else {
+					let online = client.notice.data["online"][user.id];
+					username.style.color = online !== undefined ? online : "gray";
+				}
+			}
 		});
 
 	}
@@ -175,13 +188,15 @@ export default class extends AbstractView {
 		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 = [];
-					client.channels.channel.members_id.forEach((member_id) => {
+					members_id.forEach((member_id) => {
 						if (member_id != client.me.id)
 							receivers_id.push(profiles.filter(user => user.id == member_id)[0].id);
 					});
@@ -196,7 +211,7 @@ export default class extends AbstractView {
 		// Scroll to the bottom of messages
 		messages.scrollTop = messages.scrollHeight;
 
-		this.display_invite(chat);
+		this.display_invite();
 
 	}
 
@@ -242,33 +257,86 @@ export default class extends AbstractView {
 	}
 
 	async display_members(chat, profiles) {
+
+		let members_id = client.channels.channel.members_id;
+
 		let members = document.createElement("h2");
 		members.id = "members";
 		let usernames = "";
-		client.channels.channel.members_id.forEach((member_id) => {
+		members_id.forEach((member_id) => {
 			if (member_id != client.me.id) {
 				if (usernames.length > 0)
 					usernames += ", ";
 				usernames += (profiles.filter(user => user.id == member_id)[0].username);
 			}
 		});
-		members.appendChild(document.createTextNode(usernames));
+		members.textContent = usernames;
 		chat.appendChild(members);
 
+
 		return members
 	}
 
-	async display_invite(chat, profiles) {
+	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);
 
-		// Button to send invite to play
 		let invite = document.getElementById("invite") || document.createElement("button");
-		invite.id = "invite";
-		invite.innerText = "invite";
-		invite.onclick = async () => {
-			await client.notice.sendInvite(client.me.id, 
-				client.channels.channel.members_id.filter(id => id !== client.me.id));
-		};
-		chat.appendChild(invite);
+		let yes = document.getElementById("yes") || document.createElement("button");
+		let no = document.getElementById("no") || document.createElement("button");
+
+		let invitedBy = undefined;
+		for (let x in others) {
+			if (client.notice.data["invited"].includes(others[x])) {
+				invitedBy = others[x];
+			}
+		}
+
+		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);
+		}
 
 	}