infinite scroll on leaderboard implemented

ContriHUB · Oct 26, 2018 · e63cfe0 · e63cfe0
1 parent c90d97b
commit e63cfe0
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 26 deletions.
diff --git a/ContriHub/settings.py b/ContriHub/settings.py
@@ -122,12 +122,12 @@
 else: 
     #this is for local you need not to make any changes here, 
     # it'll work unless you are sure about how to setup postgres/mysql etc    
-    DATABASES = {
-        'default': {
-            'ENGINE': 'django.db.backends.sqlite3',
-            'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
-        }
-    }
+    # DATABASES = {
+    #     'default': {
+    #         'ENGINE': 'django.db.backends.sqlite3',
+    #         'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
+    #     }
+    # }
     #An example how you can setup postgres sql in local, create a postgres db and provide relevant details in this format
     # DB_PASS = os.environ.get('CONTRIHUB_PASS', "")
     # DATABASES = {
@@ -140,20 +140,20 @@
     #         'PORT': '',
     #     }
     # }
-    # DATABASES = {
-    #     'default': {
-    #         'ENGINE': 'django.db.backends.mysql',
-    #         'OPTIONS': {
-    #             # 'read_default_file': '/path/to/my.cnf',
-    #         },
-    #         # 'NAME': os.path.join(BASE_DIR, 'testdb'),
-    #         'NAME': 'contrihub_db',
-    #         'USER': 'user',
-    #         'PASSWORD': '1234',
-    #         'HOST': '127.0.0.1',
-    #         'PORT': '',
-    #     }
-    # }
+    DATABASES = {
+        'default': {
+            'ENGINE': 'django.db.backends.mysql',
+            'OPTIONS': {
+                # 'read_default_file': '/path/to/my.cnf',
+            },
+            # 'NAME': os.path.join(BASE_DIR, 'testdb'),
+            'NAME': 'contrihub_db',
+            'USER': 'user',
+            'PASSWORD': '1234',
+            'HOST': '127.0.0.1',
+            'PORT': '',
+        }
+    }
 
 
 # Password validation

diff --git a/Projects/templates/Projects/leaderboard.html b/Projects/templates/Projects/leaderboard.html
@@ -24,11 +24,11 @@
             <th scope="col"><strong>Score</strong><br> (click on score to see Contributions)</th>
           </tr>
         </thead>
-        <tbody>
+        <tbody class="infinite-container">
 
           {% for user in users %}
-            <tr>
-              <th scope="row">{{forloop.counter}}</th>
+            <tr class="infinite-item">
+              <th scope="row">{{forloop.counter0|add:users.start_index}}</th>
               <td><a href="https://github.com/{{user.username}}">{{user.username}}</a></td>
               <td><a href="{%url 'contri_user' user.username %}" style="color:blue;">{{user.profile.points}}</a></td>
             </tr>
@@ -37,10 +37,17 @@
         </tbody>
       </table>
     </div>
-     <div class="card-footer">
-      <p class="text-muted">* Click on score to see contributions from user</p>
-    </div>
+
 </div>
+
+{% if users.has_next %}
+  <a class="infinite-more-link" href="?page={{users.next_page_number}}"></a>
+
+  <div class="loading">
+    <img src="{% static 'Projects/img/loader.gif' %}" alt="loading more issues" width="60px" style="display:block;margin-left:auto;margin-right:auto;">
+  </div>
+
+{% endif %}
 </div>
 
 
@@ -49,4 +56,17 @@
 
 
 {% block js_extra %}
+  <script>
+      $(document).ready(function(){
+          var infiniteScroll = new Waypoint.Infinite({
+          element: $('.infinite-container')[0],
+          onBeforePageLoad: function () {
+            $('.loading').show();
+          },
+          onAfterPageLoad: function () {
+            $('.loading').hide();
+          }
+        });
+      });
+  </script>
 {% endblock js_extra %}
diff --git a/Projects/views.py b/Projects/views.py
@@ -11,6 +11,8 @@
 
 from .models import Issues, Prs
 
+import time
+
 
 def home(request):
     if request.method == 'GET':
@@ -55,6 +57,15 @@ def home(request):
 def leaderboard(request):
     if request.method == 'GET':
         users = User.objects.all().filter(profile__role='student').order_by('-profile__points')
+        paginator = Paginator(users,5)
+        page = request.GET.get('page',1)
+        try:
+            users = paginator.get_page(page)
+        except PageNotAnInteger:
+            users = paginator.get_page(1)
+        except EmptyPage:
+            users = paginator.objects.none()
+        time.sleep(0.5)
         return render(request, 'Projects/leaderboard.html', {'users': users})