Merge branch 'master' into kevin-prototype

website/public/js/chat.js

@@ -1,12 +1,17 @@
 var previousDate = new Date("1970-01-01 00:00:00");
+var previousTime = "00:00";
+var gettingMessages = false;
+var previousType = "robot";
 
 $(document).ready(function() {
-    loadMessages();
+    setInterval(loadMessages, 1000);
     sayEmpty();
     $(".chat-field").hide();
 });
 
 function loadMessages() {
+    if (!gettingMessages) {
+        gettingMessages = true;
         $.post(
             "API/loadMessages.php",
             $("#lastIDForm").serialize()
@@ -15,11 +20,12 @@ function loadMessages() {
                 messages = JSON.parse(data);
                 addMessages(messages);
                 $("#lastID").val(messages[messages.length - 1].messageID);
-            $("#chat-history").scrollTop($("#chat-history")[0].scrollHeight);
             }
+            gettingMessages = false;
         });
-
+    } else {
-    setTimeout(loadMessages, 1000);
+        setTimeout(loadMessages, 500);
+    }
 }
 
 
@@ -30,35 +36,55 @@ function sendMessage() {
     );
 
     $("#newContent").val("");
+    loadMessages();
 }
 
 function addMessages(messages) {
+    var messagesText = "";
     for(var i in messages) {
-        thisDate = new Date(messages[i].creationdate);
+        // Initialize message variables
+        var thisDate = new Date(messages[i].creationdate);
+        var thisTime = thisDate.getHours() + ":" + thisDate.getMinutes();
+        var type;
         thisDate.setHours(0,0,0,0);
+
         if (messages[i].destination == $(".destinationID").val()) {
             type = "chat-message-self";
         } else {
             type = "chat-message-other";
         }
-        if (thisDate > previousDate) {
+        if (i == 0) {
+            messagesText += '<div class="chat-message"><div class="' + type + '">';
+        } else if (type != previousType || thisTime != previousTime || thisDate > previousDate) {
+            messagesText += '<div class="chat-time">\
+                    ' + thisTime + '\
+                    </div></div></div>';
+
             previousDate = thisDate;
-            $("#chat-history").append('\
+            previousTime = thisTime;
+            previousType = type;
+            if (thisDate > previousDate) {
+                messagesText += '\
                     <div class="day-message"> \
                         <div class="day-message-content">\
                         ' + days[thisDate.getDay()] + " " + thisDate.getDate() + " " + months[thisDate.getMonth()] + " " + thisDate.getFullYear() + '\
                         </div> \
-                </div>\
+                    </div>';
-            ');
             }
-        $("#chat-history").append('\
+
-            <div class="chat-message"> \
+            messagesText += '<div class="chat-message"><div class="' + type + '">';
-                <div class="' + type + '">\
-                ' + fancyText(messages[i].content) + '\
-                </div> \
-            </div>\
-        ');
         }
+        messagesText += fancyText(messages[i].content) + "<br />";
+    }
+
+    // Close the last message
+    messagesText += '<div class="chat-time">\
+                    ' + thisTime + '\
+                    </div></div></div>';
+
+    $("#chat-history").append(messagesText);
+
+    $("#chat-history").scrollTop($("#chat-history")[0].scrollHeight - $('#chat-history')[0].clientHeight);
 }
 
 function switchUser(userID) {
@@ -72,5 +98,5 @@ function switchUser(userID) {
 }
 
 function sayEmpty() {
-    $("#chat-history").html("Begin nu met chatten!");
+    $("#chat-history").html("Probeer ook eens foto's en video's te sturen");
 }

website/public/js/friendButtons.js

@@ -1,26 +1,73 @@
 function placeFriendButtons() {
     $.post("API/getFriendshipStatus.php", { usr: userID })
         .done(function(data) {
-            friendshipStatus = data;
+            var friendshipStatus = data;
-            $buttonContainer = $("div.friend-button-container");
+            var $buttonContainer = $("div.friend-button-container");
-            $buttonContainer.children().remove();
+            $("#start-profile-chat").hide();
-            $("#start-profile-chat-form").hide();
+                $buttonContainer.html("");
-            if (friendshipStatus == -1) {
+                var value1 = "";
-                return;
+                var class1 = "empty-button";
-            } else if(friendshipStatus == 0) {
+                var icon1 = "";
-                $buttonContainer.append($("<button class=\"green friend-button\" value=\"request\"><i class=\"fa fa-handshake-o\"></i> Bevriend</button>"));
+                var text1 = "";
-            } else if(friendshipStatus == 1) {
+
-                $buttonContainer.append($("<button class=\"red friend-button\" value=\"delete\"><i class=\"fa fa-times\"></i> Verwijder</button>"));
+                var value2 = "";
-                $("#start-profile-chat-form").show();
+                var class2 = "empty-button";
-            } else if(friendshipStatus == 2) {
+                var icon2 = "";
-                $buttonContainer.append($("<button class=\"red friend-button\" value=\"delete\"><i class=\"fa fa-times\"></i> Trek verzoek in</button>"));
+                var text2 = "";
-            } else if(friendshipStatus == 3) {
+
-                $buttonContainer.append($("<button class=\"red friend-button\" value=\"delete\"><i class=\"fa fa-times\"></i> Weiger</button>"));
+                switch (friendshipStatus) {
-                $buttonContainer.append($("<button class=\"green friend-button\" value=\"accept\"><i class=\"fa fa-check\"></i> Accepteer</button>"));
+                    case "0":
+                        value1 = "request";
+                        class1 = "green";
+                        text1 = "Bevriend";
+                        icon1 = "fa-handshake-o";
+                        break;
+                    case "1":
+                        value1 = userID;
+                        class1 = "green";
+                        text1 = "Chat";
+                        icon1 = "fa-comment-o";
+                        value2 = "delete";
+                        class2 = "red";
+                        text2 = "Verwijder";
+                        icon2 = "fa-times";
+                        break;
+                    case "2":
+                        value1 = "delete";
+                        class1 = "red";
+                        text1 = "Trek verzoek in";
+                        icon1 = "fa-cross";
+                        break;
+                    case "3":
+                        value1 = "accept";
+                        class1 = "green";
+                        text1 = "Accepteer";
+                        icon1 = "fa-check";
+                        value2 = "delete";
+                        class2 = "red";
+                        text2 = "Weiger";
+                        icon2 = "fa-times";
+                        break;
+                    default:
+                        console.log(friendshipStatus);
+                        break;
                 }
 
+                $buttonContainer.append(
+                    "<button class='"+ class1 +" friend-button' value='"+ value1 +"'>" +
+                        "<i class='fa "+ icon1 +"'></i> " + text1 +
+                    "</button>");
+                $buttonContainer.append(
+                    "<button class='"+ class2 +" friend-button' value='"+ value2 +"'>" +
+                        "<i class='fa "+ icon2 +"'></i> " + text2 +
+                    "</button>");
+
+
             $buttonContainer.children().click(function() {
+                if (isNaN(this.value))
                     editFriendship(userID, this.value);
+                else if (this.value != "")
+                    window.location.href = "chat.php?username=" + this.value;
             });
         });
 }

website/public/js/main.js

@@ -2,19 +2,39 @@ var days = ["zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag",
 var months = ["januari", "februari", "maart", "april", "mei", "juni", "juli", "augustus", "september", "oktober", "november", "december"]
 
 function fancyText(text) {
-
+    // Add links, images, gifs and (youtube) video's.
-    // Add images and gifs.
+    var regex = /(https?:\/\/.[^ ]*)/ig;
-    var regex = /(https:\/\/.[^ ]*\.(?:png|jpg|jpeg|gif))/ig;
+    text = text.replace(regex, function(link) {
-    text = text.replace(regex, function(img) {
+        // Add images
-        return "<img src='" + img + "' />";
+        if (link.match(/(https?:\/\/.[^ ]*\.(?:png|jpg|jpeg|gif))/ig)) {
+            return "<img alt='" + link + "' src='" + link + "' />";
+        }
+        // Add mp4 video's
+        else if (link.match(/(https?:\/\/.[^ ]*\.(?:mp4))/ig)) {
+            return "<video width='100%'>" +
+                        "<source src='"+ link +"' type='video/mp4'>" +
+                        "<b>Je browser ondersteund geen video</b>" +
+                "</video><button class='gray' onclick='$(this).prev().get(0).play();'>Speel af</button>";
+        }
+        // Add ogg video's
+        else if (link.match(/(https?:\/\/.[^ ]*\.(?:ogg))/ig)) {
+            return "<video width='100%'>" +
+                "<source src='"+ link +"' type='video/ogg'>" +
+                "<b>Je browser ondersteund geen video</b>" +
+                "</video><button onclick='$(this).prev().get(0).play();'>Speel af</button>";
+        }
+        // Add youtube video's
+        else if (link.match(/(https?:\/\/.(www.)?youtube|youtu.be)*watch/ig)) {
+            return '<iframe width="100%"' +
+                    ' src="https://www.youtube.com/embed/' + link.substr(link.length - 11) +
+                    '" frameborder="0" allowfullscreen></iframe>';
+        }
+        // Add links
+        else {
+            return "<a href='" + link + "'>" + link + "</a>";
+        }
     });
 
-    // Add links.
-    // regex = /(https:\/\/.[^ ]*\.(?:net|com|nl))/ig;
-    // text = text.replace(regex, function(link) {
-    //     return "<a href='" + link + "'>LINK</a>";
-    // });
-
     return text;
 }
 

website/public/styles/adminbutton.css

@@ -0,0 +1,3 @@
+#quick-links i {
+    font-size: 32px;
+}

website/public/styles/chat.css

@@ -131,3 +131,17 @@ body {
 .chat-message img {
     max-width: 100%;
 }
+
+.chat-message a {
+    text-decoration: underline;
+}
+
+.chat-time {
+    color: #666666;
+    font-size: 12px;
+    margin-bottom: -3px;
+}
+
+.chat-message-other .chat-time {
+    text-align: right;
+}

website/public/styles/main.css

@@ -97,16 +97,16 @@ p {
 }
 
 .item-box, .item-box-full-width {
-    margin: 20px 0 0 0;
     padding: 25px;
     background-color: #FFFFFF;
 }
 
 .item-box {
-    width: calc(50% - 60px);
+    width: calc(33% - 50px);
+    display: inline-table;
 }
 
-@media only screen and (max-width: 900px) {
+@media only screen and (max-width: 1400px) {
     .item-box {
         width: calc(100% - 50px);
     }
@@ -183,6 +183,10 @@ button.green {
     background-color: forestgreen;
 }
 
+button.gray{
+    background-color: #FFF;
+    color: #333;
+}
 
 button,
 input[type="submit"],
@@ -224,6 +228,7 @@ td {
 
 /* Custom title box, appears instantaneously */
 a[data-title]:hover,
+i[data-title]:hover,
 img[data-title]:hover,
 span[data-title]:hover,
 div[data-title]:hover {
@@ -231,6 +236,7 @@ div[data-title]:hover {
 }
 
 a[data-title]:hover:after,
+i[data-title]:hover:after,
 img[data-title]:hover:after,
 span[data-title]:hover:after,
 div[data-title]:hover:after {

website/public/styles/profile.css

@@ -1,15 +1,60 @@
-.profile-box {
+/* New */
-    min-height: 150px;
+
-    padding: 25px;
+.user-box {
-    background-color: #FFFFFF;
+    text-align: center;
 }
 
-.profile-box .profile-picture, .profile-box .group-picture {
+.status-buttons-container {
+    position: relative;
+    float: left;
+    width: 200px;
+    display: inline-block;
+}
+
+.friend-button-container {
+    position: relative;
+    float: right;
+    width: 200px;
+    display: inline-block;
+}
+
+.friend-button-container button, .status-buttons-container button {
+    display: block;
+
+    margin: 7px 0;
+    width: 200px;
+
+    font-size: 18px;
+}
+
+.empty-button {
+    background: none;
+    cursor: auto;
+}
+.empty-button:active {
+    box-shadow: none;
+}
+
+.profile-info {
+    display: inline-block;
+
+    min-width: 250px;
+    width: auto;
+    padding-top: 30px;
+}
+
+.main-picture {
+    position: relative;
+    border: #4CAF50 solid 5px;
+
+    display: inline-block;
     width: 150px;
     height: 150px;
-    margin: 0 20px 20px 0;
+    margin-bottom: -45px;
 }
 
+/* Old */
+
 .profile-box h1.profile-username {
     padding-top: 50px;
 }
@@ -18,14 +63,12 @@
 }
 
 div.posts {
-    padding-top: 20px;
     width: calc(100% + 20px);
     display: inline-flex;
 }
 
 div.posts div.post {
     display: block;
-    margin: 20px 0 0 0;
     padding: 10px;
     width: calc(100% - 40px);
     cursor: pointer;
@@ -60,6 +103,12 @@ div.posts .post form textarea.newpost {
     height: 100px;
 }
 
+.post .post-date {
+    float: right;
+    color: #aaaaaa;
+    font-size: 0.8em;
+}
+
 @media only screen and (max-width: 1500px) {
     .post-box {
         width: calc(50% - 68px);
@@ -72,23 +121,3 @@ div.posts .post form textarea.newpost {
         width: calc(100% - 65px);
     }
 }
-
-.post .post-date {
-    float: right;
-    color: #aaaaaa;
-    font-size: 0.8em;
-}
-
-button.friend-button {
-    float: right;
-    height: auto;
-    padding: 10px;
-    margin-left: 10px;
-    border-radius: 5px;
-    transition-duration: 250ms;
-    cursor: pointer;
-}
-
-button.friend-button:hover {
-    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-}

website/queries/friendship.php

@@ -29,6 +29,12 @@ function selectLimitedFriends($userID, $limit) {
             `friendship`.`user1ID` = `user`.`userID`) AND
             `user`.`role` != 'banned' AND
             `friendship`.`status` = 'confirmed'
+        ORDER BY 
+            CASE
+            WHEN `friendship`.`user2ID` = `user`.`userID` THEN `friendship`.`chatLastVisted1`
+            WHEN `friendship`.`user1ID` = `user`.`userID` THEN `friendship`.`chatLastVisted2`
+            END
+            DESC
         LIMIT :limitCount
     ");
 

website/queries/private_message.php

@@ -15,7 +15,7 @@ function getOldChatMessages($user2ID) {
             `origin` = :user2 AND
             `destination` = :user1
         ORDER BY
-            `messageID` ASC
+            `creationdate` ASC
         ");
 
         $stmt->bindParam(":user1", $user1ID);
@@ -74,7 +74,7 @@ function getNewChatMessages($lastID, $destination) {
             `destination` = :user1) AND
             `messageID` > :lastID
         ORDER BY
-            `messageID` ASC
+            `creationdate` ASC
         ");
 
         $stmt->bindParam(':user1', $_SESSION["userID"]);

website/queries/user.php

@@ -46,6 +46,7 @@ function selectUser($me, $other) {
           `bio`,
           `user`.`creationdate`,
           `onlinestatus`,
+          `role`,
           `fname`,
           `lname`,
           CASE `status` IS NULL

website/views/head.php

@@ -5,7 +5,6 @@
 <script src="js/main.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");

website/views/menu.php

@@ -1,7 +1,7 @@
 <nav class="menu">
     <section id="friends-menu-section">
         <h4>
-            Top vrienden
+            Recente vrienden
         </h4>
         <ul id="menu-friends-list" class="nav-list">
         </ul>
@@ -12,6 +12,13 @@
         </h4>
         <ul id="menu-groups-list" class="nav-list">
         </ul>
+        <ul class="nav-list">
+            <li>
+                <a href="#">
+                    Maak een groep aan
+                </a>
+            </li>
+        </ul>
     </section>
     <section>
         <ul class="nav-list">

website/views/notification-center.php

@@ -1,9 +1,20 @@
 <nav class="menu" id="notification-center">
     <section id="quick-links">
-        <a href="chat.php"><i class="fa fa-comments-o" data-title="Prive chats"></i></a>
+        <a href="chat.php" data-title="Prive chats"><i class="fa fa-comments-o"></i></a>
-        <a href="settings.php"><i class="fa fa-cog" data-title="Instellingen"></i></a>
+        <a href="settings.php" data-title="Instellingen"><i class="fa fa-cog"></i></a>
-        <a href="profile.php"><i class="fa fa-user" data-title="Profiel"></i></a>
+        <a href="profile.php" data-title="Profiel"><i class="fa fa-user"></i></a>
-        <a href="logout.php"><i class="fa fa-sign-out" data-title="Uitloggen"></i></a>
+        <?php
+        include_once ("../queries/user.php");
+
+        // auth
+        $userinfo = getRoleByID($_SESSION['userID'])->fetch(PDO::FETCH_ASSOC);
+
+        if ($userinfo['role'] == 'admin' OR $userinfo['role'] == 'owner') {
+            echo "<a href=\"admin.php\" data-title=\"Admin\"><i class=\"fa fa-lock\"></i></a>";
+            echo "<style>@import url('styles/adminbutton.css'); </style>";
+        }
+        ?>
+        <a href="logout.php" data-title="Admin"><i class="fa fa-sign-out"></i></a>
     </section>
     <section id="friend-request-section">
         <h4>

website/views/profile.php

@@ -1,24 +1,41 @@
 <div class="content">
-    <div class="profile-box platform">
+    <div class="user-box">
-        <img class="left profile-picture" src="<?php echo $user["profilepicture"] ?>">
+        <img class="profile-picture main-picture" src="<?= $user["profilepicture"] ?>"><br />
-        <form id="start-profile-chat-form" class="right" action="chat.php" method="get">
+        <div class="platform">
-            <button name="username"
+            <div class="status-buttons-container">
-                    class="friend-button green"
+                <button disabled class="gray"><?= $user["onlinestatus"] ?></button>
-                    value="<?php echo $user["userID"] ?>">
+                <button disabled class="gray"><?= $user["role"] ?></button>
-                <i class="fa fa-comment-o"></i> Chat
+            </div>
-            </button>
-        </form>
             <div class="friend-button-container">
+                <p>:)</p>
+                <p>Je ziet er goed uit vandaag</p>
+            </div>
+            <div class="profile-info">
+                <h2><?= $user["fname"]?> <?=$user["lname"]?></h2>
+                <h5><?=$user["username"]?></h5>
+                <?php if (strlen($user["bio"]) <= 50) {
+                    echo "<p>" . $user["bio"] . "</p>";
+                } ?>
+            </div>
+        </div>
+    </div>
+    <?php if (strlen($user["bio"]) > 50) {
+        echo "<div class='platform'><h3>Bio:</h3><p>" . $user["bio"] . "</p></div>";
+    } ?>
 
+    <div class="item-box platform">
+        <h3>Informatie</h3>
+        <p>
+            <ul>
+                <li>Geboren op: <?= $user["birthdate"] ?></li>
+                <li>Locatie: <?= $user["location"] ?></li>
+                <li>Lid sinds: <?= nicetime($user["creationdate"]) ?></li>
+            </ul>
+        </p>
     </div>
 
-        <h1 class="profile-username"><?= $user["fname"]?> <?=$user["lname"]?></h1>
+    <div class="item-box platform">
-        <h5 class="profile-username"><?=$user["username"]?></h5>
+        <h3>Vrienden</h3>
-        <p><?=$user["bio"]?></p>
-    </div>
-
-    <div class="item-box left platform">
-        <h2>Vrienden</h2>
         <p>
             <?php
                 while($friend = $profile_friends->fetch()) {
@@ -33,8 +50,8 @@
         </p>
     </div>
 
-    <div class="item-box right platform">
+    <div class="item-box platform">
-        <h2>Groepen</h2>
+        <h3>Groepen</h3>
         <p>
             <?php
                 while($group = $profile_groups->fetch()) {