Hendrik post #126
@@ -3,6 +3,6 @@
|
||||
session_start();
|
||||
|
||||
require_once ("../../queries/connect.php");
|
||||
require_once ("../../queries/friendship.php");
|
||||
require_once ("../../queries/private_message.php");
|
||||
|
||||
echo selectAllUnreadChat();
|
||||
@@ -5,9 +5,11 @@ session_start();
|
||||
require_once("../../queries/connect.php");
|
||||
require_once("../../queries/private_message.php");
|
||||
require_once("../../queries/checkInput.php");
|
||||
require_once("../../queries/friendship.php");
|
||||
|
||||
if (isset($_POST["lastID"]) && $_POST["lastID"] != "") {
|
||||
echo getNewChatMessages(test_input($_POST["lastID"]), test_input($_POST["destination"]));
|
||||
} else {
|
||||
echo getOldChatMessages(test_input($_POST["destination"]));
|
||||
setLastVisited(test_input($_POST["destination"]));
|
||||
}
|
||||
@@ -53,8 +53,8 @@ function switchUser(userID) {
|
||||
$(".destinationID").val(userID);
|
||||
$("#chat-history").html("");
|
||||
$("#lastID").val("");
|
||||
$(".chat-left .friend-item").removeClass("active-friend-chat");
|
||||
$(".chat-left #friend-item-" + userID).addClass("active-friend-chat");
|
||||
$("#chat-recent-panel .friend-item").removeClass("active-friend-chat");
|
||||
$("#chat-left #friend-item-" + userID).addClass("active-friend-chat");
|
||||
}
|
||||
|
||||
function sayEmpty() {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
function showNotifications(notifications, id) {
|
||||
$("#" + id).html("");
|
||||
function showFriendNotifications(notifications) {
|
||||
$("#friendrequestslist").html("");
|
||||
for (i in notifications) {
|
||||
$("#" + id).append(" \
|
||||
$("#friendrequestslist").append(" \
|
||||
<li class='friend-item $extraItem'> \
|
||||
<form action='profile.php' method='get'> \
|
||||
<button type='submit' \
|
||||
@@ -18,19 +18,42 @@ function showNotifications(notifications, id) {
|
||||
}
|
||||
}
|
||||
|
||||
function showChatNotifications(notifications) {
|
||||
$("#unreadChatlist").html("");
|
||||
for (i in notifications) {
|
||||
$("#unreadChatlist").append(" \
|
||||
<li class='friend-item $extraItem'> \
|
||||
<form action='chat.php' method='get'> \
|
||||
<button type='submit' \
|
||||
name='username' \
|
||||
value='"+ notifications[i].userID +"'> \
|
||||
<div class='friend'> \
|
||||
<img alt='PF' class='profile-picture' src='"+ notifications[i].profilepicture +"'/> \
|
||||
<div class='friend-name'> \
|
||||
"+ notifications[i].name +"<br/> \
|
||||
<span style='color: #666'>"+ notifications[i].content +"</span> \
|
||||
</div> \
|
||||
</div> \
|
||||
</button> \
|
||||
</form> \
|
||||
</li> \
|
||||
");
|
||||
}
|
||||
}
|
||||
|
||||
function loadNotifications() {
|
||||
$.post(
|
||||
"API/loadFriendRequestNotifications.php"
|
||||
).done(function(data) {
|
||||
if (data && data != "[]") {
|
||||
showNotifications(JSON.parse(data), "friendrequestslist");
|
||||
showFriendNotifications(JSON.parse(data));
|
||||
}
|
||||
});
|
||||
$.post(
|
||||
"API/loadChatNotifications.php"
|
||||
).done(function(data) {
|
||||
if (data && data != "[]") {
|
||||
showNotifications(JSON.parse(data), "unreadChatlist");
|
||||
showChatNotifications(JSON.parse(data));
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -1,34 +1,38 @@
|
||||
/* Overall chat-screen */
|
||||
.chat {
|
||||
position: fixed;
|
||||
|
||||
top: 80px;
|
||||
left: 256px;
|
||||
padding: 20px 0;
|
||||
width: calc(100% - 256px);
|
||||
height: calc(100% - 120px);
|
||||
display: inline-flex;
|
||||
|
||||
padding: 20px 0;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.chat-left {
|
||||
#chat-recent-panel {
|
||||
width: 256px;
|
||||
height: calc(100% - 100px);
|
||||
margin: 0 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.chat-right {
|
||||
width: calc(100% - 256px - 40px);
|
||||
height: calc(100% - 80px);
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Chat history. */
|
||||
.chat-history {
|
||||
#chat-history {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
|
||||
width: calc(100% - 256px - 75px);
|
||||
height: calc(100% - 80px);
|
||||
|
||||
padding: 10px;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
@@ -36,7 +40,13 @@
|
||||
.chat-message {
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
padding-top: 10px;
|
||||
padding: 10px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.chat-message::after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@@ -63,7 +73,7 @@
|
||||
/* Chat reply field */
|
||||
|
||||
.chat-field {
|
||||
width: 100%;
|
||||
width: calc(100% - 10px);
|
||||
display: table;
|
||||
}
|
||||
|
||||
|
||||
@@ -242,3 +242,23 @@ div[data-title]:hover:after {
|
||||
line-height: normal;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.friend {
|
||||
|
||||
}
|
||||
|
||||
|
||||
.friend-item, .group-item {
|
||||
cursor: pointer;
|
||||
transition-duration: 250ms;
|
||||
}
|
||||
|
||||
.friend-item:hover, .group-item:hover {
|
||||
background: #FBC02D;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.friend-name {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -34,16 +34,6 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.friend-item, .group-item {
|
||||
cursor: pointer;
|
||||
transition-duration: 250ms;
|
||||
}
|
||||
|
||||
.friend-item:hover, .group-item:hover {
|
||||
background: #FBC02D;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.menu button {
|
||||
background: none;
|
||||
color: inherit;
|
||||
|
||||
@@ -5,6 +5,7 @@ function selectAllFriends($userID) {
|
||||
SELECT
|
||||
`userID`,
|
||||
`username`,
|
||||
LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 20) as `name`,
|
||||
IFNULL(
|
||||
`profilepicture`,
|
||||
'../img/avatar-standard.png'
|
||||
@@ -36,6 +37,7 @@ function selectAllFriendRequests() {
|
||||
SELECT
|
||||
`userID`,
|
||||
`username`,
|
||||
LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 20) as `name`,
|
||||
IFNULL(
|
||||
`profilepicture`,
|
||||
'../img/avatar-standard.png'
|
||||
@@ -61,3 +63,34 @@ function selectAllFriendRequests() {
|
||||
|
||||
return json_encode($stmt->fetchAll());
|
||||
}
|
||||
|
||||
|
||||
function setLastVisited($friend) {
|
||||
$stmt = $GLOBALS["db"]->prepare("
|
||||
UPDATE
|
||||
`friendship`
|
||||
SET `friendship`.chatLastVisted1=(
|
||||
CASE `user1ID` = :sessionUser
|
||||
WHEN TRUE THEN NOW()
|
||||
WHEN FALSE THEN `chatLastVisted1`
|
||||
END
|
||||
),
|
||||
`friendship`.`chatLastVisted2`=(
|
||||
CASE `user2ID` = :sessionUser
|
||||
WHEN TRUE THEN NOW()
|
||||
WHEN FALSE THEN `chatLastVisted2`
|
||||
END
|
||||
)
|
||||
WHERE
|
||||
`user1ID` = :sessionUser AND
|
||||
`user2ID` = :friend OR
|
||||
`user2ID` = :sessionUser AND
|
||||
`user1ID` = :friend;
|
||||
");
|
||||
|
||||
$stmt->bindParam(':sessionUser', $_SESSION["userID"], PDO::PARAM_INT);
|
||||
$stmt->bindParam(':friend', $friend, PDO::PARAM_INT);
|
||||
$stmt->execute();
|
||||
|
||||
return $stmt;
|
||||
}
|
||||
@@ -74,3 +74,38 @@ function getNewChatMessages($lastID, $destination) {
|
||||
|
||||
return json_encode($stmt->fetchAll());
|
||||
}
|
||||
|
||||
|
||||
function selectAllUnreadChat() {
|
||||
$stmt = $GLOBALS["db"]->prepare("
|
||||
SELECT
|
||||
LEFT(CONCAT(`user`.`fname`, ' ', `user`.`lname`), 20) as `name`,
|
||||
IFNULL(
|
||||
`profilepicture`,
|
||||
'../img/notbad.jpg'
|
||||
) AS profilepicture,
|
||||
LEFT(`private_message`.`content`, 20) as `content`
|
||||
FROM
|
||||
`private_message`,
|
||||
`friendship`,
|
||||
`user`
|
||||
WHERE
|
||||
(`friendship`.user2ID = `private_message`.`origin` AND
|
||||
`friendship`.user1ID = `private_message`.`destination` AND
|
||||
`friendship`.chatLastVisted1 < `private_message`.`creationdate` OR
|
||||
`friendship`.user1ID = `private_message`.`origin` AND
|
||||
`friendship`.user2ID = `private_message`.`destination` AND
|
||||
`friendship`.chatLastVisted2 < `private_message`.`creationdate`) AND
|
||||
`private_message`.`origin` = `user`.`userID` AND
|
||||
`private_message`.`destination` = :userID AND
|
||||
`user`.`role` != 'banned'
|
||||
|
||||
GROUP BY `user`.`userID`
|
||||
");
|
||||
|
||||
$stmt->bindParam(':userID', $_SESSION["userID"]);
|
||||
|
||||
$stmt->execute();
|
||||
|
||||
return json_encode($stmt->fetchAll());
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="content">
|
||||
<div class="chat">
|
||||
<nav class="nav-list chat-left left platform chat-recent">
|
||||
<nav class="nav-list platform" id="chat-recent-panel">
|
||||
<h5>Chats</h5>
|
||||
<ul>
|
||||
<?php
|
||||
@@ -28,7 +28,10 @@
|
||||
<li class='friend-item' id='friend-item-$userID' onclick='switchUser(\"$userID\")'>
|
||||
<div class='friend'>
|
||||
<img alt='PF' class='profile-picture' src='$pf'/>
|
||||
$username
|
||||
<div class='friend-name'>
|
||||
$name<br/>
|
||||
<span style='color: #666'>$username</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
";
|
||||
@@ -36,9 +39,9 @@
|
||||
?>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="chat-right">
|
||||
<div id="chat-history" class="chat-history platform">
|
||||
</div>
|
||||
<div id="chat-history" class="chat-history platform">
|
||||
</div>
|
||||
<div>
|
||||
<form id="lastIDForm">
|
||||
<input type="hidden"
|
||||
id="lastID"
|
||||
|
||||
@@ -35,6 +35,7 @@
|
||||
|
||||
foreach ($friends as $i => $friend) {
|
||||
$username = $friend["username"];
|
||||
$name = $friend["name"];
|
||||
$extraItem = "";
|
||||
$pf = $friend["profilepicture"];
|
||||
|
||||
@@ -49,7 +50,10 @@
|
||||
value='$username'>
|
||||
<div class='friend'>
|
||||
<img alt='PF' class='profile-picture' src='$pf'/>
|
||||
$username
|
||||
<div class='friend-name'>
|
||||
$name<br/>
|
||||
<span style='color: #666'>$username</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -5,12 +5,20 @@
|
||||
<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="notifocationCenter">
|
||||
<section>
|
||||
<h4>
|
||||
Vriendchapsverzoeken
|
||||
</h4>
|
||||
<ul class="nav-list" id="friendrequestslist">
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4>
|
||||
Nieuwe berichten
|
||||
</h4>
|
||||
<ul class="nav-list" id="unreadChatlist">
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
</nav>
|
||||
Reference in New Issue
Block a user