NDOJ/templates/contest/list.html
2024-05-25 13:27:20 -05:00

429 lines
14 KiB
HTML

{% extends "three-column-content.html" %}
{% block meta %}
<meta name="description" content="The {{ SITE_NAME }}'s contest list - past, present, and future.">
{% endblock %}
{% block three_col_media %}
<style>
.non-padding-top {
padding-top: 0;
}
.btn-contest {
display: inline-block;
padding: 1px 6px;
}
#search-contest {
width: 100%;
height: 2.3em;
}
#search-org {
width: 100%;
}
</style>
{% endblock %}
{% 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 () {
submitFormWithParams($form, "POST");
});
$('#go').click(function() {
submitFormWithParams($form, "GET");
});
$('.time-remaining').each(function () {
count_down($(this));
});
$('.contest-tag').find('a[data-featherlight]').featherlight();
$('.join-warning').click(function () {
let q = '{{ _('Are you sure you want to join?') }}\n' +
'{{ _('Joining a contest for the first time starts your timer, after which it becomes unstoppable.') }}';
{% if request.in_contest %}
q += " {{ _('By joining in this contest, you will automatically leave contest') }} \"{{ request.participation.contest.name }}\". ";
{% endif %}
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();
}
});
$('#search-org').select2({multiple: 1, placeholder: '{{ _('Groups') }}...'});
// var tooltip_classes = 'tooltipped tooltipped-e';
//
// $('.contest-tag').each(function () {
// var link = $(this);//
// link.mouseenter(function (e) {
// link.addClass(tooltip_classes).attr('aria-label', link.attr('data-description'));
// }).mouseleave(function (e) {
// link.removeClass(tooltip_classes).removeAttr('aria-label');
// });
// });
});
</script>
{% endblock %}
{% block left_sidebar %}
{% include "contest/contest-list-tabs.html" %}
{% endblock %}
{% block right_sidebar %}
<div class="right-sidebar">
{% include "contest/search-form.html" %}
</div>
{% endblock %}
{% macro contest_head(contest) %}
<a href="{{ url('contest_view', contest.key) }}" class="contest-list-title" style="margin-right: 5px;">
{{contest.name}}
</a>
<div class="contest-tags">
{% if not contest.is_visible %}
<span class="contest-tag contest-tag-hidden">
<i class="fa fa-eye-slash"></i> {{ _('hidden') }}
</span>
{% endif %}
{% if contest.is_editable %}
<span class="contest-tag contest-tag-edit">
<a href="{{ url('organization_contest_edit', organization.id, organization.slug, contest.key) }}" class="white">
<i class="fa fa-edit"></i> {{ _('Edit') }}
</a>
</span>
{% endif %}
{% if contest.is_private %}
<span class="contest-tag contest-tag-private">
<i class="fa fa-lock"></i> {{ _('private') }}
</span>
{% endif %}
{% if not hide_contest_orgs %}
{% if contest.is_organization_private %}
{% for org in contest.organizations.all() %}
{% include "organization/tag.html" %}
{% endfor %}
{% endif %}
{% endif %}
{% if contest.is_rated %}
<span class="contest-tag contest-tag-rated">
<i class="fa fa-bar-chart"></i> {{ _('rated') }}
</span>
{% endif %}
{% for tag in contest.tags.all() %}
<span style="background-color: {{ tag.color }}" class="contest-tag">
<a href="{{ url('contest_tag', tag.name) }}"
style="color: {{ tag.text_color }}"
data-featherlight="{{ url('contest_tag_ajax', tag.name) }}">
{{- tag.name -}}
</a>
</span>
{% endfor %}
</div>
{% endmacro %}
{% macro time_left(contest) %}
<div class="time-left">
{% if contest.time_limit %}
<div>
<b>{{_("Start")}}</b>: {{ contest.start_time|date(_("H:i d/m/Y")) }}
</div>
<div>
<b>{{_("End")}}</b>: {{ contest.end_time|date(_("H:i d/m/Y")) }}
</div>
{% else %}
<div>
<b>{{_("Start")}}</b>: {{ contest.start_time|date(_("H:i d/m/Y")) }}
</div>
{% endif %}
<div>
<b>{{_("Length")}}</b>:
{% if contest.time_limit %}
{% trans time_limit=contest.time_limit|timedelta('localized-no-seconds') %}{{ time_limit }}{% endtrans %}
{% else %}
{% trans duration=contest.contest_window_length|timedelta('localized-no-seconds') %}{{ duration }}{% endtrans %}
{% endif %}
</div>
</div>
{% endmacro %}
{% macro user_count(contest, user) %}
{% if contest.can_see_own_scoreboard(user) %}
<a href="{{ url('contest_ranking', contest.key) }}"><i class="fa fa-users"></i> {{ contest.user_count }}</a>
{% else %}
<i class="fa fa-users"></i>{{ contest.user_count }}
{% endif %}
{% endmacro %}
{% macro contest_join(contest, request) %}
{% if request.in_contest and request.participation.contest == contest %}
<button class="small" disabled>{{ _('In contest') }}</button>
{% elif request.profile.id in contest.editor_ids or request.profile.id in contest.tester_ids %}
<form action="{{ url('contest_join', contest.key) }}" method="post">
{% csrf_token %}
<input type="submit" class="unselectable button full small"
value="{{ _('Spectate') }}">
</form>
{% else %}
<form action="{{ url('contest_join', contest.key) }}" method="post">
{% csrf_token %}
<input type="submit" class="unselectable button full small join-warning"
value="{{ _('Join') }}">
</form>
{% endif %}
{% endmacro %}
{% macro contest_format_user(contest, show_user=True) %}
<div style="display: flex; flex-direction: column; height: 100%;">
<div class="contest-title"> {{ _('Format') }} </div>
<div style="flex-grow: 1">{{ contest.format.name }}</div>
{% if show_user %}
<div class="contest-title">{{ user_count(contest, request.user) }}</div>
{% endif %}
</div>
{% endmacro %}
{% block middle_content %}
<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>
{% 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>
{{ 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 %}
{% 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 active contest at this time.') }} </i>
{% endif %}
{% 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 %}
{% 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>
{% 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 ongoing contest at this time.') }} </i>
{% endif %}
{% endif %}
{% 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>
{% 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 %}
{% 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>
{% endif %}
{% endif %}
{% endblock %}