Add UI to set custom ID for new problems

modules/problem.js

@@ -169,6 +169,7 @@ app.get('/problem/:id/edit', async (req, res) => {
       problem.id = id;
       problem.allowedEdit = true;
       problem.tags = [];
+      problem.new = true;
     } else {
       if (!await problem.isAllowedUseBy(res.locals.user)) throw 'Permission denied.';
       problem.allowedEdit = await problem.isAllowedEditBy(res.locals.user);
@@ -192,7 +193,13 @@ app.post('/problem/:id/edit', async (req, res) => {
     let problem = await Problem.fromID(id);
     if (!problem) {
       problem = await Problem.create();
-      if (id) problem.id = id;
+
+      let customID = parseInt(req.body.id);
+      if (customID) {
+        if (await Problem.fromID(customID)) throw 'The ID has been used.';
+        problem.id = customID;
+      } else if (id) problem.id = id;
+
       problem.user_id = res.locals.user.id;
     } else {
       if (!await problem.isAllowedUseBy(res.locals.user)) throw 'Permission denied.';
@@ -234,6 +241,7 @@ app.get('/problem/:id/import', async (req, res) => {
     if (!problem) {
       problem = await Problem.create();
       problem.id = id;
+      problem.new = true;
       problem.user_id = res.locals.user.id;
     } else {
       if (!await problem.isAllowedUseBy(res.locals.user)) throw 'Permission denied.';
@@ -257,7 +265,13 @@ app.post('/problem/:id/import', async (req, res) => {
     let problem = await Problem.fromID(id);
     if (!problem) {
       problem = await Problem.create();
-      if (id) problem.id = id;
+
+      let customID = parseInt(req.body.id);
+      if (customID) {
+        if (await Problem.fromID(customID)) throw 'The ID has been used.';
+        problem.id = customID;
+      } else if (id) problem.id = id;
+
       problem.user_id = res.locals.user.id;
     } else {
       if (!await problem.isAllowedUseBy(res.locals.user)) throw 'Permission denied.';

views/problem_edit.ejs

@@ -13,7 +13,9 @@
       </div>
       <div class="ui bottom attached tab segment active" data-tab="edit">
         <div class="field">
-          <label for="title">题目名称</label>
+          <label for="id">题目编号</label>
+          <input type="text" id="id" name="id" placeholder="留空则自动延伸" value="<%= problem.id ? problem.id : '' %>" <%= problem.new ? '' : 'disabled' %>>
+          <label style="margin-top: 15px; " for="title">题目名称</label>
           <input type="text" id="title" name="title" value="<%= problem.title %>">
           <label style="margin-top: 15px; " for="description">题目描述</label>
           <textarea rows="15" id="description" name="description"><%= problem.description %></textarea>

views/problem_import.ejs

@@ -1,11 +1,15 @@
 <% this.title = '导入题目'; %>
 <% include header %>
 <div class="padding">
-  <h1 style="margin-bottom: 30px; ">导入题目</h1>
+  <div style="margin-bottom: 30px; ">
+    <h1 style="margin-bottom: 10px; ">导入题目</h1>
+    从另一个运行 SYZOJ 的网站导入题目。
+  </div>
+
   <form class="ui form" action="<%= syzoj.utils.makeUrl(['problem', problem.id, 'import']) %>" method="post">
       <div class="field">
-          <label>题目 ID</label>
+          <label>题目编号</label>
-          <input type="text" value="<%= problem.id ? problem.id : '新题目' %>" disabled>
+          <input type="text" name="id" value="<%= problem.id ? problem.id : '' %>" placeholder="留空则自动延伸" <%= problem.new ? '' : 'disabled' %>>
       </div>
       <div class="field">
           <label>题目链接</label>