Skip to content

Commit 604c4cc

Browse files
Maxhu787Maxhu787
committed
update
1 parent 0fb0d28 commit 604c4cc

File tree

5 files changed

+659
-19
lines changed

5 files changed

+659
-19
lines changed

‎chat.php‎

Lines changed: 236 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<?php
22
require_once "pdo.php";
3-
require_once "head.php";
4-
date_default_timezone_set('Asia/Taipei');
3+
date_default_timezone_set('UTC');
54

65
if (!isset($_SESSION["email"])) {
6+
include 'head.php';
77
echo "<p align='center'>PLEASE LOGIN</p>";
88
echo "<br />";
99
echo "<p align='center'>Redirecting in 3 seconds</p>";
@@ -15,20 +15,25 @@
1515
"SELECT * FROM chatlog"
1616
);
1717
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
18-
/*
18+
19+
20+
if (isset($_POST['logout'])) {
21+
header("Location: logout.php");
22+
return;
23+
}
24+
1925
if (isset($_POST['message'])) {
2026
$stmta = $pdo->prepare(
2127
'INSERT INTO chatlog
22-
(message, message_date, account, user_id)
23-
VALUES (:msg, :msgd, :acc, :usrid)'
28+
(message, message_date, account)
29+
VALUES (:msg, :msgd, :acc)'
2430
);
2531

2632
$stmta->execute(
2733
array(
2834
':msg' => $_POST['message'],
2935
':msgd' => date(DATE_RFC2822),
30-
':acc' => $_SESSION['name'],
31-
':usrid' => $_SESSION['user_id']
36+
':acc' => $_SESSION['name']
3237
)
3338
);
3439
$stmt = $pdo->query(
@@ -50,22 +55,235 @@
5055

5156
break;
5257
}
53-
}*/
58+
}
5459
?>
5560
<html>
56-
57-
<head>
58-
<link rel="stylesheet" href="./css/chat.css">
59-
<title>g4o2 chat</title>
61+
<title>g4o2 chat</title>
62+
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
63+
<link rel="stylesheet" href="./css/chat.css?v=<?php echo time(); ?>">
64+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
6065
</head>
6166

