452 lines
18 KiB
HTML
452 lines
18 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block js_media %}
|
||
|
|
<script type="text/javascript">
|
||
|
|
window.valid_files = {{valid_files_json}};
|
||
|
|
|
||
|
|
$(function () {
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript" src="{{ static('libs/jquery-sortable.js') }}"></script>
|
||
|
|
<script type="text/javascript" src="{{ static('libs/featherlight/featherlight.min.js') }}"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
function update_select2() {
|
||
|
|
$('tbody:not(.extra-row-body) .type-column select').select2({
|
||
|
|
minimumResultsForSearch: -1
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
update_select2();
|
||
|
|
|
||
|
|
function autofill_if_exists($select, file) {
|
||
|
|
if (!$select.val() && ~window.valid_files.indexOf(file))
|
||
|
|
$select.val(file).trigger('change');
|
||
|
|
}
|
||
|
|
|
||
|
|
var $table = $('#case-table');
|
||
|
|
$table.on('add-row', function (e, $tr) {
|
||
|
|
update_select2();
|
||
|
|
$tr.find('input').filter('[id$=file]').each(function () {
|
||
|
|
var $select, val = $(this).replaceWith($select = $('<select>').attr({
|
||
|
|
id: $(this).attr('id'),
|
||
|
|
name: $(this).attr('name'),
|
||
|
|
style: 'width: 100%'
|
||
|
|
})).val();
|
||
|
|
$select.select2({
|
||
|
|
data: window.valid_files,
|
||
|
|
allowClear: true,
|
||
|
|
placeholder: ''
|
||
|
|
}).val(val).trigger('change').on('change', function () {
|
||
|
|
var val = $select.val();
|
||
|
|
if (val) {
|
||
|
|
if ($select.attr('id').endsWith('input_file'))
|
||
|
|
autofill_if_exists($tr.find('select[id$=output_file]'), val.replace(/in(?!.*?in)/, 'out'));
|
||
|
|
else
|
||
|
|
autofill_if_exists($tr.find('select[id$=input_file]'), val.replace(/out(?!.*?out)/, 'in'));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
var order = 0;
|
||
|
|
|
||
|
|
function handle_table_reorder() {
|
||
|
|
var in_batch = false;
|
||
|
|
$table.find('tbody:first tr').each(function () {
|
||
|
|
switch ($(this).attr('data-type')) {
|
||
|
|
case 'C':
|
||
|
|
$(this).find('input[id$=points], input[id$=pretest]').toggle(!in_batch);
|
||
|
|
break;
|
||
|
|
case 'S':
|
||
|
|
in_batch = true;
|
||
|
|
break;
|
||
|
|
case 'E':
|
||
|
|
in_batch = false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function try_parse_json(json) {
|
||
|
|
try {
|
||
|
|
return JSON.parse(json);
|
||
|
|
} catch (e) {
|
||
|
|
return {};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function checker_precision($checker) {
|
||
|
|
var $td = $checker.parent();
|
||
|
|
var $args = $td.find('input');
|
||
|
|
var $precision = $('<input>', {
|
||
|
|
type: 'number',
|
||
|
|
value: try_parse_json($args.val()).precision || 6,
|
||
|
|
title: 'precision (decimal digits)',
|
||
|
|
style: 'width: 4em'
|
||
|
|
}).change(function () {
|
||
|
|
if ($checker.val().startsWith('floats'))
|
||
|
|
$args.val(JSON.stringify({precision: parseInt($(this).val())}));
|
||
|
|
else
|
||
|
|
$args.val('');
|
||
|
|
}).appendTo($td);
|
||
|
|
|
||
|
|
$checker.change(function () {
|
||
|
|
$precision.toggle($checker.val().startsWith('floats')).change();
|
||
|
|
}).change();
|
||
|
|
}
|
||
|
|
|
||
|
|
function swap_row($a, $b) {
|
||
|
|
var $a_order = $a.find('input[id$=order]'), $b_order = $b.find('input[id$=order]');
|
||
|
|
var order = $a_order.val();
|
||
|
|
$a_order.val($b_order.val());
|
||
|
|
$b_order.val(order);
|
||
|
|
$b.after($a);
|
||
|
|
$a.find('span.order').text($a_order.val());
|
||
|
|
$b.find('span.order').text($b_order.val());
|
||
|
|
handle_table_reorder();
|
||
|
|
}
|
||
|
|
|
||
|
|
checker_precision($('#id_problem-data-checker'));
|
||
|
|
|
||
|
|
$table.on('add-row', function (e, $tr) {
|
||
|
|
var $order = $tr.find('input').filter('[id$=order]').attr('type', 'hidden').val(++order);
|
||
|
|
$order.after($('<span>', {'class': 'order'}).text($order.val()))
|
||
|
|
.after($('<i>', {'class': 'fa fa-fw fa-lg fa-ellipsis-v'}));
|
||
|
|
|
||
|
|
var $opts = $tr.find('input').slice(2, 6);
|
||
|
|
var $files = $tr.find('select').slice(1, 3);
|
||
|
|
var $checker = $files.end().last();
|
||
|
|
$tr.find('select[id$=type]').change(function () {
|
||
|
|
var $this = $(this), val = $this.val(), disabled;
|
||
|
|
switch (val) {
|
||
|
|
case 'S':
|
||
|
|
case 'E':
|
||
|
|
disabled = val == 'S';
|
||
|
|
$opts.toggle(val == 'S');
|
||
|
|
$files.siblings('.select2').hide();
|
||
|
|
$checker.toggle(val == 'S');
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
$opts.toggle(val == 'C');
|
||
|
|
$files.siblings('.select2').toggle(val == 'C');
|
||
|
|
$checker.toggle(val == 'C');
|
||
|
|
var $prevs = $tr.prevAll('tr[data-type=S], tr[data-type=E]');
|
||
|
|
disabled = $prevs.length && $prevs.get(0).getAttribute('data-type') == 'S';
|
||
|
|
$tr.find('input[id$=points], input[id$=pretest]').toggle(val == 'C' && !disabled);
|
||
|
|
}
|
||
|
|
$tr.attr('data-type', val).nextUntil('tr[data-type=S], tr[data-type=E], tr[data-type=""]')
|
||
|
|
.find('input[id$=points], input[id$=pretest]').toggle(!disabled);
|
||
|
|
}).change();
|
||
|
|
|
||
|
|
var tooltip_classes = 'tooltipped tooltipped-s';
|
||
|
|
$tr.find('a.edit-generator-args').mouseover(function () {
|
||
|
|
switch ($tr.attr('data-type')) {
|
||
|
|
case 'C':
|
||
|
|
case 'S':
|
||
|
|
var $this = $(this).addClass(tooltip_classes);
|
||
|
|
$this.attr('aria-label', $this.prev().val() || '(none)');
|
||
|
|
}
|
||
|
|
}).mouseout(function () {
|
||
|
|
$(this).removeClass(tooltip_classes).removeAttr('aria-label');
|
||
|
|
}).featherlight($('.generator-args-editor'), {
|
||
|
|
beforeOpen: function () {
|
||
|
|
switch ($tr.attr('data-type')) {
|
||
|
|
case 'C':
|
||
|
|
case 'S':
|
||
|
|
return true;
|
||
|
|
default:
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
afterOpen: function () {
|
||
|
|
var $input = this.$currentTarget.prev();
|
||
|
|
this.$instance.find('.generator-args-editor')
|
||
|
|
.find('textarea').val($input.val()).end()
|
||
|
|
.find('.button').click(function () {
|
||
|
|
$input.val($(this).prev().val());
|
||
|
|
$.featherlight.current().close();
|
||
|
|
}).end()
|
||
|
|
.show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
checker_precision($tr.find('select[id$=checker]'));
|
||
|
|
}).find('tbody:first').find('tr').each(function () {
|
||
|
|
$table.trigger('add-row', [$(this)]);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('form').submit(function () {
|
||
|
|
$table.find('tbody:first').find('tr').each(function () {
|
||
|
|
var filled = false;
|
||
|
|
$(this).find('input, select').each(function () {
|
||
|
|
var $this = $(this);
|
||
|
|
if (!$this.attr('name'))
|
||
|
|
return;
|
||
|
|
if ($this.attr('type') === 'checkbox')
|
||
|
|
filled |= $this.is(':checked');
|
||
|
|
else if (!$this.attr('name').endsWith('order'))
|
||
|
|
filled |= !!$this.val();
|
||
|
|
});
|
||
|
|
if (!filled)
|
||
|
|
$(this).find('input[id$=order]').val('');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
var $total = $('#id_cases-TOTAL_FORMS');
|
||
|
|
|
||
|
|
$('a#add-case-row').click(function () {
|
||
|
|
var $tr;
|
||
|
|
$table.find('tbody:first').append($tr = $($table.find('.extra-row-body').html()
|
||
|
|
.replace(/__prefix__/g, $total.val())));
|
||
|
|
$tr.find('.type-column select option[value="C"]').attr('selected', true);
|
||
|
|
$total.val(parseInt($total.val()) + 1);
|
||
|
|
$table.trigger('add-row', [$tr]);
|
||
|
|
window.scrollBy(0, $tr.height());
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
var oldIndex;
|
||
|
|
$table.sortable({
|
||
|
|
containerSelector: 'table',
|
||
|
|
itemPath: '> tbody:first',
|
||
|
|
itemSelector: 'tr',
|
||
|
|
handle: 'i.fa-ellipsis-v',
|
||
|
|
placeholder: '<tr class="placeholder">',
|
||
|
|
onDragStart: function ($item, container, _super) {
|
||
|
|
oldIndex = $item.index();
|
||
|
|
_super($item, container);
|
||
|
|
},
|
||
|
|
onDrop: function ($item, container, _super) {
|
||
|
|
var newIndex = $item.index();
|
||
|
|
if (newIndex > oldIndex) {
|
||
|
|
var order = parseInt($item.parent().children().slice(oldIndex, newIndex).each(function () {
|
||
|
|
var $order = $(this).find('input[id$=order]');
|
||
|
|
$order.val(parseInt($order.val()) - 1).siblings('span.order').text($order.val());
|
||
|
|
}).last().after($item).find('input[id$=order]').val());
|
||
|
|
$item.find('input[id$=order]').val(order + 1).siblings('span.order').text(order + 1);
|
||
|
|
} else if (newIndex < oldIndex) {
|
||
|
|
var order = parseInt($item.parent().children().slice(newIndex + 1, oldIndex + 1).each(function () {
|
||
|
|
var $order = $(this).find('input[id$=order]');
|
||
|
|
$order.val(parseInt($order.val()) + 1).siblings('span.order').text($order.val());
|
||
|
|
}).first().before($item).find('input[id$=order]').val());
|
||
|
|
$item.find('input[id$=order]').val(order - 1).siblings('span.order').text(order - 1);
|
||
|
|
}
|
||
|
|
if (newIndex != oldIndex)
|
||
|
|
handle_table_reorder();
|
||
|
|
_super($item, container);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var $controls = $('#column-visible');
|
||
|
|
var problem = $controls.attr('data-problem');
|
||
|
|
$controls.find('input').change(function () {
|
||
|
|
var $this = $(this), suffix = $this.attr('data-suffix'), checked = $this.is(':checked');
|
||
|
|
$table.find('.' + suffix.replace(/_/g, '-')).toggle(checked);
|
||
|
|
localStorage.setItem('data-visible:' + problem + ':' + suffix, checked ? '1' : '0')
|
||
|
|
}).each(function () {
|
||
|
|
var $this = $(this), suffix = $this.attr('data-suffix'), filled = false;
|
||
|
|
filled = localStorage.getItem('data-visible:' + problem + ':' + suffix);
|
||
|
|
if (filled !== null)
|
||
|
|
filled = filled == '1';
|
||
|
|
else {
|
||
|
|
filled = false;
|
||
|
|
$table.find('[id$=' + suffix + ']').each(function () {
|
||
|
|
filled |= !!$(this).val();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
$this.prop('checked', filled).trigger('change');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block media %}
|
||
|
|
<style>
|
||
|
|
#case-table .select2 {
|
||
|
|
text-align: initial;
|
||
|
|
}
|
||
|
|
|
||
|
|
.order-column {
|
||
|
|
width: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bad-file input, .bad-file .select2-selection {
|
||
|
|
border-color: red;
|
||
|
|
}
|
||
|
|
|
||
|
|
span.order {
|
||
|
|
padding-right: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
body.dragging, body.dragging * {
|
||
|
|
cursor: move !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dragged {
|
||
|
|
position: absolute;
|
||
|
|
opacity: 0.5;
|
||
|
|
z-index: 2000;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr.placeholder {
|
||
|
|
display: block;
|
||
|
|
background: red;
|
||
|
|
position: relative;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr.placeholder:before {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
border: 5px solid transparent;
|
||
|
|
border-left-color: red;
|
||
|
|
margin-top: -5px;
|
||
|
|
left: -5px;
|
||
|
|
border-right: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
i.fa-ellipsis-v {
|
||
|
|
cursor: move;
|
||
|
|
}
|
||
|
|
|
||
|
|
.edit-generator-args {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.generator-args-editor textarea {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
margin-bottom: 0.5em;
|
||
|
|
height: 8em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.generator-args-editor .button {
|
||
|
|
display: block;
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
#case-table tbody td {
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.type-column {
|
||
|
|
width: 8em;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.errorlist {
|
||
|
|
border: 3px red solid;
|
||
|
|
border-radius: 5px;
|
||
|
|
padding-top: 1em;
|
||
|
|
padding-bottom: 1em;
|
||
|
|
background: #e99;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block header %}
|
||
|
|
{% if data_form.instance.has_yml %}
|
||
|
|
<div class="title-line-action">
|
||
|
|
[<a href="{{ url('problem_data_init', problem.code) }}">{{ _('View YAML') }}</a>]
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block body %}
|
||
|
|
{% if data_form.instance.feedback %}
|
||
|
|
<ul class="errorlist">
|
||
|
|
<li>{{ data_form.instance.feedback }}</li>
|
||
|
|
</ul>
|
||
|
|
{% endif %}
|
||
|
|
<form action="" method="POST" enctype="multipart/form-data">
|
||
|
|
{% csrf_token %}
|
||
|
|
{{ cases_formset.management_form }}
|
||
|
|
<table class="table">{{ data_form.as_table() }}</table>
|
||
|
|
<div id="column-visible" data-problem="{{ problem.code }}">
|
||
|
|
<strong>{{ _('Show columns:') }}</strong>
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" data-suffix="output_prefix">
|
||
|
|
{{ _('Output prefix') }}
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" data-suffix="output_limit">
|
||
|
|
{{ _('Output limit') }}
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" data-suffix="checker">
|
||
|
|
{{ _('Checker') }}
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" data-suffix="generator_args">
|
||
|
|
{{ _('Generator args') }}
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<table id="case-table" class="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th class="order-column"></th>
|
||
|
|
<th class="type-column">{{ _('Type') }}</th>
|
||
|
|
<th>{{ _('Input file') }}</th>
|
||
|
|
<th>{{ _('Output file') }}</th>
|
||
|
|
<th>{{ _('Points') }}</th>
|
||
|
|
<th>{{ _('Pretest?') }}</th>
|
||
|
|
<th class="output-prefix">{{ _('Output prefix') }}</th>
|
||
|
|
<th class="output-limit">{{ _('Output limit') }}</th>
|
||
|
|
<th class="checker">{{ _('Checker') }}</th>
|
||
|
|
<th class="generator-args">{{ _('Generator args') }}</th>
|
||
|
|
{% if cases_formset.can_delete %}
|
||
|
|
<th>{{ _('Delete?') }}</th>
|
||
|
|
{% endif %}
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{% for form in all_case_forms %}
|
||
|
|
{% if form.non_field_errors() %}
|
||
|
|
<tr>
|
||
|
|
<td colspan="{{ 9 + cases_formset.can_delete }}">{{ form.non_field_errors() }}</td>
|
||
|
|
</tr>
|
||
|
|
{% endif %}
|
||
|
|
{% if form.prefix and '__prefix__' in form.prefix %}
|
||
|
|
</tbody>
|
||
|
|
<tbody class="extra-row-body" style="display: none">
|
||
|
|
{% endif %}
|
||
|
|
<tr data-type="{{ form['type'].value() }}">
|
||
|
|
<td>{{ form.id }}{{ form.order.errors }}{{ form.order }}</td>
|
||
|
|
<td class="type-column">{{ form.type.errors }}{{ form.type }}</td>
|
||
|
|
<td{% if not (form.empty_permitted or form['type'].value() != 'C' or
|
||
|
|
form['input_file'].value() in valid_files) %} class="bad-file"{% endif %}>
|
||
|
|
{{ form.input_file.errors }}{{ form.input_file }}
|
||
|
|
</td>
|
||
|
|
<td{% if not (form.empty_permitted or form['type'].value() != 'C' or
|
||
|
|
form['output_file'].value() in valid_files) %} class="bad-file"{% endif %}>
|
||
|
|
{{ form.output_file.errors }}{{ form.output_file }}
|
||
|
|
</td>
|
||
|
|
<td>{{ form.points.errors }}{{ form.points }}</td>
|
||
|
|
<td>{{ form.is_pretest.errors }}{{ form.is_pretest }}</td>
|
||
|
|
<td class="output-prefix">{{ form.output_prefix.errors }}{{ form.output_prefix }}</td>
|
||
|
|
<td class="output-limit">{{ form.output_limit.errors }}{{ form.output_limit }}</td>
|
||
|
|
<td class="checker">
|
||
|
|
{{ form.checker.errors }}{{ form.checker }}{{ form.checker_args.errors }}{{ form.checker_args }}
|
||
|
|
</td>
|
||
|
|
<td class="generator-args">{{ form.generator_args.errors }}{{ form.generator_args }}
|
||
|
|
<a href="javascript:void(0)" class="edit-generator-args">
|
||
|
|
<i class="fa fa-pencil"></i>
|
||
|
|
{{ _('Edit') }}
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
{% if cases_formset.can_delete %}
|
||
|
|
<td>{{ form.DELETE }}</td>
|
||
|
|
{% endif %}
|
||
|
|
</tr>
|
||
|
|
{% endfor %}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<input type="submit" value="{{ _('Submit!') }}" class="button">
|
||
|
|
<a id="add-case-row" href="#"><i class="fa fa-plus"></i> {{ _('Add new case') }}</a>
|
||
|
|
</form>
|
||
|
|
<div style="display: none" class="generator-args-editor"><textarea></textarea><a class="button">Save</a></div>
|
||
|
|
{% endblock %}
|