divided the login and problem chooser into two different screens

4 files changed, 148 insertions, 97 deletions

diff --git a/index.html b/index.html
index 69a8f60..5c5d7b9 100644
--- a/index.html
+++ b/index.html
@@ -62,6 +62,29 @@
                     <td style="text-align: right;">Password:</td>
                     <td><input type="password" name="password" id="password"></td>
                 </tr>
+                <!--<tr>
+                    <td style="text-align: right;">Problem:</td>
+                    <td>
+                        <select name="problem_group" id="problem_group" style="min-width: 10em;">
+                        </select>
+                        <select name="problem" id="problems" style="min-width: 10em;">
+                        </select>
+                    </td>
+                </tr>-->
+                <tr>
+                    <td colspan="2" style="text-align: center;">
+                        <button type="button" id="submit">Login</button>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div id="screen_language" style="text-align: center; display: none;">
+            <h1>CodeQ Select Problem</h1>
+            <hr>
+            <table style="margin: 0 auto;">
+                <tbody>
                 <tr>
                     <td style="text-align: right;">Problem:</td>
                     <td>
@@ -73,7 +96,7 @@
                 </tr>
                 <tr>
                     <td colspan="2" style="text-align: center;">
-                        <button type="button" id="submit">Login</button>
+                        <button type="button" id="submit_problem">Select</button>
                     </td>
                 </tr>
                 </tbody>
@@ -136,6 +159,7 @@
         <script src="js/codeq/prolog.js"></script>
         <script src="js/codeq/python.js"></script>
         <script src="js/codeq/login.js"></script>
+        <script src="js/codeq/language.js"></script>
         <script src="js/codeq/startup.js"></script>
     </body>
 </html>
