comments + images

This commit is contained in:
2015-12-27 13:08:01 +01:00
parent 4fdbfd57bb
commit 0702e5afeb
9 changed files with 631 additions and 50 deletions

View File

@@ -12,6 +12,9 @@ class Spot extends Main
const MSG_TABLE = 'messages';
const FEED_TABLE = 'feeds';
const SPOT_TABLE = 'spots';
const POST_TABLE = 'posts';
const FORMAT_TIME = 'd/m/Y à H:i';
public function __construct($oClassManagement, $sProcessPage)
{
@@ -35,7 +38,8 @@ class Spot extends Main
(
self::MSG_TABLE => array('ref_msg_id', MySqlManager::getId(self::FEED_TABLE), 'type', 'latitude', 'longitude', 'timestamp', 'unix_timestamp', 'content', 'battery_state'),
self::FEED_TABLE => array('ref_feed_id', MySqlManager::getId(self::SPOT_TABLE), 'name', 'description', 'status'),
self::SPOT_TABLE => array('ref_spot_id', 'name', 'model')
self::SPOT_TABLE => array('ref_spot_id', 'name', 'model'),
self::POST_TABLE => array('name', 'content')
),
'types' => array
(
@@ -52,7 +56,7 @@ class Spot extends Main
'model' => "VARCHAR(20)",
'ref_feed_id' => "VARCHAR(40)",
'description' => "VARCHAR(100)",
'status' => "VARCHAR(10)"
'status' => "VARCHAR(10)",
),
'constraints' => array
(
@@ -80,8 +84,8 @@ class Spot extends Main
private function getFeed($sRefFeedId=self::FEED_ID)
{
$sUrl = self::FEED_HOOK.$sRefFeedId.self::FEED_TYPE_JSON;
$sContent = file_get_contents($sUrl);
//$sContent = '{"response":{"feedMessageResponse":{"count":1,"feed":{"id":"0Y5LrvigElWeAieBGnFol0KBEuOTkFJmm","name":"Te Araroa","description":"Te Araroa","status":"ACTIVE","usage":0,"daysRange":7,"detailedMessageShown":false},"totalCount":1,"activityCount":0,"messages":{"message":{"@clientUnixTime":"0","id":477259564,"messengerId":"0-2489517","messengerName":"Francois","unixTime":1449002345,"messageType":"OK","latitude":48.85129,"longitude":2.40491,"modelId":"SPOT3","showCustomMsg":"N","dateTime":"2015-12-01T20:39:05+0000","messageDetail":"","batteryState":"GOOD","hidden":0,"messageContent":"Jusque là , tout va bien ! Click sur le lien en dessous pour voir où je suis :)\r\n\r\n@Clara: <3"}}}}}';
//$sContent = file_get_contents($sUrl);
$sContent = '{"response":{"feedMessageResponse":{"count":1,"feed":{"id":"0Y5LrvigElWeAieBGnFol0KBEuOTkFJmm","name":"Te Araroa","description":"Te Araroa","status":"ACTIVE","usage":0,"daysRange":7,"detailedMessageShown":false},"totalCount":1,"activityCount":0,"messages":{"message":{"@clientUnixTime":"0","id":477259564,"messengerId":"0-2489517","messengerName":"Francois","unixTime":1449002345,"messageType":"OK","latitude":48.85129,"longitude":2.40491,"modelId":"SPOT3","showCustomMsg":"N","dateTime":"2015-12-01T20:39:05+0000","messageDetail":"","batteryState":"GOOD","hidden":0,"messageContent":"Jusque là , tout va bien ! Click sur le lien en dessous pour voir où je suis :)\r\n\r\n@Clara: <3"}}}}}';
return json_decode($sContent, true);
}
@@ -91,8 +95,6 @@ class Spot extends Main
$asMsgs = $asData['response']['feedMessageResponse']['messages'];
$asFeed = $asData['response']['feedMessageResponse']['feed'];
$this->oMySql->setTrace(true);
if(!empty($asMsgs))
{
//Update Spot Info
@@ -138,35 +140,83 @@ class Spot extends Main
$this->oMySql->insertUpdateRow(self::MSG_TABLE, $test, array('ref_msg_id'));
*/
$bSuccess = true;
$sDesc = '';
//Check last message & update feed if necessary (max once a day)
$sLastMsg = $this->oMySql->selectValue(self::FEED_TABLE, 'led', array('ref_feed_id'=>$sRefFeedId));
if(mb_substr($sLastMsg, 0, 10) != date('Y-m-d'))
{
$this->updateFeed($sRefFeedId);
}
$asMessages = $this->oMySql->selectRows(array('from'=>self::MSG_TABLE));
if(empty($asMessages))
{
$bSuccess = false;
$sDesc = self::NO_DATA;
}
else
{
foreach($asMessages as $iKey=>$asMessage)
{
$iUnixTimeStamp = strtotime($asMessage['timestamp']);
$asMessages[$iKey]['relative_time'] = Toolbox::getDateTimeDesc($iUnixTimeStamp);
$asMessages[$iKey]['formatted_time'] = date('d/m/Y à H:i', $iUnixTimeStamp);
}
}
if(mb_substr($sLastMsg, 0, 10) != date('Y-m-d')) $this->updateFeed($sRefFeedId);
//Extract messages
$asMessages = $this->getSpotMessages();
$bSuccess = !empty($asMessages);
$sDesc = $bSuccess?'':self::NO_DATA;
return self::getJsonResult($bSuccess, $sDesc, $asMessages);
}
private function getSpotMessages()
{
$asMessages = $this->oMySql->selectRows(array('from'=>self::MSG_TABLE));
foreach($asMessages as $iKey=>$asMessage)
{
$iUnixTimeStamp = strtotime($asMessage['timestamp']);
$asMessages[$iKey]['relative_time'] = Toolbox::getDateTimeDesc($iUnixTimeStamp);
$asMessages[$iKey]['formatted_time'] = date(self::FORMAT_TIME, $iUnixTimeStamp);
}
return $asMessages;
}
public function getNewsFeed()
{
$asFeed = array();
//Messages
$asMessages = $this->getSpotMessages();
foreach($asMessages as $asMessage)
{
$iId = $asMessage['unix_timestamp'] * -1;
$asFeed[$iId] = $asMessage;// array('type'=>'message', 'time'=>$asMessage['relative_time'], 'text'=>$asMessage['relative_time']);
$asFeed[$iId]['type'] = 'message';
$asFeed[$iId]['id'] = $asMessage[MySqlManager::getId(self::MSG_TABLE)];
}
//Pictures
$asPicPaths = glob('files/*.*');
foreach($asPicPaths as $iKey=>$sPicPath)
{
//Finding picture timestamp
$asPicInfo = self::getPicInfo($sPicPath);
$iPicTimeStamp = $asPicInfo['timestamp'];
//Preparing pictures sorting key and related info
$asFeed[$iPicTimeStamp*-1] = array( 'type' => 'picture',
'id' => $iKey,
'path' => $sPicPath,
'rotate' => $asPicInfo['rotate'],
'formatted_time'=> date(self::FORMAT_TIME, $iPicTimeStamp),
'relative_time' => Toolbox::getDateTimeDesc($iPicTimeStamp));
}
//Post
$asPosts = $this->oMySql->selectRows(array('from'=>self::POST_TABLE));
foreach($asPosts as $iKey=>$asPost)
{
$iUnixTimeStamp = strtotime($asPost['led']);
$iId = $iUnixTimeStamp * -1;
$asFeed[$iId] = array('name'=>Toolbox::mb_ucwords($asPost['name']), 'post'=>$asPost['content'], 'type'=>'post');;
$asFeed[$iId]['relative_time'] = Toolbox::getDateTimeDesc($iUnixTimeStamp);
$asFeed[$iId]['formatted_time'] = date(self::FORMAT_TIME, $iUnixTimeStamp);
}
ksort($asFeed);
return self::getJsonResult(true, '', $asFeed);
}
public function addPost($sName, $sPost)
{
$asData = array('name'=>mb_strtolower(trim($sName)), 'content'=>trim($sPost));
$iPostId = $this->oMySql->insertRow(self::POST_TABLE, $asData);
return self::getJsonResult(($iPostId > 0), '');
}
public function upload()
{
$this->oClassManagement->incClass('uploader', true);
@@ -174,6 +224,31 @@ class Spot extends Main
$oUploader->init();
return $oUploader->getBody();
}
public static function getPicInfo($sPicPath)
{
$iPicTimeStamp = 0;
$asExif = exif_read_data($sPicPath, 0, true);
//Timestamp
if(array_key_exists('DateTimeOriginal', $asExif['EXIF'])) $iPicTimeStamp = strtotime($asExif['EXIF']['DateTimeOriginal']);
else $iPicTimeStamp = $asExif['FILE']['FileDateTime'];
//Time Zone
//if($iPicTimeStamp >= self::HONEYMOON_DATE_BEG && $iPicTimeStamp <= self::HONEYMOON_DATE_END) $iPicTimeStamp -= 60*60*(12+1); //timezone + daylight saving
//Orientation
switch($asExif['IFD0']['Orientation'])
{
case 1: $sRotate = '0'; break; //None
case 3: $sRotate = '180'; break; //Flip over
case 6: $sRotate = '90'; break; //Clockwise
case 8: $sRotate = '-90'; break; //Trigo
default: $sRotate = $asExif['IFD0']['Orientation'];
}
return array('timestamp'=>$iPicTimeStamp, 'rotate'=>$sRotate);
}
}
?>

View File

@@ -18,6 +18,8 @@ ToolBox::fixGlobalVars(isset($argv)?$argv:array());
//Available variables
$sAction = isset($_REQUEST['a'])?$_REQUEST['a']:'';
$sPage = isset($_GET['p'])?$_GET['p']:'index';
$sName = isset($_GET['name'])?$_GET['name']:'';
$sContent = isset($_GET['content'])?$_GET['content']:'';
//Initiate class
$oSpot = new Spot($oClassManagement, __FILE__);
@@ -30,9 +32,15 @@ if($sAction!='')
case 'messages':
$sResult = $oSpot->getMessages();
break;
case 'feed':
$sResult = $oSpot->getNewsFeed();
break;
case 'upload':
$sResult = $oSpot->upload();
break;
case 'add_post':
$sResult = $oSpot->addPost($sName, $sContent);
break;
default:
$sResult = Spot::getJsonResult(false, Spot::NOT_FOUND);
}