6267
<body>
68+
<section id="page-header">
69+
<h1 id="index-page-link"><a href="./index.php">g4o2&nbsp;chat</a></h1>
70+
<section style="overflow: auto;" id="guide">
71+
<p>Press <kbd>Enter</kbd> to submit message</p>
72+
<p>Press <kbd>/</kbd> to select <kbd>Esc</kbd> to deselect</p>
73+
<p>Users can now upload profile pictures via the edit account button on the <a href="./index.php">index</a> page</p>
74+
</section>
75+
</section>
76+
<section>
77+
<div class="progress" id="chatcontent">
78+
<!--<img class="spinner" src="spinner.gif" alt="Loading..." />-->
79+
<?php
80+
require_once "pdo.php";
81+
function loadChat($pdo)
82+
{
83+
$stmt = $pdo->query(
84+
"SELECT * FROM chatlog"
85+
);
86+
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
87+
if (count($rows) > 0) {
88+
echo "<p style='text-align:center;color: #ffa500;'>This is the start of all messages</p>";
89+
foreach ($rows as $row) {
90+
$pfpsrc = './assets/images/default-user-round.png';
91+
$user = "<a href='./profile.php?user={$row['account']}' class='account rainbow_text_animated'>" . $row['account'] . "</a>";
92+
93+
$stmta = $pdo->prepare("SELECT pfp FROM account WHERE name=?");
94+
$stmta->execute([$row['account']]);
95+
$pfptemp = $stmta->fetchAll(PDO::FETCH_ASSOC);
96+
97+
foreach ($pfptemp as $test) {
98+
if ($test['pfp'] != null) {
99+
$pfpsrc = $test['pfp'];
100+
}
101+
}
102+
$pfp = "<a class='pfp-link' href='./profile.php?user={$row['account']}'><img class='profile-image' src='$pfpsrc'></a>";
103+
104+
105+
$message = htmlentities($row["message"]);
106+
if (isset($_COOKIE['timezone'])) {
107+
108+
//might break the chat
109+
$timezone_offset_minutes = $_COOKIE['timezone'];
110+
$time = new DateTime($row["message_date"]);
111+
$minutes_to_add = ($timezone_offset_minutes);
112+
$time->add(new DateInterval('PT' . $minutes_to_add . 'M'));
113+
$stamp = $time->format('D, d M Y H:i:s');
114+
// here ^
115+
116+
} else {
117+
$stamp = $row["message_date"];
118+
}
119+
$msg_parent_id = $row['message_id'] . "parent";
120+
$info = "<p class='stats'>{$user} ({$stamp})</p>";
121+
if ($row['account'] == $_SESSION['name']) {
122+
$editBtn = "<button class='btn chat-btn' onclick='handleEdit({$row['message_id']})'>Edit</button>";
123+
} else {
124+
$editBtn = "";
125+
}
126+
$msg = "<p class='msg' id='{$msg_parent_id}'><span id='{$row['message_id']}'>{$message}</span> " . $editBtn . "</p>";
127+
echo $pfp;
128+
echo "<div style='margin-left: 10px;margin-top: 18px;'>{$info}{$msg}</div>";
129+
}
130+
}
131+
};
132+
loadChat($pdo);
133+
?>
134+
</div>
135+
<form id='form' autocomplete="off" method="post" action="chat.php">
136+
<div>
137+
<!--<input pattern=".{1,}" required title="3 characters minimum" id='message-input' type="text" name="message" size="60" placeholder="Enter message and submit" />-->
138+
<input id='message-input' type="text" name="message" size="60" style="width: 55vw;" placeholder="Enter message and submit" />
139+
<input class='button not-allowed' id="submit" type="submit" value="Chat" />
140+
<input class='button' id='logout' type="submit" name="logout" value="Logout" />
141+
</div>
142+
</form>
143+
</section>
144+
</script>
145+
<script type="text/javascript">
146+
function handleEdit(id) {
147+
let parent_id = id + "parent";
148+
let input_id = id + "input";
149+
let message = document.getElementById(id).innerText;
150+
document.getElementById(parent_id).innerHTML = `<form method='post'><input class='edit-input' id='${input_id}' type='text' style='width:90%' name=${id}> <input class='btn chat-btn' type='submit' value='Save'></form>`;
151+
document.getElementById(input_id).value = message;
152+
}
153+
154+
let input = document.getElementById('message-input');
155+
input.focus();
156+
input.select();
157+
let pageBody = document.getElementsByTagName('body')[0];
158+
159+
$("#submit").prop("disabled", true);
160+
$(input).keyup(function() {
161+
if (!$(input).val().replace(/\s/g, '').length) {
162+
$("#submit").prop("disabled", true);
163+
$('#submit').addClass("not-allowed")
164+
} else {
165+
$("#submit").prop("disabled", false);
166+
$('#submit').removeClass("not-allowed");
167+
}
168+
});
169+
window.addEventListener("keydown", event => {
170+
if ((event.keyCode == 191)) {
171+
if (input === document.activeElement) {
172+
return;
173+
} else {
174+
input.focus();
175+
input.select();
176+
event.preventDefault();
177+
}
178+
}
179+
if ((event.keyCode == 27)) {
180+
if (input === document.activeElement) {
181+
document.activeElement.blur();
182+
window.focus();
183+
event.preventDefault();
184+
}
185+
}
186+
});
187+
$(document).ready(function() {
188+
setTimeout(
189+
function() {
190+
$("#chatcontent").removeClass("progress");
191+
}, 1000);
192+
console.log('%c Why are you here in the console?', 'background: #000; color: #ffa500');
193+
console.log('%c Dont try anything sus', 'background: #000; color: #ffa500');
194+
console.log("%c \n .-> .-> \n ,---(`-') .---.(`-')----. .----. \n' .-(OO ) / . |( OO).-. '\\_,-. | \n| | .-, \\ / /| |( _) | | | .' .' \n| | '.(_// '-' ||\\| |)| | .' /_ \n| '-' | `---| |' ' '-' '| | \n `-----' `--' `-----' `------' ", 'background: #000; color: #ffa500')
195+
196+
})
197+
198+
function chatScroll() {
199+
let chat = document.getElementById('chatcontent')
200+
chat.scrollTop = chat.scrollHeight;
201+
}
202+
chatScroll()
203+
204+
if (window.history.replaceState) {
205+
window.history.replaceState(null, null, window.location.href);
206+
}
207+
208+
var timezone_offset_minutes = new Date().getTimezoneOffset();
209+
timezone_offset_minutes = timezone_offset_minutes == 0 ? 0 : -timezone_offset_minutes;
210+
211+
document.cookie = "timezone=" + timezone_offset_minutes;
212+
213+
/*let inverval = window.setInterval(function() {
214+
$.ajax({
215+
url: "messages.php",
216+
success: function(data) {
217+
document.getElementById("chatcontent").innerHTML = data
218+
}
219+
});
220+
let chat = document.getElementById("chatcontent")
221+
if (chat.scrollTop >= (chat.scrollHeight - chat.offsetHeight) - 100) {
222+
chatScroll()
223+
}
224+
}, 1000)*/
225+
226+
let inverval = window.setInterval(function() {
227+
$.ajax({
228+
url: "msglength.php",
229+
success: function(data) {
230+
let chat = document.getElementById("chatcontent");
231+
let chatLength = (chat.childElementCount - 1) / 2;
232+
233+
if (data != chatLength) {
234+
$.ajax({
235+
url: "messages.php",
236+
success: function(data) {
237+
document.getElementById("chatcontent").innerHTML = data;
238+
let chat = document.getElementById("chatcontent")
239+
if (chat.scrollTop >= (chat.scrollHeight - chat.offsetHeight) - 100) {
240+
chatScroll()
241+
}
242+
console.log('chat updated')
243+
}
244+
});
245+
}
246+
}
247+
});
248+
}, 1000)
249+
</script>
250+
251+
252+
63253
<?php
64-
include_once "navbar.php";
65-
foreach ($rows as $row) {
66-
// echo $row['message_id'].'<br/>';
67-
echo $row['message_id'].'';
254+
if (isset($_SESSION['email'])) {
255+
$pfpsrc = './assets/images/default-user-round.png';
256+
257+
$stmta = $pdo->prepare("SELECT * FROM account WHERE user_id=?");
258+
$stmta->execute([$_SESSION['user_id']]);
259+
$pfptemp = $stmta->fetchAll(PDO::FETCH_ASSOC);
260+
261+
foreach ($pfptemp as $test) {
262+
if ($test['pfp'] != null) {
263+
$pfpsrc = $test['pfp'];
264+
}
265+
$_SESSION['name'] = $test['name'];
266+
$_SESSION['email'] = $test['email'];
267+
}
268+
$pfp = "<a class='pfp-link' href='./profile.php?user={$test['name']}'><img class='profile-image' style='border-radius: 100px;height: 60px;width:60px;'' src='$pfpsrc'></a>";
269+
$main = "<p style='margin-top: 20px;font-size: 20px;font-family: monospace;'>{$_SESSION['name']}</p><p style='font-family: monospace;'>{$_SESSION['email']}</p>";
270+
$actions = '<a href="edit-account.php">Edit Account</a> | <a href="logout.php">Logout</a>';
271+
//echo "<div style='border-radius: 12px;' id='profile'><button id='close-btn' onclick='closeProfile()' style='border:none;position:absolute;top:0;left:0;font-size: 18px;padding:5px 12px 5px 12px;'>&times;</button>{$pfp}{$main}{$actions}</div>";
272+
//echo "<button id='close-btn-two' onclick='openProfile()' style='border:none;position:absolute;top:10px;right:10px;font-size: 18px;padding:5px 12px 5px 12px;opacity: 0;'>&#9776;</button>";
68273
}
69274
?>
70-
</body>
71-
</html>
275+
<script>
276+
/*
277+
function closeProfile() {
278+
document.getElementById("profile").style.opacity = '0';
279+
document.getElementById("close-btn").style.opacity = '0';
280+
document.getElementById("close-btn-two").style.opacity = '1';
281+
}
282+
283+
function openProfile() {
284+
document.getElementById("profile").style.opacity = '1';
285+
document.getElementById("close-btn").style.opacity = '1';
286+
document.getElementById("close-btn-two").style.opacity = '0';
287+
}*/
288+
</script>
289+
</body>

0 commit comments

Comments
 (0)