Adding Image Group Functions

README.md

@@ -7,10 +7,10 @@
 The only gallery made by a maned wolf
 
 ## Special thanks
-- Carty: Kickstarting development and SQL/PHP development
+* Carty: Kickstarting development and SQL/PHP development
-- Jeetix: Helping patch holes in some features
+* Jeetix: Helping patch holes in some features
-- mrHDash, Verg, Fennec, Carty, Jeetix and everyone else for helping with early bug testing
+* mrHDash, Verg, Fennec, Carty, Jeetix and everyone else for helping with early bug testing
-- <a class='link' href="https://phosphoricons.com/">Phosphor</a> for providing nice SVG icons
+* <a class='link' href="https://phosphoricons.com/">Phosphor</a> for providing nice SVG icons
 
 ## How to setup
 ### Downloading & installing
@@ -57,16 +57,16 @@ If you run into errors with connecting to the database, you may need to install
 
 You first need to head over to ```app/server/conn.php``` and set the correct information, if you're using localhost, this should be the following details: 
 
-- localhost
+* localhost
-- (username)
+* (username)
-- (password)
+* (password)
-- Gallery
+* Gallery
 
 I recommend using a database name such as Gallery, but others should work just as well.
 
 I also recommend not using root for this and setting up a user specifically for this, but I will not go through the process of making a such user here.
 
-You will next need to setup the following 5 tables:
+You will next need to setup the following 6 tables:
 
 #### Images
     CREATE TABLE images (
@@ -112,6 +112,15 @@ You will next need to setup the following 5 tables:
         permanent BOOL NOT NULL
     );
 
+### Groups
+    CREATE TABLE groups (
+        id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
+        image_list VARCHAR(255),
+        author VARCHAR(50),
+        last_modified TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    );
+
 ### Manifest
 In the ```app/settings/manifest.json``` you have a list of infomation about your website. You must change ```user_name``` to your prefered name, ```is_testing``` to false (or anything else) as that is used for development and ```upload_max``` to your prefered file size max in MBs.
 

app/image/group.php

@@ -0,0 +1,69 @@
+<?php
+session_start();
+// Include server connection
+include dirname(__DIR__) . "/server/conn.php";
+include dirname(__DIR__) . "/app.php";
+
+use App\Account;
+use App\Image;
+
+$user_info = new Account();
+$image_info = new Image();
+
+$user_ip = $user_info->get_ip();
+
+/*
+ |-------------------------------------------------------------
+ | Image Groups
+ |-------------------------------------------------------------
+ | The Long-awaited feature
+ |-------------------------------------------------------------
+*/
+if (isset($_POST['group_submit'])) {
+    $sql = "SELECT author FROM groups WHERE id= ?";
+
+    if ($stmt = mysqli_prepare($conn, $sql)) {
+        // Bind variables to the prepared statement as parameters
+        mysqli_stmt_bind_param($stmt, "i", $param_user_id);
+        
+        $param_user_id = $_POST['group_id'];
+        
+        $stmt->execute();
+        $query = $stmt->get_result();
+
+        if ($_SESSION['id'] == $query || $user_info->is_admin($conn, $_SESSION['id'])) {
+            $sql = "UPDATE groups SET image_list = ? WHERE id = ?";
+
+            // Checking if databse is doing ok
+            if ($stmt = mysqli_prepare($conn, $sql)) {
+                mysqli_stmt_bind_param($stmt, "si", $param_images, $param_id);
+
+                // Setting parameters
+                $param_images = implode(" ", $_POST['group_images']);
+                $param_id = $_POST['group_id'];
+
+                // Attempt to execute the prepared statement
+                if (mysqli_stmt_execute($stmt)) {
+                    ?>
+                        <script>
+                            sniffleAdd('Success!!!', 'Updates the image group! Redirecting.... soon', 'var(--green)', 'assets/icons/check.svg');
+                            setTimeout(function(){window.location.href = "group.php?id=<?php echo $_POST['group_id']; ?>";}, 2000);
+                        </script>
+                    <?php
+                } else {
+                    ?>
+                        <script>
+                            sniffleAdd('Oopsie....', 'An error occured on the servers', 'var(--red)', 'assets/icons/cross.svg');
+                        </script>
+                    <?php
+                }
+            }
+        } else {
+            ?>
+                <script>
+                    sniffleAdd('Gwa Gwa', 'You\'re not privilaged enough to do thissss!', 'var(--red)', 'assets/icons/cross.svg');
+                </script>
+            <?php
+        }
+    }
+}

assets/ui/header.php

@@ -20,7 +20,7 @@
 <meta name="theme-color" content="#8C977D">
 <!-- Twitter -->
 <meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:description" content="<?php echo $user_settings['website_description']; ?>">/
+<meta name="twitter:description" content="<?php echo $user_settings['website_description']; ?>"/>
 <meta name="twitter:title" content="<?php echo $user_settings['website_name']; ?>"/>
 
 

css/main.css

@@ -582,6 +582,46 @@ nav .btn {
   text-rendering: optimizeLegibility;
 }
 
