Basic layout

3 files changed, 194 insertions, 32 deletions

diff --git a/tabs/mixer.html b/tabs/mixer.html
index 4741597c..af45fab0 100644
--- a/tabs/mixer.html
+++ b/tabs/mixer.html
@@ -13,13 +13,21 @@
                             <span data-i18n="platformType"></span>
                         </label>
                     </div>
-                    <div class="select">
+                    <div class="select position-relative">
                         <div class="mixerPreview half">
                             <img src="./resources/motor_order/custom.svg" />
                         </div>
                         <div class="half" style="width: calc(50% - 10px); margin-left: 10px;">
                             <select id="mixer-preset"></select>
                         </div>
+                        <div class="mixer-load-button">
+                            <div class="btn default_btn narrow red">
+                                <a id="load-and-apply-mixer-button" href="#" data-i18n="mixerLoadAndApplyPresetRules"></a>
+                            </div>
+                            <div class="btn default_btn narrow">
+                                <a id="load-mixer-button" href="#" data-i18n="mixerLoadPresetRules"></a>
+                            </div>
+                        </div>
                     </div>
                     <div id="has-flaps-wrapper" class="checkbox">
                         <input type="checkbox" id="has-flaps" class="toggle" />
@@ -29,10 +37,69 @@
                     </div>
                 </div>
             </div>
+
+            <div class="motor-mixer gui_box grey">
+                <div class="gui_box_titlebar">
+                    <div class="spacer_box_title" data-i18n="servoMixer"></div>
+                </div>
+                <div class="spacer_box">
+                    <table id="servo-mix-table" class="mixer-table">
+                        <thead>
+                            <tr>
+                                <th style="width: 75px">Servo</th>
+                                <th>Input</th>
+                                <th>Weight</th>
+                                <th>Speed</th>
+                                <th style="width: 75px"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+        
+                        </tbody>
+                    </table>
+                    <div class="btn default_btn narrow pull-right green" style="margin-bottom: 15px">
+                        <a href="#" data-role="role-servo-add" data-i18n="servoMixerAdd"></a>
+                    </div>
+                </div>
+            </div>
+
         </div>
 
         <div class="rightWrapper">
-
+            <div class="motor-mixer gui_box grey">
+                <div class="gui_box_titlebar">
+                    <div class="spacer_box_title" data-i18n="motorMixer"></div>
+                </div>
+                <div class="spacer_box">
+                    <table id="motor-mix-table" class="mixer-table">
+                        <thead>
+                            <tr>
+                                <th style="width: 75px">Motor</th>
+                                <th>Throttle</th>
+                                <th>Roll</th>
+                                <th>Pitch</th>
+                                <th>Yaw</th>
+                                <th style="width: 75px"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+        
+                        </tbody>
+                    </table>
+                    <div class="btn default_btn narrow pull-right green" style="margin-bottom: 15px">
+                        <a href="#" data-role="role-motor-add" data-i18n="servoMixerAdd"></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="mixerApplyContent" class="is-hidden">
+        <div class="modal__content">
+            <h1 class="modal__title modal__title--warning" data-i18n="presetsApplyHeader"></h1>
+            <div class="modal__text" data-i18n="mixerApplyDescription"></div>
+        </div>
+        <div class="modal__buttons">
+            <a id="execute-button" class="modal__button modal__button--main" data-i18n="mixerButtonSaveAndReboot"></a>
         </div>
     </div>
     <div class="content_toolbar">
diff --git a/tabs/mixer.js b/tabs/mixer.js
index 3dbf5929..b8ef25a1 100644
--- a/tabs/mixer.js
+++ b/tabs/mixer.js
@@ -17,7 +17,9 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
     loadChainer.setChain([
         mspHelper.loadBfConfig,
         mspHelper.loadMixerConfig,
-        mspHelper.loadMotors
+        mspHelper.loadMotors,
+        mspHelper.loadServoMixRules,
+        mspHelper.loadMotorMixRules
     ]);
     loadChainer.setExitPoint(loadHtml);
     loadChainer.execute();
@@ -37,6 +39,98 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
         $('#content').load("./tabs/mixer.html", processHtml);
     }
 
