add pictures to messages

inc/spot.php

@@ -167,10 +167,36 @@ class Spot extends Main
 		if(Settings::MODE!=self::MODE_HISTO && mb_substr($sLastMsg, 0, 10) != date('Y-m-d')) $this->updateFeed($sRefFeedId);
 
 		//Extract messages
-		$asMessages = $this->getSpotMessages();
+		$asMessages = array_values($this->getSpotMessages());
 		$bSuccess = !empty($asMessages);
 		$sDesc = $bSuccess?'':self::NO_DATA;
 		
+		//Add pictures
+		if($bSuccess) {
+			$asPics = $this->getPictures();
+			
+			//Sort messages and pictures chronologically
+			uasort($asPics, function($a, $b){return $a['unix_timestamp'] > $b['unix_timestamp'];});
+			uasort($asMessages, function($a, $b){return $a['unix_timestamp'] > $b['unix_timestamp'];});
+			
+			//Assign pictures to closest message
+			$iIndex = 0;
+			$iMaxIndex = count($asMessages) - 1;
+			foreach($asPics as $asPic) {
+				while($iIndex <= $iMaxIndex && $asPic['unix_timestamp'] > $asMessages[$iIndex]['unix_timestamp']) {
+					$iIndex++;
+				}
+				if($iIndex == 0) $iMsgIndex = $iIndex;
+				elseif($iIndex > $iMaxIndex) $iMsgIndex = $iMaxIndex;
+				else {
+					$iHalfWayPoint = ($asMessages[$iIndex]['unix_timestamp'] - $asMessages[$iIndex - 1]['unix_timestamp'])/2;
+					$iMsgIndex = ($asPic['unix_timestamp'] >= $iHalfWayPoint)?$iIndex:($iIndex - 1);
+				}
+				
+				$asMessages[$iMsgIndex]['pics'][] = $asPic;
+			}
+		}
+		
 		return self::getJsonResult($bSuccess, $sDesc, $asMessages);
 	}
 	
@@ -185,11 +211,11 @@ class Spot extends Main
 		$asMessages = $this->oDb->selectRows($asInfo);
 		foreach($asMessages as $iKey=>$asMessage)
 		{
-			$iUnixTimeStamp = strtotime($asMessage['timestamp']);
+			$asMessages[$iKey]['unix_timestamp'] = (int) $asMessages[$iKey]['unix_timestamp'];
 			$asMessages[$iKey]['latitude'] = floatval($asMessages[$iKey]['latitude']);
 			$asMessages[$iKey]['longitude'] = floatval($asMessages[$iKey]['longitude']);
-			$asMessages[$iKey]['relative_time'] = Toolbox::getDateTimeDesc($iUnixTimeStamp);
+			$asMessages[$iKey]['relative_time'] = Toolbox::getDateTimeDesc($asMessages[$iKey]['unix_timestamp']);
-			$asMessages[$iKey]['formatted_time'] = date(self::FORMAT_TIME, $iUnixTimeStamp);
+			$asMessages[$iKey]['formatted_time'] = date(self::FORMAT_TIME, $asMessages[$iKey]['unix_timestamp']);
 		}
 		return $asMessages;
 	}
@@ -216,7 +242,7 @@ class Spot extends Main
 					'path'			=> $sPicPath,
 					'thumb_path'	=> $sThumbnailPath,
 					'rotate'		=> $asPicInfo['rotate'],
-					'timestamp'		=> $iPicTimeStamp,
+					'unix_timestamp'=> $iPicTimeStamp,
 					'formatted_time'=> date(self::FORMAT_TIME, $iPicTimeStamp),
 					'relative_time'	=> Toolbox::getDateTimeDesc($iPicTimeStamp)
 				);
