website/public/API/loadChatNotifications.php

@@ -3,6 +3,6 @@
 session_start();
 
 require_once ("../../queries/connect.php");
-require_once ("../../queries/friendship.php");
+require_once ("../../queries/private_message.php");
 
 echo selectAllUnreadChat();

website/public/API/loadMessages.php

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

website/public/js/chat.js

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

website/public/js/notifications.js

@@ -1,7 +1,7 @@
-function showNotifications(notifications, id) {
+function showFriendNotifications(notifications) {
-    $("#" + id).html("");
+    $("#friendrequestslist").html("");
     for (i in notifications) {
-        $("#" + id).append(" \
+        $("#friendrequestslist").append(" \
             <li class='friend-item $extraItem'> \
                 <form action='profile.php' method='get'> \
                     <button type='submit' \
@@ -18,19 +18,42 @@ function showNotifications(notifications, id) {
     }
 }
 
+function showChatNotifications(notifications) {
+    $("#unreadChatlist").html("");
+    for (i in notifications) {
+        $("#unreadChatlist").append(" \
+            <li class='friend-item $extraItem'> \
+                <form action='chat.php' method='get'> \
+                    <button type='submit' \
+                            name='username' \
+                            value='"+ notifications[i].userID +"'> \
+                        <div class='friend'> \
+                            <img alt='PF' class='profile-picture' src='"+ notifications[i].profilepicture +"'/> \
+                            <div class='friend-name'> \
+                                "+ notifications[i].name +"<br/> \
+                                <span style='color: #666'>"+ notifications[i].content +"</span> \
+                            </div> \
+                        </div> \
+                    </button> \
+                </form> \
+            </li> \
+        ");
+    }
+}
+
 function loadNotifications() {
     $.post(
         "API/loadFriendRequestNotifications.php"
     ).done(function(data) {
         if (data && data != "[]") {
-            showNotifications(JSON.parse(data), "friendrequestslist");
+            showFriendNotifications(JSON.parse(data));
         }
     });
     $.post(
         "API/loadChatNotifications.php"
     ).done(function(data) {
         if (data && data != "[]") {
-            showNotifications(JSON.parse(data), "unreadChatlist");
+            showChatNotifications(JSON.parse(data));
         }
     });
 

website/public/styles/chat.css

@@ -1,34 +1,38 @@
 /* Overall chat-screen */
 .chat {
     position: fixed;
+
     top: 80px;
     left: 256px;
-    padding: 20px 0;
     width: calc(100% - 256px);
     height: calc(100% - 120px);
-    display: inline-flex;
+
+    padding: 20px 0;
+
+    display: inline-block;
 }
 
-.chat-left {
+#chat-recent-panel {
     width: 256px;
     height: calc(100% - 100px);
-    margin: 0 10px;
-    overflow-y: auto;
-}
 
-.chat-right {
+    display: inline-block;
-    width: calc(100% - 256px - 40px);
+
-    height: calc(100% - 80px);
+    overflow-y: auto;
-    margin-right: 10px;
 }
 
 /* Chat history. */
-.chat-history {
+#chat-history {
     overflow-y: auto;
     overflow-x: hidden;
-    height: 100%;
+
+    width: calc(100% - 256px - 75px);
+    height: calc(100% - 80px);
+
     padding: 10px;
 
+    display: inline-block;
+
     word-wrap: break-word;
 }
 
@@ -36,7 +40,13 @@
 .chat-message {
     width: 100%;
     min-height: 40px;
-    padding-top: 10px;
+    padding: 10px 0;
+    clear: both;
+}
+
+.chat-message::after {
+    content: '';
+    display: table;
     clear: both;
 }
 
@@ -63,7 +73,7 @@
 /* Chat reply field */
 
 .chat-field {
-    width: 100%;
+    width: calc(100% - 10px);
     display: table;
 }
 

website/public/styles/main.css

@@ -242,3 +242,23 @@ div[data-title]:hover:after {
     line-height: normal;
     font-family: Arial, sans-serif;
 }
+
+.friend {
+
+}
+
+
+.friend-item, .group-item {
+    cursor: pointer;
+    transition-duration: 250ms;
+}
+
+.friend-item:hover, .group-item:hover {
+    background: #FBC02D;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.friend-name {
+    display: inline-block;
+    vertical-align: middle;
+}

website/public/styles/menu.css

@@ -34,16 +34,6 @@
     cursor: pointer;
 }
 
-.friend-item, .group-item {
-    cursor: pointer;
-    transition-duration: 250ms;
-}
-
-.friend-item:hover, .group-item:hover {
-    background: #FBC02D;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-}
-
 .menu button {
     background: none;
     color: inherit;

website/queries/friendship.php

@@ -5,6 +5,7 @@ function selectAllFriends($userID) {
         SELECT
             `userID`,
             `username`,
+            LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 20) as `name`,
             IFNULL(
                 `profilepicture`,
                 '../img/notbad.jpg'
@@ -36,6 +37,7 @@ function selectAllFriendRequests() {
         SELECT
             `userID`,
             `username`,
+            LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 20) as `name`,
             IFNULL(
                 `profilepicture`,
                 '../img/notbad.jpg'
@@ -61,3 +63,34 @@ function selectAllFriendRequests() {
 
     return json_encode($stmt->fetchAll());
 }
+
+
+function setLastVisited($friend) {
+    $stmt = $GLOBALS["db"]->prepare("
+        UPDATE
+          `friendship`
+        SET `friendship`.chatLastVisted1=(
+            CASE `user1ID` = :sessionUser
+                WHEN TRUE THEN NOW()
+                WHEN FALSE THEN `chatLastVisted1`
+            END
+        ),
+          `friendship`.`chatLastVisted2`=(
+            CASE `user2ID` = :sessionUser
+                WHEN TRUE THEN NOW()
+                WHEN FALSE THEN `chatLastVisted2`
+            END
+        )
+        WHERE
+        `user1ID` = :sessionUser AND
+        `user2ID` = :friend OR
+        `user2ID` = :sessionUser AND
+        `user1ID` = :friend;
+    ");
+
+    $stmt->bindParam(':sessionUser', $_SESSION["userID"], PDO::PARAM_INT);
+    $stmt->bindParam(':friend', $friend, PDO::PARAM_INT);
+    $stmt->execute();
+
+    return $stmt;
+}

website/queries/private_message.php

@@ -74,3 +74,38 @@ function getNewChatMessages($lastID, $destination) {
 
     return json_encode($stmt->fetchAll());
 }
+
+
+function selectAllUnreadChat() {
+    $stmt = $GLOBALS["db"]->prepare("
+    SELECT
+      LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 20) as `name`,
+      IFNULL(
+        `profilepicture`,
+        '../img/notbad.jpg'
+      ) AS profilepicture,
+      LEFT(`private_message`.`content`, 20) as `content`
+    FROM
+      `private_message`,
+      `friendship`,
+      `user`
+    WHERE
+      (`friendship`.user2ID = `private_message`.`origin` AND
+       `friendship`.user1ID = `private_message`.`destination` AND
+       `friendship`.chatLastVisted1 < `private_message`.`creationdate` OR
+       `friendship`.user1ID = `private_message`.`origin` AND
+      `friendship`.user2ID = `private_message`.`destination` AND
+       `friendship`.chatLastVisted2 < `private_message`.`creationdate`) AND
+      `private_message`.`origin` = `user`.`userID` AND
+      `private_message`.`destination` = :userID AND
+      `user`.`role` != 'banned'
+    
+    GROUP BY `user`.`userID`
+    ");
+
+    $stmt->bindParam(':userID', $_SESSION["userID"]);
+
+    $stmt->execute();
+
+    return json_encode($stmt->fetchAll());
+}

website/views/chat-view.php

@@ -1,6 +1,6 @@
 <div class="content">
     <div class="chat">
-        <nav class="nav-list chat-left left platform chat-recent">
+        <nav class="nav-list platform" id="chat-recent-panel">
             <h5>Chats</h5>
             <ul>
                 <?php
@@ -28,7 +28,10 @@
                         <li class='friend-item' id='friend-item-$userID' onclick='switchUser(\"$userID\")'>
                             <div class='friend'>
                                 <img alt='PF' class='profile-picture' src='$pf'/>
-                                $username
+                                <div class='friend-name'>
+                                    $name<br/>
+                                    <span style='color: #666'>$username</span>
+                                </div>
                             </div>
                         </li>
                 ";
@@ -36,9 +39,9 @@
                 ?>
             </ul>
         </nav>
-        <div class="chat-right">
+        <div id="chat-history" class="chat-history platform">
-            <div id="chat-history" class="chat-history platform">
+        </div>
-            </div>
+        <div>
             <form id="lastIDForm">
                 <input type="hidden"
                        id="lastID"

website/views/menu.php

@@ -35,6 +35,7 @@
 
             foreach ($friends as $i => $friend) {
                 $username = $friend["username"];
+                $name = $friend["name"];
                 $extraItem = "";
                 $pf = $friend["profilepicture"];
 
@@ -49,7 +50,10 @@
                                     value='$username'>
                                 <div class='friend'>
                                     <img alt='PF' class='profile-picture' src='$pf'/>
-                                    $username
+                                    <div class='friend-name'>
+                                        $name<br/>
+                                        <span style='color: #666'>$username</span>
+                                    </div>
                                 </div>
                             </button>
                         </form>

website/views/notification-center.php

@@ -5,12 +5,20 @@
         <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 id="notifocationCenter">
+    <section>
         <h4>
             Vriendchapsverzoeken
         </h4>
         <ul class="nav-list" id="friendrequestslist">
 
+        </ul>
+    </section>
+    <section>
+        <h4>
+            Nieuwe berichten
+        </h4>
+        <ul class="nav-list" id="unreadChatlist">
+
         </ul>
     </section>
 </nav>