moved settings to its own page and changed the 'save' button from a normal button to a form submit

3 files changed, 75 insertions, 32 deletions

diff --git a/index.html b/index.html
index 64f4e4e..60954ad 100644
--- a/index.html
+++ b/index.html
@@ -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');
         }
     });
 })();