+    function renderServoMixRules() {
+
+        var $servoMixTable = $('#servo-mix-table'),
+            $servoMixTableBody = $servoMixTable.find('tbody');
+
+        /*
+         * Process servo mix table UI
+         */
+        var rules = SERVO_RULES.get();
+        $servoMixTableBody.find("*").remove();
+        for (var servoRuleIndex in rules) {
+            if (rules.hasOwnProperty(servoRuleIndex)) {
+                const servoRule = rules[servoRuleIndex];
+
+                $servoMixTableBody.append('\
+                    <tr>\
+                    <td><input type="number" class="mix-rule-servo" step="1" min="0" max="7" /></td>\
+                    <td><select class="mix-rule-input"></select></td>\
+                    <td><input type="number" class="mix-rule-rate" step="1" min="-100" max="100" /></td>\
+                    <td><input type="number" class="mix-rule-speed" step="1" min="0" max="255" /></td>\
+                    <td><span class="btn default_btn narrow red"><a href="#" data-role="role-delete" data-i18n="servoMixerDelete"></a></span></td>\
+                    </tr>\
+                ');
+
+                const $row = $servoMixTableBody.find('tr:last');
+
+                GUI.fillSelect($row.find(".mix-rule-input"), FC.getServoMixInputNames(), servoRule.getInput());
+                
+                $row.find(".mix-rule-input").val(servoRule.getInput()).change(function () {
+                    servoRule.setInput($(this).val());
+                });
+
+                $row.find(".mix-rule-servo").val(servoRule.getTarget()).change(function () {
+                    servoRule.setTarget($(this).val());
+                });
+
+                $row.find(".mix-rule-rate").val(servoRule.getRate()).change(function () {
+                    servoRule.setRate($(this).val());
+                });
+
+                $row.find(".mix-rule-speed").val(servoRule.getSpeed()).change(function () {
+                    servoRule.setSpeed($(this).val());
+                });
+                
+                $row.find("[data-role='role-delete']").attr("data-index", servoRuleIndex);
+            }
+
+        }
+        localize();
+    }
+
+    function renderMotorMixRules() {
+
+        var $table = $('#motor-mix-table'),
+            $tableBody = $table.find('tbody');
+
+        /*
+         * Process servo mix table UI
+         */
+        var rules = MOTOR_RULES.get();
+        $tableBody.find("*").remove();
+        let index = 0;
+        for (const i in rules) {
+            if (rules.hasOwnProperty(i)) {
+                const rule = rules[i];
+                index++;
+
+                $tableBody.append('\
+                    <tr>\
+                    <td><span class="mix-rule-motor"></span></td>\
+                    <td><input type="number" class="mix-rule-throttle" step="0.001" min="0" max="1" /></td>\
+                    <td><input type="number" class="mix-rule-roll" step="0.001" min="-1" max="1" /></td>\
+                    <td><input type="number" class="mix-rule-pitch" step="0.001" min="-1" max="1" /></td>\
+                    <td><input type="number" class="mix-rule-yaw" step="0.001" min="-1" max="1" /></td>\
+                    <td><span class="btn default_btn narrow red"><a href="#" data-role="role-delete" data-i18n="servoMixerDelete"></a></span></td>\
+                    </tr>\
+                ');
+
+                const $row = $tableBody.find('tr:last');
+
+                $row.find('.mix-rule-motor').html(index);
+                $row.find('.mix-rule-throttle').val(rule.getThrottle());
+                $row.find('.mix-rule-roll').val(rule.getRoll());
+                $row.find('.mix-rule-pitch').val(rule.getPitch());
+                $row.find('.mix-rule-yaw').val(rule.getYaw());
+                $row.find("[data-role='role-delete']").attr("data-index", i);
+            }
+
+        }
+        localize();
+    }
+
     function processHtml() {
 
         function fillMixerPreset() {
@@ -55,7 +149,8 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
             platforms = helper.platform.getList(),
             $hasFlapsWrapper = $('#has-flaps-wrapper'),
             $hasFlaps = $('#has-flaps'),
-            $mixerPreset = $('#mixer-preset');
+            $mixerPreset = $('#mixer-preset'),
+            modal;
 
         $platformSelect.find("*").remove();
 
@@ -96,6 +191,23 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
             $mixerPreset.change();
         }
 
+        modal = new jBox('Modal', {
+            width: 480,
+            height: 240,
+            closeButton: 'title',
+            animation: false,
+            attach: $('#load-and-apply-mixer-button'),
+            title: chrome.i18n.getMessage("mixerApplyModalTitle"),
+            content: $('#mixerApplyContent')
+        });
+
+        $('#load-mixer-button').click(function () {
+            helper.mixer.loadServoRules(currentMixerPreset);
+            helper.mixer.loadMotorRules(currentMixerPreset);
+            renderServoMixRules();
+            renderMotorMixRules();
+        });
+
         localize();
         GUI.content_ready(callback);
     }
diff --git a/tabs/servos.js b/tabs/servos.js
index 27eadf18..cbe24702 100755
--- a/tabs/servos.js
+++ b/tabs/servos.js
@@ -11,40 +11,23 @@ TABS.servos.initialize = function (callback) {
 
     var loadChainer = new MSPChainerClass();
 
-    if (BF_CONFIG.mixerConfiguration == 23 || BF_CONFIG.mixerConfiguration == 24 || BF_CONFIG.mixerConfiguration == 25) {
-        loadChainer.setChain([
-            mspHelper.loadServoConfiguration,
-            mspHelper.loadRcData,
-            mspHelper.loadBfConfig,
-            mspHelper.loadServoMixRules
-        ]);
-    }
-    else {
-        loadChainer.setChain([
-            mspHelper.loadServoConfiguration,
-            mspHelper.loadRcData,
-            mspHelper.loadBfConfig
-        ]);
-    }
+    loadChainer.setChain([
+        mspHelper.loadServoConfiguration,
+        mspHelper.loadRcData,
+        mspHelper.loadBfConfig,
+        mspHelper.loadServoMixRules
+    ]);
 
     loadChainer.setExitPoint(load_html);
     loadChainer.execute();
 
     var saveChainer = new MSPChainerClass();
 
-    if (BF_CONFIG.mixerConfiguration == 23 || BF_CONFIG.mixerConfiguration == 24 || BF_CONFIG.mixerConfiguration == 25) {
-        saveChainer.setChain([
-            mspHelper.sendServoConfigurations,
-            mspHelper.sendServoMixer,
-            mspHelper.saveToEeprom
-        ]);
-    }
-    else {
-        saveChainer.setChain([
-            mspHelper.sendServoConfigurations,
-            mspHelper.saveToEeprom
-        ]);
-    }
+    saveChainer.setChain([
+        mspHelper.sendServoConfigurations,
+        mspHelper.sendServoMixer,
+        mspHelper.saveToEeprom
+    ]);
 
     saveChainer.setExitPoint(function () {
         GUI.log(chrome.i18n.getMessage('servosEepromSave'));