From faa129e7f4ea98df702141c334dc8e869c0ca673 Mon Sep 17 00:00:00 2001
From: tomsmeding <tom.smeding@gmail.com>
Date: Mon, 27 Mar 2017 23:02:20 +0200
Subject: webclient: Fetch history, display times

Still a bug though: when sending a message after history came in,
all responses are delayed until after the next response.
Need to investigate whether this is the client or the websocket relay
---
 webclient/client.html | 82 +++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 70 insertions(+), 12 deletions(-)

(limited to 'webclient')

diff --git a/webclient/client.html b/webclient/client.html
index 2305c17..7072ed1 100644
--- a/webclient/client.html
+++ b/webclient/client.html
@@ -24,7 +24,7 @@ function net_send(msg,cb){
 	net_callbacks[id]=cb;
 }
 
-function fancysplit(text,freespace){
+function fancySplit(text,freespace){
 	var obj={
 		word: [],
 		rest: [],
@@ -50,6 +50,33 @@ function fancysplit(text,freespace){
 	return obj;
 }
 
+function leftPad(str,num,chr){
+	str=str+"";
+	if(str.length>=num)return str;
+	var pad="";
+	while(pad.length<num-str.length)pad+=chr;
+	return pad+str;
+}
+
+function formatTime(date){
+	return leftPad(date.getHours(),2,"0")+":"+
+	       leftPad(date.getMinutes(),2,"0")+":"+
+	       leftPad(date.getSeconds(),2,"0");
+}
+
+function net_historyCollectionCallback(id,list,count,cb, item,err){
+	if(err){
+		cb(err);
+	} else {
+		list.push(item);
+		if(list.length==count){
+			cb(list);
+		} else {
+			net_callbacks[id]=net_historyCollectionCallback.bind(this,id,list,count,cb);
+		}
+	}
+}
+
 function reconnect(){
 	if(sock)sock.close();
 
@@ -60,23 +87,28 @@ function reconnect(){
 	updateStatus();
 	updateRoomList();
 	sock.addEventListener("message",function(msg){
-		var spl=fancysplit(msg.data,false);
+		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"){
 				var r=spl.word[2],u=spl.word[3];
-				addRoomEntry(r,"message",[u,spl.rest[4]]);
+				addRoomEntry(r,"message",[u,+spl.rest[3],spl.rest[4]]);
 			} else {
 				alert("Unknown push message type '"+type+"'!");
 			}
 		} else if(net_callbacks[id]){
 			var fn=net_callbacks[id];
+			delete net_callbacks[id];
 			var obj;
 			if(type=="ok")fn(true);
 			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 if(type=="history"){
+				var count=+spl.word[2];
+				net_callbacks[id]=net_historyCollectionCallback.bind(this,id,[],count,fn);
+			} else if(type=="history_item")fn([spl.word[3],+spl.word[4]/1000,spl.rest[5]]);
 			else alert("Unknown server response message type '"+type+"'!");
 		} else {
 			alert("No callback for server message id '"+id+"'!");
@@ -109,13 +141,26 @@ function fetchRoomList(){
 			for(i=0;i<list.length;i++){
 				roomlist.push(list[i]);
 				roomlogs.set(list[i],[]);
-				// fetchRoomHistory(list[i]);
+				fetchRoomHistory(list[i]);
 			}
 			updateRoomList();
 		}
 	});
 }
 
+function fetchRoomHistory(roomid){
+	net_send("history "+roomid+" 10",function(list,err){
+		if(err){
+			addRoomEntry(roomid,"error",["Unable to fetch history: "+err]);
+		} else {
+			var i;
+			for(i=0;i<list.length;i++){
+				addRoomEntry(roomid,"message",list[i]);
+			}
+		}
+	});
+}
+
 function updateStatus(){
 	var str=null;
 	if(!sock||sock.readyState>=2){
@@ -178,16 +223,25 @@ function drawRoom(roomid){
 function drawRoomEntry(type,args){
 	var tbody=document.getElementById("roomlog");
 	var tr=document.createElement("tr");
-	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);
+	var td0=document.createElement("td");
+	var td1=document.createElement("td");
+	var td2=document.createElement("td");
+	var node0=document.createTextNode(formatTime(new Date()));
+	var node1=document.createTextNode("");
+	var node2=document.createTextNode("");
+	td0.appendChild(node0);
+	td1.appendChild(node1);
+	td2.appendChild(node2);
+	tr.appendChild(td0);
+	tr.appendChild(td1);
+	tr.appendChild(td2);
 	tbody.appendChild(tr);
 	switch(type){
 		case "message":
 			tr.classList.add("message");
+			node0.nodeValue=formatTime(new Date(args[1]));
 			node1.nodeValue="<"+args[0]+">";
-			node2.nodeValue=args[1];
+			node2.nodeValue=args[2];
 			break;
 
 		case "error":
@@ -220,7 +274,7 @@ function addRoomEntry(roomid,type,args){
 }
 
 function executeCommand(roomid,text){
-	var spl=fancysplit(text,true);
+	var spl=fancySplit(text,true);
 	if(spl.word.length==0)return;
 	var cmd=spl.word[0];
 	var creds=null;
@@ -258,7 +312,7 @@ function sendMessage(roomid,text){
 	var sentAs=username,msg=text.replace(/\n/g,"");
 	net_send("send "+roomid+" "+msg,function(ok,err){
 		if(ok){
-			addRoomEntry(roomid,"message",[sentAs,msg]);
+			addRoomEntry(roomid,"message",[sentAs,new Date().getTime(),msg]);
 			return;
 		}
 		addRoomEntry(roomid,"error",["Unable to send message: "+err]);
@@ -365,7 +419,11 @@ table{
 	width:100%;
 }
 #roomlog > tr > td:first-child{
-	width:150px;
+	width:80px;
+	color:#666;
+}
+#roomlog > tr > td:nth-child(2){
+	width:120px;
 	padding-right:20px;
 	text-align:right;
 }
-- 
cgit v1.2.3-54-g00ecf