From 58ce5f1e7515198cace4d0aef031e1de63df01fb Mon Sep 17 00:00:00 2001
From: Lars van Hijfte <larsvanhijfte@hotmail.com>
Date: Mon, 23 Jan 2017 16:24:48 +0100
Subject: [PATCH] Menu, netjes, notification

---
 website/public/API/loadChatNotifications.php  |   8 +
 ...php => loadFriendRequestNotifications.php} |   0
 website/public/js/header.js                   |   6 +-
 website/public/js/notifications.js            |  18 ++-
 website/public/styles/footer.css              |   3 +-
 website/public/styles/main.css                |   1 +
 website/public/styles/menu.css                |  20 ++-
 website/public/styles/profile.css             |   3 -
 website/queries/friendship.php                |   8 +-
 website/queries/group_member.php              |  11 +-
 website/views/menu.php                        | 140 ++++++++----------
 11 files changed, 114 insertions(+), 104 deletions(-)
 create mode 100644 website/public/API/loadChatNotifications.php
 rename website/public/API/{loadNotifications.php => loadFriendRequestNotifications.php} (100%)

diff --git a/website/public/API/loadChatNotifications.php b/website/public/API/loadChatNotifications.php
new file mode 100644
index 0000000..3b5835f
--- /dev/null
+++ b/website/public/API/loadChatNotifications.php
@@ -0,0 +1,8 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/friendship.php");
+
+echo selectAllUnreadChat();
\ No newline at end of file
diff --git a/website/public/API/loadNotifications.php b/website/public/API/loadFriendRequestNotifications.php
similarity index 100%
rename from website/public/API/loadNotifications.php
rename to website/public/API/loadFriendRequestNotifications.php
diff --git a/website/public/js/header.js b/website/public/js/header.js
index 093cc91..20faba5 100644
--- a/website/public/js/header.js
+++ b/website/public/js/header.js
@@ -13,14 +13,14 @@ $(document).ready(function() {
                 marginRight: "256px"
             }, 500);
             $(".chat-right").animate({
-                width: "100%"
+                width: "calc(100% - 512px - 40px)"
             }, 500);
             $("#notification-center").animate({
                 right: "0px"
             }, 500);
         } else {
             $(".chat-right").animate({
-                width: "100%"
+                width: "calc(100% - 256px - 40px)"
             }, 500);
             $(".content").animate({
                 marginRight: "0px"
@@ -30,4 +30,6 @@ $(document).ready(function() {
             }, 500);
         }
     });
+
+    $("#own-profile-picture").click();
 });
