Template source: web/competitions/view.html

{% extends 'base.html' %}
{% load url from future %}
{% load staticfiles %}
{% load codalab_tags %}
{% load tz %}
{% load humanize %}
{% block head_title %}Competition{% endblock %}
{% block page_title %}Competition{% endblock page_title %}

{% block extra_scripts %}
    <script src="{{ STATIC_URL }}js/vendor/readmore.min.js"></script>

    <script src="{{ STATIC_URL }}js/vendor/jquery.tablesorter.min.js"></script>

    <style>
    #public_submission_table th b {
        cursor: pointer;
    }
    </style>
{% endblock %}

{% block content %}

{% if request.user.is_staff %}
    <a href="{% url "competitions:download" competition_pk=competition.pk %}" class="btn btn-primary">DOWNLOAD COMPETITION BUNDLE!</a>
{% endif %}
{% if is_admin_or_owner %}
    <h3>Admin features</h3>
    <a href="{% url "competitions:edit" pk=competition.pk %}" class="btn btn-primary">Edit</a>
    <a href="{% url 'my_competition_participants' competition_id=competition.pk %}" class="btn btn-primary">
        Participants
        {% if comp_num_pending_teams > 0 %}
        <span class="glyphicon glyphicon-exclamation-sign" style="color:red">
        {% endif %}
    </a>
    <a href="{% url 'my_competition_submissions' competition_id=competition.pk %}" class="btn btn-primary">Submissions</a>
    <a href="{% url 'competitions:dumps' competition_pk=competition.pk %}" class="btn btn-primary">Dumps</a>
    <a href="{% url 'competitions:widgets' pk=competition.pk %}" class="btn btn-primary">Widgets</a>
    <hr>
{% endif %}
<div class="competition-view">
    <div class="row">
        <div class="col-sm-2">
            <div class="img-container">
                {% if competition.image_url %}
                    <img class="img-responsive" src="{{ competition.image_url }}">
                {% else %}
                    <img class="img-responsive" src="{% static "img/ProfileImageDummy.jpg" %}">
                {% endif %}
            </div>
        </div>
        <div class="col-sm-10">
            <h2>{{ competition.title }}</h2>
            {% if not competition.published %}
                <code id="secret_url">Secret url:
                    <a href="{% url 'competitions:view' pk=competition.pk %}?secret_key={{ competition.secret_key }}">https://{{ site }}{% url 'competitions:view' pk=competition.pk %}?secret_key={{ competition.secret_key }}</a>
                </code>


            {% endif %}
            <div class="organizer">
                Organized by {{ competition.creator }} - Current server time: {{ current_server_time|utc }} UTC<br>
                {% if competition.reward and competition.reward > 0 %}
                     Reward <b>${{ competition.reward|intcomma }}</b>
                {% endif %}
            </div>
            <input type="hidden" id="competitionId" value="{{competition.id}}" />
            <input type="hidden" id="cstoken" value="{{csrf_token}}" />
            <div class="phase-container">
                <div class="row">
                    {% if previous_phase and active_phase %}
                        <div class="col-sm-4">
                            <div class="phase">
                                <h4>Previous</h4>
                                <span class="phase-label label phase-label-{% if previous_phase.color %}{{ previous_phase.color }}{% else %}default{% endif %}">{{previous_phase.label}}</span>
                                <div class="date">{{previous_phase.start_date|utc}} UTC</div>
                            </div>
                        </div>
                    {% endif %}

                    {% if active_phase %}
                        <div class="col-sm-4">
                            <div class="phase current">
                                <h4><span class="glyphicon glyphicon-play"></span> Current</h4>
                                <span class="phase-label label phase-label-{% if active_phase.color %}{{ active_phase.color }}{% else %}default{% endif %}">{{active_phase.label}}</span>
                                <div class="date">{{active_phase.start_date|utc}} UTC</div>
                            </div>
                        </div>
                    {% endif %}

                    {# If we haven't begun the competition yet, show the first phase #}
                    {% if not active_phase %}
                        <div class="col-sm-4">
                            <div class="phase">
                                <h4>First phase</h4>
                                <span class="phase-label label phase-label-{% if first_phase.color %}{{ first_phase.color }}{% else %}default{% endif %}">{{first_phase.label}}</span>
                                <div class="date">{{first_phase.start_date|utc}} UTC</div>
                            </div>
                        </div>
                    {% endif %}

                    {% if next_phase %}
                        <div class="col-sm-4">
                            <div class="phase">
                                <h4>Next</h4>
                                <span class="phase-label label phase-label-{% if next_phase.color %}{{ next_phase.color }}{% else %}default{% endif %}">{{next_phase.label}}</span>
                                <div class="date">{{next_phase.start_date|utc}} UTC</div>
                            </div>
                        </div>
                    {% endif %}

                    {% if not previous_phase or not active_phase or not next_phase %}
                        <div class="col-sm-4">
                            <div class="phase">
                                <h4>End</h4>
                                <span class="phase-label label competition-end">Competition Ends</span>
                                <div class="date">{% if competition.end_date %}{{competition.end_date|utc}} UTC{% else %}Never{% endif %}</div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    <section class="competition-tabs">
        <ul class="nav nav-tabs" id="competition_tab_nav">
            {% for tab, contents in tabs.items %}
                {% if tab.codename == "participate" %}
                    {# Put this before participate tab #}
                    <li><a href="#phases" role="tab" data-toggle="tab">Phases</a></li>
                {% endif %}
                <li><a href="#{{tab.codename|slugify}}" role="tab" data-toggle="tab">{{tab.name}}</a></li>
                {% if tab.codename == "results" %}
                    {# Put this after results tab #}
                    {% if competition.allow_public_submissions %}
                    <!--<li><a href="#public_submissions" role="tab" data-toggle="tab">Public submissions</a></li>-->
                    <li><a href="{% url 'competitions:public_submissions' pk=competition.pk%}">Public Submissions</a></li>
                    {% endif %}

                    {% if competition.enable_forum %}
                    <li><a href="{% url 'forum_detail' forum_pk=competition.forum.pk %}">Forums <i class="glyphicon glyphicon-log-in"></i></a></li>
                    {% endif %}

                    <!-- MedICI Issue Reporting System add on start-->
        
                    {% if  user.is_authenticated %}
                    <li><a href="{%url 'report_issue' forum_pk=competition.forum.pk %}">Report Issue <i class="glyphicon glyphicon-log-in"></i></a></li>
                    {% endif %}
                    
                     
                    {% if is_admin_or_owner %}
                    <li><a href="{%url 'issue_details' forum_pk=competition.forum.pk %}">Issue Status <i class="glyphicon glyphicon-log-in"></i></a></li>
                    {% endif %}

                    <!-- MedICI Issue Reporting System add on end -->

                    {% if competition.enable_teams and not competition.allow_organizer_teams %}
                        {% if my_status == "approved" %}
                            <li>
                                <a href="{% url 'team_detail' competition_pk=competition.pk %}">Team
                                    <i class="glyphicon glyphicon-cog"></i>
                                    {% if new_team_submission > 0 %}
                                        <span class="label label-danger">{{new_team_submission}}</span>
                                    {% endif %}
                                    {% if my_team_alert == 1 %}
                                        <span class="glyphicon glyphicon-exclamation-sign" style="color:red"></span>
                                    {% endif %}
                                </a>
                            </li>
                        {% endif %}
                    {% endif %}
                {% endif %}
            {% endfor %}
        </ul>
        <div class="tab-content">
            {% for tab, contents in tabs.items %}
                {# Let's insert the "phases" tab just before participate #}
                {% if tab.codename == "participate" %}
                    <div class="tab-pane" id="phases">
                        <div class="tab-inner">
                            <div class="phase-list">
                                {% for phase in competition.phases.all %}
                                    <div class="phase-list-item panel phase-list-item-{% if phase.color %}{{ phase.color }}{% else %}default{% endif %}">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">{{ phase.label }}</h3>
                                        </div>
                                        <div class="panel-body">
                                            <p><strong>Start:</strong> {{ phase.start_date }}</p>
                                            {% if phase.description %}
                                                <p><strong>Description:</strong> {{ phase.description }}</p>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endfor %}
                                <div class="phase-list-item panel phase-list-item-default phase-list-item-deadline">
                                <div class="panel-heading">
                                    <h3 class="panel-title"><strong>Competition Ends</strong></h3>
                                </div>
                                <div class="panel-body">
                                    <p> {% if competition.end_date %} <strong>{{competition.end_date}}</strong>
                                    {% else %} <strong>Never</strong>
                                    {% endif %}
                                    </p>
                                </div>
                                </div>
                            </div>

                        </div>
                    </div>
                {% endif %}
                <div class="tab-pane" id="{{ tab.codename|slugify }}">
                    <div class="tab-inner">
                        {% if tab.codename == "participate" %}
                            {% if not user.is_authenticated %}
                                <p>You must be logged in to participate in competitions.</p>
                                <a href="{% url 'account_login' %}?next=/competitions/{{ competition.id }}%23participate-get-data" class="btn btn-primary">Sign In</a>
                            {% else %}
                                {% if my_status == "unknown" %}
                                    <form id="participate_form">
                                        {% csrf_token %}
                                        <p>You have not yet registered for this competition.</p>
                                        <p>To participate in this competition, you must accept its specific terms and conditions. After you register, the competition organizer will review your application and notify you when your participation is approved.</p>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" name="agreed_terms" id="checkbox" required onclick="Competition.registationCanProceed();">
                                                I accept the <a href="#learn_the_details-terms_and_conditions" target="_blank">terms and conditions</a> of the competition.
                                            </label>
                                        </div>
                                        <div class="radiobuttons">
                                            <!-- name="" needs to be the same if you want only one to be allowed -->
                                            <input type="radio" name="trained_models_shared" id="trained_models_shared" onclick="Competition.registationCanProceed();" value="shared">
                                            <label for="trained_models_shared">Share trained models</label>
                                            <p>Upon Challenge completion, our team agrees that our trained models and Docker submission WILL be made public by MIDRC, allowing us to be eligible for a monetary award.</p>
                                            <br>
                                            <input type="radio" name="trained_models_shared" id="trained_models_not_shared" onclick="Competition.registationCanProceed();" value="not_shared">
                                            <label for="trained_models_not_shared">Do not share trained models</label>
                                            <p>Our team wishes to participate in the Challenge, but we do NOT wish for our submission and trained models to be made public by MIDRC. We understand that our team will therefore not be eligible for a monetary award.</p>
                                            <br>
                                        </div>
                                        <input type="submit" id="participateButton" class="disabledStatus btn btn-primary margin-top" value="Register" />
                                    </form>
                                {% elif my_status == "pending" %}
                                    <p>Your request to participate in this challenge has been received and a decision is pending.</p>
                                {% elif my_status == "denied" %}
                                    <p>Your request to participate in this competition was denied or your privileges have been suspended.</p>
                                    {% if my_participant.reason %}
                                        <p>Reason: {{my_participant.reason}}</p>
                                    {% endif %}
                                {% endif %}
                                {% if my_status == "approved" %}
                                    {% include "web/competitions/_innertabs.html" %}
                                {% endif %}
                            {% endif %}
                        {% elif tab.codename == 'results' %}
                            {% include "web/competitions/_results.html"%}
                        {% else %}
                            {% include "web/competitions/_innertabs.html" %}
                        {% endif %}
                    </div>
                </div>

            {% endfor %}
        </div>
    </section>
        <div class="row">
        <div class="col-sm-4">
            {% if competition.show_top_three and top_three %}
                <table class="table">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Username</th>
                        <th>Score</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for leader in top_three %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ leader.username }}</td>
                            <td>{{ leader.score }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            {% endif %}
        </div>
        <div class="col-sm-8">
            {% if competition.show_chart %}
                {% if graph %}
                    {% include "web/competitions/_chart.html" %}
                {% endif %}
            {% else %}
                <!-- Do nothing -->
            {% endif %}
        </div>
    </div>
</div>

{% endblock content %}

{% block jsincludes %}
    <script>
        $('#view_all_phases').on('click', function(e){
            $('#competition_tab_nav a[href="#phases"]').tab('show');
        });
        $(function(){
            var show_location = function(hash) {
                var main_tab = hash.split('-')[0];
                var sub_tab = hash.split('-')[1];

                $('#competition_tab_nav a[href="' + main_tab + '"]').tab('show');
                $(main_tab + ' .innertabs a[href="' + main_tab + '-' + sub_tab + '"]').tab('show');
            };

            if(location.hash !== ''){
                show_location(location.hash);
            }else {
                $('#competition_tab_nav a:first').tab('show')
            }
            $('#competition_tab_nav a, .innertabs a').on('show.bs.tab', function(e){
                return location.hash = $(e.target).attr('href').substr(1);
            });
            if($('#participate-submit_results').hasClass('active')){
                $('#submissions_phase_buttons .active').click();
            } else if($('#results').hasClass('active')){
                $('#results_phase_buttons .active').click();
            };
            $('a[href="#participate-submit_results"]').on('shown.bs.tab', function(e){
                $($(e.target).attr('href') + ' .active').click();
            });
            $('a[href="#results"]').on('shown.bs.tab', function(e){
                $($(e.target).attr('href') + ' .active').click();
            });

            $('#learn_the_details .col-sm-9 a').on('click', function() {
                show_location('#' + $(this).attr('href').split('#')[1]);
            });
        });

    </script>
{% endblock %}

{% block extra_headers %}
    {{ submission_upload_form.media }}
{% endblock %}