refactor(user_msg): bootstrap5 (#26)

2024-12-22 14:21:52 +00:00 · 2023-01-16 16:59:19 +08:00 · 2023-01-16 16:59:19 +08:00 · 0d3bbf82c3
commit 0d3bbf82c3
parent dc3515353e d6ac737a11
2 changed files with 235 additions and 123 deletions
--- a/web/app/controllers/user_msg.php
+++ b/web/app/controllers/user_msg.php
@ -1,100 +1,130 @@
 <?php
+requireLib('bootstrap5');
+
 if (!Auth::check()) {
 	redirectToLogin();
 }

 function handleMsgPost() {
-	if (!isset($_POST['receiver'])) {
-		return 'fail';
-	}
 	if (!isset($_POST['message'])) {
 		return 'fail';
 	}
 	if (0 > strlen($_POST['message']) || strlen($_POST['message']) > 65535) {
 		return 'fail';
 	}
-	$receiver = $_POST['receiver'];
-	$esc_message = DB::escape($_POST['message']);
-	$sender = Auth::id();
+	$receiver = UOJRequest::user(UOJRequest::POST, 'receiver');
+	if (!$receiver) {
+		return 'fail';
+	}
+	$message = $_POST['message'];

-	if (!validateUsername($receiver) || !UOJUser::query($receiver)) {
+	if ($receiver['username'] === Auth::id()) {
 		return 'fail';
 	}

-	DB::query("insert into user_msg (sender, receiver, message, send_time) values ('$sender', '$receiver', '$esc_message', now())");
+	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();
-	$result = DB::query("select * from user_msg where sender = '$username' or receiver = '$username' order by send_time DESC");
-	$ret = array();
-	while ($msg = DB::fetch($result)) {
+
+	$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']] = array($msg['send_time'], ($msg['read_time'] == null));
+
+			$ret[$msg['sender']] = [$msg['send_time'], ($msg['read_time'] == null), $msg['message']];
 		} else {
-			if (isset($ret[$msg['receiver']])) {
-				continue;
-			}
-			$ret[$msg['receiver']] = array($msg['send_time'], 0);
+			if (isset($ret[$msg['receiver']])) continue;
+
+			$ret[$msg['receiver']] = [$msg['send_time'], 0, $msg['message']];
 		}
 	}
 	$res = [];
 	foreach ($ret as $name => $con) {
-		$res[] = [$con[0], $con[1], $name];
+		$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();
-	if (!isset($_GET['conversationName']) || !validateUsername($_GET['conversationName'])) {
+	$receiver = UOJRequest::user(UOJRequest::GET, 'conversationName');
+	$page_num = UOJRequest::uint(UOJRequest::GET, 'pageNumber');
+	if (!$receiver || $receiver['username'] === $username) {
 		return '[]';
 	}
-	if (!isset($_GET['pageNumber']) || !validateUInt($_GET['pageNumber'])) {
+	if (!$page_num) { // false, null, or zero
 		return '[]';
 	}

-	$conversationName = $_GET['conversationName'];
-	$pageNumber = ($_GET['pageNumber'] - 1) * 10;
-	DB::query("update user_msg set read_time = now() where sender = '$conversationName'  and  receiver = '$username' and read_time is null");
+	DB::update([
+		"update user_msg",
+		"set", ["read_time" => DB::now()],
+		"where", [
+			"sender" => $receiver['username'],
+			"receiver" => $username,
+			"read_time" => null,
+		]
+	]);

-	$result = DB::query("select * from user_msg where (sender = '$username' and receiver = '$conversationName') or (sender = '$conversationName' and receiver = '$username')	order by send_time DESC limit $pageNumber, 11");
-	$ret = array();
-	while ($msg = DB::fetch($result)) {
-		$ret[] = array($msg['message'], $msg['send_time'], $msg['read_time'], $msg['id'], ($msg['sender'] == $username));
+	$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);
 }

-/*
-	function deleteMsg($msgId) {
-	    return 1;
-	    $str = <<<EOD
-	select * from user_msg
-	where id = $msgId
-	and read_time is null
-	EOD;
-	    $result = DB::query($str);
-	    if (DB::fetch($result)) {
-	        $str = <<<EOD
-	delete from user_msg
-	where id = $msgId
-	EOD;
-	        DB::query($str);
-	        return 1;
-	    }
-	    return 0;
-	}
-	*/
-
 if (isset($_POST['user_msg'])) {
 	die(handleMsgPost());
 } elseif (isset($_GET['getConversations'])) {
@ -106,48 +136,68 @@ if (isset($_POST['user_msg'])) {

 <?php echoUOJPageHeader('私信') ?>

-<h1 class="page-header">私信</h1>
+<h1>私信</h1>

-<div id="conversations"></div>
-
-<div id="history" style="display:none">
-	<div class="card border-primary">
-		<div class="card-header bg-primary text-white">
-			<button type="button" id="goBack" class="btn btn-info btn-sm" style="position:absolute">返回</button>
-			<div id="conversation-name" class="text-center"></div>
+<div class="card overflow-hidden" style="height: calc(100vh - 10rem);">
+	<div class="row gx-0 flex-grow-1 h-100">
+		<div class="col-md-3 border-end">
+			<div class="list-group list-group-flush" id="conversations"></div>
 		</div>
-		<div class="card-body">
-			<ul class="pagination top-buffer-no justify-content-between">
-				<li class="previous"><a class="btn btn-outline-secondary text-primary" href="#" id="pageLeft">&larr; 更早的消息</a></li>
-				<li class="text-center" id="pageShow" style="line-height:32px"></li>
-				<li class="next"><a class="btn btn-outline-secondary text-primary" href="#" id="pageRight">更新的消息 &rarr;</a></li>
-			</ul>
-			<div id="history-list" style="min-height: 200px;">
+
+		<div class="col-md-9 h-100" id="history" style="display: none">
+			<div class="card h-100 border-0 rounded-0 h-100">
+				<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>
-			<ul class="pagination top-buffer-no justify-content-between">
-				<li class="previous"><a class="btn btn-outline-secondary text-primary" href="#history" id="pageLeft2">&larr; 更早的消息</a></li>
-				<li class="next"><a class="btn btn-outline-secondary text-primary" href="#history" id="pageRight2">更新的消息 &rarr;</a></li>
-			</ul>
-			<hr />
-			<form id="form-message">
-				<div class="form-group" id="form-group-message">
-					<textarea id="input-message" class="form-control"></textarea>
-					<span id="help-message" class="help-block"></span>
-				</div>
-				<div class="text-right">
-					<button type="submit" id="message-submit" class="btn btn-info btn-md">发送</button>
-				</div>
-			</form>
 		</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 ?>
@ -155,17 +205,62 @@ if (isset($_POST['user_msg'])) {
 </script>

 <script type="text/javascript">
-	function addButton(conversationName, send_time, type) {
+	var conversations = {};
+	var intervalId = 0;
+	var user_avatar = '<?= HTML::avatar_addr(Auth::user(), 80) ?>';
+
+	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="row top-buffer-sm">' +
-			'<div class="col-sm-3">' +
-			'<button type="button" class="btn btn-' + (type ? 'warning' : 'primary') + ' btn-block" ' +
+			'<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 + '\')">' +
-			conversationName +
-			'</button>' +
+			'<div class="flex-shrink-0 me-3">' +
+			'<img class="rounded" width="56" height="56" src="' + avatar_addr + '" />' +
+			'</div>' +
+			'<div class="flex-grow-1 overflow-hidden">' +
+			'<div>' +
+			getUserSpan(conversationName, realname, color) +
+			'<span class="float-end text-muted">' +
+			timeStr +
+			'</span>' +
+			'</div>' +
+			'<div class="text-muted text-nowrap text-truncate">' +
+			htmlspecialchars(last_message) +
 			'</div>' +
-			'<div class="col-sm-9" style="line-height:34px">' +
-			'最后发送时间：' + send_time +
 			'</div>' +
 			'</div>'
 		);
@ -173,24 +268,22 @@ if (isset($_POST['user_msg'])) {

 	function addBubble(content, send_time, read_time, msgId, conversation, page, type) {
 		$("#history-list").append(
-			'<div style=' + (!type ? "margin-left:0%;margin-right:20%;" : "margin-left:20%;margin-right:0%;") + '>' +
-			'<div class="card border-info mb-4">' +
-			'<div class="card-body" style="background:#17a2b8; word-break: break-all">' +
-			'<div style="white-space:pre-wrap">' +
+			'<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>' +
-			'<div>' +
-			'<div class="row">' +
-			'<div class="col-sm-6">' +
-			'发送时间：' + send_time +
-			'</div>' +
-			'<div class="col-sm-6 text-right">' +
-			'查看时间：' + (read_time == null ? '<strong>未查看</strong>' : read_time) +
-			'</div>' +
-			'</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" width="32" height="32" src="' + user_avatar + '" style="user-select: none;" />' : '') +
 			'</div>'
 		);
 	}
@ -204,7 +297,7 @@ if (isset($_POST['user_msg'])) {
 		$('#help-message').text('');
 		$('#form-group-message').removeClass('has-error');

-		$.post('', {
+		$.post('/user_msg', {
 			user_msg: 1,
 			receiver: conversationName,
 			message: $('#input-message').val()
@ -216,9 +309,9 @@ if (isset($_POST['user_msg'])) {
 	function refreshHistory(conversation, page) {
 		$("#history-list").empty();
 		var ret = false;
-		$('#conversation-name').text(conversation);
+		$('#conversation-name').html(getUserLink(conversation, conversations[conversation][2], conversations[conversation][3]));
 		$('#pageShow').text("第" + page.toString() + "页");
-		$.get('', {
+		$.get('/user_msg', {
 			getHistory: '',
 			conversationName: conversation,
 			pageNumber: page
@ -236,29 +329,39 @@ if (isset($_POST['user_msg'])) {
 				}
 				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 ((++cnt) + 1 == result.length && F) {
+					break;
+				}
 			}
-			if (result.length == 11) ret = true;
+
+			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('', {
-			getConversations: ""
+		$.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]);
+					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]);
+					addButton(conversation[2], conversation[0], conversation[1], conversation[3], conversation[4], conversation[5], conversation[6]);
 				}
 			}
 		});
@ -267,40 +370,49 @@ if (isset($_POST['user_msg'])) {
 	function enterConversation(conversationName) {
 		var slideTime = 300;
 		var page = 1;
-		$("#conversations").hide(slideTime);
 		var changeAble = refreshHistory(conversationName, page);
-		$("#history").slideDown(slideTime);
+		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").slideUp(slideTime);
-			$("#conversations").show(slideTime);
+			$("#history").hide();
+			$("#conversations").removeClass('d-none d-md-block');
 			return;
 		});
 		$('#pageLeft').unbind("click").click(function() {
-			if (changeAble) page++;
+			if (changeAble) {
+				page++;
+				clearInterval(intervalId);
+			}
 			changeAble = refreshHistory(conversationName, page);
 			return false;
 		});
-		$('#pageLeft2').unbind("click").click(function() {
-			if (changeAble) page++;
-			changeAble = refreshHistory(conversationName, page);
-		});
 		$('#pageRight').unbind("click").click(function() {
-			if (page > 1) page--;
+			if (page > 1) {
+				page--;
+				clearInterval(intervalId);
+			}
 			changeAble = refreshHistory(conversationName, page);
 			return false;
 		});
-		$('#pageRight2').unbind("click").click(function() {
-			if (page > 1) page--;
-			changeAble = refreshHistory(conversationName, page);
-		});
 	}
 </script>

--- a/web/js/uoj.js
+++ b/web/js/uoj.js
@ -1116,12 +1116,12 @@ function showCommentReplies(id, replies) {

 // Tooltip
 $(document).ready(function() {
-	[...document.querySelectorAll('[data-bs-toggle="tooltip"]')].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+	bootstrap.Tooltip.jQueryInterface.call($('[data-bs-toggle="tooltip"]'));
 });

 // Popovers
 $(document).ready(function() {
-	[...document.querySelectorAll('[data-bs-toggle="popover"]')].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
+	bootstrap.Popover.jQueryInterface.call($('[data-bs-toggle="popover"]'));
 });

 // Copy button