Add a screen to view own solutions

3 files changed, 97 insertions, 13 deletions

diff --git a/js/codeq/comms.js b/js/codeq/comms.js
index d3f9252..c3f86f5 100644
--- a/js/codeq/comms.js
+++ b/js/codeq/comms.js
@@ -469,6 +469,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
             });
         },
 
+        getSolutions: function commsGetSolutions (problem_ids) {
+            return this.send({
+                'action': 'get_solutions',
+                'problem_ids': problem_ids
+            });
+        },
+
         loadProblem: function commsLoadProblem (problem_id) {
             return this.send({
                 'action': 'load_problem',
diff --git a/js/codeq/problem_list.js b/js/codeq/problem_list.js
index 97bac25..e5ca36e 100644
--- a/js/codeq/problem_list.js
+++ b/js/codeq/problem_list.js
@@ -214,10 +214,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
             var li = languageIdentifier, // a shorthand
                 rawTranslations = data.translations || {},
                 groups = data.groups || [],
-                Ngroups = groups.length,
                 html = [],
                 problemReferences = [],
-                group, problems, Nproblems, problem, i, j, nrefs,
+                groupReferences = [], groupProblemIDs,
+                group, problems, problem, i, j, nrefs,
                 baseTabIndex = 200; // tabindex attribute of the first problem link
             var langDict = convertTranslations(rawTranslations, 'name', 'description'), // this will be the resulting dictionary: multi-level keys that lead up to the lang-dict
                 groupDict, problemDict;
@@ -227,26 +227,32 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
             // title: HTML structure for "name" and "desc"
             html.push('<h1 class="language-title" ', ta(langDict.name), '></h1><hr>');
             html.push('<p class="language-description" ', ta(langDict.description), '></p>');
+
             // content: problem directory
-            for (i = 0; i < Ngroups; i++) {
+            for (i = 0; i < groups.length; i++) {
                 group = groups[i] || {};
+                problems = group.problems || [];
+
                 groupDict = convertTranslations(group.translations, 'name', 'description'); // the group-level translations, added will
                 codeq.template.processDictionary(groupDict.description,
                         [languageIdentifier, group.identifier]);
+
                 // group content
-                html.push('<h2 class="group-title" ', ta(groupDict.name), '></h2>');
+                html.push('<h2 class="group-title group-' + i + '"><span ', ta(groupDict.name), '></span></h2>');
                 html.push('<div class="group-description" ', ta(groupDict.description), '></div>');
                 html.push('<ul class="group-problems">');
+
                 // problem content
-                problems = group.problems || [];
-                Nproblems = problems.length;
-                for (j = 0; j < Nproblems; j++) {
+                groupProblemIDs = [];
+                for (j = 0; j < problems.length; j++) {
                     nrefs = problemReferences.length;
                     problem = problems[j] || {};
                     problemDict = convertTranslations(problem.translations, 'name');
                     html.push('<li><a href="#" tabindex="' + (baseTabIndex+nrefs) + '"' + ' class="problem-', '' + nrefs, '" ', ta(problemDict.name), '></a></li>');
                     problemReferences.push({'g': group.identifier || 'nogroup', 'p': problem.identifier || 'noproblem', 'id': problem.id});
+                    groupProblemIDs.push(problem.id);
                 }
+                groupReferences.push(groupProblemIDs);
                 html.push('</ul>');
             }
 
@@ -254,6 +260,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
                 'language': languageIdentifier, // 'prolog', 'python', ...
                 'html': html.join(''), // the DOM structure (without textual content), as HTML text
                 'refs': problemReferences, // array of problem info {g: group, p: problem, id: problem_id}, referenced from DOM <a> elements
+                'groups': groupReferences, // array of group info [problem_id1, problem_id2, …]
                 'commonDef': {
                     'hint': processHints(rawTranslations), // hint translations: keyword -> lang -> value
                     'hint_type': data.hint_type || {}
@@ -286,18 +293,39 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
         },
 
         /**
-         * Show attempted/solved status in the link for every problem.
+         *  Update mutable data in the problem list screen.
          */
-        showAttempts = function (languageData, attempts) {
-            var i;
+        updateDom = function (languageData, attempts) {
+            var problems = languageData.refs,
+                groups = languageData.groups,
+                jqGroup = jqScreen.find('h2.group-title'),
+                i;
+
+            // show attempted/solved status in the link for each problem
             for (i = 0; i < languageData.refs.length; i++) {
                 var ref = languageData.refs[i];
                 if (ref.id in attempts) {
                     jqScreen.find('a.problem-'+i)
-                            .removeClass('solved attempted')
-                            .addClass(attempts[ref.id] ? 'solved' : 'attempted');
+                        .removeClass('solved attempted')
+                        .addClass(attempts[ref.id] ? 'solved' : 'attempted');
                 }
             }
+
+            // add links to view all solutions for each group
+            jqGroup.find('a.view-solutions').remove();
+            jqGroup.each(function () {
+                var group = +$(this).attr('class').split(' ')[1].split('-')[1],
+                    problem_ids = groups[group].filter(function (pid) { return pid in attempts }),
+                    link;
+                if (problem_ids.length > 0) {
+                    var link = $('<a class="view-solutions"><span class="glyphicon glyphicon-download-alt"></span></a>')
+                        .on('click', function (e) {
+                            e.preventDefault();
+                            codeq.globalStateMachine.transition('solutions', problem_ids);
+                        });
+                    $(this).append(' ', link);
+                }
+            });
         },
 
         // ================================================================================
@@ -418,7 +446,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */
                     createDom(data);
                 }
                 currentLanguage = language;
-                showAttempts(data, attemptData.data);
+                updateDom(data, attemptData.data);
             })).done();
 
             jqScreen.css('display', '');
diff --git a/js/codeq/solutions.js b/js/codeq/solutions.js
new file mode 100644
index 0000000..399c934
--- /dev/null
+++ b/js/codeq/solutions.js
@@ -0,0 +1,49 @@
+/* CodeQ: an online programming tutor.
+   Copyright (C) 2016 UL FRI
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License as published by the Free
+Software Foundation, either version 3 of the License, or (at your option) any
+later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>. */
+
+(function(){
+    "use strict";
+    var jqScreen = $('#screen_solutions'),
+        jqSolutions = jqScreen.find('.solutions'),
+        jqBtnGoBack = jqScreen.find('.btnGoBack');
+
+    // Register with the state machine
+    codeq.globalStateMachine.register('solutions', {
+        'jqScreen': jqScreen,
+        'isModal': true,
+
+        'enter': function (problem_ids) {
+            jqBtnGoBack.on('click', function () {
+                history.back();
+            });
+            codeq.comms.getSolutions(problem_ids)
+            .then(function (solutions) {
+                var i;
+                solutions = solutions.data;
+                for (i = 0; i < solutions.length; i++) {
+                    jqSolutions.append('<pre>' + solutions[i].trim() + '</pre>');
+                }
+            })
+            .done();
+            jqScreen.css('display', '');
+        },
+        'exit' : function(){
+            jqBtnGoBack.off('click');
+            jqSolutions.empty();
+            jqScreen.css('display', 'none');
+        }
+    });
+})();