Adds Score Details

app/assets/javascripts/manage_submissions.js

@@ -1,4 +1,171 @@
-$(document).ready(function() {
+const manage_submissions_endpoints = {
+ 'score_details': 'submissions/score_details',
+}
+
+function get_score_details(course_user_datum_id) {
+ return new Promise((resolve, reject) => {
+ $.ajax({
+ url: manage_submissions_endpoints['score_details'],
+ type: 'GET',
+ data: { cuid: course_user_datum_id },
+ success: function (data) {
+ resolve(data);
+ },
+ error: function (err) {
+ console.log(err);
+ reject(err);
+ }
+ })
+ });
+}
+
+$(document).ready(function () {
+
+ $('.modal').modal();
+
+ $('.score-details').on('click', function () {
+ // Get the email 
+ const course_user_datum_id = $(this).data('cuid');
+ const email = $(this).data('email');
+
+ // Set the email
+ $('#score-details-email').html(email);
+
+ // Clear the modal content
+ $('#score-details-content').html('');
+
+ // Add a loading bar
+ $('#score-details-content').html(`
+ <div class="progress">
+ <div class="indeterminate"></div>
+ </div>`);
+
+ // Open the modal
+ $('#score-details-modal').modal('open');
+
+ // Fetch data and render it in the modal 
+ get_score_details(course_user_datum_id).then((data) => {
+ console.log(data);
+
+ const problem_headers = data.submissions[0].problems.map((problem) => {
+ const max_score = problem.max_score;
+ const autograded = problem.grader_id < 0 ? " (Autograded)" : "";
+ return `<th class="submission-th">
+ ${problem.name}
+ <br>
+ ${max_score} ${autograded}
+ </th>`;
+ }).join('');
+
+ const submissions_body = data.submissions.map((submission) => {
+
+ let tweak_value = data?.tweaks[submission.id]?.value ?? "None";
+ if (tweak_value != "None" && tweak_value > 0) {
+ tweak_value = `+${tweak_value}`;
+ }
+
+ // Convert to human readable date with timezone 
+ const human_readable_created_at = moment(submission.created_at).format('MMM Do YYYY, h:mm:ss a z Z');
+
+ const view_button = submission.filename ? 
+ `<div class="submissions-center-icons">
+ <a href="submissions/${submission.id}/view"
+ title="View the file for this submission"
+ class="btn small">
+ <i class='material-icons'>zoom_in</i>
+ </a>
+ <p>View Source</p>
+ </div>` 
+ : "None";
+
+ const download_button = 
+ /text/.test(submission.detected_mime_type) ?
+ `<div class="submissions-center-icons">
+ <a href="submissions/${submission.id}/download?forceMime=text/plain"
+ title="Download as text/plain"
+ class="btn small">
+ <i class='material-icons'>file_download</i>
+ </a>
+ <p>Download</p>
+ </div>` :
+ `<div class="submissions-center-icons">
+ <a href="submissions/${submission.id}/download"
+ title="Download the file for this submission"
+ class="btn small">
+ <i class='material-icons'>file_download</i>
+ </a>
+ <p>Download</p>
+ </div>`;
+
+ return `
+ <tr id="row-${submission.id}" class="submission-row">
+ <td class="submission-td">
+ ${submission.version}
+ </td>
+ <td class="submission-td">
+ ${human_readable_created_at}
+ </td>
+ <td class="submission-td">
+ ${submission.total}
+ </td>
+ ${submission.problems.
+ map((problem) =>
+ `<td class="submission-td">${data.scores[submission.id][problem.id]['score']}</td>`
+ ).join('')}
+ <td class="submission-td">
+ ${submission.late_penalty}
+ </td>
+ <td class="submission-td">
+ <a href="submissions/${submission.id}/edit">
+ ${tweak_value}
+ </a>
+ </td>
+ <td class="submission-td">
+ ${view_button}
+ ${download_button}
+ </td>
+ </tr>`;
+ }).join('');
+
+ const submissions_table =
+ ` <p>Click on non-autograded problem scores to edit or leave a comment </p>
+ <table class="prettyBorder" id="score-details-table">
+ <thead>
+ <tr>
+ <th class="submission-th">Version No.</th>
+ <th class="submission-th">Submission Date</th>
+ <th class="submission-th">Final Score</th>
+ ${problem_headers}
+ <th class="submission-th">Late Penalty</th>
+ <th class="submission-th">Tweak</th>
+ <th class="submission-th">Actions</th>
+ </tr>
+ </thead>
+ <tbody>
+ ${submissions_body}
+ </tbody>
+ </table>
+ `;
+
+ $('#score-details-content').html(`<div> ${submissions_table} </div>`);
+ $('#score-details-table').DataTable({
+ "order": [[0, "desc"]],
+ "paging": false,
+ "info": false,
+ "searching": false,});
+
+ }).catch((err) => {
+ console.log(err);
+ $('#score-details-content').html(`
+ <div class="row">
+ <div class="col s12">
+ <div class="card-panel red lighten-2">
+ ${err}
+ </div>
+ </div>
+ </div>`);
+ });
+ });
 
  // USE LATER FOR GROUPING ROWS (POSSIBLY):
 
@@ -65,7 +232,7 @@ $(document).ready(function() {
  return;
  });
 
- $('#submissions').on("click", ".cbox", function(e) {
+ $('#submissions').on("click", ".cbox", function (e) {
  var submissionId = parseInt(e.currentTarget.id.replace("cbox-", ""), 10);
  toggleRow(submissionId);
  e.stopPropagation();

app/assets/stylesheets/manage_submissions.css

@@ -0,0 +1,8 @@
+.score-details {
+ cursor: pointer;
+}
+
+#score-details-modal{
+ width: 90%;
+ height: auto;
+}

app/controllers/submissions_controller.rb

@@ -20,6 +20,38 @@ def index
  @autograded = @assessment.has_autograder?
  end
 
+ action_auth_level :score_details, :instructor
+ def score_details
+ cuid = params[:cuid]
+ submissions = @assessment.submissions.where(course_user_datum_id: cuid).order("created_at DESC")
+ scores = submissions.map(&:scores).flatten
+
+ # make a dictionary that makes submission id to score data
+ submission_id_to_score_data = {}
+ scores.each do |score|
+ if submission_id_to_score_data[score.submission_id].nil?
+ submission_id_to_score_data[score.submission_id] = {}
+ end
+ submission_id_to_score_data[score.submission_id][score.problem_id] = score
+ end
+
+ tweaks = {}
+ submissions.each do |submission|
+ tweaks[submission.id] = submission.tweak
+ end
+
+ autograded = @assessment.has_autograder?
+ submissions = submissions.as_json(seen_by: @cud)
+
+ render json: { submissions: submissions,
+ scores: submission_id_to_score_data,
+ tweaks: tweaks,
+ autograded: autograded }, status: :ok
+ rescue StandardError => e
+ render json: { error: e.message }, status: :not_found
+ nil
+ end
+
  # this works
  action_auth_level :new, :instructor
  def new

app/views/submissions/index.html.erb

@@ -3,6 +3,7 @@
 <% content_for :stylesheets do %>
  <%= stylesheet_link_tag "datatable.adapter" %>
  <%= stylesheet_link_tag "datatables-rows" %>
+ <%= stylesheet_link_tag "manage_submissions" %>
 <% end %>
 
 <% content_for :javascripts do %>
@@ -93,7 +94,13 @@
  <td class="submissions-td">
  <div class="submissions-score-align">
  <div class="score-num"><%= computed_score { submission.final_score(@cud) } %></div>
- <div class="score-icon"><i class="material-icons submissions-score-icon">zoom_in</i></div>
+ <div class="score-icon">
+ <a class="modal-trigger score-details" 
+ data-email="<%= submission.course_user_datum.email %>"
+ data-cuid=" <%= submission.course_user_datum.id %>">
+ <i class="material-icons submissions-score-icon">zoom_in</i>
+ </a>
+ </div> 
  </div>
  </td>
 
@@ -144,3 +151,11 @@
  <% end %> <%# End loop over submissions %>
  </tbody>
 </table>
+
+<div id="score-details-modal" class="modal">
+ <div class="modal-content">
+ <h3>Score Details for <span id="score-details-email"></span></h3>
+ <hr>
+ <div id="score-details-content"></div>
+ </div>
+</div>

config/routes.rb

@@ -140,7 +140,7 @@
  end
 
  resources :scores, only: [:create, :show, :update]
-
+ 
  member do
  get "destroyConfirm"
  get "download"
@@ -150,6 +150,7 @@
  collection do
  get "downloadAll"
  get "missing"
+ get "score_details"
  end
  end