@@ -236,6 +262,7 @@ class Spot extends Main
 		$asPosts = $this->oDb->selectRows($asInfo);
 		foreach($asPosts as &$asPost) {
 			$iUnixTimeStamp = strtotime($asPost['led']);
+			$asPost['unix_timestamp'] = $iUnixTimeStamp;
 			$asPost['relative_time'] = Toolbox::getDateTimeDesc($iUnixTimeStamp);
 			$asPost['formatted_time'] = date(self::FORMAT_TIME, $iUnixTimeStamp);
 			$asPost['formatted_name'] = Toolbox::mb_ucwords($asPost['name']);
@@ -268,7 +295,7 @@ class Spot extends Main
 		$asPics = $this->getPictures();
 		foreach($asPics as $iKey=>$asPic)
 		{
-			$iId = self::getJsonId($asPic['timestamp'], '1', $iKey);
+			$iId = self::getJsonId($asPic['unix_timestamp'], '1', $iKey);
 			$asFeed[$iId] = $asPic;
 			$asFeed[$iId]['type'] = 'picture';
 		}
@@ -277,7 +304,7 @@ class Spot extends Main
 		$asPosts = $this->getPosts();
 		foreach($asPosts as $asPost)
 		{
-			$iId = self::getJsonId(strtotime($asPost['led']), '2', $asPost[Db::getId(self::POST_TABLE)]);
+			$iId = self::getJsonId($asPost['unix_timestamp'], '2', $asPost[Db::getId(self::POST_TABLE)]);
 			$asFeed[$iId] = $asPost;
 			$asFeed[$iId]['type'] = 'post';
 		}

masks/messages.html

@@ -39,6 +39,7 @@ oSpot.pageInit = function(asHash)
 		updateFeed(true);
 		self.tmp('simple-bar', new SimpleBar($('#posts')[0]));
 		self.tmp('simple-bar').getScrollElement().addEventListener('scroll', onFeedScroll);
+		self.tmp('infowindow', 'boolean');
 		
 		//Centering map
 		var agCenter = {lat:0, lng:0};
@@ -116,20 +117,42 @@ oSpot.pageInit = function(asHash)
 			   	draggable: false
 			});
 			
+			var $InfoWindow = $('<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('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude))
+				.hover(
+					function(){
+						self.tmp('infowindow', true);
+					},
+					function(){
+						self.tmp('infowindow', false);
+						oInfoWindow.close(oMap, oMarker);
+					}
+				);
+				//.append($('<p>', {'class':'battery'}).addIcon('fa-battery-three-quarters').append(oMsg.battery_state))
+			if(oMsg.pics) {
+				var $Pics = $('<div>', {'class':'pics'});
+				$.each(oMsg.pics, function(iKey, asPic){
+					$Pics.append($('<a>', {href: asPic.path, 'data-lightbox': self.consts.title, 'data-title': asPic.formatted_time})
+						.append($('<img>', {'src': asPic.thumb_path})));
+				});
+				$InfoWindow
+					.append($('<p>').addIcon('fa-image').append('Photos'))
+					.append($Pics);
+			}
+			
 			var oInfoWindow = new google.maps.InfoWindow({
-				content: $('<div>', {'class':'info-window'})
+				content: $InfoWindow[0]
-					.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')
 			});
-
+			
 			oMarker.addListener('mouseover', function(){
 				oInfoWindow.open(oMap, oMarker);
 			});
 			oMarker.addListener('mouseout', function(){
-				oInfoWindow.close(oMap, oMarker);
+				setTimeout(function(){
+					if(!self.tmp('infowindow')) oInfoWindow.close(oMap, oMarker);
+				}, 400);
 			});
 			oMarker.addListener('click', function(){
 				self.tmp('map').panTo(oMarker.getPosition());

style/spot.scss

@@ -217,23 +217,40 @@
 
 /* Info Window */
 
-.info-window h1 {
+.info-window {
-	font-size: 1.2em;
+	h1 {
-}
+		font-size: 1.2em;
-.info-window p {
+	}
-	font-size: 1.0em;	
+	
-}
+	p {
+		font-size: 1.0em;	
+	}
+	
+	i {
+		padding-right: 0.5em;
+		font-size: 1.33333333em;
+		line-height: 0.75em;
+		vertical-align: -15%;
+		@extend .fa-fw;
+	}
 
-.info-window i {
+	.pics {
-	padding-right: 0.5em;
+		a {
-	font-size: 1.33333333em;
+			display: inline-block;
-	line-height: 0.75em;
+			margin-right: 15px;
-	vertical-align: -15%;
+			
-	@extend .fa-fw;
+			img {
-}
+				max-width: 200px;
-
+				max-height: 100px;
-.info-window .battery {
+				border-radius: 3px;
-	text-transform: capitalize;
+				transition: All 0.2s;
+				
+				&:hover {
+					box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
+				}
+			}
+		}
+	}
 }
 
 /* Upload */