diff --git a/website/public/js/notifications.js b/website/public/js/notifications.js
index cb013b8..51a8c06 100644
--- a/website/public/js/notifications.js
+++ b/website/public/js/notifications.js
@@ -1,7 +1,7 @@
 function showNotifications(notifications, id) {
-    $("#friendrequestslist").html("");
+    $("#" + id).html("");
     for (i in notifications) {
-        $("#friendrequestslist").append(" \
+        $("#" + id).append(" \
             <li class='friend-item $extraItem'> \
                 <form action='profile.php' method='get'> \
                     <button type='submit' \
@@ -20,15 +20,25 @@ function showNotifications(notifications, id) {
 
 function loadNotifications() {
     $.post(
-        "API/loadNotifications.php"
+        "API/loadFriendRequestNotifications.php"
     ).done(function(data) {
         if (data && data != "[]") {
             showNotifications(JSON.parse(data), "friendrequestslist");
         }
     });
+    $.post(
+        "API/loadChatNotifications.php"
+    ).done(function(data) {
+        if (data && data != "[]") {
+            showNotifications(JSON.parse(data), "unreadChatlist");
+        }
+    });
 
     setTimeout(loadNotifications, 10000);
 }
+$(document).ready(function() {
+    loadNotifications();
+});
+
 
-loadNotifications();
 
diff --git a/website/public/styles/footer.css b/website/public/styles/footer.css
index 53e28f1..48c0757 100644
--- a/website/public/styles/footer.css
+++ b/website/public/styles/footer.css
@@ -1,6 +1,5 @@
 footer {
-    width: calc(100% - 256px);
-    margin-left: 256px;
+    width: 100%;
 
     background-color: rgba(0,0,0,0.4);
 }
diff --git a/website/public/styles/main.css b/website/public/styles/main.css
index 062d5d9..3e9b51d 100644
--- a/website/public/styles/main.css
+++ b/website/public/styles/main.css
@@ -166,6 +166,7 @@ textarea {
 
 textarea:hover, input:hover, select:hover {
     border-radius: 10px;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.12);
 }
 
 textarea:focus, input:focus, select:focus {
diff --git a/website/public/styles/menu.css b/website/public/styles/menu.css
index 215b073..25e4b91 100644
--- a/website/public/styles/menu.css
+++ b/website/public/styles/menu.css
@@ -6,15 +6,15 @@
     left: 0;
     top: 80px;
     height: calc(100% - 80px);
-    width: 256px;
+    width: 236px;
 
-    background-color: #EEE;
-    /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
+    padding: 20px 10px;
 }
 
 .menu section {
-    margin: 0 5px 10px 5px;
-    background-color: white;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    background-color: #FFFFFF;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
@@ -24,6 +24,7 @@
 
 .nav-list li {
     padding: 5px 20px;
+    border-radius: 4px;
 }
 
 .more-item {
@@ -40,7 +41,7 @@
 
 .friend-item:hover, .group-item:hover {
     background: #FBC02D;
-    color: white;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
 .menu button {
@@ -54,7 +55,7 @@
 
 #notification-center {
     left: auto;
-    width: 256px;
+    width: 236px;
     right: -256px;
 }
 
@@ -67,4 +68,9 @@
     color: #4CAF50;
     font-size: 42px;
     padding: 7px;
+    transition-duration: 250ms;
+}
+
+#quick-links i:hover {
+    color: #FBC02D;
 }
\ No newline at end of file
diff --git a/website/public/styles/profile.css b/website/public/styles/profile.css
index f5dd6b1..95bc4c4 100644
--- a/website/public/styles/profile.css
+++ b/website/public/styles/profile.css
@@ -33,9 +33,6 @@ div.posts div.post {
 }
 
 div.posts div.post:hover {
-    /*margin: 15px 0 0 -5px;*/
-    /*padding: 15px;*/
-    /*z-index: 20;*/
     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 }
 
diff --git a/website/queries/friendship.php b/website/queries/friendship.php
index 0deba63..9a3a37c 100644
--- a/website/queries/friendship.php
+++ b/website/queries/friendship.php
@@ -21,8 +21,8 @@ function selectAllFriends($userID) {
             `friendship`.`user2ID` = `user`.`userID` OR 
             `friendship`.`user2ID` = :userID AND
             `friendship`.`user1ID` = `user`.`userID`) AND
-            `role` != 5 AND
-            `status` = 1
+            `user`.`role` != 'banned' AND
+            `friendship`.`status` = 'confirmed'
     ");
 
     $stmt->bindParam(':userID', $userID, PDO::PARAM_INT);
@@ -52,8 +52,8 @@ function selectAllFriendRequests() {
             `friendship`.`user2ID` = `user`.`userID` OR 
             `friendship`.`user2ID` = :userID AND
             `friendship`.`user1ID` = `user`.`userID`) AND
-            `role` != 5 AND
-            `status` = 0
+            `user`.`role` != 5 AND
+            `friendship`.`status` = 'requested'
     ");
 
     $stmt->bindParam(':userID', $_SESSION["userID"], PDO::PARAM_INT);
diff --git a/website/queries/group_member.php b/website/queries/group_member.php
index f8a9002..59d4dce 100644
--- a/website/queries/group_member.php
+++ b/website/queries/group_member.php
@@ -1,7 +1,7 @@
 <?php
 
 function selectAllGroupsFromUser($userID) {
-    return $GLOBALS["db"]->query("
+    $stmt = $GLOBALS["db"]->prepare("
     SELECT
         `group_page`.`name`,
         `group_page`.`picture`
@@ -10,8 +10,13 @@ function selectAllGroupsFromUser($userID) {
     INNER JOIN
         `group_member`
     WHERE
-        `group_member`.`userID` = $userID AND
+        `group_member`.`userID` = :userID AND
         `group_member`.`groupID` = `group_page`.`groupID` AND
-        `group_page`.`status` != 0
+        `group_page`.`status` != 'hidden'
     ");
+
+    $stmt->bindParam(':userID', $userID, PDO::PARAM_INT);
+    $stmt->execute();
+
+    return $stmt;
 }
diff --git a/website/views/menu.php b/website/views/menu.php
index b7651bd..0aa4d98 100644
--- a/website/views/menu.php
+++ b/website/views/menu.php
@@ -1,36 +1,46 @@
 <nav class="menu">
-    <section id="friends-menu-section platform">
-        <h4>
-            Vrienden
-        </h4>
-        <ul class="nav-list">
-            <?php
+    <section id="friends-menu-section">
+        <?php
 
-            // Load file.
-            require_once("../queries/friendship.php");
-            require_once("../queries/user.php");
+        // Load file.
+        require_once("../queries/friendship.php");
+        require_once("../queries/user.php");
 
-            // Get all the friends of a user.
-            $friends = selectAllFriends($_SESSION["userID"]);
-            $i = 0;
+        // Get confirmed friends of the user and a random non-friend.
+        $friends = selectAllFriends($_SESSION["userID"])->fetchAll();
+        $randomUser = selectRandomNotFriendUser($_SESSION["userID"])["username"];
+        $i = 0;
 
-            // Print all the users.
-            while($friend = $friends->fetch(PDO::FETCH_ASSOC)) {
-                $i ++;
+        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\">
+            ";
 
-                // Set default values of a friend.
+            foreach ($friends as $i => $friend) {
                 $username = $friend["username"];
                 $extraItem = "";
-                $pf = "img/notbad.jpg";
+                $pf = $friend["profilepicture"];
 
-                // Change values if needed.
-                if (!empty($friend["profilepicture"]))
-                    $pf = $friend["profilepicture"];
-
-                if ($i > 5)
+                if ($i >= 5)
                     $extraItem = "extra-menu-items";
 
-                // Echo the friend.
                 echo "
                     <li class='friend-item $extraItem'>
                         <form action='profile.php' method='get'>
@@ -47,66 +57,45 @@
                 ";
             }
 
-            $randomUser = selectRandomNotFriendUser($_SESSION["userID"])["username"];
-
-            echo "
-                <li class='friend-item'>
-                    <form action='/profile' method='get'>
-                        <button type='submit'
-                                name='username'
-                                value='$randomUser'>
-                            <div class='friend'>
-                                Klik hier voor een nieuw vriendje :)
-                            </div>
-                        </button>
-                    </form>
-                </li>
-            ";
-            if ($i > 5) {
-                $i -= 5;
+            if (sizeof($friends) > 5) {
                 echo "
                     <li class='more-item' id='more-friends-click'>
-                        En nog $i anderen...
-                    </li>
+                        Meer vrienden..
+                    </li> 
                 ";
             }
-
-            ?>
-        </ul>
+        }
+        ?>
     </section>
     <section id="groups-menu-section">
-        <h4>
-            Groepen
-        </h4>
-        <ul class="nav-list">
-            <?php
+        <?php
 
-            // Load file.
-            include_once("../queries/group_member.php");
+        // Load file.
+        require_once("../queries/group_member.php");
 
-            // Get all the friends of a user.
-            $groups = selectAllGroupsFromUser($_SESSION["userID"]);
-            $i = 0;
+        // Get all the friends of a user.
+        $groups = selectAllGroupsFromUser($_SESSION["userID"]);
 
-            // Print all the users.
-            while($group = $groups->fetch(PDO::FETCH_ASSOC)) {
-                $i ++;
+        if (sizeof($groups) > 0) {
+            echo "
+                    <h4>
+                        Groepen
+                    </h4>
+                    <ul class=\"nav-list\">
+                ";
 
+            foreach ($groups as $i => $group) {
                 // Set default values of a friend.
                 $name = $group["name"];
                 $extraItem = "";
-                $picture = "img/notbad.jpg";
+                $picture = $group["picture"];
 
                 // Change values if needed.
-                if (!empty($group["picture"]))
-                    $picture = $group["picture"];
-
                 if ($i > 3)
                     $extraItem = "extra-menu-items";
 
-                // Echo the friend.
                 echo "
-                    <li class='group-item'>
+                    <li class='group-item $extraItem'>
                         <form action='group.php' method='get'>
                             <button type='submit'
                                     name='groupname'
@@ -121,27 +110,20 @@
                 ";
             }
 
-            if ($i == 0) {
-                echo "<li class='group-item'>
-                            <div class='group'>
-                                Je hoort nergens bij.
-                            </div>
-                        </li>";
-            } else if ($i > 3) {
-                $i -= 3;
+            if (sizeof($groups) > 3) {
                 echo "
-                    <li class='more-item' id='more-groups-click'>
-                        En nog $i andere...
-                    </li>
-                ";
+                        <li class='more-item' id='more-groups-click'>
+                            Meer groepen..
+                        </li> 
+                    ";
             }
-            ?>
-        </ul>
+        }
+        ?>
     </section>
     <section>
         <ul>
             <li class="more-item" id="menu-back">
-                Ga terug
+                Terug naar het overzicht
             </li>
         </ul>
     </section>