aboutsummaryrefslogtreecommitdiff
path: root/webclient
diff options
context:
space:
mode:
authortomsmeding <tom.smeding@gmail.com>2017-03-27 23:02:20 +0200
committertomsmeding <tom.smeding@gmail.com>2017-03-27 23:02:20 +0200
commitfaa129e7f4ea98df702141c334dc8e869c0ca673 (patch)
tree020bfa8eacc841c91ad463561e91b0e8bcfcbde7 /webclient
parentcfb46db181612d42d0be02789db6203f7d9a6db0 (diff)
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
Diffstat (limited to 'webclient')
-rw-r--r--webclient/client.html82
1 files changed, 70 insertions, 12 deletions
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;
}