S2OJ/web/app/controllers/user_msg.php
Pinghigh 8ccd1f642c
All checks were successful
continuous-integration/drone/push Build is passing
fix(user_msg): rounded corner (#45)
Co-authored-by: Baoshuo Ren <i@baoshuo.ren>
2023-02-28 18:28:13 +08:00

437 lines
12 KiB
PHP

<?php
Auth::check() || redirectToLogin();
function handleMsgPost() {
if (!isset($_POST['message'])) {
return 'fail';
}
if (0 > strlen($_POST['message']) || strlen($_POST['message']) > 65535) {
return 'fail';
}
$receiver = UOJRequest::user(UOJRequest::POST, 'receiver');
if (!$receiver) {
return 'fail';
}
$message = $_POST['message'];
if ($receiver['username'] === Auth::id()) {
return 'fail';
}
DB::insert([
"insert into user_msg",
"(sender, receiver, message, send_time)",
"values", DB::tuple([Auth::id(), $receiver['username'], $message, DB::now()])
]);
return "ok";
}
function getConversations() {
$username = Auth::id();
$res = DB::selectAll([
"select * from user_msg",
"where", DB::lor([
"sender" => $username,
"receiver" => $username,
]),
"order by send_time DESC"
]);
$ret = [];
foreach ($res as $msg) {
if ($msg['sender'] !== $username) {
if (isset($ret[$msg['sender']])) {
$ret[$msg['sender']][1] |= ($msg['read_time'] == null);
continue;
}
$ret[$msg['sender']] = [$msg['send_time'], ($msg['read_time'] == null), $msg['message']];
} else {
if (isset($ret[$msg['receiver']])) continue;
$ret[$msg['receiver']] = [$msg['send_time'], 0, $msg['message']];
}
}
$res = [];
foreach ($ret as $name => $con) {
$user = UOJUser::query($name);
$res[] = [
$con[0],
$con[1],
$name,
HTML::avatar_addr($user, 128),
UOJUser::getRealname($user),
UOJUser::getUserColor($user),
$con[2],
];
}
usort($res, function ($a, $b) {
return -strcmp($a[0], $b[0]);
});
return json_encode($res);
}
function getHistory() {
$username = Auth::id();
$receiver = UOJRequest::user(UOJRequest::GET, 'conversationName');
$page_num = UOJRequest::uint(UOJRequest::GET, 'pageNumber');
if (!$receiver || $receiver['username'] === $username) {
return '[]';
}
if (!$page_num) { // false, null, or zero
return '[]';
}
DB::update([
"update user_msg",
"set", ["read_time" => DB::now()],
"where", [
"sender" => $receiver['username'],
"receiver" => $username,
"read_time" => null,
]
]);
$result = DB::selectAll([
"select * from user_msg",
"where", DB::lor([
DB::land([
"sender" => $username,
"receiver" => $receiver['username']
]),
DB::land([
"sender" => $receiver['username'],
"receiver" => $username
])
]),
"order by send_time DESC", DB::limit(($page_num - 1) * 10, 11)
]);
$ret = [];
foreach ($result as $msg) {
$ret[] = [
$msg['message'],
$msg['send_time'],
$msg['read_time'],
$msg['id'],
($msg['sender'] === $username),
];
}
return json_encode($ret);
}
if (isset($_POST['user_msg'])) {
die(handleMsgPost());
} elseif (isset($_GET['getConversations'])) {
die(getConversations());
} elseif (isset($_GET['getHistory'])) {
die(getHistory());
}
?>
<?php echoUOJPageHeader('私信') ?>
<h1>私信</h1>
<style>
#conversations {
border-radius: var(--bs-border-radius) !important;
}
@media (min-width: 768px) {
.chat-container {
height: calc(100ch - 10rem);
}
#conversations {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
}
</style>
<div class="card overflow-hidden-md chat-container">
<div class="row gx-0 flex-grow-1 h-100">
<div class="col-md-3 border-end h-100">
<div class="list-group list-group-flush h-100 overflow-auto" id="conversations"></div>
</div>
<div class="col-md-9 h-100" id="history" style="display: none">
<div class="card h-100 border-0 rounded-0">
<div class="card-header">
<button id="goBack" class="btn-close position-absolute" aria-label="关闭对话"></button>
<div id="conversation-name" class="text-center"></div>
</div>
<div class="card-body overflow-auto" id="history-list-container">
<div id="history-list" style="min-height: 200px;"></div>
</div>
<div class="card-footer bg-transparent">
<ul class="pagination pagination-sm justify-content-between mt-1">
<li class="page-item">
<button class="page-link rounded" id="pageLeft">
<i class="bi bi-chevron-left"></i>
更早的消息
</button>
</li>
<li class="page-item">
<button class="page-link rounded" id="pageRight">
更新的消息
<i class="bi bi-chevron-right"></i>
</button>
</li>
</ul>
<form id="form-message" class="">
<div id="form-group-message" class="flex-grow-1">
<textarea id="input-message" class="form-control" style="resize: none;" data-no-autosize></textarea>
<span id="help-message" class="help-block"></span>
</div>
<div class="text-end mt-2">
<span class="text-muted small">按 Ctrl+Enter 键发送</span>
<button type="submit" id="message-submit" class="btn btn-primary flex-shrink-0 ms-3">
发送
<i class="bi bi-send"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var REFRESH_INTERVAL = 30 * 1000;
$(document).ready(function() {
$.ajaxSetup({
async: false
});
refreshConversations();
setInterval(refreshConversations, REFRESH_INTERVAL);
<?php if (isset($_GET['enter'])) : ?>
enterConversation(<?= json_encode($_GET['enter']) ?>);
<?php endif ?>
});
</script>
<script type="text/javascript">
<?php $enter_user = UOJRequest::user(UOJRequest::GET, 'enter'); ?>
var conversations = {};
var intervalId = 0;
var user_avatar = '<?= HTML::avatar_addr(Auth::user(), 80) ?>';
var enter_user = ['<?= $enter_user['username'] ?>', '<?= UOJUser::getRealname($enter_user) ?>', '<?= UOJUser::getUserColor($enter_user) ?>'];
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2)
month = '0' + month;
if (day.length < 2)
day = '0' + day;
return [year, month, day].join('-');
}
function formatTime(date) {
var d = new Date(date),
hour = '' + d.getHours(),
minute = '' + d.getMinutes();
if (hour.length < 2)
hour = '0' + hour;
if (minute.length < 2)
minute = '0' + minute;
return [hour, minute].join(':');
}
function addButton(conversationName, send_time, type, avatar_addr, realname, color, last_message) {
var now = new Date();
var time = new Date(send_time);
var timeStr = formatDate(send_time);
if (formatDate(now) === timeStr) {
timeStr = formatTime(send_time);
}
$("#conversations").append(
'<div class="list-group-item list-group-item-action p-2 d-flex ' + (type ? 'list-group-item-warning' : '') + '" style="cursor: pointer; user-select: none;" ' +
'onclick="enterConversation(\'' + conversationName + '\')">' +
'<div class="flex-shrink-0 me-3">' +
'<img class="rounded uoj-user-avatar" width="56" height="56" src="' + avatar_addr + '" />' +
'</div>' +
'<div class="flex-grow-1 overflow-hidden">' +
'<div class="d-flex justify-content-between">' +
getUserSpan(conversationName, '', color) +
'<span class="float-end text-muted small flex-shrink-0 lh-lg">' +
timeStr +
'</span>' +
'</div>' +
'<div class="text-muted text-nowrap text-truncate">' +
htmlspecialchars(last_message) +
'</div>' +
'</div>' +
'</div>'
);
}
function addBubble(content, send_time, read_time, msgId, conversation, page, type) {
$("#history-list").append(
'<div class="d-flex align-items-end mt-3" style="' + (type ? 'margin-left:20%;' : 'margin-right:20%;') + '">' +
(type ? '' : '<img class="flex-shrink-0 me-2 rounded" width="32" height="32" src="' + conversations[conversation][1] + '" style="user-select: none;" />') +
'<div class="card flex-grow-1">' +
'<div class="card-body px-3 py-2" style="white-space:pre-wrap">' +
htmlspecialchars(content) +
'</div>' +
'<div class="card-footer text-muted px-3 py-1">' +
'<span class="small">' +
'<i class="bi bi-clock"></i> ' + send_time +
'</span>' +
(read_time == null ?
'<span class="float-end" data-bs-toggle="tooltip" data-bs-title="未读"><i class="bi bi-check2"></i></span>' :
'<span class="float-end" data-bs-toggle="tooltip" data-bs-title="' + read_time + '"><i class="bi bi-check2-all"></i></span>') +
'</div>' +
'</div>' +
(type ? '<img class="flex-shrink-0 ms-2 rounded uoj-user-avatar" width="32" height="32" src="' + user_avatar + '" style="user-select: none;" />' : '') +
'</div>'
);
}
function submitMessagePost(conversationName) {
if ($('#input-message').val().length == 0 || $('#input-message').val().length >= 65536) {
$('#help-message').text('私信长度必须在1~65535之间。');
$('#form-group-message').addClass('has-error');
return;
}
$('#help-message').text('');
$('#form-group-message').removeClass('has-error');
$.post('/user_msg', {
user_msg: 1,
receiver: conversationName,
message: $('#input-message').val()
}, function(msg) {
$('#input-message').val("");
});
}
function refreshHistory(conversation, page) {
$("#history-list").empty();
var ret = false;
$('#conversation-name').html(getUserLink(conversation, conversation == enter_user[0] ? enter_user[1] : conversations[conversation][2], conversation == enter_user[0] ? enter_user[2] : conversations[conversation][3]));
$('#pageShow').text("第" + page.toString() + "页");
$.get('/user_msg', {
getHistory: '',
conversationName: conversation,
pageNumber: page
}, function(msg) {
var result = JSON.parse(msg);
var cnt = 0,
flag = 0,
F = 0;
if (result.length == 11) flag = 1, F = 1;
result.reverse();
for (msg in result) {
if (flag) {
flag = 0;
continue;
}
var message = result[msg];
addBubble(message[0], message[1], message[2], message[3], conversation, page, message[4]);
if ((++cnt) + 1 == result.length && F) {
break;
}
}
if (result.length == 11) {
ret = true;
}
bootstrap.Tooltip.jQueryInterface.call($('#history-list [data-bs-toggle="tooltip"]'), {
container: $('#history-list'),
});
});
return ret;
}
function refreshConversations() {
$("#conversations").empty();
$.get('/user_msg', {
getConversations: 1
}, function(msg) {
var result = JSON.parse(msg);
for (i in result) {
var conversation = result[i];
if (conversation[1] == 1) {
addButton(conversation[2], conversation[0], conversation[1], conversation[3], conversation[4], conversation[5], conversation[6]);
}
conversations[conversation[2]] = [conversation[0], conversation[3], conversation[4], conversation[5]];
}
for (i in result) {
var conversation = result[i];
if (conversation[1] == 0) {
addButton(conversation[2], conversation[0], conversation[1], conversation[3], conversation[4], conversation[5], conversation[6]);
}
}
});
}
function enterConversation(conversationName) {
var slideTime = 300;
var page = 1;
var changeAble = refreshHistory(conversationName, page);
clearInterval(intervalId);
intervalId = setInterval(function() {
changeAble = refreshHistory(conversationName, page);
}, REFRESH_INTERVAL);
$('#history').show();
$('#conversations').addClass('d-none d-md-block')
$("#history-list-container").scrollTop($("#history-list").height());
$('#input-message').unbind('keydown').keydown(function(e) {
if (e.keyCode == 13 && e.ctrlKey) {
$('#message-submit').click();
}
});
$('#form-message').unbind("submit").submit(function() {
submitMessagePost(conversationName);
page = 1;
changeAble = refreshHistory(conversationName, page);
refreshConversations();
$("#history-list-container").scrollTop($("#history-list").height());
return false;
});
$('#goBack').unbind("click").click(function() {
clearInterval(intervalId);
refreshConversations();
$("#history").hide();
$("#conversations").removeClass('d-none d-md-block');
return;
});
$('#pageLeft').unbind("click").click(function() {
if (changeAble) {
page++;
clearInterval(intervalId);
}
changeAble = refreshHistory(conversationName, page);
return false;
});
$('#pageRight').unbind("click").click(function() {
if (page > 1) {
page--;
clearInterval(intervalId);
}
changeAble = refreshHistory(conversationName, page);
return false;
});
}
</script>
<?php echoUOJPageFooter() ?>