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.name ? '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>
			<span @click='del_message(msg.id)' class='del' v-if='msg.user == gstore.server.session.name'></span>
			<span @click='upd_message(msg.id, msg.message)' class='upd' v-if='msg.user == gstore.server.session.name'></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,
		dep: "31"
	}; },
	methods: {
		local_date: function(id){
			/* (1) Get current date (convert unix timestamp to javascript timestamp */
			var cur = new Date( gstore.data.notif.emergency.data[id].timestamp * 1000);

			/* (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;



			/* (1) If in EDIT_MODE
			---------------------------------------------------------*/
			if( gstore.data.upd_msg.emergency != null ){

				/* (2) Prepare request */
				var rq = {
					id:      this.gstore.upd_msg.emergency,
					message: msg
				};

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

				/* (4) Send request */
				api.call("PUT message/emergency/"+this.dep, rq, function(rs){

					// {1} If error -> exit //
					if( rs.error != 0 )
						return;

					// {2} Update message content //
					for( var id in gstore.data.notif.emergency.data )
						if( gstore.data.notif.emergency.data[id].id == gstore.data.upd_msg.emergency )
							gstore.data.notif.emergency.data[id].message = msg;


					// {3} exit EDIT_MODE //
					gstore.data.upd_msg.emergency = null;

					// {4} Empty input //
					gstore.data.new_msg.emergency = '';

				});



			/* (2) If IN NEW_MSG_MODE
			---------------------------------------------------------*/
			}else{

				/* (2) Prepare request */
				var rq = {
					message:  this.gstore.new_msg.emergency,
					location: this.gstore.loc,
					username: this.gstore.server.session.name
				};

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

				/* (4) Send request */
				api.call("POST message/emergency/"+this.dep, rq, function(rs){

					// {1} If error -> exit //
					if( rs.error != 0 )
						return;

					// {2} Empty input //
					gstore.data.new_msg.emergency = '';

				});

			}


		},
		del_message(id_msg){
			api.call("DELETE message/emergency/"+this.dep, { id: id_msg }, function(rs){});
		},
		upd_message(id_msg, msg_content){

			/* (1) Move to 'edit_mode' */
			this.gstore.upd_msg.emergency = id_msg;

			/* (2) Copy message content to INPUT */
			this.gstore.new_msg.emergency = msg_content;


		},
		bbcode: function(msg){
			return this.gstore.func.bbcode(msg);
		}
	}
}
</script>