Friends and friendrequest are fully ajax. Also added friend-item

website/public/API/loadFriends.php

@@ -0,0 +1,16 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/checkInput.php");
+require_once ("../../queries/friendship.php");
+
+if (isset($_POST["limit"])) {
+    echo selectLimitedFriends($_SESSION["userID"], (int) test_input($_POST["limit"]));
+} else if (isset($_GET["limit"])) {
+    echo selectLimitedFriends($_SESSION["userID"], (int) test_input($_GET["limit"]));
+} else {
+    echo selectFriends($_SESSION["userID"]);
+}
+

website/public/API/loadMessages.php

@@ -8,9 +8,9 @@ require_once("../../queries/checkInput.php");
 require_once("../../queries/friendship.php");
 
 if (isset($_POST["lastID"]) && $_POST["lastID"] != "") {
+    setLastVisited(test_input($_POST["destination"]));
     echo getNewChatMessages(test_input($_POST["lastID"]), test_input($_POST["destination"]));
-    setLastVisited(test_input($_POST["destination"]));
 } else {
-    echo getOldChatMessages(test_input($_POST["destination"]));
     setLastVisited(test_input($_POST["destination"]));
+    echo getOldChatMessages(test_input($_POST["destination"]));
 }

website/public/bits/friend-item.php

@@ -0,0 +1,92 @@
+<?php
+
+session_start();
+
+include_once ("../../queries/friendship.php");
+
+if (isset($_POST["limit"])) {
+    $limit = $_POST["limit"];
+} else {
+    $limit = 5;
+}
+
+if (isset($_POST["action"])) {
+    $action = $_POST["action"];
+} else {
+    $action = "profile.php";
+}
+
+if (isset($_POST["actionType"])) {
+    $actionType = $_POST["actionType"];
+} else {
+    $actionType = "GET";
+}
+
+$friends = json_decode($_POST["friends"]);
+
+foreach($friends as $i => $friend) {
+    $friendshipStatus = getFriendshipStatus($friend->userID);
+
+    if ($limit != 0 && $i >= $limit)
+        $extra = "extra-friend-item";
+    else
+        $extra = "";
+    ?>
+    <li class='friend-item <?= $extra ?>'>
+        <form action='<?= $action ?>' method='<?= $actionType ?>'>
+            <button type='submit'
+                    name='username'
+                    value='<?= $friend->username ?>'>
+                <div class='friend'>
+                    <img alt='PF' class='profile-picture' src='<?= $friend->profilepicture ?>'/>
+                    <div class='friend-name'>
+                        <?= $friend->fullname ?><br/>
+                        <span style='color: #666'><?= $friend->username ?></span>
+                    </div>
+                </div>
+            </button>
+        </form>
+        <?php
+        if ($friendshipStatus > 1) {
+            ?>
+            <div class='notification-options'>
+                <form action='API/edit_friendship.php' method='post'>
+                    <input type='hidden' name='userID' value='<?= $friend->userID ?>' />
+                    <button type='submit'
+                            name='delete'
+                            class='deny-notification'
+                            value='1'>
+                        <i class='fa fa-times'></i>
+                    </button>
+            <?php
+            if ($friendshipStatus == 3) {
+                ?>
+                    <button type='submit'
+                            name='accept'
+                            class='accept-notification'
+                            value='1'>
+                        <i class='fa fa-check'></i>
+                    </button>
+                <?php
+            }
+            ?>
+                <form>
+            </div>
+            <?php
+        }
+        ?>
+    </li>
+    <?php
+}
+
+if (sizeof($friends) > $limit) {
+    ?>
+    <li class='more-item'>
+        Meer vrienden...
+    </li>
+    <?php
+}
+
+?>
+
+

website/public/js/chat.js

