From 327c61a2517ceb2eef0acf03a61e66608dbe70a8 Mon Sep 17 00:00:00 2001
From: Baoshuo <i@baoshuo.ren>
Date: Sun, 2 Oct 2022 14:25:22 +0800
Subject: [PATCH] refactor: problem_statement_manage with bs5

---
 .../controllers/problem_statement_manage.php  | 111 +++++++++++++++++-
 web/app/models/UOJBlogEditor.php              |   4 +-
 web/app/views/blog-editor.php                 |   8 +-
 web/app/views/page-header.php                 |   2 +-
 web/js/blog-editor/blog-editor.js             |  29 +++--
 5 files changed, 139 insertions(+), 15 deletions(-)

diff --git a/web/app/controllers/problem_statement_manage.php b/web/app/controllers/problem_statement_manage.php
index 92f917e..692c81b 100644
--- a/web/app/controllers/problem_statement_manage.php
+++ b/web/app/controllers/problem_statement_manage.php
@@ -15,6 +15,10 @@
 	if (!hasProblemPermission($myUser, $problem)) {
 		become403Page();
 	}
+
+	if (!isset($_COOKIE['bootstrap4'])) {
+		$REQUIRE_LIB['bootstrap5'] = '';
+	}
 	
 	$problem_content = queryProblemContent($problem['id']);
 	$problem_tags = queryProblemTags($problem['id']);
@@ -55,12 +59,33 @@
 	$problem_editor->runAtServer();
 	?>
 <?php echoUOJPageHeader(HTML::stripTags($problem['title']) . ' - 编辑 - 题目管理') ?>
-<h1 class="page-header" align="center">#<?=$problem['id']?> : <?=$problem['title']?> 管理</h1>
+
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+<div class="row">
+<div class="col-lg-9">
+<?php endif ?>
+
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+<div class="card card-default mb-2">
+<div class="card-body">
+<?php endif ?>
+
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+<h1 class="h2 card-title text-center">
+<?php else: ?>
+<h1 class="page-header text-center">
+<?php endif ?>
+	#<?=$problem['id']?>. <?=$problem['title']?> 管理
+</h1>
+
 <ul class="nav nav-tabs" role="tablist">
 	<li class="nav-item"><a class="nav-link active" href="/problem/<?= $problem['id'] ?>/manage/statement" role="tab">编辑</a></li>
 	<li class="nav-item"><a class="nav-link" href="/problem/<?= $problem['id'] ?>/manage/managers" role="tab">管理者</a></li>
 	<li class="nav-item"><a class="nav-link" href="/problem/<?= $problem['id'] ?>/manage/data" role="tab">数据</a></li>
+
+<?php if (!isset($REQUIRE_LIB['bootstrap5'])): ?>
 	<li class="nav-item"><a class="nav-link" href="/problem/<?=$problem['id']?>" role="tab">返回</a></li>
+<?php endif ?>
 </ul>
 
 <div class="mt-3 mb-2">
@@ -71,5 +96,89 @@
 <li>图片上传推荐使用 <a href="https://smms.app" target="_blank">SM.MS</a> 图床，以免后续产生外链图片大量失效的情况。</li>
 </ol>
 </div>
+
+<hr>
+
 <?php $problem_editor->printHTML() ?>
