website/public/js/chat.js

@@ -12,6 +12,7 @@ function loadMessages() {
             messages = JSON.parse(data);
             addMessages(messages);
             $("#lastID").val(messages[messages.length - 1].messageID);
+            $("#chat-history").scrollTop($("#chat-history")[0].scrollHeight);
         }
     });
 
@@ -48,3 +49,9 @@ function addMessages(messages) {
         ');
     }
 }
+
+function switchUser(userID) {
+    $(".destinationID").val(userID);
+    $("#chat-history").html("");
+    $("#lastID").val("");
+}

website/public/styles/chat.css

@@ -16,6 +16,10 @@
     overflow-y: auto;
 }
 
+.chat-left .friend-item {
+    cursor: pointer;
+}
+
 .chat-right {
     width: calc(100% - 256px - 40px);
     height: calc(100% - 80px);

website/queries/friendship.php

@@ -3,6 +3,7 @@
 function selectAllFriends($db, $userID) {
     return $db->query("
     SELECT
+        `user`.`userID`,
         `user`.`username`,
         `user`.`profilepicture`,
         `user`.`onlinestatus`,

website/queries/private_message.php

@@ -6,7 +6,7 @@ session_start();
 
 function getOldChatMessages($user2ID) {
     $db = $GLOBALS["db"];
-    $user1ID = 2;
+    $user1ID = $_SESSION["userID"];
 
     $stmt = $db->prepare("
     SELECT
@@ -49,7 +49,7 @@ function sendMessage($destination, $content) {
     ");
 
     return $stmt->execute(array(
-        "origin" => 2,
+        "origin" => $_SESSION["userID"],    
         "destination" => $destination,
         "content" => $content
     ));
@@ -57,7 +57,7 @@ function sendMessage($destination, $content) {
 
 function getNewChatMessages($lastID, $destination) {
     $db = $GLOBALS["db"];
-    $origin = 2;
+    $origin = $_SESSION["userID"];
 
     $stmt = $db->prepare("
     SELECT

website/views/chat-view.php

@@ -1,13 +1,49 @@
 <div class="content">
     <div class="chat">
-        <nav class="chat-left left platform chat-recent">
+        <nav class="nav-list chat-left left platform chat-recent">
             <h5>Chats</h5>
-            <a href="#">
-                <div class="chat-conversation">
-                    <img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw">
-                    Rudolf Leslo
+            <ul>
+                <?php
+                include_once("../queries/friendship.php");
+
+                if (empty($_SESSION["userID"]))
+                    $_SESSION["userID"] = 2;
+
+                // Get all the friends of a user.
+                $friends = selectAllFriends($db, $_SESSION["userID"]);
+                $i = 0;
+
+                // Print all the users.
+                while($friend = $friends->fetch(PDO::FETCH_ASSOC)) {
+                    $i ++;
+
+                    // Set default values of a friend.
+                    $username = $friend["username"];
+                    $userID = $friend["userID"];
+                    $pf = "img/notbad.jpg";
+
+                    // Change values if needed.
+                    if (!empty($friend["profilepicture"]))
+                        $pf = $friend["profilepicture"];
+
+                    // Echo the friend.
+                    echo "
+                        <li class='friend-item' onclick='switchUser(\"$userID\")'>
+                            <div class='friend'>
+                                <img alt='PF' class='profile-picture' src='$pf'/>
+                                $username
                             </div>
-            </a>
+                        </li>
+                ";
+                }
+                ?>
+            </ul>
+            <!--            <a href="#">-->
+            <!--                <div class="chat-conversation">-->
+            <!--                    <img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw">-->
+            <!--                    Rudolf Leslo-->
+            <!--                </div>-->
+            <!--            </a>-->
         </nav>
         <div class="chat-right right">
             <div id="chat-history" class="chat-history platform">
@@ -44,6 +80,7 @@
                 />
                 <input type="hidden"
                        name="destination"
+                       class="destinationID"
                        value="666"
                 />
             </form>
@@ -51,6 +88,7 @@
                 <form id="sendMessageForm" action="javascript:sendMessage();">
                     <input type="hidden"
                            name="destination"
+                           class="destinationID"
                            value="666"
                     />
                     <input type="submit"