2017-01-25 16:20:49 +01:00
12 changed files with 167 additions and 39 deletions
--- a/website/public/API/loadChatNotifications.php
+++ b/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();
--- a/website/public/API/loadMessages.php
+++ b/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"]));
 }
--- a/website/public/js/chat.js
+++ b/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-left #friend-item-" + userID).addClass("active-friend-chat");
+    $("#chat-recent-panel .friend-item").removeClass("active-friend-chat");
+    $("#chat-left #friend-item-" + userID).addClass("active-friend-chat");
 }

 function sayEmpty() {
--- a/website/public/js/notifications.js
+++ b/website/public/js/notifications.js
@@ -1,7 +1,7 @@
-function showNotifications(notifications, id) {
-    $("#" + id).html("");
+function showFriendNotifications(notifications) {
+    $("#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));
        }
    });

--- a/website/public/styles/chat.css
+++ b/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 {
-    width: calc(100% - 256px - 40px);
-    height: calc(100% - 80px);
-    margin-right: 10px;
+    display: inline-block;
+
+    overflow-y: auto;
 }

 /* 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;
 }

--- a/website/public/styles/main.css
+++ b/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;
+}
--- a/website/public/styles/menu.css
+++ b/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;
--- a/website/queries/friendship.php
+++ b/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/avatar-standard.png'
@@ -36,6 +37,7 @@ function selectAllFriendRequests() {
        SELECT
            `userID`,
            `username`,
+            LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 20) as `name`,
            IFNULL(
                `profilepicture`,
                '../img/avatar-standard.png'
@@ -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;
+}
--- a/website/queries/private_message.php
+++ b/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());
+}
--- a/website/views/chat-view.php
+++ b/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>
+        <div>
            <form id="lastIDForm">
                <input type="hidden"
                       id="lastID"
--- a/website/views/menu.php
+++ b/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>
--- a/website/views/notification-center.php
+++ b/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>