E2105. Track the time students look at other submissions

.gitignore

@@ -211,4 +211,6 @@ pg_data
 .ruby-version
 mysql2psql.yml
 *.pem
-t.csv
+t.csv
+
+*.pstore

app/assets/javascripts/review_time.js

@@ -0,0 +1,138 @@
+/**
+ * Signal the submission viewing even controller to start timing
+ * for a particular review asset.
+ *
+ * @param map_id The ID of the review map from Expertiza
+ * @param round The Review Round e.g. 1, 2, etc
+ * @param link The asset being review.
+ */
+function startTime(map_id, round, link) {
+    $.ajax({
+        type: "POST",
+        dataType: "json",
+        url: '/submission_viewing_events/start_timing',
+        data: $.param({
+            submission_viewing_event: {
+                map_id: map_id,
+                round: round,
+                link: link
+            }
+        })
+    });
+}
+
+/**
+ * Signal the submission viewing even controller to stop timing
+ * for a particular review asset.
+ * @param map_id The ID of the review map from Expertiza
+ * @param round The Review Round e.g. 1, 2, etc
+ * @param link The asset being review.
+ */
+function endTime(map_id, round, link) {
+    var data = {
+        submission_viewing_event: {
+            map_id: map_id,
+            round: round
+        }
+    };
+
+    if (link) {
+        data.submission_viewing_event.link = link;
+    }
+
+    $.ajax({
+        type: 'POST',
+        dataType: 'json',
+        async: false,
+        url: '/submission_viewing_events/end_timing',
+        data: $.param(data)
+    });
+}
+
+/**
+ * Signal the submission viewing event controller to
+ * stop timing for all open review assets for [round].
+ *
+ * @param map_id The ID of the review map from Expertiza
+ * @param round The Review Round e.g. 1, 2, etc
+ */
+function endRound(map_id, round) {
+    $.ajax({
+        type: 'POST',
+        dataType: 'json',
+        async: false,
+        url: '/submission_viewing_events/end_timing',
+        data: $.param({
+            submission_viewing_event: {
+                map_id: map_id,
+                round: round
+            }
+        })
+    });
+}
+
+/**
+ * Signal the submission viewing event controller to stop
+ * timing for all review assets for [round] and persist
+ * their timing data.
+ *
+ * @param map_id The ID of the review map from Expertiza
+ * @param round The Review Round e.g. 1, 2, etc
+ */
+function endRoundAndSave(map_id, round) {
+    $.ajax({
+        type: 'POST',
+        dataType: 'json',
+        async: false,
+        url: '/submission_viewing_events/end_round_and_save',
+        data: $.param({
+            submission_viewing_event: {
+                map_id: map_id,
+                round: round
+            }
+        })
+    });
+}
+
+/**
+ * Signal the submission viewing event controller to
+ * stop and restart timing for all review assets for [round].
+ *
+ * @param map_id The ID of the review map from Expertiza
+ * @param round The Review Round e.g. 1, 2, etc
+ */
+function resetRound(map_id, round) {
+    $.ajax({
+        type: 'POST',
+        dataType: 'json',
+        async: false,
+        url: '/submission_viewing_events/reset_timing',
+        data: $.param({
+            submission_viewing_event: {
+                map_id: map_id,
+                round: round
+            }
+        })
+    });
+}
+
+/**
+ * Signal the submission viewing event controller to persist
+ * timing for all review assets to the database.
+ * @param map_id The ID of the review map from Expertiza
+ * @param round The Review Round e.g. 1, 2, etc
+ */
+function saveAll(map_id, round) {
+    $.ajax({
+        type: 'POST',
+        dataType: 'json',
+        async: false,
+        url: '/submission_viewing_events/hard_save',
+        data: $.param({
+            submission_viewing_event: {
+                map_id: map_id,
+                round: round
+            }
+        })
+    });
+}

app/assets/javascripts/time_canvas_handler.js

