merge with Chatte

frontend/static/js/views/Chat.js

@@ -1,10 +1,10 @@
-import AbstractAuthentifiedView from "./AbstractAuthentifiedView.js";
+import AbstractView from "./AbstractView.js";
 
-export default class extends AbstractAuthentifiedView {
+export default class extends AbstractView {
     constructor(params) {
         super(params, "Chat");
 
-		let url = `wss://${window.location.host}/ws/socket-server/`
+		let url = `ws://${window.location.host}/ws/chat/`
 
 		this.chatSocket = new WebSocket(url)
 		this.chatSocket.onmessage = function(e){
@@ -44,7 +44,7 @@ export default class extends AbstractAuthentifiedView {
 			<h1>Chat</h1>
 
 			<form id="form">
-				<input type="text" name="message" />
+				<input type="text" name="message" placeholder="message"/>
 			</form>
 
 			<div id="messages">

frontend/static/js/views/Search.js

@@ -0,0 +1,208 @@
+import AbstractView from "./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.addEventListener("input", this.users)
+
+		let chat_input = document.getElementById("input_chat");
+		//chat_input.addEventListener("keydown", this.chat_manager)
+
+		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) => {
+			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.addEventListener("click", 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)
+							return this.hideChat();
+
+						client.channel.disconnect();
+					}
+
+					client.channel = await client.channels.createChannel([client.me.user_id , user.user_id], this.chat);
+					this.chat();
+				});
+				add_chat.appendChild(document.createTextNode("Chat"));
+				new_user.appendChild(add_chat);
+				
+				/*new_user.appendChild(document.createTextNode(" "));
+
+				let remove = document.createElement("a");
+				remove.addEventListener("click", async () => {
+					if (client.me.user_id != user.user_id) {
+						await client.channels.deleteChannel([client.me.user_id , user.user_id]);
+						if 
+						client.channel.disconnect();
+						client.channel = undefined;
+						this.chat()
+					}
+				});
+				remove.appendChild(document.createTextNode("Remove"));
+				new_user.appendChild(remove);*/
+			}
+			
+			// 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 logged = await client.isAuthentificate();
+		let reload = document.getElementById("messages");
+		if (reload != null)
+			reload.remove();
+
+		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.createElement("div");
+		messages.id = "messages";
+		if (document.getElementById("input_chat") == null)
+			chat.appendChild(messages);
+		else
+			document.getElementById("input_chat").before(messages);
+
+		// 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.addEventListener("keydown", async () => {
+				if (event.keyCode == 13 && client.channel != undefined) {
+					//let chat_input = document.getElementById("input_chat");
+					let chat_text = chat_input.value;
+
+					await client.channel.sendMessageChannel(chat_text)
+
+					// Reset
+					chat_input.value = "";
+				}
+			});
+		}
+
+		// nom des membres du chat
+		let users = await client.profiles.all();
+		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);
+
+		// les messages
+		client.channel.messages.forEach((message) => {
+			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);
+		});
+
+	}
+
+	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>
+
+        `;
+    }
+}

frontend/static/js/views/accounts/RegisterView.js

@@ -52,4 +52,4 @@ export default class extends AbstractNonAuthentifiedView {
 			</div>
         `;
     }
-}
+}

frontend/static/js/views/profiles/ProfilePageView.js

@@ -26,4 +26,4 @@ export default class extends AbstractView {
 		    <a id="username"></a>
         `;
     }
-}
+}

frontend/static/js/views/profiles/ProfilesView.js

@@ -1,40 +0,0 @@
-import AbstractView from "../AbstractView.js";
-import { client } from "../../index.js"
-
-export default class extends AbstractView {
-    constructor(params) {
-        super(params, "Profiles");
-    }
-
-    async postInit()
-    {
-        let profiles = await client.profiles.all()
-		let profile_list_element = document.getElementById("profile-list")
-
-		profiles.forEach((profile) => {
-			let profile_element = document.createElement("div");
-			profile_element.className = "item";
-			
-			let avatar = document.createElement("img");
-			avatar.src = profile.avatar_url;
-
-			let username = document.createElement("a");
-			username.href = `/profiles/${profile.user_id}`;
-			username.appendChild(document.createTextNode(profile.username));
-
-			profile_element.appendChild(avatar);
-			profile_element.appendChild(username);
-
-			profile_list_element.appendChild(profile_element)
-		});
-    }
-
-    async getHtml() {
-        return `
-			<link rel="stylesheet" href="/static/css/profiles/profiles.css">
-		    <div id="profile-list">
-			
-			</div>
-        `;
-    }
-}