Add live contest notification

templates/blog/list.html

@@ -48,6 +48,14 @@
         h3 a {
             color: lightcyan;
         }
+
+        #add-clarification {
+            float: left;
+            color: chartreuse;
+        }
+        #add-clarification:hover {
+            color: cyan;
+        }
     </style>
 {% endblock %}
 
@@ -104,7 +112,16 @@
         <div class="blog-sidebar">
             {% if request.in_contest and request.participation.contest.use_clarifications %}
                 <div class="blog-sidebox sidebox">
-                    <h3>{{ _('Clarifications') }} <i class="fa fa-question-circle"></i></h3>
+                    <h3>{{ _('Clarifications') }}
+                            <i class="fa fa-question-circle"></i>
+                            {% if can_edit_contest %}
+                            <a href="{{url('new_contest_clarification', request.participation.contest.key)}}" 
+                               class="fa fa-plus-circle" 
+                               id="add-clarification"
+                               title="{{_('Add')}}">
+                            </a>
+                            {% endif %}
+                    </h3>
                     <div class="sidebox-content">
                         {% if has_clarifications %}
                             <ul>

templates/contest/clarification.html

@@ -0,0 +1,54 @@
+{% extends "base.html" %}
+
+{% block media %}
+    {{ form.media.css }}
+    <style>
+        form#clarification-form {
+            display: block;
+            margin: 0 auto;
+            width: 100%;
+            max-width: 750px;
+            padding-top: 1em;
+        }
+
+        #id_title {
+            width: 100%;
+        }
+
+        form#clarification-form .submit {
+            margin: 10px 0 0 auto;
+        }
+    </style>
+{% endblock %}
+
+{% block js_media %}
+{{ form.media.js }}
+<script>
+    $(function() {
+        $('#problem-select').select2({width: '40em'});
+    });
+</script>
+{% endblock %}
+
+{% block body %}
+    <form id="clarification-form" action="" method="POST" class="form-area">
+        {% csrf_token %}
+        {% if form.body.errors %}
+            <div class="form-errors">
+                {{ form.body.errors }}
+            </div>
+        {% endif %}
+        <h4>
+            <span>{{_('Problem')}}: </span>
+            <select name="problem" id="problem-select">
+                {% for problem in problems %}
+                    <option value="{{ problem.problem.code }}" class="point-dropdown">
+                        {{ problem.order }}. {{problem.problem.name}}
+                    </option>
+                {% endfor %}
+            </select>
+        </h4>
+        <div class="body-block">{{ form.body }}</div>
+        <button type="submit" class="submit">{{ _('Create') }}</button>
+    </form>
+{% endblock %}

templates/problem/list.html

@@ -132,6 +132,21 @@
         </script>
     {% endcompress %}
     {% if request.in_contest %}
+        {% if last_msg %}
+            <script type="text/javascript" src="{{ static('event.js') }}"></script>
+            <script>
+                function setup_event_contest(last_msg) {
+                    var channel = ['contest_clarification_' + {{request.participation.contest.id}}]
+                    return new EventReceiver(
+                        "{{ EVENT_DAEMON_LOCATION }}", "{{ EVENT_DAEMON_POLL_LOCATION }}",
+                        channel, last_msg, function (message) {
+                            notify_clarification(message);
+                        }
+                    );
+                }
+                setup_event_contest();
+            </script>
+        {% endif %}
         {% compress js %}
             <script src="{{ static('libs/tablesorter.js') }}" type="text/javascript"></script>
             <script type="text/javascript">

templates/problem/problem.html

@@ -47,11 +47,36 @@
             width: 0;
             height: 0;
         }
+
+        #clarification_header {
+            color: red;
+            cursor: pointer;
+        }
+        #clarification_header:hover {
+            color: orange;
+        }
     </style>
 {% endblock %}
 
 {% block content_js_media %}
     {% include "comments/media-js.html" %}
+    {% if request.in_contest %}
+        {% if last_msg %}
+            <script type="text/javascript" src="{{ static('event.js') }}"></script>
+            <script>
+                function setup_event_contest(last_msg) {
+                    var channel = ['contest_clarification_' + {{request.participation.contest.id}}]
+                    return new EventReceiver(
+                        "{{ EVENT_DAEMON_LOCATION }}", "{{ EVENT_DAEMON_POLL_LOCATION }}",
+                        channel, last_msg, function (message) {
+                            notify_clarification(message);
+                        }
+                    );
+                }
+                setup_event_contest();
+            </script>
+        {% endif %}
+    {% endif %}
     <script type="text/javascript">
         $(function() {
             $('#pdf_button').click(async function(e) {
@@ -61,6 +86,10 @@
                 }
                 frames['raw_problem'].print();
             });
+            $('#clarification_header').on('click', function() {
+                $('#clarification_header_container').hide();
+                window.scrollTo(0, document.body.scrollHeight);
+            })
         });
     </script>
 {% endblock %}
@@ -299,6 +328,15 @@
 {% endblock %}
 
 {% block description %}
+    {% if contest_problem and contest_problem.contest.use_clarifications and has_clarifications %}
+        <div id="clarification_header_container">
+            <i class="fa fa-question-circle"></i>
+            <a id="clarification_header">
+                {{ _('This problem has %d clarification(s)' % clarifications|length) }}
+            </a>
+        </div>
+    {% endif %}
+
     {% cache 86400 'problem_html' problem.id MATH_ENGINE LANGUAGE_CODE %}
         {{ description|markdown("problem", MATH_ENGINE)|reference|str|safe }}
     {% endcache %}