Add progress bars to the staff grading and peer grading views.

lms/static/coffee/src/peer_grading/peer_grading.coffee

@@ -9,5 +9,19 @@ class PeerGrading
 
     @message_container = $('.message-container')
     @message_container.toggle(not @message_container.is(':empty'))
+  
+    @problem_list = $('.problem-list')
+    @construct_progress_bar()
+
+  construct_progress_bar: () =>
+    problems = @problem_list.find('tr').next()
+    problems.each( (index, element) =>
+      problem = $(element)
+      progress_bar = problem.find('.progress-bar')
+      bar_value = parseInt(problem.data('graded'))
+      bar_max = parseInt(problem.data('required'))
+      progress_bar.progressbar({value: bar_value, max: bar_max})
+    )
+    
 
 $(document).ready(() -> new PeerGrading())

lms/static/coffee/src/staff_grading/staff_grading.coffee

@@ -343,9 +343,10 @@ class StaffGrading
     @problem_list.html('''
         <tr>
             <th>Problem Name</th>
-            <th>Number Graded</th>
-            <th>Number Pending</th>
-            <th>Number Required</th>
+            <th>Graded</th>
+            <th>Pending</th>
+            <th>Required</th>
+            <th>Progress</th>
         </tr>
     ''')    
     @breadcrumbs.html('')
@@ -389,10 +390,15 @@ class StaffGrading
   render_list: () ->
     for problem in @problems
       problem_row = $('<tr>')
-      problem_row.append($('<td>').append(@problem_link(problem)))
+      problem_row.append($('<td class="problem-name">').append(@problem_link(problem)))
       problem_row.append($('<td>').append("#{problem.num_graded}"))
       problem_row.append($('<td>').append("#{problem.num_pending}"))
       problem_row.append($('<td>').append("#{problem.num_required}"))
+      row_progress_bar = $('<div>').addClass('progress-bar')
+      progress_value = parseInt(problem.num_graded)
+      progress_max = parseInt(problem.num_pending) + progress_value
+      row_progress_bar.progressbar({value: progress_value, max: progress_max})
+      problem_row.append($('<td>').append(row_progress_bar))
       @problem_list.append(problem_row)
 
   render_problem: () ->

lms/static/sass/course/_staff_grading.scss

@@ -29,11 +29,28 @@ div.peer-grading{
         display: none;
     }
 
-    ul
+    .problem-list
     {
-        li
+        text-align: center;
+        table-layout: auto;
+        width:100%;
+        th
+        {
+            padding: 10px;
+        }
+        td
+        {
+            padding:10px;
+        }
+        td.problem-name
+        {
+            text-align:left;
+        }
+        .ui-progressbar
         {
-            margin: 16px 0px;
+            height:1em;
+            margin:0px;
+            padding:0px;
         }
     }
 

lms/templates/peer_grading/peer_grading.html

@@ -30,14 +30,15 @@
                 <table class="problem-list">
                     <tr>
                         <th>Problem Name</th>
-                        <th>Number Graded</th>
-                        <th>Number Pending</th>
-                        <th>Number Required</th>
+                        <th>Graded</th>
+                        <th>Pending</th>
+                        <th>Required</th>
+                        <th>Progress</th>
                     </tr>
                 %for problem in problem_list:
-                <tr>
-                    <td>
-                        <a href="${ajax_url}/problem?location=$problem['location']">${problem['problem_name']}</a>
+                <tr data-graded="${problem['num_graded']}" data-required="${problem['num_required']}">
+                    <td class="problem-name">
+                        <a href="${ajax_url}problem?location=${problem['location']}">${problem['problem_name']}</a>
                     </td>
                     <td>
                         ${problem['num_graded']}
@@ -48,6 +49,10 @@
                     <td>
                         ${problem['num_required']}
                     </td>
+                    <td>
+                        <div class="progress-bar">
+                        </div>
+                    </td>
                 </tr>
                 %endfor
                 </table>