+
+
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+</div>
+</div>
+<?php endif ?>
+
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+</div>
+
+<aside class="col mt-3 mt-lg-0">
+
+<div class="card card-default mb-2">
+	<ul class="nav nav-pills nav-fill flex-column" role="tablist">
+		<li class="nav-item text-start">
+			<a href="/problem/<?= $problem['id'] ?>" class="nav-link" role="tab">
+				<i class="bi bi-journal-text"></i>
+				<?= UOJLocale::get('problems::statement') ?>
+			</a>
+		</li>
+		<li class="nav-item text-start">
+			<a href="/problem/<?= $problem['id'] ?>/solutions" class="nav-link" role="tab">
+				<i class="bi bi-journal-bookmark"></i>
+				<?= UOJLocale::get('problems::solutions') ?>
+			</a>
+		</li>
+		<li class="nav-item text-start">
+			<a class="nav-link active" href="/problem/<?= $problem['id'] ?>/manage/statement" role="tab">
+				<i class="bi bi-sliders"></i>
+				<?= UOJLocale::get('problems::manage') ?>
+			</a>
+		</li>
+	</ul>
+</div>
+
+<div class="card card-default mb-2">
+	<ul class="nav nav-fill flex-column">
+		<li class="nav-item text-start">
+			<a class="nav-link" href="<?= HTML::url("/download.php?type=problem&id={$problem['id']}") ?>">
+				<i class="bi bi-hdd-stack"></i>
+				测试数据
+			</a>
+		</li>
+		<li class="nav-item text-start">
+			<a class="nav-link" href="<?= HTML::url("/download.php?type=attachment&id={$problem['id']}") ?>">
+				<i class="bi bi-download"></i>
+				附件下载
+			</a>
+		</li>
+		<li class="nav-item text-start">
+			<a class="nav-link" href="/problem/<?= $problem['id'] ?>/statistics">
+				<i class="bi bi-graph-up"></i>
+				<?= UOJLocale::get('problems::statistics') ?>
+			</a>
+		</li>
+	</ul>
+	<div class="card-footer bg-transparent">
+		评价：<?= getClickZanBlock('P', $problem['id'], $problem['zan']) ?>
+	</div>
+</div>
+
+<?php
+	$sidebar_config = array();
+	if ($contest && $contest['cur_progress'] <= CONTEST_IN_PROGRESS) {
+		$sidebar_config['upcoming_contests_hidden'] = '';
+	}
+	uojIncludeView('sidebar', $sidebar_config);
+	?>
+</aside>
+
+</div>
+
+<script>
+	$(document).ready(function() {
+		$('.markdown-body table').each(function() {
+			$(this).addClass('table table-bordered table-striped');
+		});
+	});
+</script>
+<?php endif ?>
+
 <?php echoUOJPageFooter() ?>
diff --git a/web/app/models/UOJBlogEditor.php b/web/app/models/UOJBlogEditor.php
index c7f604a..d2c07af 100644
--- a/web/app/models/UOJBlogEditor.php
+++ b/web/app/models/UOJBlogEditor.php
@@ -241,6 +241,8 @@ EOD
 		}
 	}
 	public function printHTML() {
-		uojIncludeView('blog-editor', array('editor' => $this));
+		global $REQUIRE_LIB;
+		
+		uojIncludeView('blog-editor', array('editor' => $this, 'REQUIRE_LIB' => $REQUIRE_LIB));
 	}
 }
diff --git a/web/app/views/blog-editor.php b/web/app/views/blog-editor.php
index 44d889d..764efa4 100644
--- a/web/app/views/blog-editor.php
+++ b/web/app/views/blog-editor.php
@@ -21,7 +21,13 @@
 		<a id="a-<?= $editor->name ?>_view_blog" class="btn btn-info" style="display: none;"><?= $editor->label_text['view blog'] ?></a>
 		<?php endif ?>
 	</div>
-	<div class="col-sm-6 text-right">
+	<div class="col-sm-6
+	<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+		text-end
+	<?php else: ?>
+		text-right
+	<?php endif ?>
+	">
 		<?= HTML::checkbox("{$editor->name}_is_hidden", $editor->cur_data['is_hidden']) ?>
 	</div>
 </div>
diff --git a/web/app/views/page-header.php b/web/app/views/page-header.php
index c7c3180..bc16724 100644
--- a/web/app/views/page-header.php
+++ b/web/app/views/page-header.php
@@ -118,7 +118,7 @@
 		<?= HTML::css_link('/js/codemirror/lib/codemirror.css') ?>
 		<?= HTML::css_link('/css/blog-editor.css') ?>
 		<?= HTML::js_src('/js/marked.js?v=2016.10.19') ?>
-		<?= HTML::js_src('/js/blog-editor/blog-editor.js?v=2015.7.9') ?>
+		<?= HTML::js_src('/js/blog-editor/blog-editor.js?v=' . UOJConfig::$data['profile']['s2oj-version']) ?>
 		<?= HTML::js_src('/js/codemirror/lib/codemirror.js') ?>
 		<?= HTML::js_src('/js/codemirror/addon/mode/overlay.js') ?>
 		<?= HTML::js_src('/js/codemirror/addon/selection/active-line.js') ?>
