chat/views.py

@@ -61,7 +61,7 @@ class ChatsView(APIView):
 						continue
 					for member2 in MemberModel.objects.filter(member_id=user_id2):
 						if (member1.channel_id == member2.channel_id):
-							messages = MessageModel.objects.filter(channel_id=member1.channel_id).order_by("time")
+							messages = MessageModel.objects.filter(channel_id=member1.channel_id)
 							messages = serializers.serialize("json", messages) 
 							return Response({'channel_id': member1.channel_id, 'messages':messages}, status=status.HTTP_200_OK)
 							

frontend/static/css/index.css

@@ -1,7 +1,7 @@
 body {
     margin: 10;
     font-family: 'Quicksand', sans-serif;
-    font-size: 3vh;
+    font-size: 18px;
 }
 
 a {

frontend/static/css/search.css

@@ -1,12 +1,11 @@
 #app img
 {
-	max-height: 10vh;
-	max-width: 10vh;
+	max-height: 100px;
+	max-width: 100px;
 }
 
 #app ul
 {
-	font-size: 2vh;
 	margin: 5px 0 0 0;
 	padding: 0 0 0 0;
 	list-style-type: none;
@@ -23,34 +22,17 @@
 	text-align: left;
 }
 #app #users {
-	margin-right: 5vh;
+	margin-right: 50px;
 }
 
 #app #chat {
 	position: relative;
-	max-height: 80vh;
+	height: 100%;
 	width: 60%;
-	/*border: 2px	solid green;*/
+	/*border: 4px	solid green;*/
 	overflow:hidden;
-}
-
-#app #add_chat_off {
-	text-decoration: underline;
-}
-
-#app #messages {
-	max-height: 50vh;
-	overflow: scroll;
-	overflow-y: scroll;
-	overflow-x: hidden;
-	font-size: 2vh;
-}
-
-#app #input_user{
-	color: green;
-	width: 20vh;
-	height: 3vh;
-	font-size: 2vh;
+	/*overflow-y: scroll;
+	overflow-x: hidden;*/
 }
 
 #app #input_chat{
@@ -60,10 +42,8 @@
 	width: 100%;
 	border: none;
 	outline: none;
-	border-bottom: 0.5vh	solid green;
+	border-bottom: 2px	solid green;
 	caret-color: green;
-	color: green;
-	font-size: 2vh;
 }
 
 #app #you {

frontend/static/js/index.js

@@ -3,6 +3,7 @@ import { Client } from "./api/client.js";
 import LoginView from "./views/accounts/LoginView.js";
 import Dashboard from "./views/Dashboard.js";
 import Search from "./views/Search.js";
+import Chat from "./views/Chat.js";
 import HomeView from "./views/HomeView.js";
 import RegisterView from "./views/accounts/RegisterView.js";
 import LogoutView from "./views/accounts/LogoutView.js";
@@ -43,6 +44,7 @@ const router = async (uri) => {
         { path: "/logout", view: LogoutView },
         { path: "/register", view: RegisterView },
         { path: "/search", view: Search },
+        { path: "/chat", view: Chat },
         { path: "/home", view: HomeView },
         { path: "/me", view: MeView },
         { path: "/matchmaking", view: MatchMakingView },

frontend/static/js/views/Chat.js

@@ -0,0 +1,56 @@
+import AbstractView from "./AbstractView.js";
+
+export default class extends AbstractView {
+    constructor(params) {
+        super(params, "Chat");
+
+		let url = `ws://${window.location.host}/ws/chat/`
+
+		this.chatSocket = new WebSocket(url)
+		this.chatSocket.onmessage = function(e){
+			let data = JSON.parse(e.data)
+			console.log('Data:', data)
+			if (data.type === 'chat') {
+				let messages = document.getElementById('messages')
+
+				let username = data.username === null || data.username.length <= 0 ? "NoName" : data.username;
+				messages.insertAdjacentHTML('beforeend', `
+					<div><p>${username}: ${data.message}</p></div>
+				`)
+			}
+
+		}
+    }
+
+	async postInit() {
+		let form = document.getElementById('form')
+		form.addEventListener('submit', (e)=> {
+			e.preventDefault()
+			let message = e.target.message.value
+			this.chatSocket.send(JSON.stringify({
+				'message':message
+			}))
+			form.reset()
+		})
+
+	}
+
+	async leavePage() {
+		this.chatSocket.close();
+	}
+
+    async getHtml() {
+        return `
+			<h1>Chat</h1>
+
+			<form id="form">
+				<input type="text" name="message" placeholder="message"/>
+			</form>
+
+			<div id="messages">
+
+			</div>
+
+        `;
+    }
+}

frontend/static/js/views/Search.js

@@ -45,9 +45,7 @@ export default class extends AbstractView {
 			// chat
 			if (logged && client.me.user_id != user.user_id) {
 				let add_chat = document.createElement("a");
-				add_chat.id = "add_chat_off";
 				add_chat.addEventListener("click", async () => {
-					add_chat.id = "add_chat_off";
 					if (client.channel != undefined) {
 						client.channel.members_id.forEach((member_id) => {
 							if (member_id == user.user_id)
@@ -62,20 +60,24 @@ export default class extends AbstractView {
 
 					client.channel = await client.channels.createChannel([client.me.user_id , user.user_id], this.chat);
 					this.chat();
-					add_chat.id = "add_chat_on";
 				});
 				add_chat.appendChild(document.createTextNode("Chat"));
 				new_user.appendChild(add_chat);
 				
-				new_user.appendChild(document.createTextNode(" "));
+				/*new_user.appendChild(document.createTextNode(" "));
 
-				let block = document.createElement("a");
-				block.addEventListener("click", async () => {
+				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()
 					}
 				});
-				block.appendChild(document.createTextNode("Block"));
-				new_user.appendChild(block);
+				remove.appendChild(document.createTextNode("Remove"));
+				new_user.appendChild(remove);*/
 			}
 			
 			// break line