ndi-2018
/
main
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add: view.lib.infobox (infobox management with stack + timeout chain) | upd:view.main (now right ws-client management)

This commit is contained in:
xdrm-brackets 2017-12-04 17:30:33 +01:00
parent 9fdec3c2db
commit 2a791d0401
3 changed files with 86 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
view/lib/infobox-es6.js Normal file
View File

@ -0,0 +1,66 @@
/* classe InfoBox */
export class InfoBox{
constructor(msgObject){
/* (1) get reference target */
this.target = msgObject;
/* (2) Init useful variables */
this.stack = []; // message stack
this.pending = false; // if currently waiting/showing
}
show(msg, type, timeout=2000){
console.log(this.stack, this.pending);
/* (1) If pending -> add to stack */
if( this.pending )
this.stack.push( {message: msg, type: type, to: timeout} );
/* (2) Else -> display message */
else
this._display(msg, type, timeout);
}
_next(){
/* (1) Init */
this.target.active = false;
/* (2) Get last active message + pop stack */
var buf = this.stack.pop();
/* (3) If no more msg -> exit */
if( buf == null )
return (this.pending = false);
/* (4) Send current message */
this._display(buf.message, buf.type, buf.to);
}
_display(msg, type, timeout=2000){
/* (1) Set pending */
this.pending = true;
/* (2) Set message data */
this.target.message = msg;
this.target.type = type;
this.target.active = true;
/* (3) Timeout to next */
setTimeout(this._next.bind(this), timeout);
}
}

57
view/main.js
View File

@ -5,6 +5,7 @@ import Vue from 'vue'
/* (2) Internal libs */
import {API} from './lib/api-es6'
import {InfoBox} from './lib/infobox-es6'
import {WSClient,WSClientBuilder} from './lib/ws-client-es6'
/* (3) Vues */
@ -22,6 +23,7 @@ window.wsc = new WSClientBuilder("wss://websocket.xdrm.io");
/* (3) global store init */
require('./vue-config');
window.gstore.add('server', window._SERVER);
window.infobox = new InfoBox(window.gstore.data.info);
/* (4) Render view */
new Vue({
@ -38,30 +40,19 @@ new Vue({
/* (1) Connection channel */
window.wsc_connect = window.wsc.channel('connect').listen(function(msg, err){
console.log('connect received', msg, err);
// {1} Manage error //
if( msg == null && err != null ){
window.gstore.data.info.message = 'Erreur de connexion WebSocket@connect ('+err+')';
window.gstore.data.info.type = 'error';
window.gstore.data.info.active = true;
setTimeout(function(){ window.gstore.data.info.active=false; }, 5000);
/*TEMP*/return;
/*TEMP*///msg = {error: 0, connected: ['guest123', 'guest456', 'guest789']};
}
if( msg == null && err != null )
return window.infobox.show('Erreur de connexion WebSocket@connect ('+err+')', 'error', 3000);
// {2} Manage wsclient error //
if( msg.connected == null || typeof msg.error != 'boolean' || msg.error !== false ){
console.warn('websocket error: '+msg.error);
window.gstore.data.info.message = 'Erreur de connexion WebSocket@connect';
window.gstore.data.info.type = 'warning';
window.gstore.data.info.active = true;
setTimeout(function(){ window.gstore.data.info.active=false; }, 5000);
return;
}
if( typeof msg.error != 'boolean' || msg.error !== false )
return window.infobox.show('Erreur de connexion WebSocket@connect', 'warning', 3000);
// {3} Manage notification //
console.log('Detected '+msg.connected.length+' new user(s)');
window.gstore.data.notif[0].data = window.gstore.data.notif[0].data.concat( msg.connected );
if( msg.connected != null ){
console.log('Detected '+msg.connected.length+' new user(s)');
window.gstore.data.notif[0].data = window.gstore.data.notif[0].data.concat( msg.connected );
}
}).send({name: window._SERVER.session.name});
@ -69,31 +60,19 @@ window.wsc_connect = window.wsc.channel('connect').listen(function(msg, err){
/* (2) Message channel */
window.wsc_chat = window.wsc.channel('chat').listen(function(msg, err){
console.log('chat received', msg, err);
// {1} Manage error //
if( msg == null && err != null ){
window.gstore.data.info.message = 'Erreur de connexion WebSocket@connect ('+err+')';
window.gstore.data.info.type = 'error';
window.gstore.data.info.active = true;
setTimeout(function(){ window.gstore.data.info.active=false; }, 5000);
/*TEMP*/return;
/*TEMP*///msg = {error: 0, msg: [['guest123', 'message 1'], ['guest456', 'message 2'], ['guest789', 'message 3']]};
}
if( msg == null && err != null )
return window.infobox.show('Erreur de connexion WebSocket@chat ('+err+')', 'error', 3000);
// {2} Manage wsclient error //
if( msg.msg == null || typeof msg.error != 'boolean' || msg.error !== false ){
console.warn('websocket error: '+msg.error);
window.gstore.data.info.message = 'Erreur de connexion WebSocket@connect';
window.gstore.data.info.type = 'warning';
window.gstore.data.info.active = true;
setTimeout(function(){ window.gstore.data.info.active=false; }, 5000);
return;
}
if( typeof msg.error != 'boolean' || msg.error !== false )
return window.infobox.show('Erreur de connexion WebSocket@chat', 'warning', 3000);
// {3} Manage notification //
console.log('Received '+msg.msg.length+' new message(s)');
window.gstore.data.notif[1].data = window.gstore.data.notif[1].data.concat( msg.msg );
if( msg.msg != null ){
console.log('Received '+msg.msg.length+' new message(s)');
window.gstore.data.notif[1].data = window.gstore.data.notif[1].data.concat( msg.msg );
}
}).send({name: window._SERVER.session.name});

4
view/vue-config.js
View File

@ -10,8 +10,8 @@ window.gstore.add('info', {
message: 'Warning! blabla'
});
window.gstore.add('notif', [
{ class: 'bell', data: ['guest1224934 connected', 'guest2349329042 connected'] },
{ class: 'message', data: [['guestsdfljd, \"blabla bloblo\"']] },
{ class: 'bell', data: [] },
{ class: 'message', data: [] },
{ class: 'search', data: [] },
{ class: 'menu', data: [] }
])