gci/: Redesign the GCI Students web-page

The redesigned web-page displays the data
in a better UI/UX form with some additional
information to make it more interactive and
attractive.

Closes coala#257

Author: KVGarg

community/urls.py

@@ -7,7 +7,7 @@
 from django.conf import settings
 
 from community.views import HomePageView
-from gci.views import index as gci_index
+from gci.views import GCIStudentsList
 from gci.feeds import LatestTasksFeed as gci_tasks_rss
 from twitter.view_twitter import index as twitter_index
 from ci_build.view_log import BuildLogsView
@@ -86,7 +86,7 @@ def get_organization():
         distill_file='gci/tasks/rss.xml',
     ),
     distill_url(
-        r'gci/', gci_index,
+        r'gci/', GCIStudentsList.as_view(),
         name='community-gci',
         distill_func=get_index,
         distill_file='gci/index.html',

data/migrations/0005_contributor_location.py

@@ -3,5 +3,5 @@
 from . import views
 
 urlpatterns = [
-    url(r'^$', views.index, name='index'),
+    url(r'^$', views.GCIStudentsList.as_view(), name='index'),
 ]

data/migrations/0006_auto_20190615_1331.py

@@ -1,11 +1,13 @@
-from django.http import HttpResponse
 from datetime import datetime
 from calendar import timegm
+
 import logging
-import requests
 
+from django.views.generic import TemplateView
+
+from community.views import get_header_and_footer
+from data.models import Contributor
 from .students import get_linked_students
-from .gitorg import get_logo
 from .task import get_tasks
 
 STUDENT_URL = (
@@ -15,75 +17,69 @@
 )
 
 
-def index(request):
-    logger = logging.getLogger(__name__ + '.index')
-    try:
-        get_tasks()
-    except FileNotFoundError:
-        logger.info('GCI data not available')
-        s = ['GCI data not available']
-    else:
-        s = gci_overview()
-
-    return HttpResponse('\n'.join(s))
-
-
-def gci_overview():
-    logger = logging.getLogger(__name__ + '.gci_overview')
-    linked_students = list(get_linked_students())
-    if not linked_students:
-        logger.info('No GCI students are linked')
-        return ['No GCI students are linked']
-
-    org_id = linked_students[0]['organization_id']
-    org_name = linked_students[0]['organization_name']
-    s = []
-    s.append('<link rel="stylesheet" href="static/main.css">')
-
-    favicon = get_logo(org_name, 16)
-    with open('_site/favicon.png', 'wb') as favicon_file:
-        favicon_file.write(favicon)
-
-    org_logo = get_logo(org_name)
-    with open('_site/org_logo.png', 'wb') as org_logo_file:
-        org_logo_file.write(org_logo)
-
-    s.append('<link rel="shortcut icon" type="image/png" '
-             'href="static/favicon.png"/>')
-    s.append('<img src="static/org_logo.png" alt="'+org_name+'">')
-    s.append('<h2>Welcome</h2>')
-    s.append('Hello, world. You are at the {org_name} community GCI website.'
-             .format(org_name=org_name))
-    s.append('Students linked to %s issues:<ul class="students">' % org_name)
-    for student in linked_students:
-        student_id = student['id']
-        username = student['username']
-
-        r = requests.get('https://api.github.com/users/{}'.format(username))
-
-        if r.status_code == 404:
-            continue
-
-        student_url = STUDENT_URL.format(org_id=org_id,
-                                         student_id=student_id,
-                                         )
-        s.append('<li class="student">'
-                 'STUDENT ID: <a href="{student_url}">{student_id}</a><br />'
-                 '<div class="github-card" data-github="{username}" '
-                 'data-width="400" data-theme="default"></div>'
-                 .format(student_url=student_url, student_id=student_id,
-                         username=username))
-
-    timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
-    s.append('</ul><i id="time" class="timestamp" data-time="{unix}">'
-             'Last updated: {timestamp} '
-             '(<span id="ago" class="timeago"></span>)</i>'
-             .format(unix=timegm(datetime.utcnow().utctimetuple()),
-                     timestamp=timestamp))
-
-    s.append('<script src="//cdn.jsdelivr.net/gh/lepture/[email protected]'
-             '/jsdelivr/widget.js"></script>')
-    s.append('<script src="static/timeago.js"></script>')
-    s.append('<script>loadTimeElements()</script>')
-
-    return s
+class GCIStudentsList(TemplateView):
+    template_name = 'gci_students.html'
+
+    def get_all_students(self):
+        logger = logging.getLogger(__name__ + '.gci_overview')
+        linked_students = list(get_linked_students())
+        data = {
+            'students': list(),
+            'error': None
+        }
+        if not linked_students:
+            error_message = 'No GCI students are linked'
+            logger.info(error_message)
+            data['error'] = error_message
+            return data
+        org_id = linked_students[0]['organization_id']
+        for student in linked_students:
+            student_id = student['id']
+            username = student['username']
+            contributors = Contributor.objects.filter(login=username)
+            if contributors.exists():
+                contrib = contributors.first()
+                student['url'] = STUDENT_URL.format(org_id=org_id,
+                                                    student_id=student_id)
+                student['name'] = contrib.name
+                student['bio'] = contrib.bio
+                student['public_repos'] = contrib.public_repos
+                student['public_gists'] = contrib.public_gists
+                student['followers'] = contrib.followers
+                data['students'].append(student)
+            else:
+                logger.warning("GCI Student {} doesn't exists! Please check"
+                               ' the username.'.format(username))
+        return data
+
+    def get_gci_tasks_and_students(self):
+        logger = logging.getLogger(__name__ + '.index')
+        gci_students = {
+            'data': {},
+            'error': None
+        }
+        try:
+            get_tasks()
+        except FileNotFoundError:
+            logger.info('GCI data not available')
+            error_message = ('No GCI data is available. Please create a'
+                             ' tasks.yaml file containing GCI tasks related'
+                             ' data in it.')
+            gci_students['error'] = error_message
+        else:
+            data = self.get_all_students()
+            if data['error']:
+                gci_students['error'] = data['error']
+            else:
+                gci_students['data'] = data['students']
+        return gci_students
+
+    def get_data_updated_time(self):
+        return timegm(datetime.utcnow().utctimetuple())
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context = get_header_and_footer(context)
+        context['gci_students'] = self.get_gci_tasks_and_students()
+        context['updated_time'] = self.get_data_updated_time()
+        return context

gci/urls.py

@@ -0,0 +1,52 @@
+.data-fetch-error {
+    padding: 20px 20px 0px 20px;
+}
+
+.gci-students {
+    padding: 2% 2%;
+}
+
+.gci-students .student-card {
+    box-shadow: 0px 0px 25px 2px black;
+    background-color: #c7da99;
+    font-size: large;
+    border: 4px #6c9a55 solid;
+}
+
+
+.gci-students .student-image {
+    align-items: normal;
+}
+
+.gci-students .student-details {
+    width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+    .gci-students .student-card {
+       width: 45%;
+       height: 300px;
+       overflow-y: auto;
+    }
+}
+
+.participated-year,
+.gci-student-id,
+.public-repos,
+.public-gists,
+.followers {
+    color: #37474f;
+    font-weight: bold;
+    padding-right: 3px;
+}
+
+.web-page-details {
+    width: 100%;
+}
+
+.web-page-description,
+.data-updated-time,
+.data-fetch-error {
+    text-align: center;
+    font-size: large;
+}

gci/views.py

@@ -0,0 +1,31 @@
+$(document).ready(function(){
+    function generateTimeString(timestamp) {
+        var sec = ((new Date()).getTime() / 1000) - parseInt(timestamp);
+        var min = sec / 60;
+        var hour = min / 60;
+        var day = hour / 24;
+
+        var timeString = '';
+        if (day >= 1) {
+            timeString = Math.round(day) + ' days ago';
+        } else if (hour >= 1) {
+            timeString = Math.round(hour) + ' hours ago';
+        } else if (min >= 1) {
+            timeString = Math.round(min) + ' minutes ago';
+        } else {
+            timeString = Math.round(sec) + ' seconds ago';
+        }
+
+        return timeString;
+    }
+
+    function updateTimeAgo(time) {
+        time.text(" " + generateTimeString(time.attr('data-time')));
+    }
+
+    function loadTimeElements() {
+        updateTimeAgo($('#time'));
+    }
+
+    loadTimeElements();
+});