View File

@@ -2,12 +2,24 @@
<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)
@@ -50,17 +62,6 @@ oSpot.pageInit = function(asHash)
{
values:aoMessages,
options:{draggable:false},
/*events:{click:function(marker, event, context)
{
var asHash = self.getHash();
var sDestHash = asHash.items[0] || '';
var sSafeDest = self.tmp(['safedest', sDestHash]);
if(context.id!=sSafeDest)
{
self.setHash('honeymoon', [self.tmp(['hash', context.id])]);
}
else self.zoomIn(marker, event, context);
}}*/
events:
{
mouseover: function(marker, event, context)
@@ -83,5 +84,65 @@ oSpot.pageInit = function(asHash)
});
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>

File diff suppressed because one or more lines are too long

View File

@@ -226,7 +226,44 @@ function setElem(aoAnchor, asPath, oValue)
}
}
$.prototype.addIcon = function(sIcon)
$.prototype.addIcon = function(sIcon, bMargin)
{
return $(this).prepend($('<i>', {'class':'fa '+sIcon}));
};
bMargin = bMargin || false;
return $(this).prepend($('<i>', {'class':'fa '+sIcon+(bMargin?' push':'')}));
};
$.prototype.defaultVal = function(sDefaultValue)
{
$(this)
.data('default_value', sDefaultValue)
.val(sDefaultValue)
.addClass('defaultText')
.focus(function()
{
var $This = $(this);
if($This.val() == $This.data('default_value')) $This.val('').removeClass('defaultText');
})
.blur(function()
{
var $This = $(this);
if($This.val() == '') $This.val($This.data('default_value')).addClass('defaultText');
});
};
$.prototype.checkForm = function(sSelector)
{
sSelector = sSelector || 'input[type="text"], textarea';
var $This = $(this);
var bOk = true;
$This.find(sSelector).each(function()
{
$This = $(this);
bOk = bOk && $This.val()!='' && $This.val()!=$This.data('default_value');
});
return bOk;
};
$.prototype.cascadingDown = function(sDuration)
{
return $(this).slideDown(sDuration, function(){$(this).next().cascadingDown(sDuration);});
};

