junior/SimpleModelSite
junior/SimpleModelSite
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add jQueryUI dialogs and functionalty for editing album and image metadata

Browse Source
This commit is contained in:
Junior 2022-02-15 21:01:05 +00:00
parent f308cd4093
commit 5f3ae13111
8 changed files with 329 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ajax/getalbum.php Normal file
View File

@ -0,0 +1,30 @@
<?php
require '../header.php';
$data = array();
$data["success"] = false;
if ( !isset($_REQUEST['albumid']) ) {
sendResponse($data);
}
$album = new Album($_REQUEST['albumid']);
if ( $album->getID() == 0 ) {
sendResponse($data);
}
$data["success"] = true;
$data["album"] = $album;
sendResponse($data);
function sendResponse($data) {
header('Content-Type: application/json');
echo json_encode($data);
exit();
}
exit();
// vim: set ts=4:sw=4

2
ajax/getalbuminfo.php
View File

@ -25,7 +25,7 @@ if ( $_SESSION['currentalbum'] == 0 ) {
foreach ( $griditems as $griditem ) {
$data["albumcontents"] .= "<div class=\"thumbnail_grid\">";
$data["albumcontents"] .= "<img class=\"thumbnail_grid_image albumthumbnail\" id=\"griditem_{$griditem->getID()}\" src=\"{$griditem->getThumbnail(URLSAFE)}\" />";
$data["albumcontents"] .= "<div class=\"thumbnail_grid_title\">{$griditem->getTitle(HTMLSAFE)}</div>";
$data["albumcontents"] .= "<div class=\"thumbnail_grid_title textlink griditem_title\" id=\"title_{$griditem->getID()}\">{$griditem->getTitle(HTMLSAFE)}</div>";
$data["albumcontents"] .= "</div>\n";
}
$data["currentalbum"] = $_SESSION['currentalbum'];

30
ajax/getimage.php Normal file
View File

@ -0,0 +1,30 @@
<?php
require '../header.php';
$data = array();
$data["success"] = false;
if ( !isset($_REQUEST['imageid']) ) {
sendResponse($data);
}
$image = new Image($_REQUEST['imageid']);
if ( $image->getID() == 0 ) {
sendResponse($data);
}
$data["image"] = $image;
$data["success"] = true;
sendResponse($data);
function sendResponse($data) {
header('Content-Type: application/json');
echo json_encode($data);
exit();
}
exit();
// vim: set ts=4:sw=4

33
ajax/savealbum.php Normal file
View File

@ -0,0 +1,33 @@
<?php
require '../header.php';
$data = array();
$data["success"] = false;
if ( !isset($_REQUEST['albumid']) || !isset($_REQUEST['title']) || ($_REQUEST['title'] == "") ) {
sendResponse($data);
}
$album = new Album($_REQUEST['albumid']);
if ( $album->getID() == 0 ) {
sendResponse($data);
}
$album->setTitle($_REQUEST['title']);
$album->setDescription($_REQUEST['description']);
$album->save();
$data["success"] = true;
$data["album"] = $album;
sendResponse($data);
function sendResponse($data) {
header('Content-Type: application/json');
echo json_encode($data);
exit();
}
exit();
// vim: set ts=4:sw=4

34
ajax/saveimage.php Normal file
View File

@ -0,0 +1,34 @@
<?php
require '../header.php';
$data = array();
$data["success"] = false;
if ( !isset($_REQUEST['imageid']) || !isset($_REQUEST['title']) || ($_REQUEST['title'] == "") ) {
sendResponse($data);
}
$image = new Image($_REQUEST['imageid']);
if ( $image->getID() == 0 ) {
sendResponse($data);
}
$album = new Album($image->getAlbumID());
$image->setTitle($_REQUEST['title']);
$image->setDescription($_REQUEST['description']);
$image->save();
$data["success"] = true;
$data["image"] = $image;
sendResponse($data);
function sendResponse($data) {
header('Content-Type: application/json');
echo json_encode($data);
exit();
}
exit();
// vim: set ts=4:sw=4

2
class_image.php
View File

@ -278,7 +278,7 @@ class Image implements JsonSerializable {
$query = "INSERT INTO " . AppDB::TABLE_IMAGES . " ";
$query .= "(id, album_id, filename, title, description, createtime) ";
$query .= "VALUES(NULL, :album_id, :filename, :title, :description, NOW()) ";
$query .= "VALUES(:id, :album_id, :filename, :title, :description, NOW()) ";
$query .= "ON DUPLICATE KEY UPDATE ";
$query .= "album_id=:album_id, filename=:filename, title=:title, description=:description";
$sth = $globaldbh->prepare($query);

181
js/scalemodels.js
View File

@ -1,6 +1,52 @@
var lightboxImages = [];
var editAlbumID = 0;
var editImageID = 0;
$(document).ready(function() {
$("#edit_album").dialog({
autoOpen: false,
height: 250,
width: 350,
closeOnEscape: true,
draggable: false,
close: function() {
editAlbumID = 0;
$("#edit_album_title").val("");
$("#edit_album_description").val("");
},
buttons: [
{
text: "Save",
click: function() { saveAlbumInfo(); }
},
{
text: "Cancel",
click: function() { $(this).dialog("close"); }
}
]
});
$("#edit_image").dialog({
autoOpen: false,
height: 250,
width: 350,
closeOnEscape: true,
draggable: false,
close: function() {
editImageID = 0;
$("#edit_image_title").val("");
$("#edit_image_description").val("");
},
buttons: [
{
text: "Save",
click: function() { saveImageInfo(); }
},
{
text: "Cancel",
click: function() { $(this).dialog("close"); }
}
]
});
$("#btn_refresh").click(function() { refreshAlbums() });
$("#btn_album_0").click(function() { showAlbum($(this)) });
getAlbumInfo();
@ -21,6 +67,20 @@ function refreshAlbums() {
});
}
function updateLightboxImages() {
$.ajax({
type: 'GET',
url: 'ajax/getalbuminfo.php',
dataType: 'json',
success: function(data, stat, jqo) {
lightboxImages = data.images;
lightboxImages.forEach(function(image, index) {
$("#title_"+image.id).text(image.title);
});
},
});
}
function getAlbumInfo() {
$.ajax({
type: 'GET',
@ -44,6 +104,13 @@ function getAlbumInfo() {
showImage($(this));
}
});
$(".griditem_title").click(function() {
if ( data.currentalbum == 0 ) {
editAlbum($(this));
} else {
editImage($(this));
}
});
console.log(lightboxImages);
},
error: function(jqp, status, error) {
@ -62,11 +129,6 @@ function showImage(clickedElement) {
images.push(image.imageurl);
captions.push(image.description);
});
/*
images.forEach(function(image, index) {
if ( basename(image, "/") == basename(clickedElement.attr("src"), "/") ) startIndex = index;
});
*/
SimpleLightbox.open({
items: images,
captions: captions,
@ -93,4 +155,113 @@ function showAlbum(clickedElement) {
});
}
function saveImageInfo() {
if ( editImageID == 0 ) return;
if ( $("#edit_image_title").val() == "" ) {
toastr.error("Image title cannot be blank!", "Image Title Error");
return;
}
$.ajax({
type: 'POST',
url: 'ajax/saveimage.php',
dataType: 'json',
data: {
imageid: editImageID,
title: $("#edit_image_title").val(),
description: $("#edit_image_description").val()
},
success: function(data, stat, jqo) {
if ( data.success ) {
$("#edit_image").dialog("close");
$("#title_"+data.image.id).text(data.image.title);
updateLightboxImages();
} else {
toastr.error("Could not get image information!", "Image Data Error");
}
},
error: function(jqp, status, error) {
toastr.error("Error saving image!\n" + error, "Server Error");
}
});
}
function saveAlbumInfo() {
if ( editAlbumID == 0 ) return;
if ( $("#edit_album_title").val() == "" ) {
toastr.error("Album title cannot be blank!", "Album Title Error");
return;
}
$.ajax({
type: 'POST',
url: 'ajax/savealbum.php',
dataType: 'json',
data: {
albumid: editAlbumID,
title: $("#edit_album_title").val(),
description: $("#edit_album_description").val()
},
success: function(data, stat, jqo) {
if ( data.success ) {
$("#edit_album").dialog("close");
$("#title_"+data.album.id).text(data.album.title);
} else {
toastr.error("Could not get album information!", "Album Data Error");
}
},
error: function(jqp, status, error) {
toastr.error("Error saving album!\n" + error, "Server Error");
}
});
}
function editAlbum(clickedElement) {
var albumid = clickedElement.attr("id").substring(clickedElement.attr("id").lastIndexOf("_") + 1);
$.ajax({
type: 'GET',
url: 'ajax/getalbum.php',
dataType: 'json',
data: {
albumid: albumid
},
success: function(data, stat, jqo) {
if ( data.success ) {
editAlbumID = data.album.id;
$("#edit_album_title").val(data.album.title);
$("#edit_album_description").val(data.album.description);
$("#edit_album").dialog("open");
} else {
toastr.error("Could not get album information!", "Album Data Error");
}
},
error: function(jqp, status, error) {
toastr.error("Error getting album!\n" + error, "Server Error");
}
});
}
function editImage(clickedElement) {
var imageid = clickedElement.attr("id").substring(clickedElement.attr("id").lastIndexOf("_") + 1);
$.ajax({
type: 'GET',
url: 'ajax/getimage.php',
dataType: 'json',
data: {
imageid: imageid
},
success: function(data, stat, jqo) {
if ( data.success ) {
editImageID = data.image.id;
$("#edit_image_title").val(data.image.title);
$("#edit_image_description").val(data.image.description);
$("#edit_image").dialog("open");
} else {
toastr.error("Could not get image information!", "Image Data Error");
}
},
error: function(jqp, status, error) {
toastr.error("Error getting image!\n" + error, "Server Error");
}
});
}
// vim: ts=4:sw=4

24
scalemodels.php
View File

@ -21,6 +21,30 @@ if ( $currentuser->isLoggedIn() ) {
</div>
<div id="albumcontents">
</div>
<!-- jQueryUI Dialog for editing album info -->
<div id="edit_album" title="Edit Album Properties" class="hidden">
<div>
<label for="edit_album_title"><b>Title</b></label>
<input placeholder="Enter Title" name="edit_album_title" id="edit_album_title" size="40" required>
</div>
<p />
<div>
<label for="edit_album_description"><b>Description</b></label>
<textarea placeholder="Enter Description" name="edit_album_description" id="edit_album_description" rows="5" cols="40"></textarea>
</div>
</div>
<!-- jQueryUI Dialog for editing image info -->
<div id="edit_image" title="Edit Image Properties" class="hidden">
<div>
<label for="edit_image_title"><b>Title</b></label>
<input placeholder="Enter Title" name="edit_image_title" id="edit_image_title" size="40" required>
</div>
<p />
<div>
<label for="edit_image_description"><b>Description</b></label>
<textarea placeholder="Enter Description" name="edit_image_description" id="edit_image_description" rows="5" cols="40"></textarea>
</div>
</div>
<?php
includeHTMLFooter("scalemodels.js");