NDOJ/templates/contest/list.html
2023-02-08 22:00:25 -06:00

414 lines
13 KiB
HTML

{% extends "two-column-content.html" %}
{% block meta %}
<meta name="description" content="The {{ SITE_NAME }}'s contest list - past, present, and future.">
{% endblock %}
{% block two_col_media %}
<style>
.content-description ul {
padding: 0 !important;
}
.btn-contest {
display: inline-block;
padding: 1px 6px;
}
.contest-group-header {
padding-bottom: 1em;
}
{% if page_obj and page_obj.number > 1%}
#ongoing-table {
display: none;
}
{% endif %}
@media (max-width: 500px) {
#search-contest, #search-org, #search-btn {
width: 100%;
margin-bottom: 0.5em;
}
#search-contest {
height: 2.5em;
}
#search-btn {
margin-top: 0.5em;
}
#filter-form input {
padding-left: 8px;
}
}
@media (min-width: 500px) {
#filter-form input {
margin: 0 0.5em 0 0!important;
padding-left: 8px;
padding-top: 8px;
}
#search-contest {
width: 30%;
height: 2.3em;
margin-right: 1em;
margin-bottom: 0;
padding-top: 4px !important;
}
#search-org {
width: 40%;
}
#search-btn {
display: inline-block;
height: 2.3em;
margin-left: 0.5em;
}
}
</style>
{% endblock %}
{% block two_col_js %}
<script src="{{ static('libs/featherlight/featherlight.min.js') }}" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var $form = $('form#filter-form');
$('input#show_orgs').click(function () {
$form.submit();
});
$('.time-remaining').each(function () {
count_down($(this));
});
$('.contest-tag').find('a[data-featherlight]').featherlight();
$('.join-warning').click(function () {
return confirm('{{ _('Are you sure you want to join?') }}\n' +
'{{ _('Joining a contest for the first time starts your timer, after which it becomes unstoppable.') }}');
});
$('#search-org').select2({multiple: 1, placeholder: '{{ _('Groups') }}...'})
.css({'visibility': 'visible'});
// 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 %}
{% macro contest_head(contest) %}
{% spaceless %}
<a href="{{ url('contest_view', contest.key) }}" class="contest-list-title">
{{- contest.name -}}
</a>
<span 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() %}
<span class="contest-tag contest-tag-org">
<a href="{{ org.get_absolute_url() }}">
<i class="fa fa-lock"></i> {{ org.name }}
</a>
</span>
{% 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 %}
</span>
{% endspaceless %}
{% endmacro %}
{% macro time_left(contest) %}
<div class="time time-left">
{% if contest.time_limit %}
{{ contest.start_time|date(_("M j, Y, G:i")) }} -
{{ contest.end_time|date(_("M j, Y, G:i")) }}
{% else %}
{{ contest.start_time|date(_("M j, Y, G:i")) }}
{% endif %}
<br>
{% if contest.time_limit %}
{% trans time_limit=contest.time_limit|timedelta('localized-no-seconds') %}{{ time_limit }} window{% endtrans %}
{% else %}
{% trans duration=contest.contest_window_length|timedelta('localized-no-seconds') %}{{ duration }} long{% endtrans %}
{% endif %}
</div>
{% endmacro %}
{% macro user_count(contest, user) %}
{% if contest.can_see_own_scoreboard(user) %}
<a href="{{ url('contest_ranking', contest.key) }}">{{ contest.user_count }}</a>
{% else %}
{{ contest.user_count }}
{% endif %}
{% endmacro %}
{% macro contest_join(contest, request) %}
{% if not request.in_contest %}
<td>
{% if request.profile in contest.authors.all() or request.profile in contest.curators.all() or request.profile in contest.testers.all() %}
<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 %}
</td>
{% endif %}
{% endmacro %}
{% block middle_content %}
<div class="content-description">
<form id="filter-form">
<input id="search-contest" type="text" name="contest" value="{{ contest_query or '' }}"
placeholder="{{ _('Search contests...') }}">
{% if organizations %}
<select id="search-org" name="orgs" multiple>
{% for org in organizations %}
<option value="{{ org.id }}"{% if org.id in org_query %} selected{% endif %}>
{{ org.name }}
</option>
{% endfor %}
</select>
{% endif %}
<button id="search-btn" class="btn-green small"> {{ _('Search')}} </button>
{% if organizations %}
<div>
<input id="show_orgs" type="checkbox" name="show_orgs" value="1" {% if show_orgs %}checked{% endif %}>
<label for="show_orgs">{{ _('Hide organization contests') }}</label>
</div>
{% endif %}
{% if create_url %}
<a href="{{create_url}}" class="button small" style="float: right"><i class="fa fa-plus"></i> {{ _('Create')}}</a>
{% endif %}
</form>
{% 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">
<table class="contest-list table striped">
<thead>
<tr>
<th style="width:90%">{{ _('Contest') }}</th>
<th>{{ _('Users') }}</th>
{% if not request.in_contest %}
<th style="width:15%"></th>
{% endif %}
</tr>
</thead>
<tbody>
{% for participation in active_participations %}
{% with contest=participation.contest %}
<tr>
<td>
<div class="contest-block">
{{ contest_head(contest) }}
{% if contest.start_time %}
<br>
{% 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 %}
{{ time_left(contest) }}
{% endif %}
</div>
</td>
<td>
{{ user_count(contest, request.user) }}
</td>
{{ contest_join(contest, request) }}
</tr>
{% endwith %}
{% endfor %}
</tbody>
</table>
</div>
<br>
{% endif %}
{% if current_contests %}
<h3 class="toggle open contest-group-header">
<i class="fa fa-chevron-right fa-fw"></i>
{{ _('Ongoing Contests') }}
</h3>
<div id="ongoing-table" class="toggled">
<table class="contest-list table striped">
<thead>
<tr>
<th style="width:90%">{{ _('Contest') }}</th>
<th>{{ _('Users') }}</th>
{% if not request.in_contest %}
<th style="width:15%"></th>
{% endif %}
</tr>
</thead>
<tbody>
{% for contest in current_contests %}
<tr>
<td>
<div class="contest-block">
{{ contest_head(contest) }}
{% if contest.start_time %}
<br>
{% if contest.time_before_end %}
<span class="time">{% trans countdown=contest.end_time|as_countdown %}Ends in {{countdown}}{% endtrans %}</span>
{% endif %}
{{ time_left(contest) }}
{% endif %}
</div>
</td>
<td>
{{ user_count(contest, request.user) }}
</td>
{{ contest_join(contest, request) }}
</tr>
{% endfor %}
</tbody>
</table>
<br>
</div>
{% 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">
<table class="contest-list table striped">
<thead>
<tr>
<th>{{ _('Contest') }}</th>
</tr>
</thead>
<tbody>
{% for contest in future_contests %}
<tr>
<td>
<div class="contest-block">
{{ contest_head(contest) }}
{% if contest.start_time %}
<br>
{% if contest.time_before_start %}
<span class="time">{{ _('Starting in %(countdown)s.', countdown=contest.start_time|as_countdown) }}</span>
{% endif %}
{{ time_left(contest) }}
{% endif %}
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<i>{{ _('There are no scheduled contests at this time.') }}</i>
<br>
{% endif %}
<br>
{% if past_contests %}
<h3 class="contest-group-header">{{ _('Past Contests') }}</h3>
{% if page_obj and page_obj.num_pages > 1 %}
<div style="margin-bottom: 4px;">
{% include "list-pages.html" %}
</div>
{% endif %}
<table class="contest-list table striped">
<thead>
<tr>
<th style="width:90%">
<a class="contest-list-sort" href="{{ sort_links.name }}">{{ _('Contest') }}{{ sort_order.name }}</a>
</th>
<th>
<a class="contest-list-sort" href="{{ sort_links.user_count }}">{{ _('Users') }}{{ sort_order.user_count }}</a>
</th>
{% if not request.in_contest %}
<th style="width:15%"></th>
{% endif %}
</tr>
</thead>
<tbody>
{% for contest in past_contests %}
<tr>
<td>
<div class="contest-block">
{{ contest_head(contest) }}
{{ time_left(contest) }}
</div>
</td>
<td>
{{ user_count(contest, request.user) }}
</td>
{% if not request.in_contest %}
<td><form action="{{ url('contest_join', contest.key) }}" method="post">
{% csrf_token %}
<input type="submit" class="unselectable button full small"
value="{{ _('Virtual join') }}">
</form>
</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
{% if page_obj and page_obj.num_pages > 1 %}
<div style="margin-top: 10px;">
{% include "list-pages.html" %}
</div>
{% endif %}
{% endif %}
</div>
{% endblock %}