206
style/_lightbox.scss Normal file
View File

@@ -0,0 +1,206 @@
/* Preload images */
body:after {
content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
display: none;
}
body.lb-disable-scrolling {
overflow: hidden;
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
border-radius: 3px;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
background-color: white;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-container {
padding: 4px;
}
.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container > .nav {
left: 0;
}
.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 4px;
color: #ccc;
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999999;
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

View File

@@ -2746,7 +2746,7 @@
left: 0;
top: 0;
bottom: 0;
width: 100%;
width: 70%;
background: #EEE; }
/* line 15, spot.scss */
@@ -2759,24 +2759,114 @@
left: calc(50% - 0.5em);
color: #666; }
/* line 26, spot.scss */
#feed {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 30%;
overflow: auto; }
/* line 34, spot.scss */
#feed #poster {
padding: 1em;
background: #EEE;
border-bottom: 1px solid #DDD; }
/* line 39, spot.scss */
#feed #poster #post, #feed #poster #name, #feed #poster #submit {
width: calc(100% - 2em);
border: none;
padding: 0.5em 1em; }
/* line 45, spot.scss */
#feed #poster #post {
margin-bottom: 1em; }
/* line 49, spot.scss */
#feed #poster #name {
width: calc(100% - 5.5em); }
/* line 53, spot.scss */
#feed #poster #submit {
width: 3em;
background: #CCC;
cursor: pointer;
font-weight: bold; }
/* line 61, spot.scss */
#feed #posts {
font-family: Arial; }
/* line 64, spot.scss */
#feed #posts .post {
margin: 1em;
background: #B4BDFF;
color: #323268;
border-radius: 0.5em; }
/* line 70, spot.scss */
#feed #posts .post .message {
margin: 0.3em 0 0 0; }
/* line 73, spot.scss */
#feed #posts .post .signature {
margin: 0.5em 0 0 0;
text-align: right; }
/* line 79, spot.scss */
#feed #posts .header {
padding: 0.5em 1em;
font-style: italic;
font-size: 0.8em;
text-align: right; }
/* line 85, spot.scss */
#feed #posts .header .index {
float: left;
font-style: normal; }
/* line 91, spot.scss */
#feed #posts .body {
padding: 0em 1em 0.5em; }
/* line 95, spot.scss */
#feed #posts .post.picture {
background: #F3EC9F;
color: #635C28; }
/* line 99, spot.scss */
#feed #posts .post.picture a {
display: inline-block;
line-height: 0;
margin: 0; }
/* line 105, spot.scss */
#feed #posts .post.picture img {
width: 100%;
image-orientation: from-image;
border: 1px solid white;
outline: none; }
/* line 113, spot.scss */
#feed #posts .post.message {
background: #6DFF58;
color: #326526; }
/* line 118, spot.scss */
#feed #posts .fa.push {
margin-right: 0.5em; }
/* Info Window */
/* line 28, spot.scss */
/* line 126, spot.scss */
.info-window h1 {
font-size: 1.2em; }
/* line 31, spot.scss */
/* line 129, spot.scss */
.info-window p {
font-size: 1.0em; }
/* line 35, spot.scss */
/* line 133, spot.scss */
.info-window i {
padding-right: 0.5em;
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%; }
/* line 43, spot.scss */
/* line 141, spot.scss */
.info-window .battery {
text-transform: capitalize; }
/* Upload */
/* line 147, spot.scss */
.bar {
height: 18px;
background: green; }
/* Other */
/*# sourceMappingURL=spot.css.map */

