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);
 }

website/queries/friendship.php

@@ -67,6 +67,16 @@ function selectAllFriendRequests() {
 }
 
 function getFriendshipStatus($userID) {
+    # -2: Query failed.
+    # -1: user1 and 2 are the same user
+    # 0 : no record found
+    # 1 : confirmed
+    # 2 : user1 sent request (you)
+    # 3 : user2 sent request (other)
+    if($_SESSION["userID"] == $userID) {
+        return -1;
+    }
+
     $stmt = $GLOBALS["db"]->prepare("
     SELECT
       CASE `status` IS NULL
@@ -93,8 +103,10 @@ function getFriendshipStatus($userID) {
 
     $stmt->bindParam(':me', $_SESSION["userID"], PDO::PARAM_INT);
     $stmt->bindParam(':other', $userID, PDO::PARAM_INT);
-    $stmt->execute();
+    if(!$stmt->execute()) {
-    return $stmt->fetch()["friend_state"];
+        return -2;
+    }
+    return intval($stmt->fetch()["friend_state"]);
 }
 
 function requestFriendship($userID) {
@@ -105,7 +117,7 @@ function requestFriendship($userID) {
 
     $stmt->bindParam(':user1', $_SESSION["userID"], PDO::PARAM_INT);
     $stmt->bindParam(':user2', $userID, PDO::PARAM_INT);
-    $stmt->execute();
+    return $stmt->execute();
 }
 
 function removeFriendship($userID) {
@@ -116,11 +128,12 @@ function removeFriendship($userID) {
           `user2ID` = :user2 OR
           `user1ID` = :user2 AND
           `user2ID` = :user1
+        LIMIT 1
     ");
 
     $stmt->bindParam(':user1', $_SESSION["userID"], PDO::PARAM_INT);
     $stmt->bindParam(':user2', $userID, PDO::PARAM_INT);
-    $stmt->execute();
+    return $stmt->execute();
 }
 
 function acceptFriendship($userID) {
@@ -135,7 +148,7 @@ function acceptFriendship($userID) {
 
     $stmt->bindParam(':user1', $userID, PDO::PARAM_INT);
     $stmt->bindParam(':user2', $_SESSION["userID"], PDO::PARAM_INT);
-    $stmt->execute();
+    return $stmt->execute();
 }
 
 function setLastVisited($friend) {

website/views/profile.php

@@ -2,21 +2,9 @@
     <div class="profile-box platform">
         <img class="left profile-picture" src="<?php echo $user["profilepicture"] ?>">
 
-        <form action="edit_friendship.php" method="post">
+        <div class="friend-button-container">
-            <input type="hidden" name="userID" value="<?= $userID ?>">
+
-        <?php
+        </div>
-        if($userID != $_SESSION["userID"] AND $user["friend_status"] == 0) {
-            echo "<input class='profile-button' type='submit' name='request' value='Stuur vriendschapsverzoek!'>";
-        } else if($user["friend_status"] == 1) {
-            echo "<input class='profile-button' type='submit' name='delete' value='Verwijder vriend!'>";
-        } else if($user["friend_status"] == 2) {
-            echo "<input class='profile-button' type='submit' name='accept' value='Accepteer vriendschapsverzoek!'>";
-            echo "<input class='profile-button' type='submit' name='delete' value='Weiger vriendschapsverzoek!'>";
-        } else if($user["friend_status"] == 3) {
-            echo "<input class='profile-button' type='submit' name='delete' value='Trek vriendschapsverzoek in!'>";
-        }
-        ?>
-        </form>
         <h1 class="profile-username"><?= $user["fname"]?> <?=$user["lname"]?></h1>
         <h5 class="profile-username"><?=$user["username"]?></h5>
         <p><?=$user["bio"]?></p>