added layout choise to the setting screen, the layout has also been added to the codeq.settings (codeq-server and database has been updated as well)

5 files changed, 51 insertions, 2 deletions

diff --git a/css/codeq.css b/css/codeq.css
index 67af384..1c5eccc 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -397,6 +397,11 @@ body {
     .block.block4  {
         border-bottom: 1px solid #ddd;
     }
+
+    /*layout selection is  disable on small screens*/
+    #gui_layout_select_form_group {
+        display: none;
+    }
 }
 
 /* codeq hints */
diff --git a/index.html b/index.html
index c777fec..ce27e11 100644
--- a/index.html
+++ b/index.html
@@ -412,6 +412,13 @@
                         <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" id="gui_layout_select_form_group">
+                        <span class="small" data-tkey="layout_select" >Layout</span>
+                        <select class="form-control" id="gui_layout_select">
+                            <option value="line-layout">Line</option>
+                            <option value="square-layout">Square</option>
+                        </select>
+                    </div>
                     <div class="form-group">
                         <div class="text-right">
                             <button type="button" class="btn btn-default" id="settings_cancel_btn">Close</button>
diff --git a/js/codeq/core.js b/js/codeq/core.js
index 6d3a5dc..a3e9589 100644
--- a/js/codeq/core.js
+++ b/js/codeq/core.js
@@ -378,7 +378,8 @@
         'log': log,
 
         'settings': {
-            'gui_lang': 'en' // boot sequence overrides this if the browser uses a supported language
+            'gui_lang': 'en', // boot sequence overrides this if the browser uses a supported language
+            'gui_layout': 'line-layout'
         },
 
         'availableLangs': [], // filled at boot from 'supportedLangs'
@@ -386,7 +387,21 @@
             'en': 'English',
             'sl': 'Slovenščina'
         },
+        'supportedLayouts':[
+            'line-layout',
+            'square-layout'
+        ],
         'isWebApp': false, // this is a PhoneGap/Cordova build, will be overridden in cordova.js for webapp
+
+        'setLayout': function(newLayout){
+            codeq.settings['gui_layout'] = newLayout;
+            codeq.fire('layoutchange');
+        },
+
+        'getLayout': function(){
+            return codeq.settings['gui_layout'];
+        },
+
         'setLang': function (newLang) {
             codeq.settings['gui_lang'] = newLang;
             codeq.fire('langchange', {'lang': newLang});
diff --git a/js/codeq/login.js b/js/codeq/login.js
index 48c13b2..9c71547 100644
--- a/js/codeq/login.js
+++ b/js/codeq/login.js
@@ -31,6 +31,10 @@
             $("#gui_lang_select").val(sett['gui_lang']);
         }
         $('#robot_address_input').val(codeq.settings['robot_address'] || '');
+        if('gui_layout' in sett && ($.inArray(sett['gui_layout'], codeq.supportedLayouts) >= 0) ){
+            codeq.setLayout(sett['gui_layout']);
+            $("#gui_layout_select").val(sett['gui_layout']);
+        }
 
         codeq.globalStateMachine.transition('language');
         //codeq.activateState('language');
diff --git a/js/codeq/settings.js b/js/codeq/settings.js
index 5b57c49..f0e7ff0 100644
--- a/js/codeq/settings.js
+++ b/js/codeq/settings.js
@@ -8,15 +8,23 @@
         jqDisabledOverlay = $('#disabled'),
         jqSettForm = $("#settingsForm"),
         jqSettCancelBtn = $("#settings_cancel_btn"),
-        jqScreenSettings = $('#screen_settings');
+        jqScreenSettings = $('#screen_settings'),
+        jqLayoutSelect = $('#gui_layout_select');
+
+    codeq.on('layoutchange', function(){
+        $("#screen_prolog").removeClass(codeq.supportedLayouts.join(" ")).addClass(codeq.getLayout());
+        $("#screen_python").removeClass(codeq.supportedLayouts.join(" ")).addClass(codeq.getLayout());
+    });
 
     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'];
+            var previousLayout = codeq.settings['gui_layout'];
             jqSettForm.on("submit", function(e) {
                 codeq.settings['robot_address'] = robotAddressInput.val();
+                codeq.log.debug("settings for update:"+JSON.stringify(codeq.settings));
                 codeq.comms.updateSettings(codeq.settings)
                     .then(function (data) {
                         if (data.code !== 0) {
@@ -32,6 +40,8 @@
                 e.preventDefault();
             });
             jqSettCancelBtn.on("click",function(){
+                jqLayoutSelect.val(previousLayout);
+                if ($.inArray(previousLayout, codeq.supportedLayouts) >= 0) codeq.setLayout(previousLayout);
                 guiLangSelect.val(previousGuiLang);
                 if (previousGuiLang in codeq.supportedLangs) codeq.setLang(previousGuiLang);
                 history.back();
@@ -42,6 +52,14 @@
                     codeq.setLang(lang);
                 }
             });
+            jqLayoutSelect.on("change",function(){
+                jqDisabledOverlay.css('display', '');
+                var newLayout = jqLayoutSelect.val();
+                if ($.inArray(newLayout, codeq.supportedLayouts) >= 0){
+                    codeq.setLayout(newLayout);
+                }
+                jqDisabledOverlay.css('display', 'none');
+            });
             jqScreenSettings.css('display', '');
             jqDisabledOverlay.css('display', 'none');
         },