Changed friendship buttons. We now use AJAX, changed button style and added FA icons.

website/public/API/editFriendship.php

@@ -0,0 +1,28 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/friendship.php");
+
+if(empty($_POST["usr"]) OR empty($_POST["action"]) OR !in_array($_POST["action"], array("request", "accept", "delete"))) {
+    header('HTTP/1.1 500 Non enough arguments');
+}
+
+$friendship_status = getFriendshipStatus($_POST["usr"]);
+
+if($_POST["action"] == "request" AND $friendship_status == 0) {
+    if (!requestFriendship($_POST["usr"])) {
+        header('HTTP/1.1 500 Query (request) failed');
+    }
+} else if($_POST["action"] == "delete" AND in_array($friendship_status, array(1, 2, 3))) {
+    if (!removeFriendship($_POST["usr"])) {
+        header('HTTP/1.1 500 Query (delete) failed');
+    }
+} else if ($_POST["action"] == "accept" AND $friendship_status == 3) {
+    if (!acceptFriendship($_POST["usr"])) {
+        header('HTTP/1.1 500 Query (accept) failed');
+    }
+} else {
+    header('HTTP/1.1 500 Not the right friendship status');
+}

website/public/API/getFriendshipStatus.php

@@ -0,0 +1,18 @@
+<?php
+
+session_start();
+
+require_once ("../../queries/connect.php");
+require_once ("../../queries/friendship.php");
+
+if(empty($_POST["usr"])) {
+    header('HTTP/1.1 500 Non enough arguments');
+}
+
+$friendship_status = getFriendshipStatus($_POST["usr"]);
+
+if($friendship_status == -2) {
+    header('HTTP/1.1 500 Query failed');
+}
+
+echo $friendship_status;

website/public/profile.php

@@ -25,6 +25,13 @@ $profile_friends = selectAllFriends($userID);
 $profile_groups = selectAllUserGroups($userID);
 $posts = selectAllUserPosts($userID);
 
+
+if ($userID == $_SESSION["userID"]) {
+    $friendship_status = -1;
+} else {
+    $friendship_status = $user["friend_status"];
+}
+
 /*
  * This view adds the main layout over the screen.
  * Header, menu, footer.
@@ -37,5 +44,43 @@ include("../views/profile.php");
 /* This adds the footer. */
 include("../views/footer.php");
 ?>
+
+<script>
+
+</script>
+<script>
+    $(document).ready(function() {
+        userID = <?= $userID ?>;
+        placeFriendButtons();
+    });
+
+    function placeFriendButtons() {
+        $.post("API/getFriendshipStatus.php", { usr: userID })
+            .done(function(data) {
+                friendshipStatus = data;
+                $buttonContainer = $("div.friend-button-container");
+                $buttonContainer.children().remove();
+                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>"));
+                } 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>"));
+                }
+
+                $buttonContainer.children().click(function() {
+                    $.post("API/editFriendship.php", { usr: userID, action: this.value })
+                        .done(function() {
+                            placeFriendButtons();
+                        });
+                });
+            });
+    }
+</script>
 </body>
 </html>

website/public/styles/main.css

@@ -175,6 +175,15 @@ textarea:focus, input:focus, select:focus {
 }
 
 /* All buttons */
+button.red {
+    background-color: firebrick;
+}
+
+button.green {
+    background-color: forestgreen;
+}
+
+
 button,
 input[type="submit"],
 input[type="reset"] {

website/public/styles/profile.css

@@ -78,17 +78,16 @@ div.posts .post form textarea.newpost {
     font-size: 0.8em;
 }
 
-input.profile-button {
+button.friend-button {
     float: right;
     height: auto;
     padding: 10px;
+    margin-left: 10px;
     border-radius: 5px;
-    background-color: #4CAF50;
-    color: #FFFFFF;
     transition-duration: 250ms;
     cursor: pointer;
 }
 
-.profile-button:hover {
+button.friend-button:hover {
     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 }