统一部分样式和写法

This commit is contained in:
virusdefender 2016-08-20 14:26:41 +08:00
parent 976a66abc6
commit 37f12b6bb2
10 changed files with 184 additions and 56 deletions

View File

@ -24,6 +24,10 @@
@import "../../static/css/bootstrap.css";
@import "../../static/css/todc-bootstrap.css";
label {
font-size: 16px;
}
</style>
<script>

View File

@ -9,7 +9,7 @@
<div class="form-group col-md-12">
<label>{{ $t("adminUtils.description") }}</label>
<simditor></simditor>
<simditor v-ref:problemdescription></simditor>
</div>
<div class="col-md-3">
@ -45,32 +45,36 @@
<tag-input :tag-list.sync="tagList"></tag-input>
</div>
<problem-sample v-ref:sample></problem-sample>
<test-case-mgnt v-ref:testcase></test-case-mgnt>
<problem-sample :samples.sync="samples"></problem-sample>
<test-case-mgnt :mode="mode" :test-case-list="testCaseList"></test-case-mgnt>
<div class="col-md-12">
<code-mirror></code-mirror>
<label>Special Judge</label>
<code-mirror :selected-language-name="selectedLanguageName" :language-list="languageList"></code-mirror>
</div>
</div>
</template>
<script>
import testCaseMgnt from "./testCaseMgnt.vue"
import problemSample from "./problemSample.vue"
import testCaseMgnt from "../utils/testCaseMgnt.vue"
import problemSample from "../utils/problemSample.vue"
import back from "../utils/back.vue"
import simditor from "../utils/simditor.vue"
import tagInput from "../utils/tagInput.vue"
import codeMirror from "../utils/codeMirror.vue"
import help from "../utils/help.vue"
import helpLink from "../utils/helpLink.vue"
export default({
data() {
return {
tagList: ["1234", "呵呵哒"]
tagList: ["1234", "呵呵哒"],
selectedLanguageName: "C",
languageList: [{name: "C", description: "xxxxxx"}],
samples: [{input: "", output: "", visible: true}],
mode: "ACM",
testCaseList: [{input_name: "1.in", output_name: "1.out"}]
}
},
components: {
@ -80,10 +84,8 @@
simditor,
tagInput,
codeMirror,
help
},
ready() {
this.$refs.testcase.setTestCase([{input_name: "1.in", output_name: "1.out"}], false);
help,
helpLink
}
})
</script>

View File

@ -0,0 +1,9 @@
<template>
<div class="col-md-12">
<code-mirror></code-mirror>
</div>
</template>
<script>
import codeMirror from "../utils/codeMirror.vue"
</script>

View File

@ -1,27 +1,82 @@
<template>
<textarea id="{{ editorId }}"></textarea>
<div>
<div>
<p>{{ $t("problem.chooseLanguage") }}</p>
<div id="language-radio">
<template v-for="language in languageList">
<span class="radio-inline">
<input type="radio" value="{{ language.name }}" name="language" v-model="selectedLanguageName">
{{ language.name }} ({{ language.description }})
</span>
</template>
</div>
</div>
<div>
<p>{{ $t("problem.submitCode") }}</p>
<textarea id="{{ editorId }}"></textarea>
</div>
</div>
</template>
<script>
import CodeMirror from "codemirror"
import "codemirror/mode/javascript/javascript"
import "codemirror/mode/python/python"
import "codemirror/mode/clike/clike"
import "codemirror/mode/meta"
function getMime(languageName) {
for (let item of CodeMirror.modeInfo) {
if (item.name == languageName) {
return item.mime;
}
}
throw "Invalid language " + languageName;
}
export default({
props: {
languageList: {
type: Array,
required: true,
},
selectedLanguageName: {
type: String,
required: true,
}
},
data() {
return {
editor: {},
editorId: Math.random().toString(36).substr(2),
language: "python"
}
},
watch: {
language(newVal, oldVal) {
this.editor.setOption("mode", getMime(newVal.name))
}
},
attached() {
CodeMirror.fromTextArea(document.getElementById(this.editorId), {
this.editor = CodeMirror.fromTextArea(document.getElementById(this.editorId), {
lineNumbers: true,
mode: this.language,
mode: getMime(this.selectedLanguageName),
indentUnit: 4,
matchBrackets: true
});
},
methods: {
setLanguage(languageName) {
this.selectedLanguageName = languageName;
},
setCode(code) {
this.editor.setValue(code);
},
getCode() {
return this.editor.getValue();
},
getLanguage() {
return this.selectedLanguageName;
}
}
})
</script>
@ -42,4 +97,8 @@
position: relative;
outline: none;
}
#language-radio {
margin: 5px;
}
</style>

View File

