xuyue/OnlineJudge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加测试用例样例组件

Browse Source
This commit is contained in:
LiYang
2016-08-04 22:22:42 +08:00
parent 0d11603acc
commit 3881425463
7 changed files with 426 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

314
frontend/admin/index.html
View File

@@ -3,10 +3,320 @@
<head>
<meta charset="utf-8">
<title>Online Judge Admin</title>
<style>
.cssload-wraper{
width:0px;
display:block;
margin: 200px auto;
}
.cssload-dots {
font-family: sans-serif;
font-weight: 100;
}
.cssload-dots:not(:required) {
overflow: hidden;
position: relative;
text-indent: -19998px;
display: inline-block;
width: 14px;
height: 14px;
background: transparent;
border-radius: 100%;
box-shadow: rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
-o-box-shadow: rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
-ms-box-shadow: rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
-webkit-box-shadow: rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
-moz-box-shadow: rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
animation: cssload-dots 4.25s infinite ease-in-out;
-o-animation: cssload-dots 4.25s infinite ease-in-out;
-ms-animation: cssload-dots 4.25s infinite ease-in-out;
-webkit-animation: cssload-dots 4.25s infinite ease-in-out;
-moz-animation: cssload-dots 4.25s infinite ease-in-out;
transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
}
@keyframes cssload-dots {
0% {
box-shadow: white 0 0 30px 0, rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
}
8.33% {
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
}
16.67% {
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px 28px 0 14px, rgb(255,204,102) 28px 28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
}
25% {
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px 28px 0 14px, #44aaee -28px 28px 0 14px;
}
33.33% {
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee -28px -28px 0 14px;
}
41.67% {
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
50% {
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
58.33% {
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
66.67% {
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px -28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
75% {
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
83.33% {
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee 28px 28px 0 14px;
}
91.67% {
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
}
100% {
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
}
}
@-o-keyframes cssload-dots {
0% {
box-shadow: white 0 0 30px 0, rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
}
8.33% {
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
}
16.67% {
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px 28px 0 14px, rgb(255,204,102) 28px 28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
}
25% {
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px 28px 0 14px, #44aaee -28px 28px 0 14px;
}
33.33% {
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee -28px -28px 0 14px;
}
41.67% {
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
50% {
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
58.33% {
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
66.67% {
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px -28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
75% {
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
83.33% {
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee 28px 28px 0 14px;
}
91.67% {
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
}
100% {
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
}
}
@-ms-keyframes cssload-dots {
0% {
box-shadow: white 0 0 30px 0, rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
}
8.33% {
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
}
16.67% {
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px 28px 0 14px, rgb(255,204,102) 28px 28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
}
25% {
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px 28px 0 14px, #44aaee -28px 28px 0 14px;
}
33.33% {
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee -28px -28px 0 14px;
}
41.67% {
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
50% {
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
58.33% {
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
66.67% {
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px -28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
75% {
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
83.33% {
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee 28px 28px 0 14px;
}
91.67% {
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
}
100% {
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
}
}
@-webkit-keyframes cssload-dots {
0% {
box-shadow: white 0 0 30px 0, rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
}
8.33% {
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
}
16.67% {
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px 28px 0 14px, rgb(255,204,102) 28px 28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
}
25% {
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px 28px 0 14px, #44aaee -28px 28px 0 14px;
}
33.33% {
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee -28px -28px 0 14px;
}
41.67% {
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
50% {
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
58.33% {
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
66.67% {
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px -28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
75% {
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
83.33% {
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee 28px 28px 0 14px;
}
91.67% {
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
}
100% {
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
}
}
@-moz-keyframes cssload-dots {
0% {
box-shadow: white 0 0 30px 0, rgb(255,136,102) -28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
}
8.33% {
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px -28px 0 14px, rgb(255,204,102) 28px -28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
}
16.67% {
box-shadow: white 0 0 30px 0, rgb(255,136,102) 28px 28px 0 14px, rgb(255,204,102) 28px 28px 0 14px, rgb(102,221,119) 28px 28px 0 14px, rgb(68,170,238) -28px 28px 0 14px;
}
25% {
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px 28px 0 14px, #44aaee -28px 28px 0 14px;
}
33.33% {
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee -28px -28px 0 14px;
}
41.67% {
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
50% {
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
58.33% {
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 -28px 28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
66.67% {
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 -28px -28px 0 14px, #66dd77 -28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
75% {
box-shadow: white 0 0 30px 0, #ff8866 28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px -28px 0 14px, #44aaee 28px -28px 0 14px;
}
83.33% {
box-shadow: white 0 0 30px 0, #ff8866 28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee 28px 28px 0 14px;
}
91.67% {
box-shadow: white 0 0 30px 0, #ff8866 -28px 28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
}
100% {
box-shadow: white 0 0 30px 0, #ff8866 -28px -28px 0 14px, #ffcc66 28px -28px 0 14px, #66dd77 28px 28px 0 14px, #44aaee -28px 28px 0 14px;
}
}
</style>
</head>
<body>
<div class="cssload-battery">
<div class="cssload-liquid"></div>
<div class="cssload-wraper" id="loading">
<div class="cssload-dots"></div>
</div>
<div id="app">
</div>

2
frontend/admin/src/App.vue
View File

@@ -21,7 +21,7 @@
</template>
<style>
@import "../../static/css/loading.css";
@import "../../static/css/bootstrap.css";
@import "../../static/css/todc-bootstrap.css";

1
frontend/admin/src/components/announcement/editAnnouncement.vue
View File

@@ -46,7 +46,6 @@
visible: this.announcement.visible
}
});
return false;
}
},
route: {

13
frontend/admin/src/components/problem/problem.vue
View File

@@ -1,22 +1,15 @@
<template>
<div>
<simditor editorid="problem_detail"></simditor>
<uploader uploaderid="uploader"></uploader>
<problem-sample></problem-sample>
</div>
</template>
<script>
import simditor from "../utils/simditor.vue"
import uploader from "../utils/uploader.vue"
import problemSample from "./problemSample.vue"
export default({
components: {
simditor,
uploader
},
ready() {
alert("111111");
problemSample
}
})
</script>

64
frontend/admin/src/components/problem/problemSample.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div class="col-md-12"><br>
<label>{{ $t("problem.sample") }}</label>
<button class="btn btn-primary btn-sm add-sample-btn" v-on:click="addSample">{{ $t("problem.addSample") }}
</button>
<div>
<div class="panel panel-default" v-for="sample in samples">
<div class="panel-heading">
<span class="panel-title">{{ $t("problem.sample") }} {{ $index + 1 }}</span>
<button class="btn btn-primary btn-sm" v-on:click="toggleSample($index)">
{{ sample.visible?$t("problem.fold"):$t("problem.show") }}
</button>
<button class="btn btn-danger btn-sm" v-on:click="delSample($index)">
{{ $t("adminUtils.delete") }}
</button>
</div>
<div class="panel-body row" v-show="sample.visible">
<div class="col-md-6">
<div class="form-group">
<label>{{ $t("problem.sample") }}{{ $t("adminUtils.input") }}</label>
<textarea class="form-control" rows="5" required></textarea>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>{{ $t("problem.sample") }}{{ $t("adminUtils.output") }}</label>
<textarea class="form-control" rows="5" required></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default({
data() {
return {
samples: [{input: "12334", output: "111", visible: true}]
}
},
methods: {
addSample() {
this.samples.push({input: "", output: "", visible: true})
},
toggleSample(index) {
this.samples[index].visible = !this.samples[index].visible;
},
delSample(index) {
confirm(this.$t("problem.deleteThisSample"), ()=> {
this.samples.splice(index, 1)
});
}
}
})
</script>
<style>
.add-sample-btn {
margin-bottom: 5px;
}
</style>

16
frontend/admin/src/locales.js
View File

@@ -2,7 +2,9 @@ export default {
"zh-cn": {
alert: {
alert: "提示",
OK: "确定"
OK: "确定",
confirm: "确认",
cancel: "取消"
},
nav: {
userManagement: "用户管理",
@@ -49,8 +51,13 @@ export default {
editAnnouncement: "编辑公告",
createAnnouncement: "创建公告",
contentCanNotBeEmpty: "内容不能为空"
},
problem: {
sample: "样例",
addSample: "添加样例",
fold: "折叠",
show: "展开",
deleteThisSample: "删除这组样例?"
},
adminUtils: {
search: "搜索",
@@ -72,6 +79,9 @@ export default {
back: "返回",
saveChanges: "保存修改",
delete: "删除",
input: "输入",
output: "输出",
unsupportedBrowserWarningMsg: "当前网页 <strong>不支持</strong> 你正在使用的浏览器, 为了正常的访问,请到 <a href=\"http://browsehappy.com/\"> 升级你的浏览器</a>"
}

37
frontend/admin/src/main.js
View File

@@ -112,14 +112,17 @@ router.map({
"/announcement/edit/:announcementId": {
name: "editAnnouncement",
component: editAnnouncement
},
"/problem": {
component: problem
}
});
// hide loading
document.getElementsByClassName("cssload-battery")[0].style.display = "none";
document.getElementById("loading").style.display = "none";
// override window.alert
function bootboxAlert(content) {
window.alert = function bootboxAlert(content) {
bootbox.dialog({
message: content,
title: locale[lang].alert.alert,
@@ -130,8 +133,34 @@ function bootboxAlert(content) {
}
}
})
}
window.alert = bootboxAlert;
};
// override window.confirm
window.confirm = function bootboxConfirm(content, okCallback, cancelCallback) {
bootbox.dialog ({
message: content,
title: locale[lang].alert.confirm,
buttons: {
cancel: {
label: locale[lang].alert.cancel,
className: "btn-success",
callback: function() {
if(cancelCallback) {
return cancelCallback;
}
else {
return function(){};
}
}
},
main: {
label: locale[lang].alert.OK,
className: "btn-danger",
callback: okCallback
}
}
})
};
router.redirect({"/user": "/user/1"});
router.redirect({"/announcement": "/announcement/1"});