Add jQueryUI dialogs and functionalty for editing album and image metadata

ajax/getalbum.php

@@ -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

ajax/getalbuminfo.php

@@ -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'];

ajax/getimage.php

@@ -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

ajax/savealbum.php

@@ -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

ajax/saveimage.php

@@ -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

class_image.php

@@ -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);

htmlfooter.php

@@ -7,6 +7,8 @@
   </div>
 <!-- Include jQuery before anything else -->
 <script type="text/javascript" src="core/jquery-3.6.0.min.js"></script>
+<!-- Followed immediately by jQueryUI -->
+<script type="text/javascript" src="core/jquery-ui.min.js"></script>
 <!-- Toastr library -->
 <script type="text/javascript" src="core/toastr.min.js"></script>
 <!-- simpleLightbox library -->

htmlheader.php

@@ -6,8 +6,11 @@
   <meta name="description" content="Big Wood's World" />
   <meta name="keywords" content="The ramblings of an old man." />
   <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
+  <!-- jQueryUI CSS -->
+  <link rel="stylesheet" type="text/css" href="core/jquery-ui.min.css" />
   <!-- Toastr CSS -->
   <link rel="stylesheet" type="text/css" href="core/toastr.min.css" />
+  <!-- simpleLightbox CSS -->
   <link rel="stylesheet" type="text/css" href="core/simpleLightbox.min.css" />
   <link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
   <link rel="shortcut icon" href="graphics/oldman_head.gif">

js/scalemodels.js

@@ -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

scalemodels.php

@@ -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");