UI improvements and saving

_locales/en/messages.json

@@ -2958,5 +2958,11 @@
     },
     "logicFlags": {
         "message": "Flags"
+    },
+    "logicSave": {
+        "message": "Save"
+    },
+    "logicClose": {
+        "message": "Close"
     }
 }

js/logicCondition.js

@@ -63,7 +63,7 @@ let LogicCondition = function (enabled, operation, operandAType, operandAValue,
 
     self.onEnabledChange = function (event) {
         let $cT = $(event.currentTarget);
-        console.log($cT);
+        self.setEnabled(!!$cT.prop('checked'));
     };
 
     self.getOperatorMetadata = function () {
@@ -231,9 +231,6 @@ let LogicCondition = function (enabled, operation, operandAType, operandAValue,
 
         self.renderOperand(0);
         self.renderOperand(1);
-
-        console.log($row);
-
     }
 
     return self;

js/logicConditionsCollection.js

@@ -3,7 +3,8 @@
 let LogicConditionsCollection = function () {
 
     let self = {},
-        data = [];
+        data = [],
+        $container;
 
     self.put = function (element) {
         data.push(element);
@@ -19,17 +20,41 @@ let LogicConditionsCollection = function () {
 
     self.getCount = function () {
         return data.length
-    }
+    };
 
-    self.render = function ($container) {
+    self.render = function () {
+        let $table = $container.find(".logic__table")
+        $table.find("tbody tr").remove();
 
         for (let k in self.get()) {
             if (self.get().hasOwnProperty(k)) {
-                self.get()[k].render(k, $container);
+                self.get()[k].render(k, $table);
             }
         }
+    };
 
-    }
+    self.onSave = function () {
+        let chain = new MSPChainerClass()
+
+        chain.setChain([
+            mspHelper.sendLogicConditions,
+            mspHelper.saveToEeprom
+        ]);
+
+        chain.execute();
+    };
+
+    self.onClose = function() {
+        $container.hide();
+    };
+
+    self.init = function ($element) {
+        $container = $element;
+
+        $container.find('.logic__save').click(self.onSave);
+        $container.find('.logic__close').click(self.onClose);
+
+    };
 
     return self;
 };

js/msp/MSPHelper.js

@@ -2370,7 +2370,7 @@ var mspHelper = (function (gui) {
 
             let buffer = [];
 
-            // send one at a time, with index
+            // send one at a time, with index, 14 bytes per one condition
 
             let condition = LOGIC_CONDITIONS.get()[conditionIndex];
 
@@ -2383,10 +2383,10 @@ var mspHelper = (function (gui) {
             buffer.push(specificByte(condition.getOperandAValue(), 2));
             buffer.push(specificByte(condition.getOperandAValue(), 3));
             buffer.push(condition.getOperandBType());
-            buffer.push(specificByte(condition.getOperandAValue(), 0));
+            buffer.push(specificByte(condition.getOperandBValue(), 0));
-            buffer.push(specificByte(condition.getOperandAValue(), 1));
+            buffer.push(specificByte(condition.getOperandBValue(), 1));
-            buffer.push(specificByte(condition.getOperandAValue(), 2));
+            buffer.push(specificByte(condition.getOperandBValue(), 2));
-            buffer.push(specificByte(condition.getOperandAValue(), 3));
+            buffer.push(specificByte(condition.getOperandBValue(), 3));
             buffer.push(condition.getFlags());
 
             // prepare for next iteration

main.css

@@ -1446,15 +1446,16 @@ dialog {
     transition: all ease 0.2s;
 }
 
-.red a {
+.btn.red a,
-    /* background-color: #37a8db; */
+.btn.red a:active {
+    background-color: #fafafa;
     text-shadow: 0 1px rgba(0, 0, 0, 0.25);
     color: #ff1e1e;
     border: 1px solid #a00000;
     transition: all ease 0.2s;
 }
 
-.red a:hover {
+.btn.red a:hover {
     background-color: #f86975;
     border: 1px solid #a00000;
     text-shadow: 0 1px rgba(0, 0, 0, 0.25);

src/css/logic.css

@@ -19,10 +19,29 @@
     border-radius: 2px;
     z-index: 2001;
     padding: 2em;
+}
+
+.logic__content--wrapper {
     overflow-y: auto;
+    margin-bottom: 30px;
+    position: absolute;
+    left: 2em;
+    right: 2em;
+    top: 65px;
+    bottom: 35px;
 }
 
 input.logic_element__operand--value {
     float: none;
     width: 9em;
+}
+
+.logic__content--buttons {
+    left: 0;
+    right: 0;
+}
+
+.logic_cell__operandA,
+.logic_cell__operandB {
+    text-align: left;
 }

tabs/mixer.html

@@ -127,10 +127,11 @@
         </div>
 
         <div id="logic-wrapper">
-            <div id="logic-background" class="logic__background"></div>
+            <div class="logic__background"></div>
-            <div id="logic-content" class="logic__content">
+            <div class="logic__content">
                 <div class="tab_title" data-i18n="tabLogicConditions"></div>
-                <table id="logic-table" class="mixer-table">
+                <div class="logic__content--wrapper">
+                    <table class="mixer-table logic__table">
                         <thead>
                             <tr>
                                 <th style="width: 50px" data-i18n="logicId"></th>
@@ -142,9 +143,17 @@
                             </tr>
                         </thead>
                         <tbody>
-        
                         </tbody>
                     </table>
+                </div>
+                <div class="logic__content--buttons content_toolbar">
+                    <div class="btn save_btn">
+                        <a href="#" class="logic__save" data-i18n="logicSave"></a>
+                    </div>
+                    <div class="btn save_btn red">
+                        <a href="#" class="logic__close" data-i18n="logicClose"></a>
+                    </div>
+                </div>
             </div>
         </div>
     </div>

tabs/mixer.js

@@ -1,4 +1,4 @@
-/*global $,helper,mspHelper,MSP,GUI,SERVO_RULES,MOTOR_RULES,MIXER_CONFIG,googleAnalytics*/
+/*global $,helper,mspHelper,MSP,GUI,SERVO_RULES,MOTOR_RULES,MIXER_CONFIG,googleAnalytics,LOGIC_CONDITIONS,TABS,ServoMixRule*/
 'use strict';
 
 TABS.mixer = {};
@@ -379,7 +379,8 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
 
         localize();
 
-        LOGIC_CONDITIONS.render($('#logic-table'));
+        LOGIC_CONDITIONS.init($('#logic-wrapper'));
+        LOGIC_CONDITIONS.render();
 
         GUI.content_ready(callback);
     }