[前端]添加比后台比赛列表[CI SKIP]
This commit is contained in:
esp
252
static/src/js/app/admin/contest/add_contest.js
Normal file
252
static/src/js/app/admin/contest/add_contest.js
Normal file
@@ -0,0 +1,252 @@
|
||||
require(["jquery", "avalon", "editor", "uploader", "bsAlert", "csrfToken", "datetimePicker",
|
||||
"formValidation",],
|
||||
function ($, avalon, editor, uploader, bsAlert, csrfTokenHeader) {
|
||||
avalon.vmodels.add_contest = null;
|
||||
$("#add-contest-form")
|
||||
.formValidation({
|
||||
framework: "bootstrap",
|
||||
fields: {
|
||||
name: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: "请填写比赛名称"
|
||||
},
|
||||
stringLength: {
|
||||
min: 1,
|
||||
max: 30,
|
||||
message: "名称不能超过30个字"
|
||||
}
|
||||
}
|
||||
},
|
||||
description: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: "请输入描述"
|
||||
}
|
||||
}
|
||||
},
|
||||
start_time: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: "请填写开始时间"
|
||||
|
||||
},
|
||||
date: {
|
||||
format: "YYYY-MM-DD h:m",
|
||||
message: "请输入一个正确的日期格式"
|
||||
}
|
||||
}
|
||||
},
|
||||
end_time: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: "请填写结束时间"
|
||||
},
|
||||
date: {
|
||||
format: "YYYY-MM-DD h:m",
|
||||
message: "请输入一个正确的日期格式"
|
||||
}
|
||||
}
|
||||
},
|
||||
password: {
|
||||
validators: {
|
||||
stringLength: {
|
||||
min: 0,
|
||||
max: 30,
|
||||
message: "密码不能超过10个字符"
|
||||
}
|
||||
}
|
||||
},
|
||||
"problem_name[]": {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: "请输入题目名称"
|
||||
},
|
||||
stringLength: {
|
||||
min: 1,
|
||||
max: 30,
|
||||
message: "题目不能超过30个字符"
|
||||
}
|
||||
}
|
||||
},
|
||||
"cpu[]": {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: "请输入时间限制"
|
||||
},
|
||||
integer: {
|
||||
message: "时间限制用整数表示"
|
||||
},
|
||||
between: {
|
||||
inclusive: true,
|
||||
min: 1,
|
||||
max: 5000,
|
||||
message: "只能在1-5000之间"
|
||||
}
|
||||
}
|
||||
},
|
||||
"memory[]": {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: "请输入内存"
|
||||
},
|
||||
integer: {
|
||||
message: "请输入一个合法的数字"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.on("success.form.fv", function (e) {
|
||||
e.preventDefault();
|
||||
var data = {
|
||||
title: vm.title,
|
||||
description: vm.description,
|
||||
start_time: vm.startTime,
|
||||
end_time: vm.endTime,
|
||||
password: vm.password,
|
||||
mode: vm.model,
|
||||
show_rank: vm.openRank
|
||||
};
|
||||
$.ajax({
|
||||
beforeSend: csrfTokenHeader,
|
||||
url: "/api/admin/contest/",
|
||||
dataType: "json",
|
||||
data: data,
|
||||
method: "post",
|
||||
contentType: "application/json",
|
||||
success: function (data) {
|
||||
if (!data.code) {
|
||||
bsAlert("添加成功！");
|
||||
console.log(data);
|
||||
}
|
||||
else {
|
||||
bsAlert(data.data);
|
||||
console.log(data);
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log(data);
|
||||
});
|
||||
function make_id() {
|
||||
var text = "";
|
||||
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
for (var i = 0; i < 5; i++)
|
||||
text += possible.charAt(Math.floor(Math.random() * possible.length));
|
||||
return text;
|
||||
}
|
||||
var upLoaderInited = false;
|
||||
editor("#editor");
|
||||
|
||||
var vm = avalon.define({
|
||||
$id: "add_contest",
|
||||
title: "",
|
||||
problemCount: 0,
|
||||
description: "",
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
password: "",
|
||||
model: "",
|
||||
openRank: false,
|
||||
problems: [],
|
||||
problemNo: "-1",
|
||||
add_problem: function () {
|
||||
var problem_id = make_id();
|
||||
var problem = {
|
||||
id: problem_id,
|
||||
title: "",
|
||||
cpu: 1000,
|
||||
memory: 256,
|
||||
description: "",
|
||||
samples: [],
|
||||
visible: true,
|
||||
test_case_id: "",
|
||||
testCaseList: [],
|
||||
hint: "",
|
||||
difficulty: 0,
|
||||
uploadSuccess: false
|
||||
};
|
||||
vm.problems.push(problem);
|
||||
var id = vm.problems.length - 1;
|
||||
editor("#problem-" + problem_id + "-description");
|
||||
var hinteditor = editor("#problem-" + problem_id +"-hint");
|
||||
$("#add-contest-form").formValidation('addField', $('[name="problem_name[]"]'));
|
||||
$("#add-contest-form").formValidation('addField', $('[name="cpu[]"]'));
|
||||
$("#add-contest-form").formValidation('addField', $('[name="memory[]"]'));
|
||||
},
|
||||
del_problem: function (problem) {
|
||||
if (confirm("你确定要删除么?")) {
|
||||
vm.problems.remove(problem);
|
||||
}
|
||||
},
|
||||
toggle: function (item) {
|
||||
item.visible = !item.visible;
|
||||
},
|
||||
add_sample: function (problem) {
|
||||
problem.samples.push({id: make_id(), visible: true, input: "", output: ""});
|
||||
},
|
||||
del_sample: function (problem, sample) {
|
||||
if (confirm("你确定要删除么?")) {
|
||||
problem.samples.remove(sample);
|
||||
}
|
||||
},
|
||||
getBtnContent: function (item) {
|
||||
if (item.visible)
|
||||
return "折叠";
|
||||
return "展开";
|
||||
}
|
||||
});
|
||||
|
||||
uploader("#uploader", "/api/admin/test_case_upload/", function (file, respond) {
|
||||
if (respond.code)
|
||||
bsAlert(respond.data);
|
||||
else {
|
||||
var index = parseInt(vm.problemNo)-1;
|
||||
vm.problems[index].test_case_id = respond.data.test_case_id;
|
||||
vm.problems[index].uploadSuccess = true;
|
||||
vm.problems[index].testCaseList = [];
|
||||
for (var i = 0; i < respond.data.file_list.input.length; i++) {
|
||||
vm.problems[index].testCaseList.push({
|
||||
input: respond.data.file_list.input[i],
|
||||
output: respond.data.file_list.output[i]
|
||||
});
|
||||
}
|
||||
bsAlert("测试数据添加成功！共添加"+vm.problems[index].testCaseList.length +"组测试数据");
|
||||
}
|
||||
},
|
||||
function(){
|
||||
console.log(vm.problemNo);
|
||||
if (vm.problemNo == "-1")
|
||||
{
|
||||
bsAlert("你还未指定一道题目！");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
);
|
||||
isUploaderInited = true;
|
||||
|
||||
avalon.scan();
|
||||
|
||||
$("#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"
|
||||
});
|
||||
$("#contest_start_time").datetimepicker()
|
||||
.on("hide", function (ev) {
|
||||
$("#add-contest-form")
|
||||
.formValidation("revalidateField", "start_time");
|
||||
});
|
||||
$("#contest_end_time").datetimepicker()
|
||||
.on("hide", function (ev) {
|
||||
$("#add-contest-form")
|
||||
.formValidation("revalidateField", "end_time");
|
||||
});
|
||||
});
|
||||
87
static/src/js/app/admin/contest/contest_list.js
Normal file
87
static/src/js/app/admin/contest/contest_list.js
Normal file
@@ -0,0 +1,87 @@
|
||||
require(["jquery", "avalon", "csrfToken", "bsAlert", "editor", "datetimePicker"], function ($, avalon, csrfTokenHeader, bsAlert, editor) {
|
||||
|
||||
avalon.ready(function () {
|
||||
if(avalon.vmodels.contestList){
|
||||
vm = avalon.vmodels.contestList;
|
||||
vm.editingContest = 0;
|
||||
}
|
||||
else {
|
||||
var vm = avalon.define({
|
||||
$id: "contestList",
|
||||
contestList: [],
|
||||
previousPage: 0,
|
||||
nextPage: 0,
|
||||
page: 1,
|
||||
totalPage: 1,
|
||||
keyword: "",
|
||||
editingContestId: 0,
|
||||
editTitle: "",
|
||||
getNext: function () {
|
||||
if (!vm.nextPage)
|
||||
return;
|
||||
getPageData(vm.page + 1);
|
||||
},
|
||||
getPrevious: function () {
|
||||
if (!vm.previousPage)
|
||||
return;
|
||||
getPageData(vm.page - 1);
|
||||
},
|
||||
getBtnClass: function (btn) {
|
||||
if (btn == "next") {
|
||||
return vm.nextPage ? "btn btn-primary" : "btn btn-primary disabled";
|
||||
}
|
||||
else {
|
||||
return vm.previousPage ? "btn btn-primary" : "btn btn-primary disabled";
|
||||
}
|
||||
},
|
||||
getPage: function (page_index) {
|
||||
getPageData(page_index);
|
||||
},
|
||||
showEditContestArea: function (contestId) {
|
||||
if (contestId == vm.editingContestId)
|
||||
vm.editingContestId = 0;
|
||||
else {
|
||||
vm.editingContestId = contestId;
|
||||
vm.editTitle = vm.contestList[contestId-1].title;
|
||||
editor("#editor").setValue(vm.contestList[contestId-1].description);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
getPageData(1);
|
||||
}
|
||||
|
||||
function getPageData(page) {
|
||||
/*
|
||||
var url = "/api/admin/contest/?paging=true&page=" + page + "&page_size=10";
|
||||
if (vm.keyword != "")
|
||||
url += "&keyword=" + vm.keyword;
|
||||
$.ajax({
|
||||
url: url,
|
||||
dataType: "json",
|
||||
method: "get",
|
||||
success: function (data) {
|
||||
if (!data.code) {
|
||||
vm.contestList = data.data.results;
|
||||
vm.totalPage = data.data.total_page;
|
||||
vm.previousPage = data.data.previous_page;
|
||||
vm.nextPage = data.data.next_page;
|
||||
vm.page = page;
|
||||
}
|
||||
else {
|
||||
bsAlert(data.data);
|
||||
}
|
||||
}
|
||||
});
|
||||
*/
|
||||
vm.contestList =[{id: 1, title:"The first contest", created_by: {username:"owen"}, description:"<p>this contest is just for<h1>fun</h1></p>"}];
|
||||
vm.totalPage = 1;
|
||||
vm.previousPage = false;
|
||||
vm.nextPage = false;
|
||||
vm.page = 1;
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
avalon.scan();
|
||||
});
|
||||
96
template/admin/contest/contest_list.html
Normal file
96
template/admin/contest/contest_list.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<div ms-controller="contestList" class="col-md-9">
|
||||
<h1>比赛列表</h1>
|
||||
|
||||
<div class="right">
|
||||
<form class="form-inline" onsubmit="return false;">
|
||||
<div class="form-group-sm">
|
||||
<label>搜索</label>
|
||||
<input name="keyWord" class="form-control" placeholder="请输入关键词" ms-duplex="keyword">
|
||||
<input type="submit" value="搜索" class="btn btn-primary" ms-click="getPage(1)">
|
||||
</div>
|
||||
</form>
|
||||
<br>
|
||||
</div>
|
||||
<table class="table table-striped">
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>比赛</th>
|
||||
<th>比赛类型</th>
|
||||
<th>比赛模式</th>
|
||||
<th>公开排名</th>
|
||||
<th>开始时间</th>
|
||||
<th>结束时间</th>
|
||||
<th>创建时间</th>
|
||||
<th>创建者</th>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr ms-repeat="contestList">
|
||||
<td>{{ el.id }}</td>
|
||||
<td>{{ el.title }}</td>
|
||||
<td>{{ el.type }}</td>
|
||||
<td>{{ el.mode }}</td>
|
||||
<td>{{ el.show_rank }}</td>
|
||||
<td>{{ el.start_time|date("yyyy-MM-dd HH:mm:ss")}}</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>
|
||||
<button class="btn-sm btn-info" ms-click="showEditContestArea($index+1)">详情</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="text-right">
|
||||
页数：{{ page }}/{{ totalPage }}
|
||||
<button ms-attr-class="getBtnClass('pre')" ms-click="getPrevious">上一页</button>
|
||||
<button ms-attr-class="getBtnClass('next')" ms-click="getNext">下一页</button>
|
||||
</div>
|
||||
<div ms-visible="editingContestId">
|
||||
<div class="col-md-12">
|
||||
<label>比赛名称</label>
|
||||
<input type="text" name="name" class="form-control" ms-duplex="editTitle">
|
||||
<label>说明</label>
|
||||
<textarea id="editor" placeholder="这里输入内容" autofocus ms-duplex="editDescription"></textarea>
|
||||
<small ms-visible="description==''" style="color:red">请填写比赛描述</small>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label>开始时间</label>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label>结束时间</label>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" name="start_time" id="contest_start_time"
|
||||
ms-duplex="editStartTime">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" name="editEnd_time" id="contest_end_time" ms-duplex="endTime">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label>密码保护</label>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label>模式</label>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label>结束前是否开放排名</label>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<input type="text" class="form-control" name="password" placeholder="留空就是公开赛" ms-duplex="editPassword">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label><input type="radio" name="mode" ms-duplex-checked="editMode">
|
||||
<small>OI</small>
|
||||
</label>
|
||||
<label><input type="radio" name="mode">
|
||||
<small>ACM</small>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label class="text"><input type="checkbox" ms-duplex-checked="editShowRank">
|
||||
<small>开放排名</small>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="/static/js/app/admin/contest/contest_list.js"></script>
|
||||
Reference in New Issue
Block a user