84 lines
2.8 KiB
Vue
84 lines
2.8 KiB
Vue
<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">
|
|
<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">
|
|
<p>{{ $t("problem.sample") }}{{ $t("adminUtils.output") }}</p>
|
|
<textarea class="form-control" rows="5" required></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default({
|
|
props: {
|
|
samples: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
},
|
|
methods: {
|
|
setSample(samples) {
|
|
for(let sample of samples) {
|
|
sample[visible] = false;
|
|
}
|
|
this.samples = samples;
|
|
},
|
|
getSample() {
|
|
var samples = this.samples;
|
|
for(let sample of samples) {
|
|
delete sample.visible;
|
|
}
|
|
return samples;
|
|
},
|
|
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 scoped>
|
|
.add-sample-btn {
|
|
margin-bottom: 5px;
|
|
}
|
|
.panel-heading {
|
|
padding-bottom: 8px;
|
|
}
|
|
.panel-body {
|
|
padding-top: 5px;
|
|
}
|
|
</style> |