+/*
+ |-------------------------------------------------------------
+ | Groups
+ |-------------------------------------------------------------
+*/
+.group-root {
+  margin-bottom: 1rem;
+  padding: 0.5rem 0.5rem 0 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0.4rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
+  transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1) transform 0.15s cubic-bezier(0.19, 1, 0.22, 1);
+}
+.group-root > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.group-root h1,
+.group-root h2,
+.group-root h3,
+.group-root h4,
+.group-root h5 {
+  font-family: "Lexend Deca", sans-serif;
+  text-rendering: optimizeLegibility;
+}
+.group-root p,
+.group-root a,
+.group-root button,
+.group-root input {
+  font-family: "Secular One", sans-serif;
+  text-rendering: optimizeLegibility;
+}
+
+.selectedImage {
+  outline: #8C977D solid 0.3rem;
+}
+
 /*
  |-------------------------------------------------------------
  | profile

css/scss/_body.scss

@@ -398,6 +398,21 @@
     @include defaultFont();
 }
 
+/*
+ |-------------------------------------------------------------
+ | Groups
+ |-------------------------------------------------------------
+*/
+.group-root {
+    @include defaultDecoration($page-accent);
+    @include defaultFont();
+
+    transition: outline 0.1s cubic-bezier(.19, 1, .22, 1) transform 0.15s cubic-bezier(.19, 1, .22, 1);
+}
+.selectedImage {
+    outline: $page-accent solid 0.3rem;
+}
+
 /*
  |-------------------------------------------------------------
  | profile

group.php

@@ -0,0 +1,179 @@
+<?php
+    require_once __DIR__."/app/required.php";
+    
+    use App\Account;
+	use App\Diff;
+
+	$user_info = new Account;
+	$diff = new Diff();
+?>
+
+<!DOCTYPE html>
+<html>
+
+<head>
+	<?php require_once __DIR__."/assets/ui/header.php"; ?>
+</head>
+
+<body>
+	<?php require_once __DIR__."/assets/ui/nav.php"; ?>
+
+    <div class="group-root">
+        <?php
+            if (!isset($_GET['id']) || empty($_GET['id'])) {
+                header("Location: index.php");
+            } elseif (isset($_GET['id'])) {
+                $sql = "SELECT * FROM groups WHERE id = ?";
+
+                if ($stmt = mysqli_prepare($conn, $sql)) {
+                    // Bind variables to the prepared statement as parameters
+                    mysqli_stmt_bind_param($stmt, "i", $param_group_id);
+                    
+                    $param_group_id = $_GET['id'];
+                    
+                    $stmt->execute();
+                    $query = $stmt->get_result();
+
+                    $group = mysqli_fetch_array($query);
+
+                    $image_list = explode(" ", $group['image_list']);
+                }
+            }
+        ?>
+        <h2><?php echo $group['group_name']; ?></h2>
+        <p>By: <?php echo $group['author']; ?></p>
+        <p>Made on: <?php echo $group['created_at']; ?></p>
+        <p>Updated on: <?php echo $group['last_modified']; ?></p>
+        <?php
+            if ($_SESSION['id'] == $group['author'] || $user_info->is_admin($conn, $_SESSION['id'])) {
+                $privilaged = True;
+            } else {
+                $privilaged = False;
+            }
+
+            if (isset($_GET['mode']) && $_GET['mode'] == "edit") {
+                if (!$privilaged) header("Location: group.php?id=".$_GET['id']);
+
+                echo "<button class='btn btn-bad'>Delete Group</button>";
+
+                $image_request = mysqli_query($conn, "SELECT * FROM images");
+                echo "<form id='groupForm'>"; 
+                while ($image = mysqli_fetch_array($image_request)) {
+                    if (in_array($image['id'], $image_list)) {
+                        echo "<input style='display: none;' type='checkbox' id='".$image['id']."' name='".$image['id']."' checked/>";
+                    } else {
+                        echo "<input style='display: none;' type='checkbox' id='".$image['id']."' name='".$image['id']."'/>";
+                    } 
+                }
+                echo "<button id='groupSubmit' class='btn btn-good' type='submit'>Save Group</button></form>";
+
+                echo "<a href='group.php?id=".$_GET['id']."' class='btn btn-neutral'>Cancel</a>";
+            } else {
+                if ($privilaged) echo "<a href='group.php?id=".$_GET['id']."&mode=edit' class='btn btn-neutral'>Edit</a>";
+            }
+        ?>
+    </div>
+
+    <div class="gallery-root">
+        <?php
+            if (isset($_GET['mode']) && $_GET['mode'] == "edit") {                
+                $image_request = mysqli_query($conn, "SELECT * FROM images ORDER BY id DESC");
+
+                while ($image = mysqli_fetch_array($image_request)) {
+                    // Getting thumbnail
+                    if (file_exists("images/thumbnails/".$image['imagename'])) {
+                        $image_path = "images/thumbnails/".$image['imagename'];
+                    } else {
+                        $image_path = "images/".$image['imagename'];
+                    }
+                    
+                    if (in_array($image['id'], $image_list)) {
+                        echo "<div id='".$image['id']."' class='gallery-item selectedImage'>
+                            <img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'>
+                            </div>";
+                    } else {
+                        echo "<div id='".$image['id']."' class='gallery-item'>
+                            <img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'>
+                            </div>";
+                    } 
+                }
+
+                ?>
+                    <script>
+                        $(".gallery-item").click(function() {
+                            if (this.classList.contains("selectedImage")) {
+                                deselect(this);
+                            } else {
+                                select(this);
+                            }
+                        });
+
+                        function select(item) {
+                            document.getElementById(item.id).checked = true;
+
+                            item.classList.add("selectedImage");
+                        }
+                        function deselect(item) {
+                            document.getElementById(item.id).checked = false;
+
+                            item.classList.remove("selectedImage");
+                        }
+
+                        function getList() {
+                            var checkedBoxes = document.querySelectorAll('input[type=checkbox]:checked');
+                            var images = [];
+
+                            checkedBoxes.forEach(element => {
+                                images.push(element.id);
+                            });
+
+                            return images;
+                        }
+
+                        $("#groupForm").submit(function(event) {
+                            event.preventDefault();
+
+                            var groupSubmit = $("#groupSubmit").val();
+                            var images = getList();
+
+                            $("#sniffle").load("app/image/group.php", {
+                                group_images: images,
+                                group_id: <?php echo $_GET['id']; ?>,
+                                group_submit: groupSubmit
+                            });
+                        });
+                    </script>
+                <?php
+            } else {
+                foreach ($image_list as $image) {
+                    // Reading images from table
+                    $image_request = mysqli_query($conn, "SELECT * FROM images WHERE id = ".$image);
+    
+                    while ($image = mysqli_fetch_array($image_request)) {
+                        // Getting thumbnail
+                        if (file_exists("images/thumbnails/".$image['imagename'])) {
+                            $image_path = "images/thumbnails/".$image['imagename'];
+                        } else {
+                            $image_path = "images/".$image['imagename'];
+                        }
+        
+                        // Check for NSFW tag
+                        if (str_contains($image['tags'], "nsfw")) {
+                            echo "<div class='gallery-item'>
+                                <a href='image.php?id=".$image['id']."' class='nsfw-warning'><img class='svg' src='assets/icons/warning_red.svg'><span>NSFW</span></a>
+                                <a href='image.php?id=".$image['id']."'><img class='gallery-image nsfw-blur' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>
+                                </div>";
+                        } else {
+                            echo "<div class='gallery-item'>
+                                <a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>
+                                </div>";
+                        }
+                    }
+                }
+            }
+        ?>
+    </div>
+
+    <?php require_once __DIR__."/assets/ui/footer.php"; ?>
+</body>
+</html>

index.php

@@ -63,14 +63,14 @@
 
 			// Check for NSFW tag
 			if (str_contains($image['tags'], "nsfw")) {
-                echo "<div class='gallery-item'>";
+				echo "<div class='gallery-item'>
-                echo "<a href='image.php?id=".$image['id']."' class='nsfw-warning'><img class='svg' src='assets/icons/warning_red.svg'><span>NSFW</span></a>";
+					<a href='image.php?id=".$image['id']."' class='nsfw-warning'><img class='svg' src='assets/icons/warning_red.svg'><span>NSFW</span></a>
-                echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image nsfw-blur' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
+					<a href='image.php?id=".$image['id']."'><img class='gallery-image nsfw-blur' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>
-                echo "</div>";
+					</div>";
 			} else {
-				echo "<div class='gallery-item'>";
+				echo "<div class='gallery-item'>
-                echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
+					<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>
-                echo "</div>";
+					</div>";
 			}
 		}
 	?>

profile.php

@@ -22,7 +22,7 @@
         } elseif (isset($_GET['user'])) {
             $user = $user_info->get_user_info($conn, $_GET['user']);
 
-            $join_date = new DateTime($user['created_at']);;
+            $join_date = new DateTime($user['created_at']);
 	?>
 
         <div class="profile-root">
@@ -74,14 +74,14 @@
     
                         // Check for NSFW tag
                         if (str_contains($image['tags'], "nsfw")) {
-                            echo "<div class='gallery-item'>";
+                            echo "<div class='gallery-item'>
-                            echo "<a href='image.php?id=".$image['id']."' class='nsfw-warning'><img class='svg' src='assets/icons/warning_red.svg'><span>NSFW</span></a>";
+                                <a href='image.php?id=".$image['id']."' class='nsfw-warning'><img class='svg' src='assets/icons/warning_red.svg'><span>NSFW</span></a>
-                            echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image nsfw-blur' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
+                                <a href='image.php?id=".$image['id']."'><img class='gallery-image nsfw-blur' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>
-                            echo "</div>";
+                                </div>";
                         } else {
-                            echo "<div class='gallery-item'>";
+                            echo "<div class='gallery-item'>
-                            echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
+                                <a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>
-                            echo "</div>";
+                                </div>";
                         }			
                     }
                 }