[前端]修改添加题目和添加用户页面， 添加新字段， 完善上传功能， 显示已上传文件列表

static/src/css/tagEditor/jquery.tag-editor.css

@@ -0,0 +1,45 @@
+/* surrounding tag container */
+.tag-editor {
+    list-style-type: none; padding: 0 5px 0 0; margin: 0; overflow: hidden; border: 1px solid #eee; cursor: text;
+    font: normal 14px sans-serif; color: #555; background: #fff;
+}
+
+/* core styles usually need no change */
+.tag-editor li { display: block; float: left; overflow: hidden; margin: 3px 0; line-height: 1.5; }
+.tag-editor div { float: left; padding: 0 4px; }
+.tag-editor .placeholder { padding: 0 8px; color: #bbb; }
+.tag-editor .tag-editor-spacer { padding: 0; width: 8px; overflow: hidden; color: transparent; background: none; }
+.tag-editor input {
+    vertical-align: inherit; border: 0; outline: none; padding: 0; margin: 0; cursor: text;
+    font-family: inherit; font-weight: inherit; font-size: inherit; font-style: inherit;
+    box-shadow: none; background: none;
+}
+
+/* tag style */
+.tag-editor .tag-editor-tag {
+    padding-left: 5px; color: #46799b; background: #e0eaf1; white-space: nowrap;
+    overflow: hidden; cursor: pointer; border-radius: 2px 0 0 2px;
+}
+
+/* delete icon */
+.tag-editor .tag-editor-delete { background: #e0eaf1; cursor: pointer; padding-right: 5px; border-radius: 0 2px 2px 0; }
+.tag-editor .tag-editor-delete i {
+    display: inline-block; width: 7px; height: 7px; vertical-align: middle; background: url(/static/img/delete.png) 0 0 no-repeat;
+    position: relative; top: -1px;
+}
+.tag-editor .tag-editor-delete:hover i { background-position: 0 -14px; }
+.tag-editor .tag-editor-tag.active+.tag-editor-delete,
+.tag-editor .tag-editor-tag.active+.tag-editor-delete i { background: none; cursor: text; }
+
+.tag-editor .tag-editor-tag.active { background: none !important; }
+
+/* jQuery UI autocomplete - code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css */
+.ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; font-size: 14px; }
+.ui-front { z-index: 9999; }
+.ui-menu { list-style: none; padding: 1px; margin: 0; display: block; outline: none; }
+.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.4; min-height: 0; /* support: IE7 */ }
+.ui-widget-content { border: 1px solid #bbb; background: #fff; color: #555; }
+.ui-widget-content a { color: #46799b; }
+.ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus { background: #e0eaf1; }
+.ui-helper-hidden-accessible { display: none; }

static/src/img/delete.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?
+<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" y="0px" xml:space="preserve" height="7" viewBox="0 0 6.8000018 7.0000004" width="6.8" version="1.1" enable-background="new 0 0 16 16" x="0px">
+<path id="path4" fill="#d40000" d="m3.9834,3.5,2.6753-2.6753c0.18847-0.18847,0.18847-0.49485,0-0.68332-0.18846-0.18847-0.49485-0.18847-0.68332,0l-2.6754,2.6751-2.6753-2.6752c-0.18847-0.18847-0.49485-0.18847-0.68332,0-0.18847,0.18846-0.18847,0.49485,0,0.68332l2.6751,2.6753-2.6751,2.6752c-0.18847,0.18847-0.18847,0.49485,0,0.68332s0.49485,0.18847,0.68332,0l2.6753-2.6752,2.6752,2.6753c0.18847,0.18847,0.49485,0.18847,0.68332,0s0.18847-0.49485,0-0.68332l-2.6752-2.6753z"/>
+</svg>

static/src/js/app/admin/contest/contest.js

@@ -1,6 +1,5 @@
 require(["jquery", "avalon", "editor", "uploader", "datetimepicker",
-        "validation"
+        "validation","tagEditor"],
-    ],
     function ($, avalon, editor, uploader) {
         avalon.vmodels.add_contest = null;
         $("#add-contest-form")
@@ -19,7 +18,7 @@ require(["jquery", "avalon", "editor", "uploader", "datetimepicker",
                             }
                         }
                     },
-                    description:{
+                    description: {
                         validators: {
                             notEmpty: {
                                 message: "请输入描述"
@@ -100,13 +99,20 @@ require(["jquery", "avalon", "editor", "uploader", "datetimepicker",
             })
             .on("success.form.fv", function (e) {
                 e.preventDefault();
-                var data = {title: vm.title, description: vm.description, start_time: vm.startTime, end_time: vm.endTime,
+                var data = {
-                                password: vm.password, model: vm.model, open_rank: vm.openRank, problems:[]};
+                    title: vm.title, description: vm.description, start_time: vm.startTime, end_time: vm.endTime,
+                    password: vm.password, model: vm.model, open_rank: vm.openRank, problems: []
+                };
                 for (var i = 0; i < vm.problems.length; i++) {
-                    var problem = {title: vm.problems[i].title, description:vm.problems[i].description,
+                    var problem = {
-                                  cpu:vm.problems[i].cpu, memory:vm.problems[i].memory,samples:[]};
+                        title: vm.problems[i].title, description: vm.problems[i].description,
+                        cpu: vm.problems[i].cpu, memory: vm.problems[i].memory, samples: []
+                    };
                     for (var j = 0; j < vm.problems[i].samples.length; j++) {
-                        problem.samples.push({input:vm.problems[i].samples[j].input, output:vm.problems[i].samples[j].output})
+                        problem.samples.push({
+                            input: vm.problems[i].samples[j].input,
+                            output: vm.problems[i].samples[j].output
+                        })
                     }
                     data.problems.push(problem);
                 }
@@ -119,11 +125,13 @@ require(["jquery", "avalon", "editor", "uploader", "datetimepicker",
                 text += possible.charAt(Math.floor(Math.random() * possible.length));
             return text;
         }
+
+
         var editor1 = editor("#editor");
 
         var vm = avalon.define({
             $id: "add_contest",
-            title : "",
+            title: "",
             description: "",
             startTime: "",
             endTime: "",
@@ -133,10 +141,43 @@ require(["jquery", "avalon", "editor", "uploader", "datetimepicker",
             problems: [],
             add_problem: function () {
                 var problem_id = make_id();
-                var problem={id: problem_id, title: "", cpu: "", memory: "", description: "",samples: [], webuploader: {}, visible: true};
+                var problem = {
+                    id: problem_id,
+                    title: "",
+                    cpu: "",
+                    memory: "",
+                    description: "",
+                    samples: [],
+                    visible: true,
+                    test_case_id: "",
+                    testCaseList: [],
+                    hint: "",
+                    isVisible: false,
+                    difficulty: 0,
+                    tags: [],
+                    tag: ""
+                };
                 vm.problems.push(problem);
-                uploader("#problem-" + problem_id + "-uploader","");
+                var id = vm.problems.length - 1;
-                editor("#problem-" + problem_id + "-description")
+                editor("#problem-" + problem_id + "-description");
+                var hinteditor = editor("#problem-" + problem_id +"-hint");
+                $("#problem-" + problem_id +"-tags").tagEditor();
+                uploader("#problem-" + problem_id + "-uploader", "/api/admin/test_case_upload/", function (file, respond) {
+                    console.log(respond);
+                    if (respond.code)
+                        bs_alert(respond.data);
+                    else {
+                        vm.problems[id].test_case_id = respond.data.test_case_id;
+                        vm.problems[id].uploadSuccess = true;
+                        vm.problems[id].testCaseList = [];
+                        for (var i = 0; i < respond.data.file_list.input.length; i++) {
+                            vm.problems[id].push({
+                                input: respond.data.file_list.input[i],
+                                output: respond.data.file_list.output[i]
+                            });
+                        }
+                    }
+                });
                 $("#add-contest-form").formValidation('addField', $('[name="problem_name[]"]'));
                 $("#add-contest-form").formValidation('addField', $('[name="cpu[]"]'));
                 $("#add-contest-form").formValidation('addField', $('[name="memory[]"]'));

static/src/js/config.js

@@ -17,6 +17,7 @@ var require = {
         csrf: "utils/csrf",
         admin: "app/admin/admin",
         chart: "lib/chart/Chart",
+        tagEditor: "lib/tagEditor/jquery.tag-editor.min",
 
         //formValidation 不要在代码中单独使用，而是使用和修改utils/validation
         base: "lib/formValidation/base",

template/admin/contest/add_contest.html

@@ -101,26 +101,40 @@
                                            ms-duplex="problem.title">
                                 </div>
                             </div>
-                            <div class="col-md-6">
-                                <label>cpu</label>
-                            </div>
-                            <div class="col-md-6">
-                                <label>内存</label>
-                            </div>
-                            <div class="col-md-6">
-                                <div class="form-group">
-                                    <input type="text" name="cpu[]" class="form-control" ms-duplex="problem.cpu">
-                                </div>
-                            </div>
-                            <div class="col-md-6">
-                                <div class="form-group">
-                                    <input type="text" name="memory[]" class="form-control" ms-duplex="problem.memory">
-                                </div>
-                            </div>
                             <label>题目描述</label>
                             <textarea ms-attr-id="problem-{{ problem.id }}-description" placeholder="这里输入内容"
                                       ms-duplex="problem.description"></textarea>
                             <small ms-visible="problem.description==''" style="color:red">请填写题目描述</small>
+                            <div class="form-group">
+                                <label>提示</label>
+                                <textarea ms-attr-id="problem-{{ problem.id }}-hint" placeholder="这里输入内容" ms-duplex="problem.hint"></textarea>
+                            </div>
+
+                            <div class="col-md-3">
+                                <div class="form-group"><label>cpu</label>
+                                    <input type="number" name="cpu[]" class="form-control" ms-duplex="problem.cpu">
+                                </div>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="form-group"><label>内存</label>
+                                    <input type="number" name="memory[]" class="form-control" ms-duplex="problem.memory">
+                                </div>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="form-group"><label>难度</label>
+                                    <input type="number" name="difficulty[]" class="form-control" ms-duplex="problem.difficulty">
+                                </div>
+                            </div>
+                            <div class="col-md-3 form-group">
+                                <label>前台是否可见</label><br>
+                                <label><input type="checkbox" ms-duplex-checked="problem.isVisible">
+                                    <small> 可见</small>
+                                </label>
+                            </div>
+                            <div id="tag" class="col-md-12">
+                                <label>标签</label><br>
+                                <input type="text" ms-attr-id="problem-{{ problem.id }}-tags" >
+                            </div>
                             <div class="col-md-12">
 
                                 <label>样例</label>
@@ -156,7 +170,8 @@
                                             <div class="col-md-6">
                                                 <div class="form-group">
                                                     <label>样例输出</label>
-                                                    <textarea class="form-control" rows="5" ms-duplex="sample.output"></textarea>
+                                                    <textarea class="form-control" rows="5"
+                                                              ms-duplex="sample.output"></textarea>
                                                 </div>
                                             </div>
                                         </div>
@@ -164,7 +179,22 @@
                                 </div>
                             </div>
                             <div class="col-md-12">
-                                <label>测试数据</label>
+                                <label>测试数据</label><br>
+                                <small class="text-info">请将所有测试用例打包在一个文件中上传，所有文件要在压缩包的根目录，且输入输出文件名要以从1开始连续数字标识要对应例如：<br>
+                                    1.in 1.out 2.in 2.out
+                                </small>
+                                <table class="table table-striped" ms-visible="uploadSuccess">
+                                    <tr>
+                                        <td>编号</td>
+                                        <td>输入文件名</td>
+                                        <td>输出文件名</td>
+                                    </tr>
+                                    <tr ms-repeat="testCaseList">
+                                        <td>{{$index}}</td>
+                                        <td>{{el.input}}</td>
+                                        <td>{{el.output}}</td>
+                                    </tr>
+                                </table>
                             </div>
                             <div class="col-md-12">
                                 <div class="form-group">
@@ -185,3 +215,4 @@
 </div>
 
 <script src="/static/js/app/admin/contest/contest.js"></script>
+<link href="/static/css/tagEditor/jquery.tag-editor.css" rel="stylesheet">

template/admin/problem/add_problem.html

@@ -12,7 +12,7 @@
             </div>
             <div class="form-group">
                 <label>提示</label>
-                <textarea id="hint" placeholder="这里输入内容" autofocus ms-duplex="hint"></textarea>
+                <textarea id="hint" placeholder="这里输入内容" ms-duplex="hint"></textarea>
             </div>
 
             <div class="col-md-3">