diff options
| -rw-r--r-- | css/codeq.css | 39 | ||||
| -rw-r--r-- | index.html | 126 | ||||
| -rw-r--r-- | js/codeq/core.js | 4 | ||||
| -rw-r--r-- | js/codeq/hint.js | 2 | ||||
| -rw-r--r-- | js/codeq/login.js | 16 | ||||
| -rw-r--r-- | js/codeq/navigation.js | 5 | ||||
| -rw-r--r-- | js/codeq/robot.js | 3 | ||||
| -rw-r--r-- | js/codeq/settings.js | 32 | ||||
| -rw-r--r-- | js/codeq/statusbar.js | 26 | ||||
| -rw-r--r-- | js/codeq/translation.js | 4 | ||||
| -rw-r--r-- | res/en.json | 1 | ||||
| -rw-r--r-- | res/sl.json | 1 |
12 files changed, 161 insertions, 98 deletions
diff --git a/css/codeq.css b/css/codeq.css index c4ab380..d457089 100644 --- a/css/codeq.css +++ b/css/codeq.css @@ -185,6 +185,16 @@ body { } /* code_editor */ + #screen_prolog .block.block2 { + min-height: 100%; height: 100%; + } + + /* console */ + #screen_prolog .block.block3 { + min-height: 100%; height: 100%; + } + + /* code_editor */ #screen_python .block.block2 { min-height: 100%; height: 100%; } @@ -207,6 +217,21 @@ body { min-height: 50%; height: 50%; } + .quadrants#screen_prolog > * > .block { + overflow: auto; + min-height: 100%; height: 100%; + } + + /* code_editor */ + #screen_prolog .block.block2 { + min-height: 50%; height: 50%; + } + + /* console */ + #screen_prolog .block.block3 { + min-height: 50%; height: 50%; + } + .quadrants#screen_python > * > .block { overflow: auto; min-height: 100%; height: 100%; @@ -243,6 +268,16 @@ body { border-right: 1px solid #ddd; } + #screen_prolog .block.block1 { + min-height: 50%; height: 50%; + border-right: 0; + } + + /* hints */ + #screen_prolog .block.block4 { + min-height: 50%; height: 50%; + } + #screen_python .block.block1 { min-height: 50%; height: 50%; border-right: 0; @@ -383,10 +418,6 @@ ul.dropdown-menu a { cursor: pointer; } -.lang-selection ul.dropdown-menu { - min-width: 4em; -} - /* main screen */ #screen_language a { cursor: pointer; @@ -44,12 +44,6 @@ </ul> <ul class="nav navbar-nav navbar-right"> <p class="navbar-text"><span data-tkey="signed_in_as">Signed in as </span><span id="signed-in-title">Janez</span></p> - <!--<li class="dropdown lang-selection"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"> - <span class="lang-choice"></span> - </a> - <ul class="dropdown-menu"></ul> - </li>--> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"> <span class="glyphicon glyphicon glyphicon-user"></span> @@ -74,6 +68,11 @@ <!--<option value="d">Dolgooooooooooooooooooooooooooooooooooooooooooooooo</option>--> </select> </div> + <div class="form-group"> + <span class="small" data-tkey="robot_address">Robot’s address</span> + <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-content="<span class='small'>Set the robot's IP address.</span>" data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br> + <input type="text" class="form-control" id="robot_address_input" /> + </div> <!--<div class="form-group"> <span class="small" data-tkey="language"> Language @@ -128,7 +127,54 @@ </div> </form> </div--> - +<!--TODO --> + <!-- login screen --> + <div class="container" id="screen_login" style="display: none;"> + <div class="modal-dialog modal-sm"> + <!--div class="modal-content"--> + <div class="row"><!--class="modal-header"--> + <h3 class="text-center">Please sign in</h3> + </div> + <div class="row"><!--class="modal-body"--> + <div class="row"> + <div class="col-md-12"> + Login via + <div class="ssa-buttons"> + <a href="#" class="ssa-buttons" role="button" data-dismiss="modal" data-toggle="modal" data-target="#modalAAI"> + <img src="res/gumb_aaiprijava.png" style="width: 49%"> + </a> + </div> + or + <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav"> + <div class="form-group"> + <label class="sr-only" for="username">Username</label> + <input type="text" class="form-control" id="username" placeholder="Username" required> + </div> + <div class="form-group"> + <label class="sr-only" for="password">Password</label> + <input type="password" class="form-control" id="password" placeholder="Password" required> + <!--div class="help-block text-right"><a href="#">Forgot the password?</a></div--> + </div> + <div class="form-group"> + <button class="btn btn-primary btn-block" type="button" id="submit">Sign in</button> + </div> + <!--div class="checkbox"> + <label> + <input type="checkbox"> keep me logged-in + </label> + </div--> + </form> + </div> + </div> + </div><!--/modal-body--> + <div class="row"><!-- class="modal-footer"--> + <div class="text-center"> + New here ? <a href="#" role="button" data-dismiss="modal" data-toggle="modal" data-target="#modalSignUp"><b>Sign Up</b></a> + </div> + </div><!--/modal-footer--> + <!--/div--> + </div> + </div> <!-- main screen: programming language selection, settings, etc. --> <div class="container" id="screen_language" style="text-align: center; display: none;"> @@ -154,34 +200,40 @@ <!-- problem screen: prolog --> <div class="container-fluid quadrants block1" id="screen_prolog" style="display: none;"> <div class="row"> - <div class="col-lg-3 col-md-6 col-sm-12 block block1"> - <div class="description-container"> - <h2 class="title" data-dict="prolog" data-tkey="slug"></h2> - <div class="description" data-dict="prolog" data-tkey="description"></div> + <div class="col-lg-4 col-md-4 col-sm-12 block block-left"> + <div class="col-lg-12 col-md-12 col-sm-12 block block1"> + <div class="scrollable-content-container"> + <div class="description-container"> + <h2 class="title" data-dict="prolog" data-tkey="slug"></h2> + <div class="description" data-dict="prolog" data-tkey="description"></div> + </div> + </div> + <div class="block-label">Instructions</div> </div> - <div class="block-label">Instructions</div> - </div> - <div class="col-lg-3 col-md-6 col-sm-12 block block2"> - <nav class="navbar navbar-default block-toolbar"> - <div class="container-fluid"> - <button type="button" class="btn btn-default navbar-btn btn-plan" data-tkey="btn_plan">Plan</button> - <button type="button" class="btn btn-default navbar-btn btn-hint" data-tkey="btn_hint">Hint</button> - <button type="button" class="btn btn-default navbar-btn btn-test" data-tkey="btn_test">Test</button> + <div class="col-lg-12 col-md-12 col-sm-12 block block4"> + <div class="scrollable-content-container"> + <div class="hints"></div> </div> - </nav> - <div class="code_editor"></div> - <div class="block-statusbar"></div> - <div class="block-label">Code</div> - </div> - <div class="col-lg-3 col-md-6 col-sm-12 block block3"> - <div class="console"></div> - <div class="block-label">Console</div> + <div class="block-label">Hints</div> + </div> </div> - <div class="col-lg-3 col-md-6 col-sm-12 block block4"> - <div class="scrollable-content-container"> - <div class="hints"></div> + <div class="col-lg-8 col-md-8 col-sm-12 block block-right "> + <div class="col-lg-6 col-md-12 col-sm-12 block block2"> + <nav class="navbar navbar-default block-toolbar"> + <div class="container-fluid"> + <button type="button" class="btn btn-default navbar-btn btn-plan" data-tkey="btn_plan">Plan</button> + <button type="button" class="btn btn-default navbar-btn btn-hint" data-tkey="btn_hint">Hint</button> + <button type="button" class="btn btn-default navbar-btn btn-test" data-tkey="btn_test">Test</button> + </div> + </nav> + <div class="code_editor"></div> + <div class="block-statusbar"></div> + <div class="block-label">Code</div> + </div> + <div class="col-lg-6 col-md-12 col-sm-12 block block3"> + <div class="console"></div> + <div class="block-label">Console</div> </div> - <div class="block-label">Hints</div> </div> </div><!--/row--> </div><!--container--> @@ -245,7 +297,6 @@ <button type="button" class="btn btn-default navbar-btn btn-plan">Plan</button> <button type="button" class="btn btn-default navbar-btn btn-hint">Hint</button> <button type="button" class="btn btn-default navbar-btn btn-run">Run</button> - <input type="text" id="robot_ip" placeholder="Robot's IP"></input> <button type="button" class="btn btn-default navbar-btn btn-stop">Stop</button> </div> </nav> @@ -299,7 +350,7 @@ <!-- Modals --> - <div id="modalLogIn" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" data-keyboard="false" data-backdrop="static" style="display: none;"> + <!--<div id="modalLogIn" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" data-keyboard="false" data-backdrop="static" style="display: none;"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> @@ -323,7 +374,7 @@ <div class="form-group"> <label class="sr-only" for="password" data-tkey="password">Password</label> <input type="password" class="form-control" id="password" data-tkey-placeholder="password" placeholder="Password" required> - <!--div class="help-block text-right"><a href="#">Forgot the password?</a></div--> + <!--div class="help-block text-right"><a href="#">Forgot the password?</a></div-> </div> <div class="form-group"> <button class="btn btn-primary btn-block" type="button" id="submit" data-tkey="signin_button">Sign in</button> @@ -332,11 +383,11 @@ <label> <input type="checkbox"> keep me logged-in </label> - </div--> + </div-> </form> </div> </div> - </div><!--/modal-body--> + </div><!--/modal-body-> <div class="modal-footer"> <div class="text-center"> <span data-tkey="signin_footer">New here ? </span><a href="#" role="button" data-dismiss="modal" data-toggle="modal" data-target="#modalSignUp"><b data-tkey="signin_footer_signup">Sign Up</b></a> @@ -348,7 +399,7 @@ </div><!--/modal-footer--> </div> </div> - </div> + </div>--> <div id="modalSignUp" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" data-keyboard="false" data-backdrop="static" style="display: none;"> @@ -464,7 +515,6 @@ <!-- codeq app cont. --> <script src="js/codeq/init.js"></script> <script src="js/codeq/translation.js"></script> - <script src="js/codeq/statusbar.js"></script> <script src="js/codeq/navigation.js"></script> <script src="js/codeq/comms.js"></script> <script src="js/codeq/console.js"></script> diff --git a/js/codeq/core.js b/js/codeq/core.js index 6b76042..0976ecc 100644 --- a/js/codeq/core.js +++ b/js/codeq/core.js @@ -395,10 +395,6 @@ 'sl': 'Slovenščina' }, 'isWebApp': false, // this is a PhoneGap/Cordova build, will be overridden in cordova.js for webapp - 'getLang': function () { - return codeq.settings['gui_lang']; - }, - 'setLang': function (newLang) { codeq.settings['gui_lang'] = newLang; codeq.fire('langchange', {'lang': newLang}); diff --git a/js/codeq/hint.js b/js/codeq/hint.js index d5e27b0..b5468e0 100644 --- a/js/codeq/hint.js +++ b/js/codeq/hint.js @@ -280,7 +280,7 @@ jqMark.popover({ 'content': function () { // decide on what to display only after the popup is triggered, so we can choose the correct translation - return htmlPrefix + translations[codeq.getLang()] + '</span>'; + return htmlPrefix + translations[codeq.settings['gui_lang']] + '</span>'; }, 'html': true, 'placement': 'auto bottom', diff --git a/js/codeq/login.js b/js/codeq/login.js index b8323e1..32b821d 100644 --- a/js/codeq/login.js +++ b/js/codeq/login.js @@ -30,6 +30,7 @@ codeq.setLang(sett['gui_lang']); $("#gui_lang_select").val(sett['gui_lang']); } + $('#robot_address_input').val(codeq.settings['robot_address'] || ''); codeq.globalStateMachine.transition('language'); //codeq.activateState('language'); @@ -47,6 +48,7 @@ codeq.globalStateMachine.register('login',{ 'enter': function(){ + $('#navigation-home').off('click');//remove the click listener of this element here only - in each other state the listener should exist $('#signed-in-title').html(''); $("#submit").on('click', loginFun); formInputs.on('keyup', function (ev) { @@ -54,16 +56,22 @@ $('#submit').trigger('click'); } }); - $('#modalLogIn').modal(); - //$("#screen_login").css('display', ''); + //$('#modalLogIn').modal(); + $("#screen_login").css('display', ''); $('#disabled').css('display', 'none'); }, 'exit' : function(){ $("#submit").off('click', loginFun); formInputs.off('keyup'); - $('#modalLogIn').modal('hide'); - //$("#screen_login").css('display', 'none'); + //$('#modalLogIn').modal('hide'); + $("#screen_login").css('display', 'none'); + $('#signed-in-title').html('Signed in as '+$('#username').val()); $("#password").val(''); + //re-enable the click listener + $('#navigation-home').on('click', function(e){ + codeq.globalStateMachine.transition('language'); + e.preventDefault(); + }); } }); })(); diff --git a/js/codeq/navigation.js b/js/codeq/navigation.js index eafa5cc..af1d250 100644 --- a/js/codeq/navigation.js +++ b/js/codeq/navigation.js @@ -105,14 +105,15 @@ codeq.comms.logout() .then(function (data) { console.log(data); - //codeq.globalStateMachine.transition('login'); + codeq.comms.disconnect(); + codeq.globalStateMachine.transition('login'); }) .fail(function (reason) { console.log(reason); }) .done(); - codeq.globalStateMachine.transition('login'); + //codeq.globalStateMachine.transition('login'); e.preventDefault();//prevent this since we'll trigger a page reload otherwise }); $('#navigation-profile').on('click', function(e){ diff --git a/js/codeq/robot.js b/js/codeq/robot.js index 1188c7f..a1b76f1 100644 --- a/js/codeq/robot.js +++ b/js/codeq/robot.js @@ -147,8 +147,7 @@ alert(error); }, reconnectTimer = null, - address = '192.168.1.174:8000', // TODO get this from settings - url = 'ws://' + address + '/', + url = 'ws://' + codeq.settings['robot_address'] + ':8000/', socket = eio(url); // set up the websocket events diff --git a/js/codeq/settings.js b/js/codeq/settings.js index 252a2ea..dd844a5 100644 --- a/js/codeq/settings.js +++ b/js/codeq/settings.js @@ -3,12 +3,13 @@ */ (function(){ - var guiLangSelect = $("#gui_lang_select"); - var previousLang = guiLangSelect.val(); - var closedWithSave = false; + var guiLangSelect = $('#gui_lang_select'), + robotAddressInput = $('#robot_address_input'), + previousGuiLang = guiLangSelect.val(), + closedWithSave = false; guiLangSelect.on("change",function() { - var lang = $("#gui_lang_select").val(); + var lang = guiLangSelect.val(); if (lang in codeq.supportedLangs) { codeq.setLang(lang); } @@ -20,20 +21,21 @@ $("#settings_dropdown_menu").on("shown.bs.dropdown", function() { closedWithSave = false; - previousLang = codeq.getLang(); + previousGuiLang = codeq.settings['gui_lang']; }).on("hidden.bs.dropdown", function() { if(closedWithSave){ - var lang = $("#gui_lang_select").val(); - if (lang in codeq.supportedLangs) { - codeq.comms.updateSettings({'gui_lang': lang}) - .then(function (data) { - if (data.code !== 0) throw new Error('Change language failed, code: ' + data.code + ', message: ' + data.message);//error msg if something went wring while saving to db - }) - .done(); - } + codeq.settings['robot_address'] = robotAddressInput.val(); + codeq.comms.updateSettings(codeq.settings) + .then(function (data) { + if (data.code !== 0) { + throw new Error('Updating settings failed, code: ' + data.code + ', message: ' + data.message); + } + }) + .done(); }else{ - $("#gui_lang_select").val(previousLang); - if (previousLang in codeq.supportedLangs) codeq.setLang(previousLang); + guiLangSelect.val(previousGuiLang); + if (previousGuiLang in codeq.supportedLangs) codeq.setLang(previousGuiLang); + robotAddressInput.val(codeq.settings['robot_address']); } }); })(); diff --git a/js/codeq/statusbar.js b/js/codeq/statusbar.js deleted file mode 100644 index 56070bd..0000000 --- a/js/codeq/statusbar.js +++ /dev/null @@ -1,26 +0,0 @@ -(function () { - - var jqBar = $('#topbar'), - jqLang = jqBar.find('.lang-selection'), - jqLangChoice = jqLang.find('.lang-choice'); - - (function () { - var langs = codeq.supportedLangs, - jqMenu = jqLang.find('.dropdown-menu'), - lang, cssClass; - for (lang in langs) { - if (!langs.hasOwnProperty(lang)) continue; - cssClass = 'lang-' + lang; - jqMenu.append('<li><a class="' + cssClass + '">' + lang + '</a></li>'); - jqMenu.find('.' + cssClass).on('click', (function (l) {return function () {codeq.setLang(l)};})(lang)); - } - })(); - - codeq.on('langchange', function (params) { - jqLangChoice.text(params.lang); - }); - - codeq.statusbar = { - - }; -})();
\ No newline at end of file diff --git a/js/codeq/translation.js b/js/codeq/translation.js index bd2bf32..f0c8aab 100644 --- a/js/codeq/translation.js +++ b/js/codeq/translation.js @@ -80,7 +80,7 @@ 'emptyDictionary': {}, // use this with registerDictionary when you don't want any translations 'translateDom': function (jqTopElt) { - var lang = codeq.getLang(); + var lang = codeq.settings['gui_lang']; jqTopElt.filter('[data-tkey]').each(function () { translateElement(jqTopElt,'tkey', lang) }); @@ -93,4 +93,4 @@ return dicts[name]; } }; -})();
\ No newline at end of file +})(); diff --git a/res/en.json b/res/en.json index 1a41876..0eade46 100644 --- a/res/en.json +++ b/res/en.json @@ -1,5 +1,6 @@ { "language": "Language", + "robot_address": "Robot’s IP address", "problem_list": "Problems", "python": "Python", "prolog": "Prolog", diff --git a/res/sl.json b/res/sl.json index 1d8bc5c..dc29ebb 100644 --- a/res/sl.json +++ b/res/sl.json @@ -1,5 +1,6 @@ { "language": "Jezik", + "robot_address": "Robotov naslov IP", "problem_list": "Naloge", "python": "Python", "prolog": "Prolog", |