Show badge progress in badge progress dashboard

CollaborationSystem/urls.py

@@ -79,6 +79,7 @@
     url(r'^article-revision/(?P<pk>\d*)/$', articleview.SimpleModelHistoryCompareView.as_view(template_name='revision_article.html'), name='article_revision' ),
 
     url(r'^mydashboard/$', user_views.user_dashboard, name='user_dashboard'),
+    url(r'^mydashboard/badges$', user_views.badges_progress_dashboard, name='badges_progress_dashboard'),
     url(r'^community-group-create/(?P<pk>\d+)/$', communityview.CreateSubCommunityView.as_view(), name='community_group'),
 
     url(r'^group-view/(?P<pk>\d+)/$', group_views.group_view, name='group_view'),

UserRolesPermission/views.py

@@ -119,6 +119,12 @@ def user_dashboard(request):
     else:
         return redirect('login')
 
+def badges_progress_dashboard(request):
+    if request.user.is_authenticated:
+        return render(request, 'badges_progress_dashboard.html')
+    else:
+        return redirect('login')
+
 def home(request):
 	state = States.objects.get(name='publish')
 	articles=Articles.objects.filter(state=state).order_by('-views')[:3]

templates/badges_progress_dashboard.html

@@ -0,0 +1,94 @@
+{% extends 'base.html' %}
+{%load static %}
+{% block css %}
+  <link href="{% static 'jquery-pagination/pagination.css' %}" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block breadcrumb %}
+  {% if user.is_authenticated %}
+  <li class="breadcrumb-item active">{{user.username}}'s Dashboard</li>
+  <li class="breadcrumb-item active">
+  	   <a href="{% url 'user_insight_dashboard'%}">Badges</a>
+  </li>
+  {% endif %}
+
+
+{% endblock %}
+
+{% block content %}
+
+<div class="container">
+  <div class="row">
+    <div class="col-md-12">
+      <h1>Badge Progress</h1>
+    </div>
+  </div>
+
+  <div class="badge-container">
+
+  </div>
+</div>
+
+{% endblock %}
+
+{% block javascript %}
+  <script src="{% static 'jquery-pagination/pagination.js' %}"></script>
+  <script>
+    $.ajax({
+      url: '/api/reputation/badges',
+      type: 'GET',
+      success: function(communities) {
+        var badgeContainer = $('.badge-container');
+
+        for (var i = 0; i < communities.length; i++) {
+          var rowDiv = $('<div>', {
+            'class': 'row'
+          });
+          var community = communities[i].community;
+          rowDiv.append('<h2 style="margin: 5px">' + community.name + '</h2>');
+
+          var badges = communities[i].badges;
+          var badgeLevelMapping = {
+            '1': 'btn-secondary',
+            '2': 'btn-danger',
+            '3': 'btn-warning',
+            '4': 'btn-primary',
+            '5': 'btn-success'
+          };
+
+          for (var j = 0; j < badges.length; j++) {
+            var badge = badges[j];
+
+            var colDiv = $('<div>', {
+              'class': 'col-md-2 text-center',
+              'css': {
+                'border': '1px solid grey',
+                'margin': '5px',
+                'border-radius': '5px',
+                'padding': '5px'
+              }
+            });
+
+            colDiv.append(`
+              <div class="card" style="width: 18rem;">
+                <div class="card-body">
+                  <h5 class="card-title">
+                    <span class="btn ${badgeLevelMapping[badge.level]}">${badge.title}</button>
+                  </h5>
+                  <span>Progress: ${Math.round(badge.progress)}%</span>
+                </div>
+              </div>
+            `);
+
+            rowDiv.append(colDiv);
+          }
+
+
+
+
+          badgeContainer.append(rowDiv);
+        }
+      }
+    });
+  </script>
+{% endblock %}

templates/base.html

@@ -178,6 +178,7 @@
 
             <li><a href="{% url 'view_profile' %}">My Profile</a></li>
             <li><a href="{% url 'user_dashboard' %}">Dashboard</a></li>
+            <li><a href="{% url 'badges_progress_dashboard' %}">Badge Progress</a></li>
             <li><a href="{% url 'logout' %}">Log out</a></li>
           </ul>
         </li>