diff options
| -rw-r--r-- | index.html | 32 | ||||
| -rw-r--r-- | js/codeq/navigation.js | 4 | ||||
| -rw-r--r-- | js/codeq/settings.js | 71 |
3 files changed, 75 insertions, 32 deletions
@@ -55,8 +55,9 @@ <li><a href="#" data-toggle="modal" data-target="#modalChangePassword" data-tkey="change_pass" id="change-password">Change password</a></li> </ul> </li> - <li class="dropdown" id="settings_dropdown_menu"> + <li id="settings_dropdown_menu"> <!-- class="dropdown"--> <a href="" class="dropdown-toggle" data-toggle="dropdown" id="settingsTrigger" title="Settings, options..." aria-expanded="true"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a> + <!--<a href="" class="dropdown-toggle" data-toggle="dropdown" id="settingsTrigger" title="Settings, options..." aria-expanded="true"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a> <div class="dropdown-menu" style="background-color: #fff"> <form class="form col-sm-12"> <div class="form-group"> @@ -79,7 +80,7 @@ </div> </div> </form> - </div> + </div>--> </li> </ul> </div><!--/.nav-collapse --> @@ -395,6 +396,33 @@ </div><!--row--> </div><!--container--> + <!-- Settings screen --> + <div class="container" id="screen_settings" style="display: none;"> + <div class="row"> + <form class="form col-sm-4 col-md-offset-4" id="settingsForm"> + <div class="form-group"> + <span class="small" data-tkey="language">Language</span> + <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="ui_language_title" data-content="Select the UI language." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br> + <select class="form-control" id="gui_lang_select"> + <option value="sl">Slovensko</option> + <option value="en">English</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-tkey-data-content="robot_address_title" data-content="Set the robot's IPv4 or IPv6 address." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br> + <input type="text" class="form-control" id="robot_address_input" data-tkey-placeholder="robot_address_placeholder" placeholder="IP address" pattern="(((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$)|(((^|:)([0-9a-fA-F]{0,4})){1,8}$)" data-tkey-title="robot_address_title" title="Set the robot's IPv4 or IPv6 address."> + </div> + <div class="form-group"> + <div class="text-right"> + <button type="button" class="btn btn-default" id="settings_cancel_btn">Close</button> + <input type="submit" class="btn btn-primary" id="settings_save_btn" value="Save"/> + </div> + </div> + </form> + </div> + </div> + <!-- Modals --> <!-- Covers the whole screen with a semi-transparent block, so no input events can be triggered below. diff --git a/js/codeq/navigation.js b/js/codeq/navigation.js index 5dbbf1e..9483e05 100644 --- a/js/codeq/navigation.js +++ b/js/codeq/navigation.js @@ -130,5 +130,9 @@ codeq.globalStateMachine.transition('changePassword'); e.preventDefault();//prevent this since we'll trigger a page reload otherwise }); + $('#settingsTrigger').on('click',function(e){ + codeq.globalStateMachine.transition('settings'); + e.preventDefault(); + }); })(); diff --git a/js/codeq/settings.js b/js/codeq/settings.js index dd844a5..1c15ad0 100644 --- a/js/codeq/settings.js +++ b/js/codeq/settings.js @@ -5,37 +5,48 @@ var guiLangSelect = $('#gui_lang_select'), robotAddressInput = $('#robot_address_input'), - previousGuiLang = guiLangSelect.val(), - closedWithSave = false; + jqDisabledOverlay = $('#disabled'), + jqSettForm = $("#settingsForm"), + jqSettCancelBtn = $("#settings_cancel_btn"), + jqScreenSettings = $('#screen_settings'); - guiLangSelect.on("change",function() { - var lang = guiLangSelect.val(); - if (lang in codeq.supportedLangs) { - codeq.setLang(lang); - } - }); - - $("#settings_save_btn").on("click", function() { - closedWithSave = true; - }); - - $("#settings_dropdown_menu").on("shown.bs.dropdown", function() { - closedWithSave = false; - previousGuiLang = codeq.settings['gui_lang']; - }).on("hidden.bs.dropdown", function() { - if(closedWithSave){ - 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{ - guiLangSelect.val(previousGuiLang); - if (previousGuiLang in codeq.supportedLangs) codeq.setLang(previousGuiLang); - robotAddressInput.val(codeq.settings['robot_address']); + codeq.globalStateMachine.register('settings',{ + 'enter':function(){ + jqDisabledOverlay.css('display', ''); + robotAddressInput.val(codeq.settings['robot_address']);//set the robot address once we enter the state + var previousGuiLang = codeq.settings['gui_lang']; + jqSettForm.on("submit", function() { + 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(); + history.back(); + return false; + }); + jqSettCancelBtn.on("click",function(){ + guiLangSelect.val(previousGuiLang); + if (previousGuiLang in codeq.supportedLangs) codeq.setLang(previousGuiLang); + history.back(); + }); + guiLangSelect.on("change",function() { + var lang = guiLangSelect.val(); + if (lang in codeq.supportedLangs) { + codeq.setLang(lang); + } + }); + jqScreenSettings.css('display', ''); + jqDisabledOverlay.css('display', 'none'); + }, + 'exit':function(){ + jqSettForm.off('submit'); + jqSettCancelBtn.off('click'); + guiLangSelect.off('select'); + robotAddressInput.val(''); + jqScreenSettings.css('display', 'none'); } }); })(); |