notazof/yavsc
1
1
Fork 0
Code Issues 1 Pull requests Projects 2 Releases 7 Packages Wiki Activity Actions

gives some pv ui interface

Browse source
This commit is contained in:
Paul Schneider 2019-06-05 16:10:42 +01:00
commit d9fec37db3
1 changed files with 82 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

178
src/Yavsc/wwwroot/js/chat.js
View file

@ -2,31 +2,30 @@ window.ChatHubHandler = (function ($) {
/* /*
# chat control ids # chat control ids
## inputs ## inputs
* msg_<rname> : input providing a room message * msg_<rname> : input providing a room message
* pv_<uname> : input providing a private message * pv_<uname> : input providing a private message
* command : input providing server command * command : input providing server command
* roomname : input (hidden or not) providing a room name * roomname : input (hidden or not) providing a room name
## persistent containers ## persistent containers
* chatview : the global container * chatview : the global container
* rooms : container from room displays * rooms : container from room displays
* pvs : container from pv displays * pvs : container from pv displays
* server : container for server messages * server : container for server messages
## temporary containers ## temporary containers
* room_<rname> : room message list * room_<rname> : room message list
* pv_<uname> : private discussion display * pv_<uname> : private discussion display
## css classes ## css classes
* form-control * form-control
* btn btn-default * btn btn-default
*/ */
$.fn.filterByData = function (prop, val) { $.fn.filterByData = function (prop, val) {
return this.filter(function () { return $(this).data(prop) == val; }); return this.filter(function () { return $(this).data(prop) == val; });
@ -35,9 +34,14 @@ window.ChatHubHandler = (function ($) {
if (!full) throw new Error('not implemented'); if (!full) throw new Error('not implemented');
// build a channel list // the channel list
var chans = []; var chans = [];
var frontRoomName; // authencitated flagf from server
var is_auth = $view.data('is_auth');
// private chat list
var userlist = [];
var frontChanId;
var ulist = $('<ul></ul>').addClass('userlist'); var ulist = $('<ul></ul>').addClass('userlist');
var notifications = $('<ul></ul>').addClass('notifs'); var notifications = $('<ul></ul>').addClass('notifs');
@ -49,15 +53,22 @@ window.ChatHubHandler = (function ($) {
// Create a function that the hub can call back to display messages. // Create a function that the hub can call back to display messages.
chat.client.addMessage = function (name, room, message) { chat.client.addMessage = function (name, room, message) {
// Add the message to the page. // Add the message to the page.
$('#room_' + room).append('<li class="discussion"><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>'); var $userTag = $("<a>" + htmlEncode(name) + "</a>").click(function(){
buildPv(name);
});
var $li = $('<li class="discussion"></li>');
$userTag.appendTo($li)
$li.append(' '+ htmlEncode(message));
$li.appendTo($('#r' + room));
}; };
chat.client.addPV = function (name, message) { chat.client.addPV = function (name, message) {
if (!$('#mute').prop('checked')) { if (!$('#mute').prop('checked')) {
audio.play(); audio.play();
} }
buildPv(name);
// Add the pv to the page. // Add the pv to the page.
$('#pv_' + name).append('<li class="pv"><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>'); $('#u' + name).append('<li class="pv"><strong>' + htmlEncode(name) + '</strong>: ' + htmlEncode(message) + '</li>');
}; };
chat.client.notifyRoom = function (tag, targetid, message) { chat.client.notifyRoom = function (tag, targetid, message) {
@ -78,19 +89,15 @@ window.ChatHubHandler = (function ($) {
$('<li></li>').append(tag + ': ' + targetid).append(message).addClass(tag).appendTo(notifications); $('<li></li>').append(tag + ': ' + targetid).append(message).addClass(tag).appendTo(notifications);
}; };
var setActiveRoom = function (room) { var setActiveChan = function (chanId) {
var frontRoom; if (frontChanId != chanId) {
if (frontRoomName !== '') { $('#sel_' + frontChanId).addClass('btn-primary');
frontRoom = $('#vroom_' + frontRoomName); $('#v' + frontChanId).addClass('hidden');
// eslint-disable-next-line no-warning-comments
// TODO animate
frontRoom.addClass('hidden');
$('#sel_' + frontRoomName).addClass('btn-primary');
} }
frontRoomName = room; frontChanId = chanId;
frontRoom = $('#vroom_' + room); $('#sel_' + chanId).removeClass('btn-primary');
$('#sel_' + room).removeClass('btn-primary'); $('#v' + chanId).removeClass('hidden');
frontRoom.removeClass('hidden'); $('#inp_' + chanId).focus();
}; };
var chatbar = $('<div class="chatbar"></div>'); var chatbar = $('<div class="chatbar"></div>');
@ -108,36 +115,53 @@ window.ChatHubHandler = (function ($) {
chatbar.appendTo($view); chatbar.appendTo($view);
var chatlist = $('<div class="chatlist" ></div>'); var chatlist = $('<div class="chatlist" ></div>');
chatlist.appendTo($view); chatlist.appendTo($view);
var buildRoom = function (room) {
var roomTag = $('<a>' + room + '</a>').addClass('btn'); var buildChan = function (chdp, chanType, chanName, sendCmd) {
roomTag.prop('id', 'sel_' + room).click(function () { var chanId = chanType + chanName;
setActiveRoom(room); // if ($('#' + chanId)) return;
var roomTag = $('<a>' + chdp + chanName + '</a>').addClass('btn');
roomTag.prop('id', 'sel_' + chanId).click(function () {
setActiveChan(chanId);
$(this).removeClass('btn-primary'); $(this).removeClass('btn-primary');
}); });
roomTag.appendTo(roomlist); roomTag.appendTo(roomlist);
var roomview = $('<div></div>').addClass('container'); var roomview = $('<div></div>').addClass('container');
roomview.appendTo(chatlist); roomview.appendTo(chatlist);
roomview.prop('id', 'vroom_' + room); roomview.prop('id', 'v' + chanId);
var msglist = $('<ul></ul>').addClass('mesglist'); var msglist = $('<ul></ul>').addClass('mesglist');
msglist.prop('id', 'room_' + room); msglist.prop('id', chanId);
msglist.appendTo(roomview); msglist.appendTo(roomview);
$('<input type="text">') $('<input type="text">')
.prop('id', 'inp_' + room) .prop('id', 'inp_' + chanId)
.prop('enable', false) .prop('enable', false)
.prop('hint', 'hello') .prop('hint', 'hello')
.prop('title', 'send to ' + room) .prop('title', 'send to ' + chanName)
.addClass('form-control') .addClass('form-control')
.keydown(function (ev) { .keydown(function (ev) {
if (ev.which == 13) { if (ev.which == 13) {
if (this.value.length == 0) return; if (this.value.length == 0) return;
chat.server.send(room, this.value); sendCmd(chanName, this.value);
// chat.server.send(chanName, this.value);
this.value = ''; this.value = '';
} }
}).appendTo(roomview); }).appendTo(roomview);
chans.push(room); if (chanType == 'r')
setActiveRoom(room); chans.push(chanName);
else if (chanType == 'u')
userlist.push(chanName);
setActiveChan(chanId);
}; };
var buildRoom = function (roomName) {
if (chans.some(function(cname){ return cname == roomName ; }))
setActiveChan('r' + roomName);
else
buildChan('#', 'r', roomName, chat.server.send); };
var buildPv = function (userName) {
if (userlist.some(function(uname){ return uname == userName ; }))
setActiveChan('u' + userName);
else
buildChan('@', 'u', userName, chat.server.sendPV); };
$view.data('chans').split(',').forEach(function (chan) { $view.data('chans').split(',').forEach(function (chan) {
buildRoom(chan); buildRoom(chan);
@ -145,20 +169,19 @@ window.ChatHubHandler = (function ($) {
function onCx() { function onCx() {
setTimeout(function () { setTimeout(function () {
getUsers(); if (is_auth) getUsers();
chans.forEach(function (room) {
chat.server.join(room).done(function (chatInfo) {
setActiveChan('r' + chatInfo.Name);
});
});
}, 120); }, 120);
$('#chatview').removeClass('disabled'); $view.removeClass('disabled');
chans.forEach(function (room) {
chat.server.join(room).done(function (chatInfo) {
setActiveRoom(chatInfo.Name);
});
});
} }
function onDisCx() { function onDisCx() {
$('#chatview').addClass('disabled'); $view.addClass('disabled');
} }
// Start the connection. // Start the connection.
@ -171,7 +194,6 @@ window.ChatHubHandler = (function ($) {
onDisCx(); onDisCx();
setTimeout(function () { setTimeout(function () {
$.connection.hub.start().done(function () { $.connection.hub.start().done(function () {
// $('#mySignalRConnectionIdHidden').val($.connection.hub.id)
onCx(); onCx();
}, 30000); // Re-start connection after 30 seconds }, 30000); // Re-start connection after 30 seconds
}); });
@ -182,35 +204,15 @@ window.ChatHubHandler = (function ($) {
if (this.value.length == 0) return; if (this.value.length == 0) return;
buildRoom(this.value); buildRoom(this.value);
chat.server.join(this.value).done(function (chatInfo) { chat.server.join(this.value).done(function (chatInfo) {
setActiveRoom(chatInfo.Name); setActiveChan('r' + chatInfo.Name);
}); });
this.value = ''; this.value = '';
} }
// else TODO showRoomInfo(this.value); // else TODO showRoomInfo(this.value);
}); });
var pvuis;
// eslint-disable-next-line no-warning-comments // eslint-disable-next-line no-warning-comments
// TODO get this data from the chatview element // TODO get this data from the chatview element
var audio = new Audio('/sounds/bell.mp3'); var audio = new Audio('/sounds/bell.mp3');
var sendPV = function () {
var msg = $('#pv').val();
// Call the Send method on the hub.
$.each(pvuis.CXs, function () {
chat.server.sendPV(this, msg);
});
$('#discussion').append('<li class="pv">' + htmlEncode(pvuis.UserName) + '<< ' + htmlEncode(msg) + '</li>');
// Clear text box and reset focus for next comment.
$('#pv').val('');
};
$('#pv').keydown(function (event) {
if (event.which == 13) {
sendPV();
}
});
$('#command').keydown(function (event) { $('#command').keydown(function (event) {
if (event.which == 13) { if (event.which == 13) {
// eslint-disable-next-line no-warning-comments // eslint-disable-next-line no-warning-comments
@ -220,13 +222,15 @@ window.ChatHubHandler = (function ($) {
var addChatUser = function (uname) { var addChatUser = function (uname) {
$('#u_' + uname).remove(); $('#u' + uname).remove();
// ulist.remove("li.user[data='"+uname+"']"); // ulist.remove("li.user[data='"+uname+"']");
$('<li class="user"><img src="/Avatars/' + uname + '.xs.png"> ' + uname + '</li>') $('<li class="user"><img src="/Avatars/' + uname + '.xs.png"> ' + uname + '</li>')
.prop('id', 'u_' + uname) .prop('id', 'u_' + uname)
.css('cursor', 'pointer') .css('cursor', 'pointer')
.click(function () { setPrivateTarget(this); }) .click(function () {
buildPv(uname);
})
.appendTo(ulist); .appendTo(ulist);
}; };
@ -245,26 +249,8 @@ window.ChatHubHandler = (function ($) {
return encodedValue; return encodedValue;
} }
var setPrivateTarget = function (li) {
$('#rooms').addClass('hidden');
$('#sendpvbox').removeClass('hidden');
pvuis = { CXs: $(li).data('cxids'), UserName: $(li).data('name') };
$('#sendpvdest').html(pvuis.UserName);
$('#pvs').focus();
};
var setPublic = function () {
$('#rooms').removeClass('hidden');
$('#sendpvbox').addClass('hidden');
$('#message').focus();
};
$('#pubChan').css('cursor', 'pointer');
$('#pubChan').click(setPublic);
setPublic();
var onUserDisconnected = function (uname) { var onUserDisconnected = function (uname) {
$('#u_' + uname).remove(); $('#u' + uname).remove();
}; };
var onUserConnected = function (username) { var onUserConnected = function (username) {