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

view/lib/infobox-es6.js

@@ -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);
+	}
+
+}

view/main.js

@@ -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 ){
+	if( msg == null && err != null )
-		window.gstore.data.info.message = 'Erreur de connexion WebSocket@connect ('+err+')';
+		return window.infobox.show('Erreur de connexion WebSocket@connect ('+err+')', 'error', 3000);
-		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']};
-	}
 
 	// {2} Manage wsclient error //
-	if( msg.connected == null || typeof msg.error != 'boolean' || msg.error !== false ){
+	if( typeof msg.error != 'boolean' || msg.error !== false )
-		console.warn('websocket error: '+msg.error);
+		return window.infobox.show('Erreur de connexion WebSocket@connect', 'warning', 3000);
-		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;
-	}
 
 	// {3} Manage notification //
-	console.log('Detected '+msg.connected.length+' new user(s)');
+	if( msg.connected != null ){
-	window.gstore.data.notif[0].data = window.gstore.data.notif[0].data.concat( msg.connected );
+		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 ){
+	if( msg == null && err != null )
-		window.gstore.data.info.message = 'Erreur de connexion WebSocket@connect ('+err+')';
+		return window.infobox.show('Erreur de connexion WebSocket@chat ('+err+')', 'error', 3000);
-		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']]};
-	}
 
 	// {2} Manage wsclient error //
-	if( msg.msg == null || typeof msg.error != 'boolean' || msg.error !== false ){
+	if( typeof msg.error != 'boolean' || msg.error !== false )
-		console.warn('websocket error: '+msg.error);
+		return window.infobox.show('Erreur de connexion WebSocket@chat', 'warning', 3000);
-		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;
-	}
 
 	// {3} Manage notification //
-	console.log('Received '+msg.msg.length+' new message(s)');
+	if( msg.msg != null ){
-	window.gstore.data.notif[1].data = window.gstore.data.notif[1].data.concat( msg.msg );
+		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});
 

view/vue-config.js

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