Organize contest list into timeline tabs (#111)
This commit is contained in:
Phuoc Anh Kha Le
GitHub
parent
6c8926ec56
commit
9f4ae9f78f
9 changed files with 496 additions and 392 deletions
|
|
@ -1,5 +1,7 @@
|
|||
<div class="left-sidebar">
|
||||
{{ make_tab_item('list', 'fa fa-list', url('contest_list'), _('List')) }}
|
||||
{{ make_tab_item('calendar', 'fa fa-calendar', url('contest_calendar', now.year, now.month), _('Calendar')) }}
|
||||
{{ make_tab_item('admin', 'fa fa-edit', url('admin:judge_contest_changelist'), _('Admin')) }}
|
||||
{% if perms.judge.change_contest %}
|
||||
{{ make_tab_item('admin', 'fa fa-edit', url('admin:judge_contest_changelist'), _('Admin')) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
@ -14,16 +14,6 @@
|
|||
padding: 1px 6px;
|
||||
}
|
||||
|
||||
.contest-group-header {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
{% if page_obj and page_obj.number > 1%}
|
||||
#ongoing-table {
|
||||
display: none;
|
||||
}
|
||||
{% endif %}
|
||||
|
||||
#search-contest {
|
||||
width: 100%;
|
||||
height: 2.3em;
|
||||
|
|
@ -37,16 +27,59 @@
|
|||
{% block three_col_js %}
|
||||
<script src="{{ static('libs/featherlight/featherlight.min.js') }}" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
function changeTabParameter(newTab) {
|
||||
const url = new URL(window.location);
|
||||
const searchParams = new URLSearchParams(url.search);
|
||||
searchParams.set('tab', newTab);
|
||||
url.search = searchParams.toString();
|
||||
return url.href;
|
||||
}
|
||||
|
||||
function submitFormWithParams($form, method) {
|
||||
const currentUrl = new URL(window.location.href);
|
||||
const searchParams = new URLSearchParams(currentUrl.search);
|
||||
const formData = $form.serialize();
|
||||
|
||||
const params = new URLSearchParams(formData);
|
||||
|
||||
if (searchParams.has('tab')) {
|
||||
params.set('tab', searchParams.get('tab'));
|
||||
}
|
||||
|
||||
const fullUrl = currentUrl.pathname + '?' + params.toString();
|
||||
|
||||
if (method === "GET") {
|
||||
window.location.href = fullUrl;
|
||||
}
|
||||
else {
|
||||
var $formToSubmit = $('<form>')
|
||||
.attr('action', fullUrl)
|
||||
.attr('method', 'POST')
|
||||
.appendTo('body');
|
||||
|
||||
$formToSubmit.append($('<input>').attr({
|
||||
type: 'hidden',
|
||||
name: 'csrfmiddlewaretoken',
|
||||
value: $.cookie('csrftoken')
|
||||
}));
|
||||
|
||||
$formToSubmit.submit();
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$('#active-url').attr('href', changeTabParameter('active'));
|
||||
$('#current-url').attr('href', changeTabParameter('current'));
|
||||
$('#future-url').attr('href', changeTabParameter('future'));
|
||||
$('#past-url').attr('href', changeTabParameter('past'));
|
||||
|
||||
var $form = $('form#filter-form');
|
||||
|
||||
$('#show_orgs').click(function () {
|
||||
($('<form>').attr('action', window.location.pathname + '?' + $form.serialize())
|
||||
.append($('<input>').attr('type', 'hidden').attr('name', 'csrfmiddlewaretoken')
|
||||
.attr('value', $.cookie('csrftoken')))
|
||||
.attr('method', 'POST').appendTo($('body')).submit());
|
||||
submitFormWithParams($form, "POST");
|
||||
});
|
||||
$('#go').click(function() {
|
||||
$form.submit();
|
||||
submitFormWithParams($form, "GET");
|
||||
});
|
||||
$('.time-remaining').each(function () {
|
||||
count_down($(this));
|
||||
|
|
@ -63,9 +96,16 @@
|
|||
return confirm(q);
|
||||
});
|
||||
|
||||
$form.on('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
$('#search-contest').keypress(function (e) {
|
||||
if (e.keyCode == 13)
|
||||
$('#go').click();
|
||||
if (e.keyCode === 13) {
|
||||
$('#go').click();
|
||||
}
|
||||
});
|
||||
|
||||
$('#search-org').select2({multiple: 1, placeholder: '{{ _('Groups') }}...'});
|
||||
|
|
@ -202,54 +242,41 @@
|
|||
{% endmacro %}
|
||||
|
||||
{% block middle_content %}
|
||||
<div id="ongoing-table">
|
||||
{% if active_participations %}
|
||||
<h3 class="toggle open contest-group-header">
|
||||
<i class="fa fa-chevron-right fa-fw"></i>
|
||||
{{ _('Active Contests') }}
|
||||
</h3>
|
||||
<div class="toggled">
|
||||
{% for participation in active_participations %}
|
||||
{% with contest=participation.contest %}
|
||||
<div class="list-contest">
|
||||
<div class="info-contest">
|
||||
<div class="contest-title"> {{ _('Contests') }} </div>
|
||||
{{ contest_head(contest) }}
|
||||
</div>
|
||||
<div class="info-contest">
|
||||
<div class="contest-title"> {{ _('Time') }} </div>
|
||||
<div class="contest-block">
|
||||
{% if contest.start_time %}
|
||||
{{ time_left(contest) }}
|
||||
{% if contest.time_limit %}
|
||||
<span class="time">
|
||||
{% trans countdown=participation.end_time|as_countdown %}Window ends in {{countdown}}{% endtrans %}
|
||||
</span>
|
||||
{% elif contest.time_before_end %}
|
||||
<span class="time">{% trans countdown=contest.end_time|as_countdown %}Ends in {{countdown}}{% endtrans %}</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-contest" style="flex: 0.5;">
|
||||
{{ contest_format_user(contest) }}
|
||||
</div>
|
||||
<div class="participate-button">
|
||||
{{ contest_join(contest, request) }}
|
||||
</div>
|
||||
</div>
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="tabs tabs-no-flex" style="width: 100%;margin-left: auto;margin-right: auto;">
|
||||
<ul>
|
||||
{% if request.user.is_authenticated %}
|
||||
<li class="{{'active' if current_tab=='active'}}">
|
||||
<a id='active-url'>{{ _('Active') }}
|
||||
{% if active_count %}
|
||||
({{active_count}})
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="{{'active' if current_tab=='current'}}">
|
||||
<a id='current-url'>{{ _('Ongoing') }}
|
||||
{% if current_count %}
|
||||
({{current_count}})
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="{{'active' if current_tab=='future'}}">
|
||||
<a id='future-url'>{{ _('Upcoming') }}
|
||||
{% if future_count %}
|
||||
({{future_count}})
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="{{'active' if current_tab=='past'}}">
|
||||
<a id='past-url'>{{ _('Past') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3 class="toggle open contest-group-header">
|
||||
<i class="fa fa-chevron-right fa-fw"></i>
|
||||
{{ _('Ongoing Contests') }}
|
||||
</h3>
|
||||
{% if current_contests %}
|
||||
<div class="toggled">
|
||||
{% for contest in current_contests %}
|
||||
{% if request.user.is_authenticated and current_tab == 'active' %}
|
||||
{% if contests %}
|
||||
{% for participation in contests %}
|
||||
{% with contest=participation.contest %}
|
||||
<div class="list-contest">
|
||||
<div class="info-contest">
|
||||
<div class="contest-title"> {{ _('Contests') }} </div>
|
||||
|
|
@ -260,7 +287,11 @@
|
|||
<div class="contest-block">
|
||||
{% if contest.start_time %}
|
||||
{{ time_left(contest) }}
|
||||
{% if contest.time_before_end %}
|
||||
{% if contest.time_limit %}
|
||||
<span class="time">
|
||||
{% trans countdown=participation.end_time|as_countdown %}Window ends in {{countdown}}{% endtrans %}
|
||||
</span>
|
||||
{% elif contest.time_before_end %}
|
||||
<span class="time">{% trans countdown=contest.end_time|as_countdown %}Ends in {{countdown}}{% endtrans %}</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
|
@ -273,99 +304,126 @@
|
|||
{{ contest_join(contest, request) }}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
{% if page_obj and page_obj.num_pages > 1 %}
|
||||
<div style="margin-top: 10px;">
|
||||
{% include "list-pages.html" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="toggled">
|
||||
<i> {{ _('There is no ongoing contest at this time.') }} </i>
|
||||
<br><br>
|
||||
</div>
|
||||
<i> {{ _('There is no active contest at this time.') }} </i>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<h3 class="toggle open contest-group-header">
|
||||
<i class="fa fa-chevron-right fa-fw"></i>
|
||||
{{ _('Upcoming Contests') }}
|
||||
</h3>
|
||||
{% if future_contests %}
|
||||
<div class="toggled">
|
||||
{% for contest in future_contests %}
|
||||
<div class="list-contest">
|
||||
<div class="info-contest">
|
||||
<div class="contest-title"> {{ _('Contests') }} </div>
|
||||
{{ contest_head(contest) }}
|
||||
</div>
|
||||
<div class="info-contest">
|
||||
<div class="contest-title"> {{ _('Time') }} </div>
|
||||
<div class="contest-block">
|
||||
{% if contest.start_time %}
|
||||
{{ time_left(contest) }}
|
||||
{% if contest.time_before_start %}
|
||||
<span class="time">{{ _('Starting in %(countdown)s.', countdown=contest.start_time|as_countdown) }}</span>
|
||||
{% endif %}
|
||||
{% if current_tab == 'current' %}
|
||||
{% if contests %}
|
||||
{% for contest in contests %}
|
||||
<div class="list-contest">
|
||||
<div class="info-contest">
|
||||
<div class="contest-title"> {{ _('Contests') }} </div>
|
||||
{{ contest_head(contest) }}
|
||||
</div>
|
||||
<div class="info-contest">
|
||||
<div class="contest-title"> {{ _('Time') }} </div>
|
||||
<div class="contest-block">
|
||||
{% if contest.start_time %}
|
||||
{{ time_left(contest) }}
|
||||
{% if contest.time_before_end %}
|
||||
<span class="time">{% trans countdown=contest.end_time|as_countdown %}Ends in {{countdown}}{% endtrans %}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-contest" style="flex: 0.5;">
|
||||
{{ contest_format_user(contest, show_user=False) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="info-contest" style="flex: 0.5;">
|
||||
{{ contest_format_user(contest) }}
|
||||
</div>
|
||||
<div class="participate-button">
|
||||
{{ contest_join(contest, request) }}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if page_obj and page_obj.num_pages > 1 %}
|
||||
<div style="margin-top: 10px;">
|
||||
{% include "list-pages.html" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="toggled">
|
||||
<i>{{ _('There is no scheduled contest at this time.') }}</i>
|
||||
<br><br>
|
||||
</div>
|
||||
<i> {{ _('There is no ongoing contest at this time.') }} </i>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<h3 class="toggle open contest-group-header">
|
||||
{{ _('Past Contests') }}
|
||||
</h3>
|
||||
{% if past_contests %}
|
||||
{% if page_obj and page_obj.num_pages > 1 %}
|
||||
<div style="margin-bottom: 10px;">
|
||||
{% include "list-pages.html" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% for contest in past_contests %}
|
||||
<div class="list-contest">
|
||||
<div class="info-contest">
|
||||
<div class="contest-title"> {{ _('Contests') }} </div>
|
||||
{{ contest_head(contest) }}
|
||||
</div>
|
||||
<div class="info-contest">
|
||||
<div class="contest-title"> {{ _('Time') }} </div>
|
||||
<div class="contest-block">
|
||||
{{ time_left(contest) }}
|
||||
{% if current_tab == 'future' %}
|
||||
{% if contests %}
|
||||
{% for contest in contests %}
|
||||
<div class="list-contest">
|
||||
<div class="info-contest">
|
||||
<div class="contest-title"> {{ _('Contests') }} </div>
|
||||
{{ contest_head(contest) }}
|
||||
</div>
|
||||
<div class="info-contest">
|
||||
<div class="contest-title"> {{ _('Time') }} </div>
|
||||
<div class="contest-block">
|
||||
{% if contest.start_time %}
|
||||
{{ time_left(contest) }}
|
||||
{% if contest.time_before_start %}
|
||||
<span class="time">{{ _('Starting in %(countdown)s.', countdown=contest.start_time|as_countdown) }}</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-contest" style="flex: 0.5;">
|
||||
{{ contest_format_user(contest, show_user=False) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-contest" style="flex: 0.5;">
|
||||
{{ contest_format_user(contest) }}
|
||||
{% endfor %}
|
||||
{% if page_obj and page_obj.num_pages > 1 %}
|
||||
<div style="margin-top: 10px;">
|
||||
{% include "list-pages.html" %}
|
||||
</div>
|
||||
<div class="participate-button">
|
||||
{% if request.in_contest and request.participation.contest == contest %}
|
||||
<button class="small" disabled>{{ _('In contest') }}</button>
|
||||
{% else %}
|
||||
<form action="{{ url('contest_join', contest.key) }}" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="submit" class="unselectable button full small"
|
||||
value="{{ _('Virtual join') }}">
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if page_obj and page_obj.num_pages > 1 %}
|
||||
<div style="margin-top: 10px;">
|
||||
{% include "list-pages.html" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<i>{{ _('There is no scheduled contest at this time.') }}</i>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="toggled">
|
||||
{% endif %}
|
||||
|
||||
{% if current_tab == 'past' %}
|
||||
{% if contests %}
|
||||
{% for contest in contests %}
|
||||
<div class="list-contest">
|
||||
<div class="info-contest">
|
||||
<div class="contest-title"> {{ _('Contests') }} </div>
|
||||
{{ contest_head(contest) }}
|
||||
</div>
|
||||
<div class="info-contest">
|
||||
<div class="contest-title"> {{ _('Time') }} </div>
|
||||
<div class="contest-block">
|
||||
{{ time_left(contest) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-contest" style="flex: 0.5;">
|
||||
{{ contest_format_user(contest) }}
|
||||
</div>
|
||||
<div class="participate-button">
|
||||
{% if request.in_contest and request.participation.contest == contest %}
|
||||
<button class="small" disabled>{{ _('In contest') }}</button>
|
||||
{% else %}
|
||||
<form action="{{ url('contest_join', contest.key) }}" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="submit" class="unselectable button full small"
|
||||
value="{{ _('Virtual join') }}">
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if page_obj and page_obj.num_pages > 1 %}
|
||||
<div style="margin-top: 10px;">
|
||||
{% include "list-pages.html" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<i> {{ _('There is no past contest.') }} </i>
|
||||
<br>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue