Skip to content
Snippets Groups Projects
Commit 469627f5 authored by Hakkel Tamás's avatar Hakkel Tamás
Browse files

save + annotate for others

parent a8b4ba6a
Branches
Tags
No related merge requests found
Show whitespace changes
Inline Side-by-side
selection/data.php
+ 58
− 38
View file @ 469627f5
......@@ -2,44 +2,60 @@
// Csak bejelentkezettek
if ( ! isset($_SERVER['uid'])) die('Permission denied');
// Tömörítőhöz kell
ob_start("ob_gzhandler");
// Header-ök
header('Vary: Accept-Encoding');
header('Pragma: no-cache');
header('Cache-Control: no-cache');
header('Accept-Ranges: bytes');
header('Content-Encoding: gzip');
// Csabi és én hozzáférhetünk bárkinek a képeihez
if (isset($_POST['uid']))
if ($_SERVER['uid'] === 'hakta' OR $_SERVER['uid'] === 'botcs')
if (isset($_POST['uid']) AND ($_SERVER['uid'] === 'hakta' OR $_SERVER['uid'] === 'botcs'))
$shibboleth = $_POST['uid'];
else
die('Restricted access');
else
$shibboleth = $_SERVER['uid'];
// Ha már vannak betöltve képek, és szeretnénk, hogy csak olyanokat küldjünk, ami még nincs betöltve
if (isset($_POST['last_timestamp']))
$last_timestamp = $_POST['last_timestamp'];
$last_timestamp = (int)$_POST['last_timestamp'];
else
$last_timestamp = time()*1000;
// Tömörítőhöz kell
ob_start("ob_gzhandler");
$db = new PDO('sqlite:../db/db.sqlite');
$db->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING );
// Header-ök
header('Vary: Accept-Encoding');
header('Pragma: no-cache');
header('Cache-Control: no-cache');
header('Accept-Ranges: bytes');
header('Content-Encoding: gzip');
// Mentés
if (isset($_POST['accepted']) AND isset($_POST['rejected'])) {
$result = $db->prepare('SELECT user_ID FROM user WHERE shibboleth=:shibboleth');
$result->execute(array('shibboleth' => $shibboleth));
$result = $result->fetch(PDO::FETCH_ASSOC);
$user_ID = $result['user_ID'];
$accepted = implode(',',array_map('intval', $_POST['accepted']));
$limit = $db->exec("UPDATE annotation SET status='accepted' WHERE thumbnail_ID IN ($accepted) AND user_ID='$user_ID'");
$rejected = implode(',',array_map('intval', $_POST['rejected']));
$limit += $db->exec("UPDATE annotation SET status='rejected' WHERE thumbnail_ID IN ($rejected) AND user_ID='$user_ID'");
} else {
$limit = 1000;
}
// Képek lekérdezése
$db = new PDO('sqlite:../db/db.sqlite');
$db->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING );
$query = '
SELECT thumbnail_ID,timestamp,path,thumbnail_path
FROM annotation JOIN thumbnail USING(thumbnail_ID) JOIN photo USING(photo_ID) JOIN user USING(user_ID)
WHERE shibboleth=:shibboleth AND status = "waiting" AND timestamp < :last_timestamp
GROUP BY thumbnail_ID
ORDER BY timestamp DESC
LIMIT 1000
ORDER BY timestamp ASC
LIMIT :limit
';
$result = $db->prepare($query);
$result->execute(array('shibboleth' => $shibboleth, 'last_timestamp' => $last_timestamp));
$result->execute(array(
'shibboleth' => $shibboleth,
'last_timestamp' => $last_timestamp,
'limit' => $limit,
));
$result = $result->fetchAll(PDO::FETCH_ASSOC);
// Előkészületek a lenti ciklushoz
......@@ -57,20 +73,22 @@ $day = $hungarian ?
array('','Hé','Ke','Sze','Csüt','Pé','Szo','Vas') :
array('','Mon','Tue','Wed','Thu','Fri','Sat','Sun');
$buffer = array();
$last_timestamp = -1;
$last_timestamp = $result[0]['timestamp'];
$burst_start_timestamp = $result[0]['timestamp'];
// Képek batch-ekbe rendezése
foreach($result as $sor) {
if ($previous_timestamp === -1 OR $previous_timestamp-$sor['timestamp'] > $groupping_time) {
$m = $month[(int)strftime('%m',$sor['timestamp']/1000)];
$w = $day[(int)strftime('%w',$sor['timestamp']/1000)];
$group_key = strftime("%Y. $m. %e. ($w) %k:%M", $sor['timestamp']/1000);
if (! empty($buffer)){
if (! empty($buffer) AND $sor['timestamp']-$previous_timestamp > $groupping_time) {
$m = $month[(int)strftime('%m',$previous_timestamp/1000)];
$w = $day[(int)strftime('%w',$previous_timestamp/1000)];
$t1 = trim(strftime('%k:%M:%S',$burst_start_timestamp/1000));
$t2 = trim(strftime('%k:%M:%S',$previous_timestamp/1000));
$t = ($t1 === $t2 ? $t1 : $t1." - ".$t2);
$group_key = strftime("%Y. $m. %e. ($w) $t", $burst_start_timestamp/1000);
$answer[$group_key] = $buffer;
$buffer = array();
$burst_start_timestamp = $sor['timestamp'];
$last_timestamp = $sor['timestamp'];
}
}
$previous_timestamp = $sor['timestamp'];
array_push($buffer, array(
'thumbnail_ID' => $sor['thumbnail_ID'],
......@@ -80,15 +98,17 @@ foreach($result as $sor) {
}
// Ha kevesebb, mint 1000 kép van, akkor mindenképp menjen ki az összes
if (count($result) === 1000) {
$m = $month[(int)strftime('%m',$sor['timestamp']/1000)];
$w = $day[(int)strftime('%w',$sor['timestamp']/1000)];
$group_key = strftime("%Y. $m. %e. ($w) %k:%M", $sor['timestamp']/1000);
if (! empty($buffer)) {
if (count($result) < $limit AND ! empty($buffer)) {
$m = $month[(int)strftime('%m',$previous_timestamp/1000)];
$w = $day[(int)strftime('%w',$previous_timestamp/1000)];
$t1 = strftime('%k:%M:%S',$burst_start_timestamp/1000);
$t2 = strftime('%k:%M:%S',$previous_timestamp/1000);
$t = ($t1 === $t2 ? $t1 : $t1."-".$t2);
$group_key = strftime("%Y. $m. %e. ($w) $t", $burst_start_timestamp/1000);
$answer[$group_key] = $buffer;
$burst_start_timestamp = $sor['timestamp'];
$last_timestamp = $sor['timestamp'];
}
}
// Adatok elküldése
die(json_encode(array(
......
selection/index.html
+ 154
− 96
View file @ 469627f5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
......@@ -9,41 +9,27 @@
<title>Sam</title>
<link rel="shortcut icon" href="../logo.ico">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500" rel="stylesheet">
<script defer
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
<script defer src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script defer
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script defer
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
<script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
<script async
src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.7.0/lazyload.min.js"
integrity="sha256-k/kzO+3QBdHN9oob6szQ+t7tCq47aoZQ7oXM2hdi6i8="
<script async src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.7.0/lazyload.min.js" integrity="sha256-k/kzO+3QBdHN9oob6szQ+t7tCq47aoZQ7oXM2hdi6i8="
crossorigin="anonymous"></script>
<!-- Luminous Lightbox js plugin: https://github.com/imgix/luminous -->
<script async
src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.0.0/Luminous.min.js"
integrity="sha256-CJMPaJ2QPWYx2oq/FqbYkyOsSQbWWAQmklkgcVpn3Sw="
<script async src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.0.0/Luminous.min.js" integrity="sha256-CJMPaJ2QPWYx2oq/FqbYkyOsSQbWWAQmklkgcVpn3Sw="
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.0.0/luminous-basic.min.css"
integrity="sha256-uCdaKiNzZUXz+QXd2W48tXdSDRmaWc7SxYe1xTc3A94="
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.0.0/luminous-basic.min.css" integrity="sha256-uCdaKiNzZUXz+QXd2W48tXdSDRmaWc7SxYe1xTc3A94="
crossorigin="anonymous" />
<style>
......@@ -132,91 +118,111 @@
transform: scale(1.0);
}
}
.group-select {
border-radius: 10%;
color: white !important;
opacity: 0.7;
cursor: pointer;
}
.group-select:hover {
opacity: 1;
}
.ok {
background-color: #009900;
padding: 5px 5px;
}
.nok {
background-color: #c30101;
padding: 5px 5px;
}
.idn {
background-color: #555555;
padding: 5px 5px;
}
input[type="checkbox"] {
display: none;
}
label {
position: relative;
margin: 2px;
cursor: pointer;
}
label img {
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked+label img {
transform: scale(0.9);
box-shadow: 0 0 10px 4px #009900;
z-index: -1;
}
:not(:checked)+label img {
transform: scale(0.9);
box-shadow: 0 0 10px 4px #c30101;
z-index: -1;
}
:indeterminate+label img {
transform: scale(1);
box-shadow: 0 0 0;
}
.w-33 {
width: 33% !important;
}
@media (min-width: 400px) {
.w-sm-25 {
width: 25% !important;
}
}
@media (min-width: 650px) {
.w-md-20 {
width: 20% !important;
}
}
@media (min-width: 800px) {
.w-lg-16 {
width: 16.6% !important;
}
}
@media (min-width: 1000px) {
.w-xl-8 {
width: 8.33% !important;
}
}
.img-outer {
position: relative;
width: 100%;
padding-bottom: 100%;
}
.img-inner {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.img-div {
float: left;
padding-right: 5px!important
}
#image-wrapper {
margin-bottom: 3em;
}
......@@ -232,21 +238,29 @@
<div class="collapse navbar-collapse" id="navbarToggle">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><span class="text">Selection</span><span class="text" style="display:none">Válogatás</span></a>
<a class="nav-link" href="#">
<span class="text">Selection</span>
<span class="text" style="display:none">Válogatás</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#"><span class="text">Profile</span><span class="text" style="display:none">Profil</span></a>
<a class="nav-link disabled" href="#">
<span class="text">Profile</span>
<span class="text" style="display:none">Profil</span>
</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav mx-auto">
<a href="javascript:void(0)" onclick="save();">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 24 24">
<path fill-opacity="0.6" d="M13 3h2.996v5h-2.996v-5zm11 1v20h-24v-24h20l4 4zm-17 5h10v-7h-10v7zm15-4.171l-2.828-2.829h-.172v9h-14v-9h-3v20h20v-17.171zm-3 10.171h-14v1h14v-1zm0 2h-14v1h14v-1zm0 2h-14v1h14v-1z"/>
<path fill-opacity="0.6" d="M13 3h2.996v5h-2.996v-5zm11 1v20h-24v-24h20l4 4zm-17 5h10v-7h-10v7zm15-4.171l-2.828-2.829h-.172v9h-14v-9h-3v20h20v-17.171zm-3 10.171h-14v1h14v-1zm0 2h-14v1h14v-1zm0 2h-14v1h14v-1z"
/>
</svg>
</a>
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
......@@ -259,7 +273,10 @@
<div id="error-setup" style="display:none">
<div class="row">
<div class="col-sm-10 offset-sm-1 col-lg-8 offset-lg-2">
<p><span class="text">Error encountered while loading page... :(</span><span class="text" style="display:none">Valami hiba történt az oldal betöltése során... :(</span></p>
<p>
<span class="text">Error encountered while loading page... :(</span>
<span class="text" style="display:none">Valami hiba történt az oldal betöltése során... :(</span>
</p>
</div>
</div>
</div>
......@@ -268,15 +285,18 @@
<div class="col-sm-10 offset-sm-1 col-lg-8 offset-lg-2">
<p>
<span class="text">
Photos below are considered as images of you.
Please, separate the photos showing you from photos showing someone else
(green = photos of you, red = photos of others).
You can save your work by clicking the save icon on the navigation bar above.</span>
Photos below are considered as images of you. Please, separate the photos showing you from photos showing someone else (green
= photos of you, red = photos of others).
<span class="mobile">Right button click</span>
<span class="mobile" style="display:none">Long tap</span>
on images reveals the full-size version of images. You can save your work any time by clicking the save icon on the navigation
bar above.</span>
<span class="text" style="display:none">
Az alábbi fotókról azt gondoljuk, hogy téged ábrázolnak.
Kérlek, válogasd szét a rólad készült képeket a másokról készült képektől
(zöld = rólad készült képek, piros = mások képei).
Menteni a fenti menüsorban található mentés ikonra kattintva tudsz.</span>
Az alábbi fotókról azt gondoljuk, hogy téged ábrázolnak. Kérlek, válogasd szét a rólad készült képeket a másokról készült
képektől (zöld = rólad készült képek, piros = mások képei). A képekre
<span class="mobile">jobb gombbal kattintva</span>
<span class="mobile" style="display:none">hosszan koppintva</span>
megjelennek teljes méretben. Menteni akármikor tudsz a fenti menüsorban található mentés ikonra kattintva tudsz.</span>
</p>
</div>
</div>
......@@ -286,30 +306,33 @@
</div>
<script>
function mobileAndTabletcheck() {
var check = false;
(function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera);
return check;
};
var isMobile = mobileAndTabletcheck();
var language = navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage);
var shibboleth = window.location.href.split("?")[1];
waitFor("jQuery", setup);
function waitFor(what, callback) {
if (window[what]) callback();
else setTimeout(() => waitFor(what, callback), 50);
}
function setup() {
if (language === "hu" || language === "hu-HU")
$(".text").toggle();
$.post("data.php")
.done( data => {
function receivePhotos(data) {
var parsed = JSON.parse(data);
var photos = parsed['photos'];
last_timestamp = parsed['last_timestamp']; // global variable!
var html = "";
for (var date of Object.keys(photos)) {
for (var date of Object.keys(photos).reverse()) {
html += `<div style="overflow: auto">
<div class="mb-2 mt-3">
<p class="font-weight-bold mb-1">${date}</p>
<a class="group-select ok" data-group="${date}">accept all<a>
<a class="group-select nok" data-group="${date}">reject all</a>
<a class="group-select idn" data-group="${date}">deselect all</a>
</div>`;
for (var photo of photos[date].reverse()) {
</div><div class="img-burst">`;
for (var photo of photos[date]) {
html += `
<div class="w-33 w-sm-25 w-md-20 w-lg-16 w-xl-8 img-div">
<span class="lightbox" href="../img/${photo['photo_path']}">
......@@ -320,10 +343,9 @@
</span>
</div>`;
}
html += '</div>'
html += '</div></div>'
}
$("#description").show();
$("#image-wrapper").html(html);
$("#image-wrapper").append(html);
$(":checkbox").prop("indeterminate", true);
$(".group-select").click(function () {
var group_date = $(this).data("group");
......@@ -331,16 +353,52 @@
.prop("indeterminate", $(this).hasClass("idn"))
.prop("checked", $(this).hasClass("ok"));
});
waitFor("LazyLoad", () => myLazyLoad = new LazyLoad());
waitFor("Luminous", () =>
}
function setupLightbox() {
new LuminousGallery(
document.querySelectorAll('.lightbox'),{},{openTrigger: 'contextmenu'}) );
document.querySelectorAll('.lightbox'), {}, { openTrigger: 'contextmenu' })
}
function setup() {
if (language === "hu" || language === "hu-HU")
$(".text").toggle();
if (isMobile)
$(".mobile").toggle();
var postData = typeof shibboleth !== 'undefined' ? {'uid':shibboleth} : {};
$.post("data.php", postData)
.done(data => {
receivePhotos(data);
$("#description").show();
waitFor("LazyLoad", () => myLazyLoad = new LazyLoad());
waitFor("Luminous", setupLightbox);
})
.fail((error) => { console.log(error); $("#error-setup").show(); })
.always(() => $("#loader").hide());
}
function save() {
IDs = {};
IDs.accepted = [];
IDs.rejected = [];
$("input:checkbox").each(function () {
var $this = $(this);
if (!$this.is(":indeterminate"))
IDs[$this.is(":checked") ? "accepted" : "rejected"].push($this.attr("id"));
});
IDs.last_timestamp = last_timestamp;
if (typeof shibboleth !== 'undefined')
IDs.uid = shibboleth;
$.post("data.php", IDs)
.done(data => {
gdata = data; // TODO only for debug
receivePhotos(data);
for (var ID of IDs.accepted.concat(IDs.rejected))
$('div #'+ID).closest('div').remove()
for (var item of $('.img-burst'))
if (item.children.length == 0) $(item).parent().remove();
myLazyLoad.update();
setupLightbox();
});
}
</script>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment