People-Platform/chat.php at main · maiz-an/People-Platform · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<?php
session_start();

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "demo";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if (!isset($_SESSION['id'])) {
    header("Location: index.php");
    exit;
}

$user_id = $_SESSION['id'];
$receiver_id = intval($_GET['user_id']); // Get the ID of the user to chat with

// Mark all unread messages from the other user as read when the chat is opened
$markAsReadSql = "UPDATE messages SET is_read = 1 WHERE sender_id = ? AND receiver_id = ? AND is_read = 0";
$markAsReadStmt = $conn->prepare($markAsReadSql);
$markAsReadStmt->bind_param("ii", $receiver_id, $user_id);
$markAsReadStmt->execute();


// Fetch the name of the user to chat with
$receiver_sql = "SELECT name FROM login WHERE id = ?";
$receiver_stmt = $conn->prepare($receiver_sql);
$receiver_stmt->bind_param("i", $receiver_id);
$receiver_stmt->execute();
$receiver_result = $receiver_stmt->get_result();
$receiver = $receiver_result->fetch_assoc();
$receiver_name = $receiver['name'] ?? 'Unknown User';

// Fetch messages between the logged-in user and the selected user
$messages_sql = "SELECT * FROM messages
                 WHERE (sender_id = ? AND receiver_id = ?)
                    OR (sender_id = ? AND receiver_id = ?)
                 ORDER BY timestamp ASC";
$stmt = $conn->prepare($messages_sql);
$stmt->bind_param("iiii", $user_id, $receiver_id, $receiver_id, $user_id);
$stmt->execute();
$messages_result = $stmt->get_result();

// Fetch the name and profile picture of the user to chat with
$receiver_sql = "SELECT name, profile_pic FROM login WHERE id = ?";
$receiver_stmt = $conn->prepare($receiver_sql);
$receiver_stmt->bind_param("i", $receiver_id);
$receiver_stmt->execute();
$receiver_result = $receiver_stmt->get_result();
$receiver = $receiver_result->fetch_assoc();
$receiver_name = $receiver['name'] ?? 'Unknown User';

// Check if there is a profile picture; if not, use a default image
if (!empty($receiver['profile_pic'])) {
    $receiver_profile_pic = 'data:image/jpeg;base64,' . base64_encode($receiver['profile_pic']);
} else {
    $receiver_profile_pic = 'default.png'; // Path to your default profile picture
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="people.png">
    <title>Chat with <?php echo htmlspecialchars($receiver_name); ?>  | People: Community Sharing Platform</title>
    <link rel="stylesheet" href="chat.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

</head>
<body>
<div class="chat-container">
    <!-- Display receiver's profile picture and name -->
    <div class="chat-header">
        <img src="<?php echo htmlspecialchars($receiver_profile_pic); ?>" alt="<?php echo htmlspecialchars($receiver_name); ?>'s profile" class="profile-picture">
        <h2><?php echo htmlspecialchars($receiver_name); ?></h2>
    </div>
    <div class="message-list" id="messageList">
        <?php while ($message = $messages_result->fetch_assoc()): ?>
            <div class="message <?php echo $message['sender_id'] == $user_id ? 'sent' : 'received'; ?>">
                <?php echo htmlspecialchars($message['message']); ?>
            </div>
        <?php endwhile; ?>
    </div>
    <form id="chatForm">
        <textarea name="message" id="chatInput" class="chat-input" placeholder="Type your message here..."></textarea>
        <input type="hidden" name="receiver_id" value="<?php echo $receiver_id; ?>">
        <button type="submit" class="chat-send">Send</button>
    </form>

</div>

<script>
    document.getElementById('chatForm').addEventListener('submit', async function(event) {
    event.preventDefault(); // Prevent the form from submitting in the traditional way

    const messageInput = document.getElementById('chatInput');
    const messageText = messageInput.value.trim();
    messageInput.value = '';
    console.log('Message input cleared:', messageInput.value);


    if (messageText === '') return; // Prevent sending empty messages

    const formData = new FormData();
    formData.append('message', messageText);
    formData.append('receiver_id', <?php echo $receiver_id; ?>);

    // Send the message using fetch
    const response = await fetch('send_message.php', {
        method: 'POST',
        body: formData
    });
    const newMessage = await response.json(); // Parse the JSON response

    // Add the new message to the chat
    addMessageToChat(newMessage);

    // Clear the input field and scroll to bottom
    messageInput.value = '';
    scrollToBottom();
});

    // Helper to format timestamp into a readable date and time
    function formatDateTime(timestamp) {
            const date = new Date(timestamp);
            const now = new Date();
            const timeString = date.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', hour12: true });

            // Check if the message is from today
            if (date.toDateString() === now.toDateString()) {
                return `Today ${timeString}`;
            }

            // Check if the message is from yesterday
            const yesterday = new Date();
            yesterday.setDate(yesterday.getDate() - 1);
            if (date.toDateString() === yesterday.toDateString()) {
                return `Yesterday ${timeString}`;
            }

            // If older than yesterday, show the actual date and time if it's within a week
            const oneWeekAgo = new Date();
            oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
            if (date > oneWeekAgo) {
                const dayOfWeek = date.toLocaleDateString([], { weekday: 'long' });
                return `${dayOfWeek} ${timeString}`;
            }

            // For dates older than a week, show the full date and time
            return date.toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' }) + `, ${timeString}`;
        }

    // Function to add a single message to the chat
    function addMessageToChat(message) {
        const messageList = document.getElementById('messageList');
        const messageEl = document.createElement('div');
        messageEl.className = 'message ' + (message.sender_id == <?php echo $user_id; ?> ? 'sent' : 'received');

        // Create the message content with timestamp
        const messageContent = document.createElement('span');
        messageContent.textContent = message.message;

        const timestampEl = document.createElement('small');
        timestampEl.textContent = formatDateTime(message.timestamp);
        timestampEl.style.display = 'block'; // Ensures the timestamp is below the message
        timestampEl.style.color = '#888'; // Styling for visibility

        messageEl.appendChild(messageContent);
        messageEl.appendChild(timestampEl);
        messageList.appendChild(messageEl);
    }

    let previousMessageCount = 0; // Track the previous count of messages

// Fetch and display messages periodically
async function fetchMessages() {
    const response = await fetch(`fetch_messages.php?user_id=<?php echo $receiver_id; ?>`);
    const messages = await response.json();

    const messageList = document.getElementById('messageList');
    messageList.innerHTML = ''; // Clear current messages

    // Display each message and update the chat
    messages.forEach(addMessageToChat);

    // Check if the number of messages has increased, indicating a new message
    if (messages.length > previousMessageCount) {
        newMessageReceived = true; // Set the flag if there's a new message
    }

    previousMessageCount = messages.length; // Update the previous message count
    scrollToBottom(); // Scroll to the bottom only if new messages were received
}
    let newMessageReceived = false; // Flag to track if a new message was received

// Function to scroll to the bottom only if a new message was received
function scrollToBottom() {
    const messageList = document.getElementById('messageList');
    if (newMessageReceived) {
        messageList.scrollTop = messageList.scrollHeight;
        newMessageReceived = false; // Reset the flag after scrolling
    }
}


    // Initial fetch and periodic update every 3 seconds
    fetchMessages();
    setInterval(fetchMessages, 1000);
</script>


</body>
<div class="back">
    <a href="messages.php"><img src="SiteIcons/arrow.png" alt="back"></a>
    </div>
</html>