upd: vue.container.emergency (copy of 'vue.container.inbox' for 'emergency' channel) | upd: vue.container.event (same) | upd: vue.container.inbox (setup in order for all to work) | upd: view.vue-config (updated 'gstore.func.sendMessage' second argument takes the WSClient object)"

view/vue-config.js

@@ -74,14 +74,14 @@ gstore.add('func', {
 
 	},
 	toggleMenuSize: function(){ gstore.data.min_menu=!gstore.data.min_menu; },
-	sendMessage: function(msg){
+	sendMessage: function(msg, wsc){
 
 		/* (1) If empty message -> abort */
 		if( msg.trim().length == 0 )
 			return;
 
 		/* (2) Send message to WebSocket */
-		wsc_chat.send(JSON.stringify({message: msg}));
+		wsc.send(JSON.stringify({message: msg}));
 
 		/* (3) Add loader */
 		gstore.data.msg_pending.inbox = true;

view/vue/container/emergency.vue

@@ -1,17 +1,85 @@
 <template>
 
-	<div id='CONTAINER'>
+	<div id='CONTAINER' class='message'>
 
-		EMERGENCY
+		<div v-for='(msg, id) in gstore.notif.emergency.data' :class="msg[0] == gstore.server.session.name ? 'me' : ''" :data-noauthor='id == 0 || gstore.notif.emergency.data[id-1][0] != gstore.notif.emergency.data[id][0] ? "1" : "0"'>
+			<span class='author' v-text='msg[0]' v-if='id == 0 || gstore.notif.emergency.data[id-1][0] != msg[0]'></span>
+			<span class='content' v-html='bbcode(msg[1])'></span>
+		</div>
+
+		<div class='end-pad'></div> <!-- End Spacing -->
+
+		<form class='msg-input' @submit.prevent='new_message'>
+			<input type='text' placeholder='Nouveau message..' id='msg-new-content' v-model='gstore.new_msg.emergency' :class='gstore.msg_pending.emergency ? "loading" : ""'>
+			<button></button>
+		</form>
 
 	</div>
 
+
 </template>
 
 
 <script>
 export default {
 	name: 'CONTAINER_EMERGENCY',
-	data(){ return { gstore: gstore.data }; }
+	data(){ return { gstore: gstore.data }; },
+	methods: {
+		new_message(msg){
+
+			// {1} Send message //
+			this.gstore.func.sendMessage(this.gstore.new_msg.emergency, wsc_emergency);
+
+			// {2} Empty input //
+			this.gstore.new_msg.emergency = '';
+		},
+		bbcode: function(msg){
+
+			/* (1) Escape HTML
+			---------------------------------------------------------*/
+			msg = msg.replace(/&/g, '&amp;');
+			msg = msg.replace(/</g, '&lt;');
+			msg = msg.replace(/>/g, '&gt;');
+
+
+			/* (2) Manage text format
+			---------------------------------------------------------*/
+			/* (1) Manage bold */
+			msg = msg.replace(/\*([^\*]+)\*/g, "<b>$1</b>");
+
+			/* (2) italic */
+			msg = msg.replace(/_([^_]+)_/g, "<i>$1</i>");
+
+			/* (3) underline */
+			msg = msg.replace(/\[([^\]]+)\]/g, "<ins>$1</ins>");
+
+			/* (4) Code */
+			msg = msg.replace(/`([^`]+)`/g, "<span class='code'>$1</span>");
+
+
+			/* (3) Manage emojis
+			---------------------------------------------------------*/
+			/* (1) Smileys */
+			msg = msg.replace(/:D/g, "<span class='utf8'>😃</span>");
+			msg = msg.replace(/:\)/g, "<span class='utf8'>🙂</span>");
+			msg = msg.replace(/:B/g, "<span class='utf8'>😎</span>");
+			msg = msg.replace(/:3/g, "<span class='utf8'>😗</span>");
+			msg = msg.replace(/;\)/g, "<span class='utf8'>😉</span>");
+			msg = msg.replace(/:P/g, "<span class='utf8'>😋</span>");
+			msg = msg.replace(/;P/g, "<span class='utf8'>😜</span>");
+			msg = msg.replace(/xD/g, "<span class='utf8'>😆</span>");
+			msg = msg.replace(/:O/ig, "<span class='utf8'>😲</span>");
+			msg = msg.replace(/:S/g, "<span class='utf8'>😖</span>");
+			msg = msg.replace(/\^\^/g, "<span class='utf8'>😊</span>");
+
+			/* (2) Emojis */
+			msg = msg.replace(/:poop:/g, "<span class='utf8 br'>💩</span>");
+			msg = msg.replace(/:fuck:/g, "<span class='utf8'>🖕</span>");
+			msg = msg.replace(/\+1/g, "<span class='utf8 bl'>👍</span>");
+			msg = msg.replace(/-1/g, "<span class='utf8 bl'>👎</span>");
+
+			return msg;
+		}
+	}
 }
 </script>

view/vue/container/event.vue

@@ -1,17 +1,85 @@
 <template>
 
-	<div id='CONTAINER'>
+	<div id='CONTAINER' class='message'>
 
-		EVENT
+		<div v-for='(msg, id) in gstore.notif.event.data' :class="msg[0] == gstore.server.session.name ? 'me' : ''" :data-noauthor='id == 0 || gstore.notif.event.data[id-1][0] != gstore.notif.event.data[id][0] ? "1" : "0"'>
+			<span class='author' v-text='msg[0]' v-if='id == 0 || gstore.notif.event.data[id-1][0] != msg[0]'></span>
+			<span class='content' v-html='bbcode(msg[1])'></span>
+		</div>
+
+		<div class='end-pad'></div> <!-- End Spacing -->
+
+		<form class='msg-input' @submit.prevent='new_message'>
+			<input type='text' placeholder='Nouveau message..' id='msg-new-content' v-model='gstore.new_msg.event' :class='gstore.msg_pending.event ? "loading" : ""'>
+			<button></button>
+		</form>
 
 	</div>
 
+
 </template>
 
 
 <script>
 export default {
 	name: 'CONTAINER_EVENT',
-	data(){ return { gstore: gstore.data }; }
+	data(){ return { gstore: gstore.data }; },
+	methods: {
+		new_message(msg){
+
+			// {1} Send message //
+			this.gstore.func.sendMessage(this.gstore.new_msg.event, wsc_event);
+
+			// {2} Empty input //
+			this.gstore.new_msg.event = '';
+		},
+		bbcode: function(msg){
+
+			/* (1) Escape HTML
+			---------------------------------------------------------*/
+			msg = msg.replace(/&/g, '&amp;');
+			msg = msg.replace(/</g, '&lt;');
+			msg = msg.replace(/>/g, '&gt;');
+
+
+			/* (2) Manage text format
+			---------------------------------------------------------*/
+			/* (1) Manage bold */
+			msg = msg.replace(/\*([^\*]+)\*/g, "<b>$1</b>");
+
+			/* (2) italic */
+			msg = msg.replace(/_([^_]+)_/g, "<i>$1</i>");
+
+			/* (3) underline */
+			msg = msg.replace(/\[([^\]]+)\]/g, "<ins>$1</ins>");
+
+			/* (4) Code */
+			msg = msg.replace(/`([^`]+)`/g, "<span class='code'>$1</span>");
+
+
+			/* (3) Manage emojis
+			---------------------------------------------------------*/
+			/* (1) Smileys */
+			msg = msg.replace(/:D/g, "<span class='utf8'>😃</span>");
+			msg = msg.replace(/:\)/g, "<span class='utf8'>🙂</span>");
+			msg = msg.replace(/:B/g, "<span class='utf8'>😎</span>");
+			msg = msg.replace(/:3/g, "<span class='utf8'>😗</span>");
+			msg = msg.replace(/;\)/g, "<span class='utf8'>😉</span>");
+			msg = msg.replace(/:P/g, "<span class='utf8'>😋</span>");
+			msg = msg.replace(/;P/g, "<span class='utf8'>😜</span>");
+			msg = msg.replace(/xD/g, "<span class='utf8'>😆</span>");
+			msg = msg.replace(/:O/ig, "<span class='utf8'>😲</span>");
+			msg = msg.replace(/:S/g, "<span class='utf8'>😖</span>");
+			msg = msg.replace(/\^\^/g, "<span class='utf8'>😊</span>");
+
+			/* (2) Emojis */
+			msg = msg.replace(/:poop:/g, "<span class='utf8 br'>💩</span>");
+			msg = msg.replace(/:fuck:/g, "<span class='utf8'>🖕</span>");
+			msg = msg.replace(/\+1/g, "<span class='utf8 bl'>👍</span>");
+			msg = msg.replace(/-1/g, "<span class='utf8 bl'>👎</span>");
+
+			return msg;
+		}
+	}
 }
 </script>

view/vue/container/inbox.vue

@@ -28,7 +28,7 @@ export default {
 		new_message(msg){
 
 			// {1} Send message //
-			this.gstore.func.sendMessage(this.gstore.new_msg.inbox);
+			this.gstore.func.sendMessage(this.gstore.new_msg.inbox, wsc_chat);
 
 			// {2} Empty input //
 			this.gstore.new_msg.inbox = '';