Fixed chat

It now has a userID again,
displays which user you are chatting withhover over user changes different background

website/public/API/loadMessages.php

@@ -1,6 +1,6 @@
 <?php
 
-include_once("../queries/private_message.php");
+include_once("../../queries/private_message.php");
 
 if (isset($_POST["lastID"]) && $_POST["lastID"] != "") {
 

website/public/API/sendMessage.php

@@ -1,6 +1,6 @@
 <?php
 
-include_once("../queries/private_message.php");
+include_once("../../queries/private_message.php");
 
 if (isset($_POST["destination"]) &&
     isset($_POST["content"])) {

website/public/js/chat.js

@@ -1,10 +1,12 @@
 $(document).ready(function() {
     loadMessages();
+    sayEmpty();
+    $(".chat-field").hide();
 });
 
 function loadMessages() {
     $.post(
-        "loadMessages.php",
+        "API/loadMessages.php",
         $("#lastIDForm").serialize()
     ).done(function(data) {
         if (data && data != "[]") {
@@ -23,7 +25,7 @@ function loadMessages() {
 function sendMessage() {
     console.log($("#sendMessageForm").serialize());
     $.post(
-        "sendMessage.php",
+        "API/sendMessage.php",
         $("#sendMessageForm").serialize()
     ).done(function( data ) {
         console.log(data);
@@ -51,7 +53,14 @@ function addMessages(messages) {
 }
 
 function switchUser(userID) {
+    $(".chat-field").show();
     $(".destinationID").val(userID);
     $("#chat-history").html("");
     $("#lastID").val("");
+    $(".chat-left .friend-item").removeClass("active-friend-chat");
+    $(".chat-left #friend-item-" + userID).addClass("active-friend-chat");
+}
+
+function sayEmpty() {
+    $("#chat-history").html("Begin nu met chatten!");
 }

website/public/styles/chat.css

@@ -89,3 +89,8 @@
     border-radius: 0 10px 10px 0;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
+
+.active-friend-chat {
+    background: aquamarine;
+    color: #333;
+}

website/public/styles/menu.css

@@ -30,9 +30,14 @@
     cursor: pointer;
 }
 
+.friend-item:hover {
+    background: #845663;
+    color: white;
+}
+
 .menu button {
     background: none;
-    color: #333;
+    color: inherit;
     width: 100%;
     height: 100%;
     padding: 0;

website/queries/friendship.php

@@ -4,10 +4,11 @@ require("connect.php");
 function selectAllFriends($db, $userID) {
     $stmt = $db->prepare("
         SELECT
+            `userID`,
             `username`,
             IFNULL(
                 `profilepicture`,
-                'img/notbad.png'
+                'img/notbad.jpg'
             ) AS profilepicture,
             `onlinestatus`,
             `role`

website/queries/header.php

@@ -4,7 +4,10 @@ function getHeaderInfo() {
     SELECT
         `fname`,
         `lname`,
-      `profilepicture`
+        IFNULL(
+            `profilepicture`,
+            'img/notbad.jpg'
+        ) AS profilepicture
     FROM
         `user`
     WHERE

website/queries/private_message.php

@@ -1,6 +1,6 @@
 <?php
 
-include_once("connect.php");
+require_once("connect.php");
 
 session_start();
 

website/views/chat-view.php

@@ -28,7 +28,7 @@
 
                     // Echo the friend.
                     echo "
-                        <li class='friend-item' onclick='switchUser(\"$userID\")'>
+                        <li class='friend-item' id='friend-item-$userID' onclick='switchUser(\"$userID\")'>
                             <div class='friend'>
                                 <img alt='PF' class='profile-picture' src='$pf'/>
                                 $username
@@ -38,12 +38,6 @@
                 }
                 ?>
             </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">
@@ -74,7 +68,7 @@
                         <input type="text"
                                name="content"
                                id="newContent"
-                               placeholder="Reageer..."
+                               placeholder="Schrijf een bericht..."
                                autofocus
                                required
                         />