From f7fd4cae500f737cfac82efe6f55754c9b036ee6 Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Thu, 18 Feb 2021 23:32:54 -0600
Subject: [PATCH] Add toggle button for ongoing contests

---
 templates/contest/list.html | 102 +++++++++++++++++++++++++-----------
 1 file changed, 70 insertions(+), 32 deletions(-)

diff --git a/templates/contest/list.html b/templates/contest/list.html
index 51117a6..791cb54 100644
--- a/templates/contest/list.html
+++ b/templates/contest/list.html
@@ -14,6 +14,18 @@
         .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 %}
+
     </style>
 {% endblock %}
 
@@ -32,6 +44,21 @@
                     '{{ _('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"));
+
             // var tooltip_classes = 'tooltipped tooltipped-e';
             //
             // $('.contest-tag').each(function () {
@@ -187,41 +214,52 @@
         {% endif %}
 
         {% if current_contests %}
-            <h4>{{ _('Ongoing 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>
+            <h4>
+                {{ _('Ongoing Contests') }} 
+                <button class="btn-contest" id="ongoing-btn">
+                    {% if page_obj and page_obj.number > 1%}
+                    {{_('Show')}}
+                    {% else %}
+                    {{_('Hide')}}
                     {% endif %}
-                </tr>
-                </thead>
-                <tbody>
-                {% for contest in current_contests %}
+                </button>
+            </h4>
+            <div id="ongoing-table">
+                <table class="contest-list table striped">
+                    <thead>
                     <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.time_before_end|as_countdown) }}</span>
-                                    {% endif %}
-                                    {{ time_left(contest) }}
-                                {% endif %}
-                            </div>
-                        </td>
-                        <td>
-                            {{ user_count(contest, request.user) }}
-                        </td>
-                        {{ contest_join(contest, request) }}
+                        <th style="width:90%">{{ _('Contest') }}</th>
+                        <th>{{ _('Users') }}</th>
+                        {% if not request.in_contest %}
+                            <th style="width:15%"></th>
+                        {% endif %}
                     </tr>
-                {% endfor %}
-                </tbody>
-            </table>
-            <br>
+                    </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.time_before_end|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>