Add a screen to view own solutions

7 files changed, 121 insertions, 16 deletions

diff --git a/css/codeq.css b/css/codeq.css
index 0c30f62..9e4bd2e 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -158,14 +158,18 @@ div.vertical-line{
     margin: 0 1% 0 1%;
 }
 
-
-/* screen problems*/
+/* screen problems */
 .block {
     padding: 0;
     min-height: 4em;
     overflow: hidden;
 }
 
+/* screen solutions */
+h2.group-title a.view-solutions {
+    font-size: small;
+}
+
 /* description */
 .block.block1  {
     border-bottom: 1px solid #ddd;
diff --git a/index.html b/index.html
index 6234e3f..4640f19 100644
--- a/index.html
+++ b/index.html
@@ -319,6 +319,20 @@
         <!-- problem selection screen for a specific language: groups of problems, with descriptions -->
         <div class="container" id="screen_problem_list" style="display: none;"></div>
 
+        <!-- screen to display all user solutions for a given langauge -->
+        <div class="container" id="screen_solutions" style="display: none;">
+            <div class="row">
+                <div class="col-md-12">
+                    <h2 data-tkey="your_solutions">Your solutions</h2>
+                    <div class="btn-group">
+                        <button type="button" class="btn btn-default btnGoBack" data-tkey="go_back">Go back</button>
+                    </div>
+                    <hr>
+                    <div class="solutions"></div>
+                </div>
+            </div>
+        </div>
+
         <!-- problem screen: prolog -->
         <div class="container-fluid quadrants block1" id="screen_prolog" style="display: none;">
             <div class="row">
@@ -550,6 +564,7 @@
         <script src="js/codeq/prolog.js"></script>
         <script src="js/codeq/python.js"></script>
         <script src="js/codeq/robot.js"></script>
+        <script src="js/codeq/solutions.js"></script>
         <script src="js/codeq/signup.js"></script>
         <script src="js/codeq/login.js"></script>
         <script src="js/codeq/aaiLogin.js"></script>
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');
+        }
+    });
+})();
diff --git a/res/en.json b/res/en.json
index a4731ed..364dfbd 100644
--- a/res/en.json
+++ b/res/en.json
@@ -5,8 +5,9 @@
   "robot_address_placeholder": "IP address",
   "robot_address_title": "Set the robot's IPv4 or IPv6 address.",
   "settings": "User settings",
-  "problem_list": "Problems",
   "save": "Save",
+  "your_solutions": "Your solutions",
+  "problem_list": "Problems",
   "python": "Python",
   "prolog": "Prolog",
   "robot": "Robot",
diff --git a/res/sl.json b/res/sl.json
index 2743647..a9032ef 100644
--- a/res/sl.json
+++ b/res/sl.json
@@ -6,6 +6,7 @@
   "robot_address_title": "Vnesi IPv4 ali IPv6 naslov robota.",
   "settings": "Uporabniške nastavitve",
   "save": "Shrani",
+  "your_solutions": "Tvoje rešitve",
   "problem_list": "Naloge",
   "python": "Python",
   "prolog": "Prolog",