@@ -54,7 +54,7 @@ function switchUser(userID) {
     $("#chat-history").html("");
     $("#lastID").val("");
     $("#chat-recent-panel .friend-item").removeClass("active-friend-chat");
-    $("#chat-left #friend-item-" + userID).addClass("active-friend-chat");
+    $("#friend-item-" + userID).addClass("active-friend-chat");
 }
 
 function sayEmpty() {

website/public/js/main.js

@@ -0,0 +1,26 @@
+function showFriends(friends, list) {
+    if(friends && friends != "[]") {
+        $(list).load("bits/friend-item.php", {
+            "friends": friends
+        });
+
+        return true;
+    } else {
+        return false;
+    }
+}
+
+function showFriendsPlus(friends, list, limit, action, actionType) {
+    if(friends && friends.length > 0) {
+        $(list).load("bits/friend-item.php", {
+            "friends": friends,
+            "limit": limit,
+            "action": action,
+            "actionType": actionType
+        });
+
+        return true;
+    } else {
+        return false;
+    }
+}

website/public/js/menu.js

@@ -1,39 +1,75 @@
+
 $(document).ready(function() {
-    $(".extra-menu-items").hide();
-    $("#menu-back").hide();
+    // Show more friends/users
 
     // Show more friends
-    $("#more-friends-click").click(function() {
-        // Show only friends
-        $("#groups-menu-section").slideUp();
-        $("#friends-menu-section li").show();
+    // $("#more-friends-click").click(function() {
+    //     // Show only friends
+    //     $("#groups-menu-section").slideUp();
+    //     $("#friends-menu-section li").show();
+    //
+    //     // Change buttons
+    //     $("#more-friends-click").hide();
+    //     $("#menu-back").show();
+    // });
+    //
+    // // Show more groups
+    // $("#more-groups-click").click(function() {
+    //     // Show only groups
+    //     $("#friends-menu-section").slideUp();
+    //     $("#groups-menu-section li").show();
+    //
+    //     // Change buttons
+    //     $("#more-groups-click").hide();
+    //     $("#menu-back").show();
+    // });
 
-        // Change buttons
-        $("#more-friends-click").hide();
-        $("#menu-back").show();
-    });
+    // // Go back
+    // $("#menu-back").click(function() {
+    //     // Show overview of friends and groups
+    //     $("#friends-menu-section").slideDown();
+    //     $("#groups-menu-section").slideDown();
+    //     $(".extra-menu-items").hide();
+    //
+    //     // Change buttons
+    //     $("#menu-back").hide();
+    //     $("#more-groups-click").show();
+    //     $("#more-friends-click").show();
+    // });
 
-    // Show more groups
-    $("#more-groups-click").click(function() {
-        // Show only groups
-        $("#friends-menu-section").slideUp();
-        $("#groups-menu-section li").show();
-
-        // Change buttons
-        $("#more-groups-click").hide();
-        $("#menu-back").show();
-    });
-
-    // Go back
-    $("#menu-back").click(function() {
-        // Show overview of friends and groups
-        $("#friends-menu-section").slideDown();
-        $("#groups-menu-section").slideDown();
-        $(".extra-menu-items").hide();
-
-        // Change buttons
-        $("#menu-back").hide();
-        $("#more-groups-click").show();
-        $("#more-friends-click").show();
-    });
+    loadMenuFriends(5);
+    loadNotificationFriends();
 });
+
+
+function loadMenuFriends(limit) {
+    $.post(
+        "API/loadFriends.php",
+        {
+            limit: 5
+        }
+    ).done(function(data) {
+        if (showFriends(data, "#menu-friends-list", 5, "profile.php", "GET", limit)) {
+            $("#friends-menu-section").show();
+        } else {
+            $("#friends-menu-section").hide();
+        }
+    });
+
+
+    setTimeout(loadMenuFriends, 3000, limit);
+}
+
+function loadNotificationFriends() {
+    $.post(
+        "API/loadFriendRequest.php"
+    ).done(function(data) {
+        if (showFriendsPlus(data, "#friend-requests-list", 5, "API/edit_friendship", "POST")) {
+            $("#friend-request-section").show();
+        } else {
+            $("#friend-request-section").hide();
+        }
+    });
+
+    setTimeout(loadNotificationFriends, 30000);
+}

website/public/js/notifications.js

@@ -1,45 +1,3 @@
-function showFriendNotifications(notifications) {
-    $("#friendrequestslist").html("");
-    for (i in notifications) {
-        var outgoing = "";
-        if (notifications[i].friend_state == "3") {
-            outgoing = "<button\
-                            name='accept' \
-                            class='accept-notification' \
-                            value='"+ notifications[i].userID +"'> \
-                        <i class='fa fa-check'></i> \
-                        </button>";
-        }
-
-        $("#friendrequestslist").append(" \
-            <li class='friend-item'> \
-                <form action='profile.php' method='get'> \
-                    <button type='submit' \
-                            name='username' \
-                            value='"+ notifications[i].username +"'> \
-                        <div class='friend'> \
-                            <img alt='PF' class='profile-picture' src='"+ notifications[i].profilepicture +"'/> \
-                            "+ notifications[i].username +" \
-                        </div> \
-                    </button> \
-                </form> \
-                <div class='notification-options'>\
-                    <form action='API/edit_friendship.php' method='post'> \
-                        <input type='hidden' name='userID' value='"+ notifications[i].userID +"' /> \
-                        "+ outgoing +" \
-                        <button type='submit' \
-                                name='delete' \
-                                class='deny-notification' \
-                                value='"+ notifications[i].userID +"'> \
-                            <i class='fa fa-times'></i> \
-                        </button>\
-                    <form>\
-                </div> \
-            </li> \
-        ");
-    }
-}
-
 function showChatNotifications(notifications) {
     $("#unreadChatlist").html("");
     for (i in notifications) {
@@ -64,18 +22,14 @@ function showChatNotifications(notifications) {
 }
 
 function loadNotifications() {
-    $.post(
-        "API/loadFriendRequestNotifications.php"
-    ).done(function(data) {
-        if (data && data != "[]") {
-            showFriendNotifications(JSON.parse(data));
-        }
-    });
     $.post(
         "API/loadChatNotifications.php"
     ).done(function(data) {
         if (data && data != "[]") {
+            $("#unread-messages-section").show();
             showChatNotifications(JSON.parse(data));
+        } else {
+            $("#unread-messages-section").hide();
         }
     });
 

website/queries/friendship.php

@@ -1,13 +1,51 @@
 <?php
 
-require("connect.php");
+require_once ("connect.php");
+
+function selectFriends($userID) {
+    return selectLimitedFriends($userID, 9999);
+}
+
+function selectLimitedFriends($userID, $limit) {
+    $stmt = $GLOBALS["db"]->prepare("
+        SELECT
+            `userID`,
+            `username`,
+            LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 15) as `fullname`,
+            IFNULL(
+                `profilepicture`,
+                '../img/avatar-standard.png'
+            ) AS profilepicture,
+            `onlinestatus`,
+            `role`
+        FROM
+            `user`
+        INNER JOIN
+            `friendship`
+        WHERE
+            (`friendship`.`user1ID` = :userID AND
+            `friendship`.`user2ID` = `user`.`userID` OR 
+            `friendship`.`user2ID` = :userID AND
+            `friendship`.`user1ID` = `user`.`userID`) AND
+            `user`.`role` != 'banned' AND
+            `friendship`.`status` = 'confirmed'
+        LIMIT :limitCount
+    ");
+
+    $stmt->bindParam(':userID', $userID, PDO::PARAM_INT);
+    $stmt->bindParam(':limitCount', $limit, PDO::PARAM_INT);
+    $stmt->execute();
+
+    return json_encode($stmt->fetchAll());
+}
+
 
 function selectAllFriends($userID) {
     $stmt = $GLOBALS["db"]->prepare("
         SELECT
             `userID`,
             `username`,
-            LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 15) as `name`,
+            LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 15) as `fullname`,
             IFNULL(
                 `profilepicture`,
                 '../img/avatar-standard.png'
@@ -39,22 +77,7 @@ function selectAllFriendRequests() {
         SELECT
             `userID`,
             `username`,
-            CASE `status` IS NULL
-              WHEN TRUE THEN 0
-              WHEN FALSE THEN
-                CASE `status` = 'confirmed'
-                WHEN TRUE THEN
-                  1
-                WHEN FALSE THEN
-                  CASE `user1ID` = :userID
-                  WHEN TRUE THEN
-                    2
-                  WHEN FALSE THEN
-                    3
-                  END
-                END
-            END AS `friend_state`,
-            LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 15) as `name`,
+            LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 15) as `fullname`,
             IFNULL(
                 `profilepicture`,
                 '../img/avatar-standard.png'

website/views/chat-view.php

@@ -37,9 +37,8 @@
                         </li>
                     ";
                 }
-
+                if (isset($_GET["chatID"]) && $_GET["chatID"] != "") {
                     $chatID = $_GET["chatID"];
-                if (isset($chatID) && $chatID != "") {
                     echo "<script>$(document).ready(function(){switchUser('$chatID')});</script>";
                 }
                 ?>

website/views/head.php

@@ -2,6 +2,7 @@
 <title>MyHyvesbook+</title>
 <!-- Add your javascript files here. -->
 <script src="js/jquery.js"></script>
+<script src="js/main.js"></script>
 <script src="js/header.js"></script>
 <script src="js/menu.js"></script>
 <script src="js/notifications.js"></script>

website/views/menu.php

@@ -1,75 +1,19 @@
 <nav class="menu">
     <section id="friends-menu-section">
-        <?php
-
-        // Load file.
-        require_once("../queries/friendship.php");
-        require_once("../queries/user.php");
-
-        // Get confirmed friends of the user and a random non-friend.
-        $friends = selectAllFriends($_SESSION["userID"])->fetchAll();
-        $randomUser = selectRandomNotFriendUser($_SESSION["userID"])["username"];
-        $i = 0;
-
-        if (sizeof($friends) == 0) {
-            echo "
-                <ul class=\"nav-list\"><li class='friend-item'>
-                    <form action='profile.php' method='get'>
-                        <button type='submit'
-                                name='username'
-                                value='$randomUser'>
-                            <div class='friend'>
-                                Maak nieuwe vrienden :)
-                            </div>
-                        </button>
-                    </form>
-                </li><ul class=\"nav-list\">
-            ";
-        } else {
-            echo "
         <h4>
             Vrienden
         </h4>
-                <ul class=\"nav-list\">
-            ";
-
-            foreach ($friends as $i => $friend) {
-                $username = $friend["username"];
-                $name = $friend["name"];
-                $extraItem = "";
-                $pf = $friend["profilepicture"];
-
-                if ($i >= 5)
-                    $extraItem = "extra-menu-items";
-
-                echo "
-                    <li class='friend-item $extraItem'>
-                        <form action='profile.php' method='get'>
-                            <button type='submit'
-                                    name='username'
-                                    value='$username'>
-                                <div class='friend'>
-                                    <img alt='PF' class='profile-picture' src='$pf'/>
-                                    <div class='friend-name'>
-                                        $name<br/>
-                                        <span style='color: #666'>$username</span>
-                                    </div>
-                                </div>
+        <ul id="menu-friends-list" class="nav-list">
+        </ul>
+        <h4><form action="search.php">
+            <input type="hidden"
+                   value="friends"
+                   name="filter" />
+            <button value=""
+                    name="search">
+                Alle vrienden...
             </button>
-                        </form>
-                    </li>
-                ";
-            }
-
-            if (sizeof($friends) > 5) {
-                echo "
-                    <li class='more-item' id='more-friends-click'>
-                        Meer vrienden..
-                    </li> 
-                ";
-            }
-        }
-        ?>
+        </form></h4>
     </section>
     <section id="groups-menu-section">
         <?php

website/views/notification-center.php

@@ -5,19 +5,19 @@
         <a href="profile.php"><i class="fa fa-user" data-title="Profiel"></i></a>
         <a href="logout.php"><i class="fa fa-sign-out" data-title="Uitloggen"></i></a>
     </section>
-    <section>
+    <section id="friend-request-section">
         <h4>
             Vriendchapsverzoeken
         </h4>
-        <ul class="nav-list" id="friendrequestslist">
+        <ul class="nav-list" id="friend-requests-list">
 
         </ul>
     </section>
-    <section>
+    <section id="unread-messages-section">
         <h4>
             Nieuwe berichten
         </h4>
-        <ul class="nav-list" id="unreadChatlist">
+        <ul class="nav-list" id="unread-chat-list">
 
         </ul>
     </section>