Merge branch 'lars' into 'master'

Lars See merge request !152
2017-01-30 15:41:32 +01:00
parent bb56679885 b0a8ceafc3
commit 6831994ede
14 changed files with 303 additions and 117 deletions
--- a/website/public/js/chat.js
+++ b/website/public/js/chat.js
@@ -1,25 +1,31 @@
 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() {
-    $.post(
-        "API/loadMessages.php",
-        $("#lastIDForm").serialize()
-    ).done(function(data) {
-        if (data && data != "[]") {
-            messages = JSON.parse(data);
-            addMessages(messages);
-            $("#lastID").val(messages[messages.length - 1].messageID);
-            $("#chat-history").scrollTop($("#chat-history")[0].scrollHeight);
-        }
-    });
-
-    setTimeout(loadMessages, 1000);
+    if (!gettingMessages) {
+        gettingMessages = true;
+        $.post(
+            "API/loadMessages.php",
+            $("#lastIDForm").serialize()
+        ).done(function (data) {
+            if (data && data != "[]") {
+                messages = JSON.parse(data);
+                addMessages(messages);
+                $("#lastID").val(messages[messages.length - 1].messageID);
+            }
+            gettingMessages = false;
+        });
+    } else {
+        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('\
-                <div class="day-message"> \
-                    <div class="day-message-content">\
-                    ' + days[thisDate.getDay()] + " " + thisDate.getDate() + " " + months[thisDate.getMonth()] + " " + thisDate.getFullYear() + '\
-                    </div> \
-                </div>\
-            ');
+            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>';
+            }
+
+            messagesText += '<div class="chat-message"><div class="' + type + '">';
        }
-        $("#chat-history").append('\
-            <div class="chat-message"> \
-                <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");
 }
--- a/website/public/js/friendButtons.js
+++ b/website/public/js/friendButtons.js
@@ -1,26 +1,73 @@
 function placeFriendButtons() {
    $.post("API/getFriendshipStatus.php", { usr: userID })
        .done(function(data) {
-            friendshipStatus = data;
-            $buttonContainer = $("div.friend-button-container");
-            $buttonContainer.children().remove();
-            $("#start-profile-chat-form").hide();
-            if (friendshipStatus == -1) {
-                return;
-            } else if(friendshipStatus == 0) {
-                $buttonContainer.append($("<button class=\"green friend-button\" value=\"request\"><i class=\"fa fa-handshake-o\"></i> Bevriend</button>"));
-            } else if(friendshipStatus == 1) {
-                $buttonContainer.append($("<button class=\"red friend-button\" value=\"delete\"><i class=\"fa fa-times\"></i> Verwijder</button>"));
-                $("#start-profile-chat-form").show();
-            } else if(friendshipStatus == 2) {
-                $buttonContainer.append($("<button class=\"red friend-button\" value=\"delete\"><i class=\"fa fa-times\"></i> Trek verzoek in</button>"));
-            } else if(friendshipStatus == 3) {
-                $buttonContainer.append($("<button class=\"red friend-button\" value=\"delete\"><i class=\"fa fa-times\"></i> Weiger</button>"));
-                $buttonContainer.append($("<button class=\"green friend-button\" value=\"accept\"><i class=\"fa fa-check\"></i> Accepteer</button>"));
-            }
+            var friendshipStatus = data;
+            var $buttonContainer = $("div.friend-button-container");
+            $("#start-profile-chat").hide();
+                $buttonContainer.html("");
+                var value1 = "";
+                var class1 = "empty-button";
+                var icon1 = "";
+                var text1 = "";
+
+                var value2 = "";
+                var class2 = "empty-button";
+                var icon2 = "";
+                var text2 = "";
+
+                switch (friendshipStatus) {
+                    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() {
-                editFriendship(userID, this.value);
+                if (isNaN(this.value))
+                    editFriendship(userID, this.value);
+                else if (this.value != "")
+                    window.location.href = "chat.php?username=" + this.value;
            });
        });
 }
--- a/website/public/js/main.js
+++ b/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 images and gifs.
-    var regex = /(https:\/\/.[^ ]*\.(?:png|jpg|jpeg|gif))/ig;
-    text = text.replace(regex, function(img) {
-        return "<img src='" + img + "' />";
+    // Add links, images, gifs and (youtube) video's.
+    var regex = /(https?:\/\/.[^ ]*)/ig;
+    text = text.replace(regex, function(link) {
+        // Add images
+        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;
 }