File diff suppressed because one or more lines are too long

View File

@@ -8,7 +8,7 @@
left:0;
top:0;
bottom:0;
width:100%;
width:70%;
background:#EEE;
}
@@ -23,6 +23,104 @@
@extend .flicker;
}
#feed {
position:absolute;
right:0;
top:0;
bottom:0;
width:30%;
overflow:auto;
#poster {
padding:1em;
background:#EEE;
border-bottom:1px solid #DDD;
#post, #name, #submit {
width:calc(100% - 2em);
border:none;
padding:0.5em 1em;
}
#post {
margin-bottom:1em;
}
#name {
width: calc(100% - 5.5em);
}
#submit {
width: 3em;
background:#CCC;
cursor:pointer;
font-weight:bold;
}
}
#posts {
font-family: Arial;
.post {
margin:1em;
background: #B4BDFF;
color:#323268;
border-radius: 0.5em;
.message {
margin:0.3em 0 0 0;
}
.signature {
margin:0.5em 0 0 0;
text-align: right;
}
}
.header {
padding: 0.5em 1em;
font-style: italic;
font-size:0.8em;
text-align:right;
.index {
float:left;
font-style: normal;
}
}
.body {
padding: 0em 1em 0.5em;
}
.post.picture {
background:#F3EC9F;
color:#635C28;
a {
display:inline-block;
line-height:0;
margin:0;
}
img {
width:100%;
image-orientation:from-image;
border: 1px solid white;
outline:none;
}
}
.post.message {
background: #6DFF58;
color:#326526;
}
.fa.push {
margin-right:0.5em;
}
}
}
/* Info Window */
.info-window h1 {
@@ -50,3 +148,6 @@
height: 18px;
background: green;
}
/* Other */