Render table and bind events

4 files changed, 87 insertions, 13 deletions

diff --git a/js/fc.js b/js/fc.js
index 54f65283..ee6cd1f8 100644
--- a/js/fc.js
+++ b/js/fc.js
@@ -1170,16 +1170,22 @@ var FC = {
         return {
             0: {
                 name: "Value",
-                type: "value"
+                type: "value",
+                min: -1000000,
+                max: 1000000,
+                step: 1,
+                default: 0
             },
             1: {
                 name: "RC Channel",
                 type: "range",
-                range: [1, 16]
+                range: [1, 16],
+                default: 1
             },
             2: {
                 name: "Flight",
                 type: "dictionary",
+                default: 0,
                 values: {
                     0: "ARM timer [s]",
                     1: "Home distance [m]",
diff --git a/js/logicCondition.js b/js/logicCondition.js
index f89aa0df..362f0410 100644
--- a/js/logicCondition.js
+++ b/js/logicCondition.js
@@ -86,7 +86,64 @@ let LogicCondition = function (enabled, operation, operandAType, operandAValue,
         self.renderOperand(1);
     };
 
-    self.renderOperandType = function ($container, type, value) {
+    self.onOperatorTypeChange = function (event) {
+        let $cT = $(event.currentTarget),
+            operand = $cT.data("operand"),
+            $container = $cT.parent(),
+            operandMetadata = FC.getOperandTypes()[$cT.val()];
+
+        if (operand == 0) {
+            self.setOperandAType($cT.val());
+            self.setOperandAValue(operandMetadata.default);
+        } else {
+            self.setOperandBType($cT.val());
+            self.setOperandBValue(operandMetadata.default);
+        }
+
+        self.renderOperandValue($container, operandMetadata, operand, operandMetadata.default);
+    };
+
+    self.onOperatorValueChange = function (event) {
+        let $cT = $(event.currentTarget),
+            operand = $cT.data("operand");
+
+        if (operand == 0) {
+            self.setOperandAValue($cT.val());
+        } else {
+            self.setOperandBValue($cT.val());
+        }
+    };
+
+    self.renderOperandValue = function ($container, operandMetadata, operand, value) {
+
+        $container.find('.logic_element__operand--value').remove();
+
+        switch (operandMetadata.type) {
+            case "value":
+                $container.append('<input type="number" class="logic_element__operand--value" data-operand="' + operand + '" step="' + operandMetadata.step + '" min="' + operandMetadata.min + '" max="' + operandMetadata.max + '" value="' + value + '" />');
+                break;
+            case "range":
+            case "dictionary":
+                $container.append('<select class="logic_element__operand--value" data-operand="' + operand + '"></select>');
+                let $t = $container.find('.logic_element__operand--value');
+                
+                if (operandMetadata.type == "range") {
+                    for (let i = operandMetadata.range[0]; i <= operandMetadata.range[1]; i++) {
+                        $t.append('<option value="' + i + '">' + i + '</option>');
+                    }
+                } else if (operandMetadata.type == "dictionary") {
+                    for (let k in operandMetadata.values) {
+                        if (operandMetadata.values.hasOwnProperty(k)) {
+                            $t.append('<option value="' + k + '">' + operandMetadata.values[k] + '</option>');
+                        }
+                    }
+                }
+
+                $t.val(value);
+                break;
+        }
+
+        $container.find('.logic_element__operand--value').change(self.onOperatorValueChange);
 
     };
 
@@ -105,26 +162,32 @@ let LogicCondition = function (enabled, operation, operandAType, operandAValue,
         $container.html('');
         if (self.hasOperand(operand)) {
             
-            $container.append('<select class="logic_element__operand--type" data-operand="0"></select>');
+            $container.append('<select class="logic_element__operand--type" data-operand="' + operand + '"></select>');
             let $t = $container.find('.logic_element__operand--type');
 
             for (let k in FC.getOperandTypes()) {
                 if (FC.getOperandTypes().hasOwnProperty(k)) {
                     let op = FC.getOperandTypes()[k];
-
+                    
                     if (type == k) {
                         $t.append('<option value="' + k + '" selected>' + op.name + '</option>');
+
+                        /* 
+                         * Render value element depending on type
+                         */
+                        self.renderOperandValue($container, op, operand, value);
+
                     } else {
                         $t.append('<option value="' + k + '">' + op.name + '</option>');
                     }
-                    //TODO bind to event
-
-                    /* 
-                     * Render value element depending on type
-                     */
                 }
             }
 
+            /*
+             * Bind events
+             */
+            $t.change(self.onOperatorTypeChange);
+
         }
     }
 
diff --git a/src/css/logic.css b/src/css/logic.css
index e530aea1..d6a9eec9 100644
--- a/src/css/logic.css
+++ b/src/css/logic.css
@@ -19,4 +19,9 @@
     border-radius: 2px;
     z-index: 2001;
     padding: 2em;
+}
+
+input.logic_element__operand--value {
+    float: none;
+    width: 9em;
 }
\ No newline at end of file
diff --git a/tabs/mixer.html b/tabs/mixer.html
index 16f25c5a..81f86219 100644
--- a/tabs/mixer.html
+++ b/tabs/mixer.html
@@ -133,9 +133,9 @@
                 <table id="logic-table" class="mixer-table">
                         <thead>
                             <tr>
-                                <th style="width: 75px" data-i18n="logicId"></th>
-                                <th data-i18n="logicEnabled"></th>
-                                <th data-i18n="logicOperation"></th>
+                                <th style="width: 50px" data-i18n="logicId"></th>
+                                <th style="width: 80px" data-i18n="logicEnabled"></th>
+                                <th style="width: 120px" data-i18n="logicOperation"></th>
                                 <th data-i18n="logicOperandA"></th>
                                 <th data-i18n="logicOperandB"></th>
                                 <th data-i18n="logicFlags"></th>