spot/masks/messages.html

<div id="messages">
	<div id="map">
		<div class="loader fa fa-map"></div>
	</div>
	<div id="feed">
		<div id="poster">
			<input id="post" name="post" type="text" />
			<input id="name" name="name" type="text" />
			<input id="submit" name="submit" type="button" value="+" />
		</div>
		<div id="posts"></div>
	</div>
</div>
<script type="text/javascript">
oSpot.pageInit = function(asHash)
{
	self.get('messages', function(oMessages){
		
		//Build Feed
		updateFeed();
		setInterval(updateFeed, 60 * 1000); //refresh every minute
		
		//Building messages
		aoMessages = [];
		$.each(oMessages, function(iKey, oMsg)
		{
			var sInfoWindow = $('<div>', {'class':'info-window'})
								.append($('<h1>').append('Message '+oMsg.type+' #'+oMsg.id_message))
								.append($('<p>', {'class':'time'}).addIcon('fa-clock-o').append(oMsg.formatted_time+' ('+oMsg.relative_time+')'))
								.append($('<p>', {'class':'coordinates'}).addIcon('fa-compass').append(oMsg.latitude+' | '+oMsg.longitude))
								.append($('<p>', {'class':'battery'}).addIcon('fa-battery-three-quarters').append(oMsg.battery_state))
								.prop('outerHTML');
			var sLatLng = [oMsg.latitude, oMsg.longitude];
			var asData = {title:oMsg.timestamp, details:sInfoWindow};
			var asOptions = {icon:(iKey%2==0)?'images/footprint_alt.png':'images/footprint.png'};
			aoMessages.push({id:oMsg.id_message, latLng:sLatLng, data:asData, options:asOptions});
		});
		
		//Centering map on last message
		var oLastMsg = oMessages[oMessages.length-1];
		var $Map = $("#map").gmap3(
		{
			map:
			{
				options:
				{
					center:{lat:oLastMsg.latitude, lng:oLastMsg.longitude},
					zoom:12,
					mapTypeId:google.maps.MapTypeId.HYBRID,
					scaleControl:true
				}
			},
			kmllayer:
			{
				options:
				{
					url:'http://databap.lutran.fr/TeAraroaTrail_simplified.kml',
					opts:{preserveViewport: true}
				}
			},
			marker:
			{
				values:aoMessages,
				options:{draggable:false},
				events:
				{
					mouseover: function(marker, event, context)
					{
						var map = $(this).gmap3("get"), infowindow = $(this).gmap3({get:{name:"infowindow"}});
						if(infowindow)
						{
							infowindow.open(map, marker);
							infowindow.setContent(context.data.details);
						}
						else $(this).gmap3({infowindow:{anchor:marker, options:{content: context.data.details}}});
					},
					mouseout: function()
					{
						var infowindow = $(this).gmap3({get:{name:"infowindow"}});
						if(infowindow) infowindow.close();
					}
				}
			}
		});
		self.tmp('map', $Map.gmap3("get"));
	});
	
	//Post
	$('#name').defaultVal('Nom...');
	$('#post').defaultVal('Ton message...');
	$('#submit').click(function(){
		if($('#poster').checkForm())
		{
			self.get(
				'add_post',
				function()
				{
					$('#name').val('');
					$('#post').val('');
					updateFeed();
				},
				{name:$('#name').val(), content:$('#post').val()}
			);
		}
	});
};

function updateFeed()
{
	self.get('feed', function(asData){
		var $Posts = $('#posts').empty();
		$.each(asData, function(iKey, asPost){
			var $Post = $('<div>', {'class':'post '+asPost.type});
			var sRelTime = asPost.relative_time;
			var sAbsTime = asPost.formatted_time;
			var $Body = {};
			switch(asPost.type)
			{
				case 'message':
					$Body = $('<span>').addIcon('fa-compass', true).append(asPost.latitude+' | '+asPost.longitude);
					sClass = 'compass';
					break;
				case 'picture':
					var $Image = $('<img>', {'src':asPost.path/*, 'style':'transform:rotate('+asPost.rotate+'deg);'*/});
					$Body = $('<a>', {href:asPost.path, 'data-lightbox':'image-'+asPost.id, 'data-title':asPost.formatted_time}).append($Image);
					sClass = 'image';
					break;
				case 'post':
					$Body = $('<div>')
								.append($('<p>', {'class':'message'}).text(asPost.post))
								.append($('<p>', {'class':'signature'}).text('-- '+asPost.name));
					sClass = 'comment';
					break;
			}
			$Post
				.append($('<div>', {'class':'header'})
					.append($('<span>', {'class':'index'}).addIcon('fa-'+sClass))
					.append($('<span>', {'class':'time', 'title':sAbsTime}).text(sRelTime)))
				.append($('<div>', {'class':'body'}).append($Body))
				.appendTo($Posts);
			
			if(asPost.id) $Post.find('.index').append(' '+asPost.id);
			
			//if(asPost.type=='picture' && asPost.rotate!='0') $Body.height($Image.height());
		});
	});
}
</script>