diff --git a/view/lib/infobox-es6.js b/view/lib/infobox-es6.js new file mode 100644 index 0000000..fdbebaa --- /dev/null +++ b/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); + } + +} \ No newline at end of file diff --git a/view/main.js b/view/main.js index 125c46d..2c5fa9e 100755 --- a/view/main.js +++ b/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 ){ - 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}); diff --git a/view/vue-config.js b/view/vue-config.js index d4a6446..44ac5bd 100644 --- a/view/vue-config.js +++ b/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: 'message', data: [['guestsdfljd, \"blabla bloblo\"']] }, + { class: 'bell', data: [] }, + { class: 'message', data: [] }, { class: 'search', data: [] }, { class: 'menu', data: [] } ])