website/public/API/getPosts.php

@@ -0,0 +1,24 @@
+<?php
+
+if(empty($_POST["usr"])) {
+    header('HTTP/1.1 500 Non enough arguments');
+}
+
+require_once ("../../queries/user.php");
+require_once ("../../queries/nicetime.php");
+
+$posts = selectAllUserPosts($_POST["usr"]);
+
+if(!$posts) {
+    header('HTTP/1.1 500 Query failed');
+}
+
+$results = $posts->fetchAll(PDO::FETCH_ASSOC);
+
+for($i = 0; $i < sizeof($results); $i++) {
+    $results[$i]["nicetime"] = nicetime($results[$i]["creationdate"]);
+}
+
+//$results[0]["niceTime"] = nicetime($results[0]["creationdate"]);
+
+echo json_encode($results);

website/public/js/masonry.js

@@ -11,12 +11,10 @@ function scrollbarMargin(width, overflow) {
     });
 }
 
-function requestPost(post) {
+function requestPost(postID) {
     $(".modal").show();
-    $.get(
+
-        "API/loadPost.php",
+    $.get("API/loadPost.php", { postID : postID }).done(function(data) {
-        $(post).children("form").serialize()
-    ).done(function (data) {
         $('.modal-default').hide();
         var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
         scrollbarMargin(scrollBarWidth, 'hidden');
@@ -26,37 +24,54 @@ function requestPost(post) {
 }
 
 $(window).on("load", function() {
-    console.log("LOADED");
+    $(".modal-close").click(function () {
-    container = $("div.posts");
+        $(".modal").hide();
-    posts = container.children();
+        scrollbarMargin(0, 'auto');
-    posts.remove();
+        $('#modal-response').hide();
-
+        $('.modal-default').show();
-    column = $('<div class="column"></div>').append(posts);
+    });
-    container.append(column);
-
-    mansonry();
-    mansonry();
 });
 
+var masonryMode = 0;
+
 $(window).resize(function() {
     clearTimeout(window.resizedFinished);
     window.resizeFinished = setTimeout(function() {
-        mansonry();
+        masonry(masonryMode);
     }, 250);
 });
 
-function mansonry() {
+var $container = $(".posts");
 
+function masonry(mode) {
+    masonryMode = mode;
+    $container.children().remove();
     columnCount = Math.floor($(".posts").width() / 250);
-    console.log("columns: " + columnCount);
 
     /*
      * Initialise columns.
      */
     var columns = new Array(columnCount);
+    var $columns = new Array(columnCount);
     for (i = 0; i < columnCount; i++) {
-        columns[i] = [0, []];
+        $column = $("<div class=\"column\">");
-        console.log(columns[i]);
+        $column.width(100/columnCount + "%");
+        $container.append($column);
+        columns[i] = [0, $column];
+    }
+
+    if(mode == 1) {
+        $postInput = $("<div class=\"post platform\">");
+        $form = $postInput.append($("<form>"));
+
+        $form.append($("<input class=\"newpost\" placeholder=\"Titel\" type=\"text\">"));
+        $form.append($("<textarea class=\"newpost\" placeholder=\"Schrijf een berichtje...\">"));
+        $form.append($("<input value=\"Plaats!\" type=\"submit\">"));
+        columns[0][1].append($postInput);
+
+        $postInput.on("load", function() {
+            columns[0][0] = $postInput.height() + margin;
+        });
     }
 
     /*
@@ -70,38 +85,29 @@ function mansonry() {
                 column = columns[i];
             }
         }
-
         return column;
     }
 
     /*
-     * Rearange the objects.
+     * Get the posts from the server.
      */
-    j = 0;
+    $.post("API/getPosts.php", { usr : userID })
-    posts.each(function(i) {
+           .done(function(data) {
-        post = posts[i];
+               posts = JSON.parse(data);
-        shortestColumn = getShortestColumn(columns);
-        shortestColumn[0] = shortestColumn[0] + $(post).height() + margin;
-        shortestColumn[1].push(post);
 
-    });
+               /*
-    
+                * Rearange the objects.
-    container.children().remove();
+                */
-    /*
+               jQuery.each(posts, function() {
-     * Display the objects again in the correct order.
+                   $post = $("<div class=\"post platform\" onclick=\"requestPost(\'"+this['postID']+"\')\">");
-     */
+                   $post.append($("<h2>").text(this["title"]));
-    for (i = 0; i < columnCount; i++) {
+                   $post.append($("<p>").html(this["content"]));
-        column = $('<div class="column"></div>').append(columns[i][1]);
+                   $post.append($("<p class=\"subscript\">").text(this["nicetime"]));
-        console.log(column);
-        container.append(column);
-    }
 
-    $("div.posts div.column").width(100/columnCount + "%");
+                   shortestColumn = getShortestColumn(columns);
+                   shortestColumn[1].append($post);
+                   shortestColumn[0] = shortestColumn[0] + $post.height() + margin;
+               });
+           });
+}
 
-    $(".modal-close").click(function () {
-        $(".modal").hide();
-        scrollbarMargin(0, 'auto');
-        $('#modal-response').hide();
-        $('.modal-default').show();
-    });
-}

website/public/profile.php

@@ -2,6 +2,7 @@
 <html>
 <head>
     <?php include("../views/head.php"); ?>
+
     <script src="js/masonry.js"></script>
 <!--    <script src="js/profile.js"></script>-->
     <style>
@@ -30,8 +31,10 @@ $posts = selectAllUserPosts($userID);
 
 if ($userID == $_SESSION["userID"]) {
     $friendship_status = -1;
+    $masonry_mode = 1;
 } else {
     $friendship_status = $user["friend_status"];
+    $masonry_mode = 0;
 }
 
 /*
@@ -48,10 +51,25 @@ include("../views/footer.php");
 ?>
 
 <script src="js/friendButtons.js"></script>
+<script src="js/masonry.js"></script>
 <script>
+    var posts;
+
     $(document).ready(function() {
         userID = <?= $userID ?>;
         placeFriendButtons();
+
+        masonry(<?= $masonry_mode ?>);
+//        alert("blap");
+//        $.post("API/getPosts.php", { usr : userID }, "json")
+//            .done(function(data) {
+//                posts = JSON.parse(data);
+//                alert(posts[0]["content"]);
+//            }).fail(function() {
+//                alert("failure...");
+//        });
+
+
     });
 </script>
 </body>

website/queries/user.php

@@ -126,7 +126,9 @@ function selectAllUserPosts($userID) {
     ");
 
     $stmt->bindParam(':userID', $userID, PDO::PARAM_INT);
-    $stmt->execute();
+    if(!$stmt->execute()) {
+        return False;
+    }
     return $stmt;
 }
 

website/views/profile.php

@@ -5,7 +5,7 @@
         <div class="friend-button-container">
 
         </div>
-        
+
         <h1 class="profile-username"><?= $user["fname"]?> <?=$user["lname"]?></h1>
         <h5 class="profile-username"><?=$user["username"]?></h5>
         <p><?=$user["bio"]?></p>
@@ -43,37 +43,62 @@
     </div>
 
     <div class="posts">
-        <?php
-            if ($_SESSION["userID"] === $userID) {
-         ?>
-                <div class="post platform">
-                    <form>
-                        <input type="text" class="newpost" placeholder="Titel">
-                        <textarea class="newpost" placeholder="Schrijf een berichtje..."></textarea>
-                        <input type="submit" value="Plaats!">
-                    </form>
-                </div>
-        <?php
-            }
 
-            while($post = $posts->fetch()) {
+<!--        --><?php
-                $nicetime = nicetime($post["creationdate"]);
+//            if ($_SESSION["userID"] === $userID) {
-                $postID = $post["postID"];
+//         ?>
-                echo "
+<!--                <div class="post platform">-->
-                    <div class='post platform' onclick='requestPost(this)'>
+<!--                    <form>-->
-                        <h2>${post["title"]}</h2>
+<!--                        <input type="text" class="newpost" placeholder="Titel">-->
-                        <p>${post["content"]}</p>
+<!--                        <textarea class="newpost" placeholder="Schrijf een berichtje..."></textarea>-->
-                        <p class=\"subscript\" title='" . $post["creationdate"] ."'>${nicetime} geplaatst.</p>
+<!--                        <input type="submit" value="Plaats!">-->
-                        <form>
+<!--                    </form>-->
-                            <input type='hidden'
+<!--                </div>-->
-                                   name='postID'
+<!--        --><?php
-                                   value='$postID'
+//            }
-                            />
+//
-                        </form>
+//            while($post = $posts->fetch()) {
-                    </div>
+//                $nicetime = nicetime($post["creationdate"]);
-                ";
+//                echo "
-            }
+//                    <div class='post platform'>
-        ?>
+//                        <h2>${post["title"]}</h2>
+//                        <p>${post["content"]}</p>
+//                        <p class=\"subscript\">${nicetime} geplaatst.</p>
+//                    </div>
+//                ";
+//            }
+//        ?>
+<!--        --><?php
+//            if ($_SESSION["userID"] === $userID) {
+//         ?>
+<!--                <div class="post platform">-->
+<!--                    <form>-->
+<!--                        <input type="text" class="newpost" placeholder="Titel">-->
+<!--                        <textarea class="newpost" placeholder="Schrijf een berichtje..."></textarea>-->
+<!--                        <input type="submit" value="Plaats!">-->
+<!--                    </form>-->
+<!--                </div>-->
+<!--        --><?php
+//            }
+//
+//            while($post = $posts->fetch()) {
+//                $nicetime = nicetime($post["creationdate"]);
+//                $postID = $post["postID"];
+//                echo "
+//                    <div class='post platform' onclick='requestPost(this)'>
+//                        <h2>${post["title"]}</h2>
+//                        <p>${post["content"]}</p>
+//                        <p class=\"subscript\" title='" . $post["creationdate"] ."'>${nicetime} geplaatst.</p>
+//                        <form>
+//                            <input type='hidden'
+//                                   name='postID'
+//                                   value='$postID'
+//                            />
+//                        </form>
+//                    </div>
+//                ";
+//            }
+//        ?>
     </div>
 
     <div class="modal">