[前端]修改比赛列表页面,添加了编辑比赛,编辑比赛题目[CI SKIP]

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

@@ -1,11 +1,66 @@
-require(["jquery", "avalon", "csrfToken", "bsAlert", "editor", "datetimePicker"], function ($, avalon, csrfTokenHeader, bsAlert, editor) {
+require(["jquery", "avalon", "csrfToken", "bsAlert", "editor", "datetimePicker", "validator"], function ($, avalon, csrfTokenHeader, bsAlert, editor) {
 
     avalon.ready(function () {
-        if(avalon.vmodels.contestList){
+
-            vm = avalon.vmodels.contestList;
+        avalon.vmodels.contestList=null;
-	    vm.editingContest = 0;
+
+        $("#edit-contest-form").validator().on('submit', function (e) {
+            if (!e.isDefaultPrevented()){
+                e.preventDefault();
+                var ajaxData = {
+                    id:                   vm.contestList[vm.editingContestId-1].id,
+                    title:                vm.editTitle,
+                    description:          vm.editDescription,
+				    mode:                 vm.editMode,
+				    contest_type:         0,
+                    show_rank:            vm.editShowRank,
+                    show_user_submission: vm.editShowSubmission,
+                    start_time:           vm.editStartTime,
+					end_time:             vm.editEndTime,
+					visible:              vm.editVisible
+				};
+				if (vm.choseGroupList.length == 0) {
+				    bsAlert("你没有选择参赛用户!");
+				    return false;
+				}
+				if (vm.choseGroupList[0].id == 0) //everyone | public contest
+				    if (vm.password == "")
+				        ajaxData.contest_type = 1;
+				    else{
+				        ajaxData.password = vm.password;
+				    }
+				else { // Add groups info
+				    ajaxData.groups = [];
+				    for (var i = 0; vm.choseGroupList[i]; i++)
+				        ajaxData.groups.push(parseInt(vm.choseGroupList[i].id))
+				}
+
+				console.log(ajaxData);
+				$.ajax({                                  // Add contest
+					beforeSend: csrfTokenHeader,
+					url: "/api/admin/contest/",
+					dataType: "json",
+					contentType: "application/json",
+					data: JSON.stringify(ajaxData),
+					method: "put",
+					contentType: "application/json",
+					success: function (data) {
+						if (!data.code) {
+						    bsAlert("修改成功!");
+							console.log(data);
+							vm.getPage(1);
 						}
 						else {
+							bsAlert(data.data);
+							console.log(data);
+						}
+					}
+				});
+				console.log(JSON.stringify(ajaxData));
+			}
+			return false;
+		});
+
         var vm = avalon.define({
             $id: "contestList",
             contestList: [],
@@ -15,9 +70,12 @@ require(["jquery", "avalon", "csrfToken", "bsAlert", "editor", "datetimePicker"]
             totalPage: 1,
             group: "-1",
             groupList: [],
+            choseGroupList: [],
+            passwordUsable: false,
             keyword: "",
 			editingContestId: 0,
 			editTitle: "",
+			editDescription: "",
 			editProblemList: [],
 			editPassword: "",
 			editStartTime: "",
@@ -26,12 +84,9 @@ require(["jquery", "avalon", "csrfToken", "bsAlert", "editor", "datetimePicker"]
             editShowRank: false,
             editShowSubmission: false,
             editProblemList: [],
-                editingProblemId: 0,
+            editVisible: false,
-                editSamples: [],
-                editTestCaseList: [],
             editChoseGroupList: [],
-				modelNameList: ["ACM", "AC总数", "分数"],
+            editingProblemContestIndex: 0,
-				contestTypeNameList: ["小组赛", "公开赛", "有密码保护的公开赛"],
             getNext: function () {
                 if (!vm.nextPage)
                     return;
@@ -59,35 +114,107 @@ require(["jquery", "avalon", "csrfToken", "bsAlert", "editor", "datetimePicker"]
 				else {
 					vm.editingContestId = contestId;
 					vm.editTitle     = vm.contestList[contestId-1].title;
-						vm.editEndTime = vm.contestList[contestId-1].end_time;
 					vm.editPassword  = vm.contestList[contestId-1].password;
-						vm.editStartTime = vm.contestList[contestId-1].start_time;
+					vm.editStartTime = vm.contestList[contestId-1].start_time.substring(0,16).replace("T"," ");
+					vm.editEndTime   = vm.contestList[contestId-1].end_time.substring(0,16).replace("T"," ");
 					vm.editMode      = vm.contestList[contestId-1].mode;
+					editVisible      = vm.contestList[contestId-1].visible;
 					vm.editChoseGroupList = [];
-						//= vm.contestList[contestId-1].group;//
+					for (var i = 0; i < vm.contestList[contestId-1].groups.length; i++){
-						/*for (var key in vm.contestList[contestId-1].groups){
+					    var id = parseInt(vm.contestList[contestId-1].groups[i]);
-						    var id = parseInt(vm.contestList[contestId-1].groups);
+					    var index = 0;
-						    for ()
+					    for (; vm.groupList[index]; index++) {
-						    vm.editChoseGroupList.push({
+					        if (vm.groupList[index].id == id)
-						        name:vm.groupList[vm.group].name,
+					            break;
+					    }
+					    vm.groupList[index].chose = true;
+				    	vm.choseGroupList.push({
+				           name:vm.groupList[i].name,
 						    index:index,
-						        id:parseInt(vm.contestList[contestId-1].groups)
+						    id:id
                         });
-						}*/
+                    }
                     vm.editShowRank = vm.contestList[contestId-1].show_rank;
                     vm.editShowSubmission = vm.contestList[contestId-1].show_user_submission;
-						//vm.editProblemList    = vm.contestList[contestId-1].problems
                     editor("#editor").setValue(vm.contestList[contestId-1].description);
-						vm.editingProblemList = vm.contestList[contestId-1].problemList;
+                    vm.editingProblemContestIndex = 0;
+			    }
+            },
+            showEditProblemArea: function(contestId) {
+                if (vm.editingProblemContestIndex == contestId) {
+                    vm.editingProblemContestIndex = 0;
+                    return;
+                }
+                if (vm.editingContestId&&!confirm("如果继续将丢失为保存的信息,是否继续?")){
+                    return;
+                }
+                $.ajax({      // Get the problem list of current contest
+                        beforeSend: csrfTokenHeader,
+                        url: "/api/admin/contest_problem/?contest_id=" + vm.contestList[contestId-1].id,
+                        method: "get",
+                        dataType: "json",
+                        success: function (data) {
+                            if (!data.code) {
+                                vm.editProblemList = data.data;
+                            }
+                            else {
+                                bsAlert(data.data);
                             }
                         }
                     });
-
+                vm.editingContestId = 0;
-            getPageData(1);
+                vm.editingProblemContestIndex = contestId;
+            },
+            addGroup: function() {
+                    if (vm.group == -1) return;
+                    if (vm.groupList[vm.group].id == 0){
+                        vm.passwordUsable = true;
+                        vm.choseGroupList = [];
+                        for (var key in vm.groupList){
+                            vm.groupList[key].chose = true;
                         }
+                    }
+                    vm.groupList[vm.group]. chose = true;
+                    vm.choseGroupList.push({name:vm.groupList[vm.group].name, index:vm.group, id:vm.groupList[vm.group].id});
+                    vm.group = -1;
+                },
+            removeGroup: function(groupIndex){
+                    if (vm.groupList[vm.choseGroupList[groupIndex].index].id == 0){
+                        vm.passwordUsable = false;
+                        for (key in vm.groupList){
+                            vm.groupList[key].chose = false;
+                        }
+                    }
+                    vm.groupList[vm.choseGroupList[groupIndex].index].chose = false;
+                    vm.choseGroupList.remove(vm.choseGroupList[groupIndex]);
+                },
+            add_problem: function () {
+                vm.$fire("up!showContestProblemPage", 0, vm.contestList[vm.editingProblemContestIndex-1].id);
+            },
+            showProblemEditor: function(el) {
+                console.log(el);
+                vm.$fire("up!showContestProblemPage", el.id, vm.contestList[vm.editingProblemContestIndex-1].id);
+            }
+        });
+        getPageData(1);
+        vm.editingContestId = 0;
+        vm.editingProblemContestIndex = 0;
+
+        //init time picker
+        $("#contest_start_time").datetimepicker({
+            format: "yyyy-mm-dd hh:ii",
+            minuteStep: 5,
+            weekStart: 1,
+            language: "zh-CN"
+        });
+        $("#contest_end_time").datetimepicker({
+            format: "yyyy-mm-dd hh:ii",
+            minuteStep: 5,
+            weekStart: 1,
+            language: "zh-CN"
+        });
 
         function getPageData(page) {
-
             var url = "/api/admin/contest/?paging=true&page=" + page + "&page_size=10";
             if (vm.keyword != "")
                 url += "&keyword=" + vm.keyword;
@@ -109,18 +236,26 @@ require(["jquery", "avalon", "csrfToken", "bsAlert", "editor", "datetimePicker"]
                 }
             });
         }
-
+        // Get group list
-        var isSuperAdmin = true;
+        $.ajax({  // Get current user type
-
+            url: "/api/user/",
-		$.ajax({      //用于获取该用户创建的所有小组的ajax请求
+            method: "get",
-
+            dataType: "json",
+            success: function (data) {
+                if (!data.code) {
+                    if (data.data.admin_type == 2) { // Is super user
+                        vm.isGlobal = true;
+						vm.groupList.push({id:0,name:"所有人",chose:false});
+                    }
+                    $.ajax({      // Get the group list of current user
+                        beforeSend: csrfTokenHeader,
                         url: "/api/admin/group/",
                         method: "get",
                         dataType: "json",
                         success: function (data) {
                             if (!data.code) {
                                 if (!data.data.length) {
-                            bsAlert("您的用户权限只能创建组内比赛，但是您还没有创建过小组");
+                                    //bsAlert("您的用户权限只能创建组内比赛，但是您还没有创建过小组");
                                     return;
                                 }
                                 for (var i = 0; i < data.data.length; i++) {
@@ -133,28 +268,12 @@ require(["jquery", "avalon", "csrfToken", "bsAlert", "editor", "datetimePicker"]
                                 bsAlert(data.data);
                             }
                         }
-
+                    });
-
-			beforeSend: csrfTokenHeader,
-			url: url,
-			dataType: "json",
-			method: "get",
-			contentType: "application/json",
-			success: function (data) {
-				if (!data.code) {
-				    if (isSuperAdmin)
-						vm.groupList.push({id:0, name:"所有人", chose: false});
-					for (var key in data.data) {
-						data.data[key].chose = false;
-						vm.groupList.push(data.data[key]);
-					}
-				}
-				else {
-					bsAlert(data.data);
-					console.log(data);
                 }
             }
         });
+
+
     });
     avalon.scan();
 });

template/admin/contest/contest_list.html

@@ -15,22 +15,23 @@
         <tr>
             <th>ID</th>
             <th>比赛</th>
-            <th>比赛类型</th>
             <th>公开排名</th>
-            <th>开始时间</th>
+            <th>可见</th>
-            <th>结束时间</th>
             <th>创建时间</th>
             <th>创建者</th>
+            <th></th>
         </tr>
-        <tr ms-repeat="contestList" ms-click="showEditContestArea($index+1)">
+        <tr ms-repeat="contestList">
             <td>{{ el.id }}</td>
             <td>{{ el.title }}</td>
-            <td>{{ contestTypeNameList[el.contest_type] }}</td>
             <td>{{ el.show_rank }}</td>
-            <td>{{ el.start_time|date("yyyy-MM-dd HH:mm:ss")}}</td>
+            <td>{{ el.visible }}</td>
-            <td>{{ el.end_time|date("yyyy-MM-dd HH:mm:ss")}}</td>
             <td>{{ el.create_time|date("yyyy-MM-dd HH:mm:ss")}}</td>
             <td>{{ el.created_by.username }}</td>
+            <td>
+                <a class="btn btn-info" href="javascript:void(0)" ms-click="showEditContestArea($index+1)">编辑</a>
+                <a class="btn btn-primary" href="javascript:void(0)" ms-click="showEditProblemArea($index+1)">编辑问题</a>
+            </td>
         </tr>
     </table>
     <div class="text-right">
@@ -39,6 +40,7 @@
         <button ms-attr-class="getBtnClass('next')" ms-click="getNext">下一页</button>
     </div>
     <div ms-visible="editingContestId">
+        <form id="edit-contest-form">
             <div class="col-md-12">
                 <label>比赛名称</label>
             </div>
@@ -56,37 +58,34 @@
             <div class="col-md-12">
                 <div class="form-group">
                     <textarea id="editor" placeholder="这里输入内容" autofocus ms-duplex="editDescription"></textarea>
+
                     <div class="help-block with-errors"></div>
-                <small ms-visible="description==''" style="color:red">请填写比赛描述</small>
+                    <small ms-visible="editDescription==''" style="color:red">请填写比赛描述</small>
                 </div>
             </div>
             <div class="col-md-6">
                 <label>开始时间</label>
-        </div>
+
-        <div class="col-md-6">
-            <label>结束时间</label>
-        </div>
-        <div class="col-md-6">
                 <div class="form-group">
                     <input type="text" class="form-control" name="start_time" id="contest_start_time"
                            ms-duplex="editStartTime" data-error="请填写比赛开始时间" required>
+
                     <div class="help-block with-errors"></div>
                 </div>
             </div>
             <div class="col-md-6">
+                <label>结束时间</label>
+
                 <div class="form-group">
                     <input type="text" class="form-control" name="end_time" id="contest_end_time"
                            ms-duplex="editEndTime" data-error="请填写比赛结束时间" required>
+
                     <div class="help-block with-errors"></div>
                 </div>
             </div>
             <div class="col-md-6">
                 <label>允许参加的用户</label>
-        </div>
+
-        <div class="col-md-6">
-            <label>密码保护</label>
-        </div>
-        <div class="col-md-6">
                 <div class="form-group">
                     <select class="form-control" name="password" ms-duplex="group" ms-change="addGroup" value="-1">
                         <option value="-1">请选择</option>
@@ -94,25 +93,25 @@
                     </select>
                 </div>
             </div>
-        <div class="col-md-6">
+            <div class="col-md-6" ms-visible="passwordUsable">
-            <div class="form-group">
+                <label>密码保护</label>
-                <input type="text" class="form-control" name="password" placeholder="留空就是公开赛" ms-duplex="editPassword"
+                <input type="text" class="form-control" name="password" placeholder="留空就是公开赛" ms-duplex="editPassword">
-                       ms-attr-readonly="!passwordUsable">
-            </div>
             </div>
             <div class="col-md-12">
-            <div ms-repeat="choseGroupList" class="group-tag" ms-click="unchose($index)">{{el.name}}</div>
+                <div ms-repeat="choseGroupList" class="group-tag" ms-click="removeGroup($index)">{{el.name}}</div>
             </div>
             <div class="col-md-6">
+
+            </div>
+            <div class="col-md-3">
+
+            </div>
+            <div class="col-md-3">
+
+            </div>
+            <div class="col-md-4">
                 <label>排名方式</label>
-        </div>
+
-        <div class="col-md-3">
-            <label>结束前是否开放排名</label>
-        </div>
-        <div class="col-md-3">
-            <label>是否公开提交记录</label>
-        </div>
-        <div class="col-md-6">
                 <div class="form-group">
                     <label><input type="radio" name="mode" ms-duplex-string="editMode" value="0">
                         <small>ACM</small>
@@ -125,7 +124,15 @@
                     </label>
                 </div>
             </div>
+            <div class="col-md-2">
+                <label>是否可见</label><br>
+                <label><input type="checkbox" ms-duplex-checked="editVisible">
+                    <small> 可见</small>
+                </label>
+            </div>
             <div class="col-md-3">
+                <label>结束前是否开放排名</label>
+
                 <div class="form-group">
                     <label class="text"><input type="checkbox" ms-duplex-checked="editShowRank">
                         <small>开放排名</small>
@@ -133,6 +140,8 @@
                 </div>
             </div>
             <div class="col-md-3">
+                <label>是否公开提交记录</label>
+
                 <div class="form-group">
                     <label class="text"><input type="checkbox" ms-duplex-checked="editShowSubmission">
                         <small>允许查看提交记录</small>
@@ -140,29 +149,33 @@
                 </div>
             </div>
             <div class="col-md-12">
-            <label>添加题目</label>
+                <button class="btn btn-primary" type="submit">保存修改</button>
-            <a href="javascript:void(0)" class="btn btn-primary btn-sm" ms-click="add_problem()">添加</a>
+            </div>
+        </form>
+    </div>
+    <div class="col-md-12" ms-visible="editingProblemContestIndex">
+        <label>题目列表</label>
+        <a href="javascript:void(0)" class="btn btn-success btn-sm" ms-click="add_problem()">添加</a>
         <table class="table table-striped">
             <tr>
                 <th>编号</th>
                 <th>题目</th>
-                    <th>测试数据</th>
+                <th>创建时间</th>
                 <td></td>
             </tr>
             <tr ms-repeat="editProblemList">
-                    <td>题目{{ $index+1 }}</td>
+                <td>{{ el.sort_index }}</td>
                 <td>{{ el.title }}</td>
-                    <td>{{ el.testCaseList.length }}组</td>
+                <td>{{ el.create_time|date("yyyy-MM-dd HH:mm:ss") }}</td>
                 <td>
                     <a href="javascript:void(0)" class="btn-sm btn-info"
-                           ms-click="showProblemEditArea($index+1)">编辑</a>
+                       ms-click="showProblemEditor(el)">编辑</a>
-                        <a href="javascript:void(0)" class="btn-sm btn-danger" ms-click="del_problem($index+1)">删除</a>
                 </td>
             </tr>
         </table>
 
     </div>
-    </div>
+
 
 </div>
 <script src="/static/js/app/admin/contest/contest_list.js"></script>