@@ -0,0 +1,100 @@
+
+//this function render the pie chat for time tracking detail
+function drawTimeCanvas(chartdata,resd) {
+
+    var table = resd.tables;
+    var stats = resd.stats;
+
+    if(table.length == 0 || chartdata.datasets[0].data.length == 0){
+        $("#timeModalBody").empty().html("<p>This review has no time detail avaliable</p>");
+        return;
+    }
+
+    //initializing the timeModal view
+    $("#timeModalBody").empty().html("<div class=\"time-canvas-container\">" +
+        "<canvas id=\"timeCanvas\" width=\"300\" height=\"300\"></canvas>"+
+        "</div>"+
+        "<table id=\"timeTable\" class=\"time-table\">"+
+        "<tbody id=\"timeTableBody\">"+
+        "<tr>"+
+        "<th>Subject</th>"+
+        "<th>Time</th>"+
+        "<th>Avg.</th>"+
+        "</tr>" +
+        "</tbody>" +
+        "</table>" +
+        "<table id=\"statTable\" class=\"stat-table\">"+
+        "<tbody id=\"statTableBody\">"+
+        "<tr>"+
+        "<th>Class Stats</th>"+
+        "<th>Value</th>"+
+        "</tr>" +
+        "</tbody>" +
+        "</table>");
+
+    for(var i = 0 ; i < table.length ; i++){
+        var d = table[i];
+        $('#timeTable > :last-child').append("<tr>" +
+            "<td>" + d.subject + "</td>" +
+            "<td>" + d.timeCost + "</td>" +
+            "<td>" + d.avgTime +"</td>" +
+            "</tr>");
+
+    }
+
+    for(var i = 0 ; i < stats.length ; i++){
+        var d = stats[i];
+        $('#statTable > :last-child').append("<tr>" +
+            "<td>" + d.title + "</td>" +
+            "<td>" + d.value + "</td>" +
+            "</tr>");
+
+    }
+
+    var ctx = $("#timeCanvas").get(0).getContext("2d");
+    var pieChart = new Chart(ctx, {
+        type: 'pie',
+        data: chartdata,
+        options:{
+            plugins: {
+                colorschemes: {
+                    scheme: 'office.Atlas6'
+                }
+            }
+        }
+    });
+}
+
+//this function pop up the modal and do AJAX call to load time tracking data.
+function displayTimeDetail(resp_map_id,round){
+    $("#timeModalBody").empty().html("<p>Loading data...(This might need few seconds)</p>")
+    $("#timeModal").show();
+    $.ajax({
+        url: '/submission_viewing_events/getTimingDetails',
+        method: 'POST',
+        dataType: 'json',
+        data: {
+            reponse_map_id: resp_map_id,
+            round: round
+        },
+        success: function (jsonResponse) {
+            chartData = {
+                labels: jsonResponse.Labels,
+                datasets: [{
+                    data: jsonResponse.Data,
+                    borderWidth: 1
+                }]
+            };
+
+            drawTimeCanvas(chartData,jsonResponse);
+        },
+        error: function(xhr, textStatus, errorThrown){
+            $("#timeModalBody").empty().html("<p>Failed, cannot get time details at this time..</p>")
+        }
+    });
+}
+
+//this function destroys the modal view.
+$("#closeTimeModal").click(function (){
+    $("#timeModal").hide();
+});

app/assets/javascripts/window_manager.js

@@ -0,0 +1,37 @@
+/**
+ * WindowManager class.
+ *
+ * The WindowManager has been added to DRY up
+ * logic for managing windows in a stack/queue.
+ */
+function WindowManager() {
+    this.windows = [];
+}
+
+/**
+ * Add [window] to the managed window queue as long
+ * as it is not null.
+ * @param window
+ */
+WindowManager.prototype.manage = function(window) {
+    if (window) {
+        this.windows.push(window);
+    }
+};
+
+/**
+ * Closes all windows being managed by the manager,
+ * and empties the queue.
+ */
+WindowManager.prototype.closeAll = function() {
+    while (this.windows.length) {
+        this.windows.shift().close();
+    }
+};
+
+/**
+ * @returns {number} The number of windows in the queue
+ */
+WindowManager.prototype.size = function() {
+    return this.windows.length;
+};