refactor(submission): two columns layout

2024-11-21 21:08:42 +00:00 · 2023-02-17 10:56:29 +08:00 · 2023-02-17 10:56:29 +08:00 · 496b87d0a4
commit 496b87d0a4
parent 2ed4d368ce
4 changed files with 325 additions and 137 deletions
--- a/web/app/controllers/submission.php
+++ b/web/app/controllers/submission.php
@ -40,14 +40,14 @@ if ($can_see_minor) {
 		$tid = DB::insert_id();
 		redirectTo(UOJSubmission::cur()->getUriForNewTID($tid));
 	};
-	$minor_rejudge_form->config['submit_button']['class'] = 'btn btn-sm btn-primary';
+	$minor_rejudge_form->config['submit_button']['class'] = 'list-group-item list-group-item-action border-start-0 border-end-0 list-group-item-secondary';
 	$minor_rejudge_form->config['submit_button']['text'] = '偷偷重新测试';
-	$minor_rejudge_form->config['submit_container']['class'] = 'd-inline-block text-end';
+	$minor_rejudge_form->config['submit_container']['class'] = '';
 	$minor_rejudge_form->runAtServer();
 }

 if (UOJSubmission::cur()->isLatest()) {
-	if (UOJSubmission::cur()->preHackCheck()) {
+	if (UOJSubmission::cur()->preHackCheck() && ($perm['content'] || $perm['manager_view'])) {
 		$hack_form = new UOJForm('hack');
 		$hack_form->addTextFileInput('input', ['filename' => 'input.txt']);
 		$hack_form->addCheckBox('use_formatter', [
@ -93,9 +93,9 @@ if (UOJSubmission::cur()->isLatest()) {
 		$rejudge_form->handle = function () {
 			UOJSubmission::rejudgeById(UOJSubmission::info('id'));
 		};
-		$rejudge_form->config['submit_button']['class'] = 'btn btn-sm btn-primary';
+		$rejudge_form->config['submit_button']['class'] = 'list-group-item list-group-item-action border-start-0 border-end-0 list-group-item-secondary';
 		$rejudge_form->config['submit_button']['text'] = '重新测试';
-		$rejudge_form->config['submit_container']['class'] = 'text-end d-inline-block';
+		$rejudge_form->config['submit_container']['class'] = '';
 		$rejudge_form->runAtServer();
 	}

@ -104,10 +104,10 @@ if (UOJSubmission::cur()->isLatest()) {
 		$delete_form->handle = function () {
 			UOJSubmission::cur()->delete();
 		};
-		$delete_form->config['submit_button']['class'] = 'btn btn-sm btn-danger';
+		$delete_form->config['submit_button']['class'] = 'list-group-item list-group-item-action border-start-0 border-end-0 list-group-item-danger';
 		$delete_form->config['submit_button']['text'] = '删除此提交记录';
-		$delete_form->config['submit_container']['class'] = 'text-end d-inline-block';
-		$delete_form->config['confirm']['smart'] = true;
+		$delete_form->config['submit_container']['class'] = '';
+		$delete_form->config['confirm']['text'] = '你真的要删除这条提交记录吗？';
 		$delete_form->succ_href = "/submissions";
 		$delete_form->runAtServer();
 	}
@ -117,126 +117,231 @@ if (UOJSubmission::cur()->isLatest()) {
 		$delete_form->handle = function () {
 			UOJSubmission::cur()->deleteThisMinorVersion();
 		};
-		$delete_form->config['submit_button']['class'] = 'btn btn-sm btn-danger';
+		$delete_form->config['submit_button']['class'] = 'list-group-item list-group-item-action border-start-0 border-end-0 list-group-item-danger';
 		$delete_form->config['submit_button']['text'] = '删除当前历史记录（保留其他历史记录）';
-		$delete_form->config['submit_container']['class'] = 'text-end d-inline-block';
-		$delete_form->config['confirm']['smart'] = true;
+		$delete_form->config['submit_container']['class'] = '';
+		$delete_form->config['confirm']['text'] = '你真的要删除这条历史记录吗？删除这条历史记录不会影响其他的历史记录。';
 		$delete_form->succ_href = UOJSubmission::cur()->getUriForLatest();
 		$delete_form->runAtServer();
 	}
 }
+
+$tabs = [];
+
+if (UOJSubmission::cur()->hasJudged()) {
+	if ($perm['high_level_details']) {
+		$tabs['details'] = [
+			'name' => '详细信息',
+			'card_body' => false,
+			'displayer' => function () use ($perm, $submission_result) {
+				echo '<div class="card-body p-0">';
+				$styler = new SubmissionDetailsStyler();
+				if (!$perm['low_level_details']) {
+					$styler->fade_all_details = true;
+					$styler->show_small_tip = false;
+				}
+				echoJudgmentDetails($submission_result['details'], $styler, 'details');
+				echo '</div>';
+			}
+		];
+
+		if ($perm['manager_view'] && !$perm['low_level_details']) {
+			$tabs['all-details'] = [
+				'name' => '详细信息（管理员）',
+				'displayer' => function () use ($submission_result) {
+					echo '<div class="card-body p-0">';
+					echoSubmissionDetails($submission_result['details'], 'all_details');
+					echo '</div>';
+				},
+				'card_body' => false,
+			];
+		}
+	} else if ($perm['manager_view']) {
+		$tabs['manager-details'] = [
+			'name' => '详细信息（管理员）',
+			'displayer' => function () use ($submission_result) {
+				echo '<div class="card-body p-0">';
+				echoSubmissionDetails($submission_result['details'], 'details');
+				echo '</div>';
+			},
+			'card_body' => false,
+		];
+	} else {
+		// TODO: 您当前无法查看详细信息
+	}
+
+	if ($perm['manager_view'] && isset($submission_result['final_result'])) {
+		$tabs['final-details'] = [
+			'name' => '终测结果预测（管理员）',
+			'displayer' => function () use ($submission_result) {
+				echo '<div class="card-body p-0">';
+				echoSubmissionDetails($submission_result['final_result']['details'], 'final_details');
+				echo '</div>';
+			},
+			'card_body' => false,
+		];
+	}
+} else {
+	// TODO: move judge_status from UOJSubmission::echoStatusCard() to here
+}
+
+if ($perm['content'] || $perm['manager_view']) {
+	$tabs['source'] = [
+		'name' => '源代码',
+		'displayer' => function () {
+			echo '<div class="list-group list-group-flush">';
+			UOJSubmission::cur()->echoContent(['list_group' => true]);
+			echo '</div>';
+		},
+		'card_body' => false,
+	];
+}
+
+if ($perm['manager_view']) {
+	$tabs['judger'] = [
+		'name' => '测评机信息',
+		'displayer' => function () {
+			if (empty(UOJSubmission::info('judger'))) {
+				echo '暂无';
+			} else {
+				$judger = DB::selectFirst([
+					"select * from judger_info",
+					"where", [
+						"judger_name" => UOJSubmission::info('judger')
+					]
+				]);
+				if (!$judger) {
+					echo '测评机信息损坏';
+				} else {
+					echo '<strong>', $judger['display_name'], ': </strong>', $judger['description'];
+				}
+			}
+		},
+	];
+}
+
+if (isset($hack_form)) {
+	$tabs['hack'] = [
+		'name' => 'Hack!',
+		'displayer' => function () use (&$hack_form) {
+			echo <<<EOD
+				<div class="small text-danger mb-3">
+					Hack 功能是给大家互相查错用的。请勿故意提交错误代码，然后自己 Hack 自己、贼喊捉贼哦（故意贼喊捉贼会予以封禁处理）。
+				</div>
+			EOD;
+			$hack_form->printHTML();
+		},
+	];
+}
 ?>
-<script>
-	var problem_id = parseInt('<?= $submission['problem_id'] ?>');
-</script>
-<?php echoUOJPageHeader(UOJLocale::get('problems::submission') . ' #' . $submission['id']) ?>
+
+<?php echoUOJPageHeader(UOJLocale::get('problems::submission') . ' #' . $submission['id'], [
+	'PageContainerClass' => 'container-xxl',
+]) ?>

 <h1>
 	<?= UOJLocale::get('problems::submission') . ' #' . $submission['id'] ?>
 </h1>

-<?php UOJSubmission::cur()->echoStatusTable(['show_actual_score' => $perm['score'], 'id_hidden' => true], Auth::user()) ?>
+<style>
+	.submission-layout {
+		/* display: grid; */
+		grid-template-columns: minmax(0, calc(100% - 25% - var(--bs-gutter-x))) auto;
+		grid-template-rows: auto 1fr;
+	}

-<?php
-if ($perm['score']) {
-	HTML::echoPanel('mb-3', '测评历史', function () {
-		UOJSubmissionHistory::cur()->echoTimeline();
-	});
-}
-?>
+	.submission-left-col {
+		grid-column: 1;
+		grid-row: 1 / span 2;
+	}

-<?php
-if ($perm['manager_view']) {
-	HTML::echoPanel('mb-3', '测评机信息（管理员可见）', function () {
-		if (empty(UOJSubmission::info('judger'))) {
-			echo '暂无';
-		} else {
-			$judger = DB::selectFirst([
-				"select * from judger_info",
-				"where", [
-					"judger_name" => UOJSubmission::info('judger')
-				]
-			]);
-			if (!$judger) {
-				echo '测评机信息损坏';
-			} else {
-				echo '<strong>', $judger['display_name'], ': </strong>', $judger['description'];
-			}
-		}
-	});
-}
-?>
+	.submission-right-col {
+		grid-column: 2;
+		grid-row: 1;
+	}

-<?php if ($perm['content'] || $perm['manager_view']) : ?>
-	<div class="copy-button-container">
-		<?php UOJSubmission::cur()->echoContent() ?>
+	.submission-right-control-panel {
+		grid-column: 2;
+		grid-row: 2;
+	}
+</style>
+
+<div class="row mt-3 submission-layout d-md-grid">
+	<div class="submission-right-col">
+		<?php UOJSubmission::cur()->echoStatusCard(['show_actual_score' => $perm['score'], 'id_hidden' => true], Auth::user()) ?>
 	</div>

-	<?php if (isset($hack_form)) : ?>
-		<p class="text-center">
-			这程序好像有点 Bug，我给组数据试试？ <button id="button-display-hack" type="button" class="btn btn-danger btn-xs">Hack!</button>
-		</p>
-		<div class="card mb-3" id="div-form-hack" style="display: none">
-			<div class="card-header">提交 Hack</div>
-			<div class="card-body">
-				<?php $hack_form->printHTML() ?>
+	<div class="submission-left-col">
+		<?php
+		if ($perm['score']) {
+			HTML::echoPanel('mb-3', '测评历史', function () {
+				UOJSubmissionHistory::cur()->echoTimeline();
+			});
+		}
+		?>
+
+		<div class="card mb-3">
+			<div class="card-header">
+				<ul class="nav nav-tabs card-header-tabs" role="tablist">
+					<?php $idx = 0; ?>
+					<?php foreach ($tabs as $id => $tab) : ?>
+						<li class="nav-item">
+							<a class="nav-link <?php if ($idx++ == 0) : ?>active<?php endif ?>" href="#<?= $id ?>" data-bs-toggle="tab" data-bs-target="#<?= $id ?>">
+								<?= $tab['name'] ?>
+							</a>
+						</li>
+					<?php endforeach ?>
+				</ul>
 			</div>
-			<div class="card-footer bg-transparent small text-center text-danger">
-				Hack 功能是给大家互相查错用的。请勿故意提交错误代码，然后自己 Hack 自己、贼喊捉贼哦（故意贼喊捉贼会予以封禁处理）
+
+			<div class="tab-content">
+				<?php $idx = 0; ?>
+				<?php foreach ($tabs as $id => $tab) : ?>
+					<div class="tab-pane fade <?php if ($idx++ == 0) : ?>active show<?php endif ?>" id="<?= $id ?>" role="tabpanel">
+						<?php if (!isset($tab['card_body']) || $tab['card_body']) : ?>
+							<div class="card-body">
+							<?php endif ?>
+
+							<?php $tab['displayer']() ?>
+
+							<?php if (!isset($tab['card_body']) || $tab['card_body']) : ?>
+							</div>
+						<?php endif ?>
+					</div>
+				<?php endforeach ?>
 			</div>
 		</div>
-		<script type="text/javascript">
-			$(document).ready(function() {
-				$('#button-display-hack').click(function() {
-					$('#div-form-hack').toggle('fast');
-				});
-			});
-		</script>
-	<?php endif ?>
-<?php endif ?>
+	</div>

-<?php
-if (UOJSubmission::cur()->hasJudged()) {
-	if ($perm['high_level_details']) {
-		HTML::echoPanel(['card' => 'mb-3', 'body' => 'p-0'], UOJLocale::get('details'), function () use ($perm, $submission_result) {
-			$styler = new SubmissionDetailsStyler();
-			if (!$perm['low_level_details']) {
-				$styler->fade_all_details = true;
-				$styler->show_small_tip = false;
-			}
-			echoJudgmentDetails($submission_result['details'], $styler, 'details');
+	<div class="submission-right-control-panel">

-			if ($perm['manager_view'] && !$perm['low_level_details']) {
-				echo '<hr />';
-				echo '<h4 class="text-info">全部详细信息（管理员可见）</h4>';
-				echoSubmissionDetails($submission_result['details'], 'all_details');
-			}
-		});
-	} else if ($perm['manager_view']) {
-		HTML::echoPanel(['card' => 'mb-3', 'body' => 'p-0'], '详细（管理员可见）', function () use ($submission_result) {
-			echoSubmissionDetails($submission_result['details'], 'details');
-		});
-	}
-	if ($perm['manager_view'] && isset($submission_result['final_result'])) {
-		HTML::echoPanel(['card' => 'mb-3', 'body' => 'p-0'], '终测结果预测（管理员可见）', function () use ($submission_result) {
-			echoSubmissionDetails($submission_result['final_result']['details'], 'final_details');
-		});
-	}
-}
-?>
+		<?php if (
+			isset($minor_rejudge_form) ||
+			isset($rejudge_form) ||
+			isset($delete_form)
+		) : ?>
+			<div class="card mb-3">
+				<div class="card-header fw-bold">
+					操作
+				</div>

-<div class="d-flex gap-2 justify-content-end">
-	<?php if (isset($minor_rejudge_form)) : ?>
-		<?php $minor_rejudge_form->printHTML() ?>
-	<?php endif ?>
+				<div class="list-group list-group-flush">
+					<?php if (isset($minor_rejudge_form)) : ?>
+						<?php $minor_rejudge_form->printHTML() ?>
+					<?php endif ?>

-	<?php if (isset($rejudge_form)) : ?>
-		<?php $rejudge_form->printHTML() ?>
-	<?php endif ?>
+					<?php if (isset($rejudge_form)) : ?>
+						<?php $rejudge_form->printHTML() ?>
+					<?php endif ?>

-	<?php if (isset($delete_form)) : ?>
-		<?php $delete_form->printHTML() ?>
-	<?php endif ?>
+					<?php if (isset($delete_form)) : ?>
+						<?php $delete_form->printHTML() ?>
+					<?php endif ?>
+				</div>
+			</div>
+		<?php endif ?>
+	</div>
 </div>

+
 <?php echoUOJPageFooter() ?>
--- a/web/app/libs/uoj-html-lib.php
+++ b/web/app/libs/uoj-html-lib.php
@ -484,7 +484,7 @@ class JudgmentDetailsPrinter {
 				echo 		'<div class="col-sm-2">';
 				echo        '<i class="bi bi-clipboard-check"></i> ', $subtask_score, ' pts';
 				echo 		'</div>';
-				echo 		'<div class="col-sm-2 uoj-status-text">';
+				echo 		'<div class="col-sm uoj-status-text">';
 				echo 		$this->styler->getTestInfoIcon($subtask_info);
 				echo 			htmlspecialchars($subtask_info);
 				echo 		'</div>';
@ -561,12 +561,12 @@ class JudgmentDetailsPrinter {
 				echo '<div class="col-sm-2">';
 				echo '<i class="bi bi-clipboard-check"></i> ', $test_score, ' pts';
 				echo '</div>';
-				echo '<div class="col-sm-2 uoj-status-text">';
+				echo '<div class="col-sm uoj-status-text">';
 				echo $this->styler->getTestInfoIcon($test_info);
 				echo htmlspecialchars($test_info);
 				echo '</div>';
 			} else {
-				echo '<div class="col-sm-4 uoj-status-text">';
+				echo '<div class="col-sm uoj-status-text">';
 				echo $this->styler->getTestInfoIcon($test_info);
 				echo htmlspecialchars($test_info);
 				echo '</div>';
@ -624,7 +624,7 @@ class JudgmentDetailsPrinter {
 			echo '<h4 class="card-title">', 'Custom Test', '</h4>';
 			echo '</div>';

-			echo '<div class="col-sm-4 uoj-status-text">';
+			echo '<div class="col-sm uoj-status-text">';
 			echo $this->styler->getTestInfoIcon($test_info);
 			echo htmlspecialchars($test_info);
 			echo '</div>';
--- a/web/app/models/UOJSubmission.php
+++ b/web/app/models/UOJSubmission.php
@ -536,7 +536,7 @@ class UOJSubmission {
 		}
 		echo '</tr>';
 		if ($show_status_details) {
-			echo '<tr id="', "status_details_{$this->info['id']}", '" class="info">';
+			echo '<tr id="', "status_details_{$this->info['id']}", '" class="">';
 			echo $this->getStatusDetailsHTML();
 			echo '</tr>';
 			echo '<script type="text/javascript">update_judgement_status_details(' . $this->info['id'] . ')</script>';
@ -583,6 +583,71 @@ class UOJSubmission {
 		echo '</div>';
 	}

+	public function echoStatusCard(array $cfg, array $viewer = null) {
+		if (!isset($cfg['show_actual_score'])) {
+			$cfg['show_actual_score'] = $this->viewerCanSeeScore($viewer);
+		}
+
+		$show_status_details = $this->viewerCanSeeStatusDetailsHTML($viewer);
+
+		$rows = [
+			'id' => 'ID',
+			'submitter' => UOJLocale::get('problems::submitter'),
+			'problem' => UOJLocale::get('problems::problem'),
+			'result' => UOJLocale::get('problems::result'),
+			'used_time' => UOJLocale::get('problems::used time'),
+			'used_memory' => UOJLocale::get('problems::used memory'),
+			'language' => UOJLocale::get('problems::language'),
+			'tot_size' => UOJLocale::get('problems::file size'),
+			'submit_time' => UOJLocale::get('problems::submit time'),
+			'judge_time' => UOJLocale::get('problems::judge time'),
+		];
+
+		echo '<div class="card mb-3">';
+		echo     '<div class="card-body vstack gap-2">';
+
+		foreach ($rows as $id => $name) {
+			if (!isset($cfg["{$id}_hidden"])) {
+				switch ($id) {
+					case 'submitter':
+						$submitter = UOJUser::query($this->info['submitter']);
+
+						echo '<div class="pb-2">';
+						echo HTML::empty_tag('img', [
+							'src' => HTML::avatar_addr($submitter, 64),
+							'class' => 'uoj-user-avatar rounded me-2',
+							'style' => 'width: 2rem; height: 2rem;',
+						]);
+						echo UOJUser::getLink($submitter);
+						echo '</div>';
+
+						break;
+					default:
+						echo '<div class="d-flex justify-content-between align-items-center">';
+						echo     '<span class="flex-shrink-0">', $name, '</span>';
+						echo     '<span class="text-end">', $this->echoStatusBarTD($id, $cfg), '</span>';
+						echo '</div>';
+
+						break;
+				}
+			}
+		}
+
+		echo     '</div>';
+		echo '</div>';
+
+		if ($show_status_details) {
+			echo '<div class="card">';
+			echo     '<table>';
+			echo         '<tr id="', "status_details_{$this->info['id']}", '" class="">';
+			echo             $this->getStatusDetailsHTML();
+			echo         '</tr>';
+			echo         '<script type="text/javascript">update_judgement_status_details(' . $this->info['id'] . ')</script>';
+			echo     '</table>';
+			echo '</div>';
+		}
+	}
+
 	public function delete() {
 		unlink(UOJContext::storagePath() . $this->getContent('file_name'));
 		DB::delete([
--- a/web/app/models/UOJSubmissionLikeTrait.php
+++ b/web/app/models/UOJSubmissionLikeTrait.php
@ -136,20 +136,38 @@ trait UOJSubmissionLikeTrait {
 		return isset($content[$key]) ? $content[$key] : null;
 	}

-	public function echoContent() {
+	public function echoContent($cfg = []) {
+		$cfg += [
+			'list_group' => false,
+		];
+
 		$content = $this->getContent();
 		if (!$content) {
 			return false;
 		}

+		$card_class = 'card mb-3';
+		$card_header_class = 'card-header fw-bold';
+		$card_body_class = 'card-body';
+		$card_footer_class = 'card-footer';
+
+		if ($cfg['list_group']) {
+			$card_class = 'list-group-item';
+			$card_header_class = 'fw-bold mb-2';
+			$card_body_class = '';
+			$card_footer_class = 'text-end mt-2';
+		}
+
 		if ($content['remote_submission_id']) {
 			echo <<<EOD
-				<div class="card mb-3">
-					<div class="card-header fw-bold">
+				<div class="{$card_class}">
+					<div class="{$card_header_class}">
 						远程提交
 					</div>
-					<div class="card-body">
-						远程提交 ID：{$content['remote_submission_id']}
+					<div class="{$card_body_class}">
+						远程提交 ID: {$content['remote_submission_id']}
+						<br>
+						源代码请在「详细信息」选项卡查看。
 					</div>
 				</div>
 			EOD;
@ -160,11 +178,11 @@ trait UOJSubmissionLikeTrait {
 		$zip_file = new ZipArchive();
 		if ($zip_file->open(UOJContext::storagePath() . $content['file_name'], ZipArchive::RDONLY) !== true) {
 			echo <<<EOD
-				<div class="card mb-3">
-					<div class="card-header text-bg-danger fw-bold">
+				<div class="{$card_class}">
+					<div class="{$card_header_class}">
 						提交内容
 					</div>
-					<div class="card-body">
+					<div class="{$card_body_class} text-danger">
 						木有
 					</div>
 				</div>
@ -195,16 +213,16 @@ trait UOJSubmissionLikeTrait {
 				$footer_text .= UOJLang::getLanguageDisplayName($file_language);
 				$sh_class = UOJLang::getLanguagesCSSClass($file_language);
 				echo <<<EOD
-                <div class="card mb-3">
-                    <div class="card-header fw-bold">
-                        {$req['name']}
-                    </div>
-                    <div class="card-body">
-                        <pre class="mb-0"><code class="$sh_class bg-light rounded p-3">{$file_content}\n</code></pre>
-                    </div>
-                    <div class="card-footer">$footer_text</div>
-                </div>
-                EOD;
+					<div class="{$card_class}">
+						<div class="{$card_header_class}">
+							{$req['name']}
+						</div>
+						<div class="{$card_body_class} copy-button-container">
+							<pre class="mb-0"><code class="$sh_class bg-light rounded p-3">{$file_content}\n</code></pre>
+						</div>
+						<div class="{$card_footer_class}">$footer_text</div>
+					</div>
+				EOD;
 			} elseif ($req['type'] == "text") {
 				$file_content = $zip_file->getFromName("{$req['file_name']}", 504);
 				if ($file_content === false) {
@ -215,16 +233,16 @@ trait UOJSubmissionLikeTrait {
 				$file_content = uojTextEncode($file_content, array('allow_CR' => true, 'html_escape' => true));
 				$footer_text = UOJLocale::get('problems::text file');
 				echo <<<EOD
-                <div class="card mb-3">
-                    <div class="card-header">
-                        {$req['file_name']}
-                    </div>
-                    <div class="card-body">
-                        <pre class="mb-0 bg-light rounded p-3">\n{$file_content}\n</pre>
-                    </div>
-                    <div class="card-footer">$footer_text</div>
-                </div>
-                EOD;
+					<div class="{$card_class}">
+						<div class="{$card_header_class}">
+							{$req['file_name']}
+						</div>
+						<div class="{$card_body_class}">
+							<pre class="mb-0 bg-light rounded p-3">\n{$file_content}\n</pre>
+						</div>
+						<div class="{$card_footer_class}">{$footer_text}</div>
+					</div>
+				EOD;
 			}
 		}
 		$zip_file->close();