main/view/vue/container/emergency.vue

<template>

	<div id='CONTAINER' class='message'>

		<div v-for='(msg, id) in gstore.notif.emergency.data' :class="msg.user == gstore.server.session.user ? 'me' : ''" :data-noauthor='id == 0 || gstore.notif.emergency.data[id-1].user != msg.user ? "1" : "0"'>
			<span class='author' v-text='msg.user' v-if='id == 0 || gstore.notif.emergency.data[id-1].user != msg.user'></span>
			<span class='content' v-html='bbcode(msg.message)'></span>
			<span class='date' v-text='local_date(id)'></span>
		</div>

		<div class='end-pad'></div> <!-- End Spacing -->

		<form class='msg-input' @submit.prevent='new_message(gstore.new_msg.emergency)'>
			<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 }; },
	methods: {
		local_date: function(id){
			/* (1) Get current date */
			var cur = new Date( gstore.data.notif.emergency.data[id].timestamp );
			console.log(cur);

			/* (2) First line -> show whole date */
			if( id < 1 )
				return cur.toLocaleString();

			/* (3) Get previous date */
			var pre = new Date( gstore.data.notif.emergency.data[id-1].timestamp );

			/* (2) If same day -> show time only */
			if( cur.toLocaleDateString() == pre.toLocaleDateString() )
				return cur.toLocaleTimeString();

			return cur.toLocaleString();
		},
		new_message(msg){

			/* (1) If empty message -> abort */
			if( msg.trim().length == 0 )
				return;

			/* (2) Send message to WebSocket */
			wsc_emergency.send(JSON.stringify({message: msg, location: [1.1, 2.2]}));

			/* (3) Add loader */
			gstore.data.msg_pending.emergency = true;

			/* (4) 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>