NDOJ/templates/contest/list.html

{% extends "common-content.html" %}
{% block meta %}
    <meta name="description" content="The {{ SITE_NAME }}'s contest list - past, present, and future.">
{% endblock %}

{% block media %}
    <style>
        .time-left {
            text-align: left;
            color: #777;
            padding-top: 0.5em;
        }

        .content-description ul {
            padding: 0 !important;
        }

        .btn-contest {
            display: inline-block;
            padding: 1px 6px;
        }

        {% 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 js_media %}
    <script src="{{ static('libs/featherlight/featherlight.min.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.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.') }}');
            });

            function makeToggleBtn(btn, divElement) {
                btn.click(function() {
                    divElement.toggle(300);

                    if (btn.html().trim() === '{{ _('Hide')}}') {
                        btn.html('{{ _('Show')}}');
                    }
                    else {
                        btn.html('{{ _('Hide')}}');   
                    }
                });
            }

            makeToggleBtn($("#ongoing-btn"), $("#ongoing-table"));

            $('#search-org').select2({multiple: 1, placeholder: '{{ _('Organizations...') }}'})
                    .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 title_ruler %}{% endblock %}

{% block title_row %}
    {% set tab = 'list' %}
    {% set title = 'Contests' %}
    {% 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 style="background-color: #000000; color: #ffffff" class="contest-tag">
                    <i class="fa fa-eye-slash"></i> {{ _('hidden') }}
                </span>
            {% endif %}
            {% if contest.is_private %}
                <span style="background-color: #666666; color: #ffffff" class="contest-tag">
                    <i class="fa fa-lock"></i> {{ _('private') }}
                </span>
            {% endif %}
            {% if contest.is_organization_private %}
                {% for org in contest.organizations.all() %}
                    <span style="background-color: #cccccc" class="contest-tag">
                        <a href="{{ org.get_absolute_url() }}" style="color: #000000">
                            <i class="fa fa-lock"></i> {{ org.name }}
                        </a>
                    </span>
                {% endfor %}
            {% endif %}
            {% if contest.is_rated %}
                <span style="background-color: #e54c14; color: #ffffff" class="contest-tag">
                    <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 %}
            {{ _('%(time_limit)s window', time_limit=contest.time_limit|timedelta('localized-no-seconds')) }}
        {% else %}
            {{ _('%(duration)s long', duration=contest.contest_window_length|timedelta('localized-no-seconds')) }}
        {% 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 participate-button"
                           value="{{ _('Spectate') }}">
                </form>
            {% else %}
                <form action="{{ url('contest_join', contest.key) }}" method="post">
                    {% csrf_token %}
                    <input type="submit" class="unselectable button full participate-button join-warning"
                           value="{{ _('Join') }}">
                </form>
            {% endif %}
        </td>
    {% endif %}
{% endmacro %}

{% block body %}
    <div class="content-description">
        
        <form id="filter-form">
            <input id="search-contest" type="text" name="contest" value="{{ contest_query or '' }}"
                   placeholder="{{ _('Search contests...') }}">

            <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>
            <button id="search-btn"> {{ _('Search')}} </button>
        </form>
        {% if active_participations %}
            <h4>{{ _('Active Contests') }}</h4>
            <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">{{ _('Window ends in %(countdown)s', countdown=participation.end_time|as_countdown)}}
                                        {% elif contest.time_before_end %}
                                            <span class="time">{{ _('Ends in %(countdown)s', countdown=contest.end_time|as_countdown) }}</span>
                                        {% endif %}
                                        {{ time_left(contest) }}
                                    {% endif %}
                                </div>
                            </td>
                            <td>
                                {{ user_count(contest, request.user) }}
                            </td>
                            {{ contest_join(contest, request) }}
                        </tr>
                    {% endwith %}
                {% endfor %}
                </tbody>
            </table>
            <br>
        {% endif %}

        {% if current_contests %}
            <h4>
                {{ _('Ongoing Contests') }} 
                <button class="btn-contest" id="ongoing-btn">
                    {% if page_obj and page_obj.number > 1%}
                    {{_('Show')}}
                    {% else %}
                    {{_('Hide')}}
                    {% endif %}
                </button>
            </h4>
            <div id="ongoing-table">
                <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">{{ _('Ends in %(countdown)s', countdown=contest.end_time|as_countdown) }}</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 %}

        <h4>{{ _('Upcoming Contests') }}</h4>
        {% if future_contests %}
            <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>
        {% else %}
            <i>{{ _('There are no scheduled contests at this time.') }}</i>
            <br>
        {% endif %}
        <br>

        {% if past_contests %}
            <h4>{{ _('Past Contests') }}</h4>
            {% 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 style="color: #7dc7ff" href="{{ sort_links.name }}">{{ _('Contest') }}{{ sort_order.name }}</a>
                    </th>
                    <th>
                        <a style="color: #7dc7ff" 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 participate-button"
                                           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 %}