diff --git a/js/codeq/language.js b/js/codeq/language.js
new file mode 100644
index 0000000..78fa83a
--- /dev/null
+++ b/js/codeq/language.js
@@ -0,0 +1,101 @@
+/**
+ * Created by robert on 9/18/15.
+ */
+
+(function(){
+    codeq.globalStateMachine.register('language',{
+        'enter': function(){
+            $('#disabled').css('display', '');
+            $('#disabled').css('cursor', 'wait');
+            codeq.comms.send({'action': 'list_problems'})//currently problem list and the actual login are still in the same state
+                .then(
+                function success(data) {
+                    var i, groups, group, problems, problem, first_group,
+                        jqGroup = $('#problem_group'),
+                        jqProblems = $('#problems'),
+                        html = [],
+                        mapping = {},
+                        onGroupChange = function () {
+                            var problems = mapping[jqGroup.val()],
+                                html = [],
+                                i, p;
+                            if (problems) {
+                                for (i = 0; i < problems.length; i++) {
+                                    p = problems[i];
+                                    html.push('<option value="', p.identifier, '">', p.name, '</option>\n')
+                                }
+                            }
+                            jqProblems.html(html.join(''));
+                        };
+
+                    if (data && (data.code === 0)) {
+                        $('#disabled').css('display', 'none');
+                        groups = data.problems;
+                        for (i = 0; i < groups.length; i++) {
+                            group = groups[i];
+                            var identifier = group.identifier.language + '/' + group.identifier.group;
+                            var name = group.name.language + ': ' + group.name.group;
+                            html.push('<option value="', identifier, '">', name, '</option>\n');
+                            mapping[identifier] = group.problems;
+                        }
+                        jqGroup.html(html.join(''));
+                        first_group = html[1];
+                        html = null;
+
+                        jqGroup.on('click', onGroupChange);
+                        jqGroup.val(first_group);
+                        onGroupChange();
+
+                        $("#submit_problem").on('click', function(){
+                            var identifier = $('#problem_group').val().split('/'),
+                                problem = $('#problems').val();
+                            if (identifier.length < 2) alert('Choose a problem group');
+                            else if (!problem) alert('Choose a problem');
+                            else {
+                                $('#disabled').css('display', '');
+                                codeq.comms.getProblem(identifier[0], identifier[1], problem)
+                                    .then(function (data) {
+                                        if (data.code !== 0) throw new Error('Failed to obtain problem data, code: ' + data.code + ', message: ' + data.message);
+                                        $('#disabled').css('display', 'none');
+                                        switch (identifier[0]) {
+                                            case 'prolog':
+                                                codeq.globalStateMachine.transition('prolog', data);
+                                                break;
+                                            case 'python':
+                                                codeq.globalStateMachine.transition('python', data);
+                                                break;
+                                            default:
+                                                alert('Unknown language: ' + identifier[0]);
+                                                break;
+                                        }
+                                    })
+                                    .fail(function (reason) {
+                                        $('#disabled').css('display', 'none');
+                                        alert('Login request failed: ' + reason);
+                                    })
+                                    .done();
+                            }
+                        });
+                        $('#screen_language').css('display', '');
+                    }
+                    else {
+                        $('#disabled').css('cursor', '');
+                        alert('Obtaining list of problems failed: code=' + data.code + ', reason=' + data.message);
+                    }
+                },
+
+                function failure(reason) {
+                    $('#disabled').css('cursor', '');
+                    alert('Request to obtain list of problems failed: ' + reason);
+                }
+            ).done();
+        },
+        'exit' : function(){
+            $('#problem_group').off();
+            $("#submit_problem").off();
+            $("#problem_group option").remove();//empty the selects
+            $("#problems option").remove();
+            $("#screen_language").css('display', 'none');
+        }
+    });
+})();
\ No newline at end of file
diff --git a/js/codeq/login.js b/js/codeq/login.js
index 5c93469..b09bf1e 100644
--- a/js/codeq/login.js
+++ b/js/codeq/login.js
@@ -4,105 +4,30 @@
 
 (function(){
     var loginFun = function(){
-        var identifier = $('#problem_group').val().split('/'),
-            problem = $('#problems').val();
-        if (identifier.length < 2) alert('Choose a problem group');
-        else if (!problem) alert('Choose a problem');
-        else {
-            $('#disabled').css('display', '');
-            codeq.comms.login($('#username').val(), $('#password').val())
-                .then(function (data) {
-                    $('#disabled').css('display', 'none');
-                    if (data.code !== 0) throw new Error('Login failed, code: ' + data.code + ', message: ' + data.message);
-                })
-                .then(function () {
-                    return codeq.comms.getProblem(identifier[0], identifier[1], problem);
-                })
-                .then(function (data) {
-                    if (data.code !== 0) throw new Error('Failed to obtain problem data, code: ' + data.code + ', message: ' + data.message);
-                    $('#disabled').css('display', 'none');
-                    switch (identifier[0]) {
-                        case 'prolog':
-                            // TODO: assignment to window for debug only
-                            //$('#screen_login').css('display', 'none');
-                            //$('#screen_prolog').css('display', '');
-                            codeq.globalStateMachine.transition('prolog', data);
-                            //window.phandler = codeq.createProgrammingLanguageHandler('prolog',data.data,codeq.makePrologTerminalHandler);//codeq.createPrologHandler(data.data);
-                            break;
-                        case 'python':
-                            // TODO: assignment to window for debug only
-                            //$('#screen_login').css('display', 'none');
-                            //$('#screen_prolog').css('display', '');
-                            codeq.globalStateMachine.transition('python', data);
-                            //window.phandler = codeq.createProgrammingLanguageHandler('python',data.data,codeq.makePythonTerminalHandler);//codeq.createPythonHandler(data.data);
-                            break;
-                        default:
-                            alert('Unknown language: ' + identifier[0]);
-                            break;
-                    }
-                })
-                .fail(function (reason) {
-                    $('#disabled').css('display', 'none');
-                    alert('Login request failed: ' + reason);
-                })
-                .done();
-        }
+        $('#disabled').css('display', '');
+        $('#disabled').css('cursor', 'wait');
+        codeq.comms.connect()
+            .then(function () {
+                return codeq.comms.login($('#username').val(), $('#password').val());
+            })
+            .then(function (data) {
+                $('#disabled').css('display', 'none');
+                $('#disabled').css('cursor', '');
+                if (data.code !== 0) throw new Error('Login failed, code: ' + data.code + ', message: ' + data.message);
+                codeq.globalStateMachine.transition('language');
+            })
+            .fail(function (reason) {
+                $('#disabled').css('display', 'none');
+                $('#disabled').css('cursor', '');
+                alert('Login request failed: ' + reason);
+            })
+            .done();
     };
     codeq.globalStateMachine.register('login',{
         'enter': function(){
-            codeq.comms.connect().then(function () {
-                return codeq.comms.send({'action': 'list_problems'});//currently problem list and the actual login are still in the same state
-            }).then(
-                function success(data) {
-                    var i, groups, group, problems, problem, first_group,
-                        jqGroup = $('#problem_group'),
-                        jqProblems = $('#problems'),
-                        html = [],
-                        mapping = {},
-                        onGroupChange = function () {
-                            var problems = mapping[jqGroup.val()],
-                                html = [],
-                                i, p;
-                            if (problems) {
-                                for (i = 0; i < problems.length; i++) {
-                                    p = problems[i];
-                                    html.push('<option value="', p.identifier, '">', p.name, '</option>\n')
-                                }
-                            }
-                            jqProblems.html(html.join(''));
-                        };
-
-                    if (data && (data.code === 0)) {
-                        $('#disabled').css('display', 'none');
-                        groups = data.problems;
-                        for (i = 0; i < groups.length; i++) {
-                            group = groups[i];
-                            var identifier = group.identifier.language + '/' + group.identifier.group;
-                            var name = group.name.language + ': ' + group.name.group;
-                            html.push('<option value="', identifier, '">', name, '</option>\n');
-                            mapping[identifier] = group.problems;
-                        }
-                        jqGroup.html(html.join(''));
-                        first_group = html[1];
-                        html = null;
-
-                        jqGroup.on('click', onGroupChange);
-                        jqGroup.val(first_group);
-                        onGroupChange();
-
-                        $("#submit").on('click', loginFun);
-                    }
-                    else {
-                        $('#disabled').css('cursor', '');
-                        alert('Obtaining list of problems failed: code=' + data.code + ', reason=' + data.message);
-                    }
-                },
-
-                function failure(reason) {
-                    $('#disabled').css('cursor', '');
-                    alert('Request to obtain list of problems failed: ' + reason);
-                }
-            ).done();
+            $("#submit").on('click', loginFun);
+            $("#screen_login").css('display', '');
+            $('#disabled').css('display', 'none');
         },
         'exit' : function(){
             $("#submit").off('click', loginFun);
diff --git a/js/codeq/prolog.js b/js/codeq/prolog.js
index e411895..e449de3 100644
--- a/js/codeq/prolog.js
+++ b/js/codeq/prolog.js
@@ -196,6 +196,7 @@
     var prologHandler;//created when we enter the prolog state and destroyed once we leave it
     codeq.globalStateMachine.register('prolog', {
         'enter': function (data) {
+            $('#disabled').css('cursor', 'wait');
             $('#disabled').css('display', '');
             $('#screen_prolog').css('display', '');//we have to show the screen now so the code editor shopws its initial values correctly
             prologHandler = createPrologHandler(data.data)//codeq.createProgrammingLanguageHandler('prolog',data.data,codeq.makePrologTerminalHandler);