@ -12,7 +12,10 @@
export default({
props: {
name: ""
name: {
type: String,
required: true
}
},
methods: {
translate() {

View File

@ -0,0 +1,14 @@
<template>
<a href="{{ link }}" target="_blank"><span class="glyphicon glyphicon-link"></span></a>
</template>
<script>
export default ({
props: {
link: {
type: String,
required: true
}
}
})
</script>

View File

@ -18,13 +18,13 @@
<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>
<p>{{ $t("problem.sample") }}{{ $t("adminUtils.input") }}</p>
<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>
<p>{{ $t("problem.sample") }}{{ $t("adminUtils.output") }}</p>
<textarea class="form-control" rows="5" required></textarea>
</div>
</div>
@ -36,9 +36,10 @@
<script>
export default({
data() {
return {
samples: [{input: "", output: "", visible: true}]
props: {
samples: {
type: Array,
required: true
}
},
methods: {
@ -70,8 +71,14 @@
})
</script>
<style>
<style scoped>
.add-sample-btn {
margin-bottom: 5px;
}
.panel-heading {
padding-bottom: 8px;
}
.panel-body {
padding-top: 5px;
}
</style>

View File

@ -19,12 +19,14 @@
props: {
tagList: {
type: Array,
required: false,
default: ()=>{
return []
}
},
tagAutoCompleteList: {
type: Array,
required: false,
default: ()=>{
return []
}
@ -32,20 +34,20 @@
},
data () {
return {
text: '',
text: "",
}
},
methods: {
addTag (text) {
if (text.trim() != '') {
if (text.trim() != "" && this.tagList.indexOf(text.trim()) == -1) {
var count = this.tagList.length;
this.tagList.$set(count, text);
this.text = ''
}
this.text = ""
},
delTag (index, way) {
if (way) {
if (index >= 0 && this.text == '') {
if (index >= 0 && this.text == "") {
this.tagList.splice(index, 1)
}
} else {
@ -110,4 +112,4 @@
.tags-transition {
transition: all .3s ease;
}
</style>
</style>

View File

@ -2,21 +2,29 @@
<div class="col-md-12">
<label>
{{ $t("problem.testCase") }}
<a href="https://github.com/QingdaoU/OnlineJudge/wiki/%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B%E4%B8%8A%E4%BC%A0"
target="_blank">{{ $t("adminUtils.help") }}
</a>
<a v-show="downloadUrl" v-bind:href="downloadUrl">{{ $t("adminUtils.download") }}</a>
<help-link :link="https://github.com/QingdaoU/OnlineJudge/wiki/%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B%E4%B8%8A%E4%BC%A0"></help-link>
<a v-show="downloadURL" v-bind:href="downloadURL">{{ $t("adminUtils.download") }}</a>
</label>
<br>
<input type="checkbox" v-model="OIMode"> {{ $t("problem.OIMode") }}
<br>
<label>{{ $t("problem.uploadProgress") }}</label>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar " aria-valuenow="{{ uploadProgress }}"
aria-valuemin="0"
aria-valuemax="100"
v-bind:style="{width: uploadProgress+'%'}">
{{ uploadProgress }} %
<div>
<div class="form-group">
<p>{{ $t("problem.mode") }}</p>
<div>
<span class="radio-inline"><input type="radio" name="mode" value="ACM" checked>{{ $t("problem.ACMMode") }}</span>
<span class="radio-inline"><input type="radio" name="mode" value="OI">{{ $t("problem.OIMode") }}</span>
</div>
</div>
</div>
<div>
<p>{{ $t("problem.uploadProgress") }}</p>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar " aria-valuenow="{{ uploadProgress }}"
aria-valuemin="0"
aria-valuemax="100"
v-bind:style="{width: uploadProgress+'%'}">
{{ uploadProgress }} %
</div>
</div>
</div>
@ -31,7 +39,8 @@
<td>{{ $index + 1 }}</td>
<td>{{ testCase.input_name }}</td>
<td>{{ testCase.output_name }}</td>
<td v-if="OIMode"><input class="score" v-model="testCase.score" type="number" min="1" required></td>
<td v-if="mode == 'OI'"><input class="score" v-model="testCase.score" type="number" min="1" required>
</td>
</tr>
</table>
<div class="form-group">
@ -47,18 +56,34 @@
<script>
import uploader from "../utils/uploader.vue"
import helpLink from "../utils/helpLink.vue"
export default({
props: {
downloadURL: {
type: String,
required: false,
default() {
return ""
}
},
testCaseList: {
type: Array,
required: true
},
mode: {
type: String,
required: true
}
},
data() {
return {
downloadUrl: "",
uploadProgress: 0,
testCaseList: [],
OIMode: false
}
},
components: {
uploader
uploader,
helpLink
},
methods: {
uploadSuccess(f, response){
@ -66,13 +91,12 @@
},
uploadError(f, reason){
this.uploadProgress = 0;
alert($t("request.error"));
alert(this.$t("request.error"));
},
setTestCase(mode, testCaseList) {
this.OIMode = mode == "OI";
// attr must be set firstly so vue can track it's changes
if (this.OIMode) {
for(let item of testCaseList) {
if (this.mode == "OI") {
for (let item of testCaseList) {
item.score = 0;
}
}
@ -80,8 +104,8 @@
},
getTestCase() {
var testCaseList = this.testCaseList;
if (!this.OIMode) {
for(let item of testCaseList) {
if (this.mode != "OI") {
for (let item of testCaseList) {
delete item.score;
}
}

View File

@ -65,7 +65,9 @@ export default {
deleteThisSample: "删除这组样例?",
testCase: "测试用例",
uploadProgress: "上传进度",
mode: "模式",
OIMode: "OI模式",
ACMMode: "ACM模式",
score: "分数",
timeLimit: "时间限制",
memoryLimit: "内存限制",
@ -73,7 +75,9 @@ export default {
hard: "难",
medium: "中等",
easy: "简单",
difficulty: "难度"
difficulty: "难度",
chooseLanguage: "选择语言",
submitCode: "提交代码"
},
tag: {
hint: "回车创建标签"