diff --git a/web/js/blog-editor/blog-editor.js b/web/js/blog-editor/blog-editor.js
index 7748fdb..ae08a2e 100644
--- a/web/js/blog-editor/blog-editor.js
+++ b/web/js/blog-editor/blog-editor.js
@@ -18,20 +18,27 @@ function blog_editor_init(name, editor_config) {
 	
 	// init buttons
 	var save_btn = $('<button type="button" class="btn btn-sm"></button>');
-	var preview_btn = $('<button type="button" class="btn btn-secondary btn-sm"><span class="glyphicon glyphicon-eye-open"></span></button>');
-	var bold_btn = $('<button type="button" class="btn btn-secondary btn-sm ml-2"><span class="glyphicon glyphicon-bold"></span></button>');
-	var italic_btn = $('<button type="button" class="btn btn-secondary btn-sm"><span class="glyphicon glyphicon-italic"></span></button>');
-	
-	save_btn.tooltip({ container: 'body', title: '保存 (Ctrl-S)' });
-	preview_btn.tooltip({ container: 'body', title: '预览 (Ctrl-D)'	});
-	bold_btn.tooltip({ container: 'body', title: '粗体 (Ctrl-B)' });
-	italic_btn.tooltip({ container: 'body', title: '斜体 (Ctrl-I)' });
+	var preview_btn = $('<button type="button" class="btn btn-secondary btn-sm">' + (isBootstrap5Page ? '<i class="bi bi-eye"></i>' : '<span class="glyphicon glyphicon-eye-open"></span>') + '</button>');
+	var bold_btn = $('<button type="button" class="btn btn-secondary btn-sm ml-2">' + (isBootstrap5Page ? '<i class="bi bi-type-bold"></i>' : '<span class="glyphicon glyphicon-bold"></span>') + '</button>');
+	var italic_btn = $('<button type="button" class="btn btn-secondary btn-sm">' + (isBootstrap5Page ? '<i class="bi bi-type-italic"></i>' : '<span class="glyphicon glyphicon-italic"></span>') + '</button>');
 	
+	if (typeof isBootstrap5Page !== 'undefined' && isBootstrap5Page) {
+		save_btn.get().map(el => new bootstrap.Tooltip(el, { container: 'body', title: '保存 (Ctrl-S)' }));
+		preview_btn.get().map(el => new bootstrap.Tooltip(el, { container: 'body', title: '预览 (Ctrl-D)' }));
+		bold_btn.get().map(el => new bootstrap.Tooltip(el, { container: 'body', title: '粗体 (Ctrl-B)' }));
+		italic_btn.get().map(el => new bootstrap.Tooltip(el, { container: 'body', title: '斜体 (Ctrl-I)' }));
+	} else {
+		save_btn.tooltip({ container: 'body', title: '保存 (Ctrl-S)' });
+		preview_btn.tooltip({ container: 'body', title: '预览 (Ctrl-D)'	});
+		bold_btn.tooltip({ container: 'body', title: '粗体 (Ctrl-B)' });
+		italic_btn.tooltip({ container: 'body', title: '斜体 (Ctrl-I)' });
+	}
+
 	var all_btn = [save_btn, preview_btn, bold_btn, italic_btn];
 	
 	// init toolbar
 	var toolbar = $('<div class="btn-toolbar"></div>');
-	toolbar.append($('<div class="btn-group"></div>')
+	toolbar.append($('<div class="btn-group me-2"></div>')
 		.append(save_btn)
 		.append(preview_btn)
 	);
@@ -45,12 +52,12 @@ function blog_editor_init(name, editor_config) {
 		if (val) {
 			save_btn.removeClass('btn-warning');
 			save_btn.addClass('btn-success');
-			save_btn.html('<span class="glyphicon glyphicon-saved"></span>');
+			save_btn.html(isBootstrap5Page ? '<i class="bi bi-save-fill"></i>' : '<span class="glyphicon glyphicon-saved"></span>');
 			before_window_unload_message = null;
 		} else {
 			save_btn.removeClass('btn-success');
 			save_btn.addClass('btn-warning');
-			save_btn.html('<span class="glyphicon glyphicon-save"></span>');
+			save_btn.html(isBootstrap5Page ? '<i class="bi bi-save"></i>' : '<span class="glyphicon glyphicon-save"></span>');
 			before_window_unload_message = '您所编辑的内容尚未保存';
 		}
 	}