Merge branch 'lars-algemeen' into 'master'

Lars algemeen See merge request !94
2017-01-23 13:17:57 +01:00
parent 8ba7583e85 1ec8de71f0
commit 76eb2dee7c
19 changed files with 195 additions and 57 deletions
--- a/website/public/API/loadMessages.php
+++ b/website/public/API/loadMessages.php
@@ -1,6 +1,7 @@
 <?php

 session_start();
+
 require_once("../../queries/connect.php");
 require_once("../../queries/private_message.php");
 require_once("../../queries/checkInput.php");
--- a/website/public/API/loadNotifications.php
+++ b/website/public/API/loadNotifications.php
@@ -0,0 +1,8 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/friendship.php");
+
+echo selectAllFriendRequests();
--- a/website/public/js/header.js
+++ b/website/public/js/header.js
@@ -9,16 +9,22 @@ $(document).ready(function() {

    $("#own-profile-picture").click(function() {
        if($("#notification-center").css('right') == "-256px") {
-            // $(".content").animate({
-            //     marginRight: "256px"
-            // }, 500);
+            $(".content").animate({
+                marginRight: "256px"
+            }, 500);
+            $(".chat-right").animate({
+                width: "100%"
+            }, 500);
            $("#notification-center").animate({
                right: "0px"
            }, 500);
        } else {
-            // $(".content").animate({
-            //     marginRight: "0px"
-            // }, 500);
+            $(".chat-right").animate({
+                width: "100%"
+            }, 500);
+            $(".content").animate({
+                marginRight: "0px"
+            }, 500);
            $("#notification-center").animate({
                right: "-256px"
            }, 500);
--- a/website/public/js/notifications.js
+++ b/website/public/js/notifications.js
@@ -0,0 +1,34 @@
+function showNotifications(notifications, id) {
+    $("#friendrequestslist").html("");
+    for (i in notifications) {
+        $("#friendrequestslist").append(" \
+            <li class='friend-item $extraItem'> \
+                <form action='profile.php' method='get'> \
+                    <button type='submit' \
+                            name='username' \
+                            value='"+ notifications[i].username +"'> \
+                        <div class='friend'> \
+                            <img alt='PF' class='profile-picture' src='"+ notifications[i].profilepicture +"'/> \
+                            "+ notifications[i].username +" \
+                        </div> \
+                    </button> \
+                </form> \
+            </li> \
+        ");
+    }
+}
+
+function loadNotifications() {
+    $.post(
+        "API/loadNotifications.php"
+    ).done(function(data) {
+        if (data && data != "[]") {
+            showNotifications(JSON.parse(data), "friendrequestslist");
+        }
+    });
+
+    setTimeout(loadNotifications, 10000);
+}
+
+loadNotifications();
+
--- a/website/public/profile.php
+++ b/website/public/profile.php
@@ -4,7 +4,7 @@
    <?php include("../views/head.php"); ?>
    <script src="/js/masonry.js"></script>
    <style>
-        @import url("/styles/profile.css");
+        @import url("styles/profile.css");
    </style>
 </head>
 <body>
--- a/website/public/styles/adminpanel.css
+++ b/website/public/styles/adminpanel.css
@@ -6,7 +6,7 @@
 .admin-title {
    margin: 10px;
    padding-bottom: 5px;
-    border-bottom: 4px solid #845663;
+    border-bottom: 4px solid #FBC02D;
 }

 .admin-panel input[type="radio"], input[type="checkbox"] {
@@ -18,7 +18,7 @@
    padding: 8px;
    vertical-align: top;
    border-radius: 10px;
-    border: 4px solid #845663;
+    border: 4px solid #FBC02D;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }

--- a/website/public/styles/chat.css
+++ b/website/public/styles/chat.css
@@ -83,7 +83,7 @@
 .chat-field input[type="submit"] {
    width: auto;
    float: right;
-    background-color: #845663;
+    background-color: #FBC02D;
    color: white;
    padding: 5px 10px;
    border-radius: 0 10px 10px 0;
--- a/website/public/styles/header.css
+++ b/website/public/styles/header.css
@@ -8,21 +8,23 @@ header {
    width: 100%;

    color: white;
-    background-color: rgba(132,86,99, 0.98);
+    background-color: #FBC02D;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }

+#header-logo {
+    padding-left: 42px;
+}

 #header-logo, #header-logo img {
    height: 80px;

    vertical-align: middle;
    line-height: 80px;
-    padding-left: 5px;
 }

 #header-search {
-    padding-left: 48px;
+    padding-left: 42px;
 }


--- a/website/public/styles/index.css
+++ b/website/public/styles/index.css
@@ -19,7 +19,7 @@ body {
    background-size: cover;
    background-attachment: fixed;*/

-    /*background-color: #B78996;*/
+    /*background-color: #EEE;*/
    color: #333;
    font-family: Arial, sans-serif;
 }
--- a/website/public/styles/main.css
+++ b/website/public/styles/main.css
@@ -18,7 +18,7 @@ html {

 body {
    height: 100%;
-    background-color: #B78996;
+    background-color: #EEE;
    color: #333;
    font-family: Arial, sans-serif;
 }
@@ -37,11 +37,12 @@ h3 {
 }

 h4 {
-    font-size: 1.6em;
+    font-size: 1.2em;
 }

 h5 {
-    font-size: 1.4em;
+    font-size: 1.0em;
+    color: #666;
 }

 ul {
@@ -54,12 +55,12 @@ p {

 /* Selection colors */
 ::selection {
-    background: #845663;
+    background: #FBC02D;
    color: white;
 }

 ::-moz-selection {
-    background: #845663;
+    background: #FBC02D;
    color: white;
 }

@@ -75,7 +76,7 @@ p {
 .platform {
    padding: 20px;
    margin-bottom: 10px;
-    border-radius: 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);
 }
@@ -143,7 +144,7 @@ button, input, select {
    cursor: pointer;
    border: none;
    font-size: 16px;
-    border-radius: 7px;
+    transition-duration: 250ms;
 }

 /* All textinput and sections */
@@ -151,19 +152,53 @@ textarea, input, select {
    padding: 0 5px;
    background: white;
    color: #333333;
-    border: 1px solid #845663;
-    border-radius: 7px;
+    border-radius: 5px;
+    border-bottom: 1px solid #4CAF50;
    font-size: 16px;
+    outline: none;
+    transition-duration: 250ms;
+}
+
+textarea {
+    padding: 5px;
+    resize: none;
+}
+
+textarea:hover, input:hover, select:hover {
+    border-radius: 10px;
+}
+
+textarea:focus, input:focus, select:focus {
+    border-radius: 10px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }

 /* All buttons */
 button,
 input[type="submit"],
 input[type="reset"] {
-    background-color: #845663;
+    background-color: #FBC02D;
    color: white;
    padding: 0 10px;
    border: none;
+    border-radius: 5px;
+}
+
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus {
+    outline: none;
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="reset"]:active {
+    outline: none;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
+}
+
+input[type="radio"] {
+    border-radius: 100%;
 }

 /* Tables */
@@ -190,19 +225,17 @@ img[data-title]:hover:after,
 span[data-title]:hover:after,
 div[data-title]:hover:after {
    content: attr(data-title);
-    padding: 4px 4px;
+    padding: 7px 7px;
    color: #FFFFFF;
    position: absolute;
    left: 0;
-    top: 100%;
-    z-index: 20;
+    top: 150%;
+    z-index: 200;
    white-space: nowrap;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    -moz-box-shadow: 0 0 4px #222;
-    -webkit-box-shadow: 0 0 4px #222;
-    box-shadow: 0 0 4px #222;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    background-color: #333;
    font-size: 15px;
    line-height: normal;
--- a/website/public/styles/menu.css
+++ b/website/public/styles/menu.css
@@ -1,12 +1,19 @@
 .menu {
    position: fixed;
    z-index: 50;
+    overflow-y: auto;

    left: 0;
    top: 80px;
    height: calc(100% - 80px);
    width: 256px;

+    background-color: #EEE;
+    /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
+}
+
+.menu section {
+    margin: 0 5px 10px 5px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
@@ -26,12 +33,13 @@
    cursor: pointer;
 }

-.friend-item {
+.friend-item, .group-item {
    cursor: pointer;
+    transition-duration: 250ms;
 }

 .friend-item:hover, .group-item:hover {
-    background: #845663;
+    background: #FBC02D;
    color: white;
 }

@@ -56,7 +64,7 @@
 }

 #quick-links i {
-    color: #845663;
+    color: #4CAF50;
    font-size: 42px;
    padding: 7px;
 }
--- a/website/public/styles/profile.css
+++ b/website/public/styles/profile.css
@@ -14,7 +14,7 @@
    padding-top: 50px;
 }
 .profile-box h5.profile-username {
-    padding-top: 0;
+    padding: 0 0 10px 0;
 }

 div.posts {
@@ -28,6 +28,15 @@ div.posts div.post {
    margin: 20px 0 0 0;
    padding: 10px;
    width: calc(100% - 40px);
+    cursor: pointer;
+    transition-duration: 250ms;
+}
+
+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);
 }

 div.posts div.post img {
@@ -76,11 +85,12 @@ div.posts .post form textarea.newpost {
    float: right;
    padding: 10px;
    border-radius: 5px;
-    background-color: #845663;
+    background-color: #4CAF50;
    color: #FFFFFF;
    transition-duration: 250ms;
+    cursor: pointer;
 }

 .profile-button:hover {
-    background-color: #B78996;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 }
--- a/website/queries/friendship.php
+++ b/website/queries/friendship.php
@@ -22,11 +22,42 @@ function selectAllFriends($userID) {
            `friendship`.`user2ID` = :userID AND
            `friendship`.`user1ID` = `user`.`userID`) AND
            `role` != 5 AND
-            `status` = 1            
+            `status` = 1
    ");

    $stmt->bindParam(':userID', $userID, PDO::PARAM_INT);
    $stmt->execute();

    return $stmt;
+}
+
+function selectAllFriendRequests() {
+    $stmt = $GLOBALS["db"]->prepare("
+        SELECT
+            `userID`,
+            `username`,
+            IFNULL(
+                `profilepicture`,
+                '../img/notbad.jpg'
+            ) AS profilepicture,
+            `onlinestatus`,
+            `role`
+        FROM
+            `user`
+        INNER JOIN
+            `friendship`
+            
+        WHERE
+            (`friendship`.`user1ID` = :userID AND
+            `friendship`.`user2ID` = `user`.`userID` OR 
+            `friendship`.`user2ID` = :userID AND
+            `friendship`.`user1ID` = `user`.`userID`) AND
+            `role` != 5 AND
+            `status` = 0
+    ");
+
+    $stmt->bindParam(':userID', $_SESSION["userID"], PDO::PARAM_INT);
+    $stmt->execute();
+
+    return json_encode($stmt->fetchAll());
 }
--- a/website/queries/settings.php
+++ b/website/queries/settings.php
@@ -90,10 +90,9 @@ function updateSettings() {
    $stmt->bindValue(":fname", test_input($_POST["fname"]));
    $stmt->bindValue(":lname", test_input($_POST["lname"]));
    $stmt->bindValue(":location", test_input($_POST["location"]));
-    $stmt->bindValue(":bday", $_POST["bday"]);
+    $stmt->bindValue(":bday", test_input($_POST["bday"]));
    $stmt->bindValue(":bio", test_input($_POST["bio"]));
    $stmt->bindValue(":userID", $_SESSION["userID"]);
-
    $stmt->execute();

    return new settingsMessage("happy", "Instellingen zijn opgeslagen.");
--- a/website/views/chat-view.php
+++ b/website/views/chat-view.php
@@ -36,7 +36,7 @@
                ?>
            </ul>
        </nav>
-        <div class="chat-right right">
+        <div class="chat-right">
            <div id="chat-history" class="chat-history platform">
            </div>
            <form id="lastIDForm">
--- a/website/views/head.php
+++ b/website/views/head.php
@@ -1,16 +1,17 @@
 <meta charset="utf-8">
 <title>MyHyvesbook+</title>
 <!-- Add your javascript files here. -->
-<script src="/js/jquery.js"></script>
-<script src="/js/header.js"></script>
-<script src="/js/menu.js"></script>
+<script src="js/jquery.js"></script>
+<script src="js/header.js"></script>
+<script src="js/menu.js"></script>
+<script src="js/notifications.js"></script>
 <style>
    /* Add your css files here. */
-    @import url("/styles/main.css");
-    @import url("/styles/font-awesome.css");
-    @import url("/styles/header.css");
-    @import url("/styles/menu.css");
-    @import url("/styles/footer.css");
+    @import url("styles/main.css");
+    @import url("styles/font-awesome.css");
+    @import url("styles/header.css");
+    @import url("styles/menu.css");
+    @import url("styles/footer.css");
 </style>
 <?php

--- a/website/views/header.php
+++ b/website/views/header.php
@@ -8,7 +8,7 @@ $userinfo = getHeaderInfo();
        <a href="profile.php"><img src="/img/top-logo.png" alt="MyHyvesbook+" /></a>
    </div>
    <div id="header-search">
-        <form action="/search" method="get">
+        <form action="search.php" method="get">
            <input name="search"
                   type="text"
                   placeholder="Zoek naar wat je wil"
--- a/website/views/menu.php
+++ b/website/views/menu.php
@@ -1,5 +1,5 @@
 <nav class="menu">
-    <section id="friends-menu-section">
+    <section id="friends-menu-section platform">
        <h4>
            Vrienden
        </h4>
@@ -27,7 +27,7 @@
                if (!empty($friend["profilepicture"]))
                    $pf = $friend["profilepicture"];

-                if ($i > 1)
+                if ($i > 5)
                    $extraItem = "extra-menu-items";

                // Echo the friend.
@@ -62,8 +62,8 @@
                    </form>
                </li>
            ";
-            if ($i > 1) {
-                $i -= 1;
+            if ($i > 5) {
+                $i -= 5;
                echo "
                    <li class='more-item' id='more-friends-click'>
                        En nog $i anderen...
--- a/website/views/notification-center.php
+++ b/website/views/notification-center.php
@@ -5,7 +5,12 @@
        <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="not">
+    <section id="notifocationCenter">
+        <h4>
+            Vriendchapsverzoeken
+        </h4>
+        <ul class="nav-list" id="friendrequestslist">

+        </ul>
    </section>
 </nav>