From cfb46db181612d42d0be02789db6203f7d9a6db0 Mon Sep 17 00:00:00 2001
From: tomsmeding <tom.smeding@gmail.com>
Date: Mon, 27 Mar 2017 22:29:30 +0200
Subject: webclient: Basic messaging possible

---
 webclient/client.html | 178 ++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 150 insertions(+), 28 deletions(-)

(limited to 'webclient')

diff --git a/webclient/client.html b/webclient/client.html
index 3472cb8..2305c17 100644
--- a/webclient/client.html
+++ b/webclient/client.html
@@ -7,13 +7,13 @@
 var sock=null,username=null;
 var roomlist=[":console"];
 var currentroom=":console";
-var roomlogs={":console":[]};
+var roomlogs=new Map([[":console",[]]]);
 
-(function(){
+var uniqid=(function(){
 	var id=1;
-	function uniqid(){
+	return function uniqid(){
 		return id++;
-	}
+	};
 })();
 
 var net_callbacks={};
@@ -24,6 +24,32 @@ function net_send(msg,cb){
 	net_callbacks[id]=cb;
 }
 
+function fancysplit(text,freespace){
+	var obj={
+		word: [],
+		rest: [],
+	};
+	var cursor=0,idx;
+	if(freespace){
+		while(cursor<text.length&&text[cursor]==" ")cursor++;
+	}
+	while(cursor<text.length){
+		idx=text.indexOf(" ",cursor);
+		if(idx==-1)idx=text.length;
+		obj.word.push(text.slice(cursor,idx));
+		obj.rest.push(text.slice(cursor));
+		if(idx==text.length)break;
+		cursor=idx+1;
+		if(freespace){
+			while(cursor<text.length&&text[cursor]==" ")cursor++;
+		} else if(cursor==text.length){
+			obj.word.push("");
+			obj.rest.push("");
+		}
+	}
+	return obj;
+}
+
 function reconnect(){
 	if(sock)sock.close();
 
@@ -34,14 +60,13 @@ function reconnect(){
 	updateStatus();
 	updateRoomList();
 	sock.addEventListener("message",function(msg){
-		var spl=msg.split(" ",2);
-		var id=spl[0],type=spl[1];
-		var rest=msg.slice(id.length+type.length+2);
+		var spl=fancysplit(msg.data,false);
+		console.log(msg.data);
+		var id=spl.word[0],type=spl.word[1];
 		if(id=="_push"){
 			if(type=="message"){
-				spl=rest.split(" ",2);
-				var r=spl[0],u=spl[1];
-				addRoomEntry(r,"message",[u,rest.slice(r.length+u.length+2)]);
+				var r=spl.word[2],u=spl.word[3];
+				addRoomEntry(r,"message",[u,spl.rest[4]]);
 			} else {
 				alert("Unknown push message type '"+type+"'!");
 			}
@@ -49,9 +74,9 @@ function reconnect(){
 			var fn=net_callbacks[id];
 			var obj;
 			if(type=="ok")fn(true);
-			else if(type=="error")fn(null,rest);
-			else if(type=="name")fn(rest);
-			else if(type=="list")fn(rest.split(" ").slice(1));
+			else if(type=="error")fn(null,spl.rest[2]);
+			else if(type=="name")fn(spl.rest[2]);
+			else if(type=="list")fn(spl.word.slice(3));
 			else alert("Unknown server response message type '"+type+"'!");
 		} else {
 			alert("No callback for server message id '"+id+"'!");
@@ -70,6 +95,27 @@ function reconnect(){
 	});
 }
 
+function fetchRoomList(){
+	net_send("list_rooms",function(list,err){
+		if(err){
+			addRoomEntry(":console","error",["Unable to fetch room list: "+err]);
+		} else {
+			var roomid;
+			for(roomid in roomlogs.keys()){
+				if(roomid!=":console")roomlogs.delete(roomid);
+			}
+			roomlist=[":console"];
+			var i;
+			for(i=0;i<list.length;i++){
+				roomlist.push(list[i]);
+				roomlogs.set(list[i],[]);
+				// fetchRoomHistory(list[i]);
+			}
+			updateRoomList();
+		}
+	});
+}
+
 function updateStatus(){
 	var str=null;
 	if(!sock||sock.readyState>=2){
@@ -99,7 +145,9 @@ function updateRoomList(){
 		if(roomlist[i]==currentroom)div.classList.add("selected");
 		div.addEventListener("click",function(roomid){
 			currentroom=roomid;
+			updateRoomList();
 			drawRoom(currentroom);
+			document.getElementById("roominput").focus();
 		}.bind(this,roomlist[i]));
 		div.appendChild(document.createTextNode(roomlist[i]));
 		rldiv.appendChild(div);
@@ -117,7 +165,7 @@ function drawRoom(roomid){
 	else roomtitle.firstChild.nodeValue=roomid;
 
 	var tr,td;
-	var items=roomlogs[roomid];
+	var items=roomlogs.get(roomid);
 	if(!items){
 		alert("drawRoom on nonexistent roomid '"+roomid+"'!");
 		return;
@@ -130,17 +178,28 @@ function drawRoom(roomid){
 function drawRoomEntry(type,args){
 	var tbody=document.getElementById("roomlog");
 	var tr=document.createElement("tr");
-	var td;
+	var td1=document.createElement("td"),td2=document.createElement("td");
+	var node1=document.createTextNode(""),node2=document.createTextNode("");
+	td1.appendChild(node1); td2.appendChild(node2);
+	tr.appendChild(td1); tr.appendChild(td2);
+	tbody.appendChild(tr);
 	switch(type){
 		case "message":
-			td=document.createElement("td");
-			td.appendChild(document.createTextNode(args[0]));
-			tr.appendChild(td);
-			td=document.createElement("td");
-			td.classList.add("message");
-			td.appendChild(document.createTextNode(args[1]));
-			tr.appendChild(td);
-			tbody.appendChild(tr);
+			tr.classList.add("message");
+			node1.nodeValue="<"+args[0]+">";
+			node2.nodeValue=args[1];
+			break;
+
+		case "error":
+			tr.classList.add("error");
+			node1.nodeValue="--";
+			node2.nodeValue=args[0];
+			break;
+
+		case "notice":
+			tr.classList.add("notice");
+			node1.nodeValue="--";
+			node2.nodeValue=args[0];
 			break;
 
 		default:
@@ -150,21 +209,73 @@ function drawRoomEntry(type,args){
 }
 
 function addRoomEntry(roomid,type,args){
-	if(!roomlogs[roomid]){
+	if(!roomlogs.get(roomid)){
 		alert("addRoomEntry on nonexistent roomid '"+roomid+"'!");
 		return;
 	}
-	roomlogs[roomid].push([type,args]);
+	roomlogs.get(roomid).push([type,args]);
 	if(roomid==currentroom){
 		drawRoomEntry(type,args);
 	}
 }
 
+function executeCommand(roomid,text){
+	var spl=fancysplit(text,true);
+	if(spl.word.length==0)return;
+	var cmd=spl.word[0];
+	var creds=null;
+	switch(cmd){
+		case "register":
+		case "login":
+			if(spl.word.length<3){
+				addRoomEntry(roomid,"error",["Usage: /login <username> <password>"]);
+				break;
+			}
+			creds=[spl.word[1],spl.rest[2]];
+			net_send(cmd+" "+creds[0]+" "+creds[1],function(ok,err){
+				if(ok){
+					username=creds[0];
+					addRoomEntry(roomid,"notice",["Logged in as user '"+creds[0]+"'"]);
+					updateStatus();
+					fetchRoomList();
+				} else {
+					addRoomEntry(roomid,"error",["Unable to "+cmd+": "+err]);
+				}
+			});
+			break;
+
+		default:
+			addRoomEntry(roomid,"error",["Unknown command '"+cmd+"'"]);
+			break;
+	}
+}
+
+function sendMessage(roomid,text){
+	if(roomid[0]==":"){
+		addRoomEntry(roomid,"error",["Cannot send a message here"]);
+		return;
+	}
+	var sentAs=username,msg=text.replace(/\n/g,"");
+	net_send("send "+roomid+" "+msg,function(ok,err){
+		if(ok){
+			addRoomEntry(roomid,"message",[sentAs,msg]);
+			return;
+		}
+		addRoomEntry(roomid,"error",["Unable to send message: "+err]);
+	});
+}
+
 function doSend(){
 	var inputelem=document.getElementById("roominput");
 	var text=inputelem.value;
 	inputelem.value="";
-	addRoomEntry(currentroom,"message",["-",text]);
+
+	if(text.length==0)return;
+	if(text[0]=="/"){
+		executeCommand(currentroom,text.slice(1));
+	} else {
+		sendMessage(currentroom,text);
+	}
 }
 
 function doKeypress(ev){
@@ -174,6 +285,7 @@ function doKeypress(ev){
 window.addEventListener("load",function(){
 	reconnect();
 	drawRoom(currentroom);
+	document.getElementById("roominput").focus();
 });
 </script>
 <style>
@@ -215,7 +327,7 @@ table{
 	margin:8px 0px 10px 0px;
 }
 .roomlistitem{
-	margin:1px 0px;
+	margin:2px 0px;
 	padding:3px 2px;
 	background-color:#223;
 	cursor:pointer;
@@ -251,10 +363,20 @@ table{
 }
 #roomlog_table{
 	width:100%;
-	/*height:100%;*/
 }
 #roomlog > tr > td:first-child{
 	width:150px;
+	padding-right:20px;
+	text-align:right;
+}
+#roomlog > tr.message{
+	color:inherit;
+}
+#roomlog > tr.error{
+	color:#f44;
+}
+#roomlog > tr.notice{
+	color:#a8f;
 }
 
 #roombar_tr{
-- 
cgit v1.2.3-54-g00ecf