More progress on rendering LC table

js/logicCondition.js

@@ -1,7 +1,9 @@
+/*global $,FC*/
 'use strict';
 
 let LogicCondition = function (enabled, operation, operandAType, operandAValue, operandBType, operandBValue, flags) {
     let self = {};
+    let $row;
 
     self.getEnabled = function () {
         return !!enabled;
@@ -59,8 +61,74 @@ let LogicCondition = function (enabled, operation, operandAType, operandAValue,
         flags = data;
     };
 
+    self.onEnabledChange = function (event) {
+        let $cT = $(event.currentTarget);
+        console.log($cT);
+    };
+
+    self.getOperatorMetadata = function () {
+        return FC.getLogicOperators()[self.getOperation()];
+    };
+
+    self.hasOperand = function (val) {
+        return self.getOperatorMetadata().hasOperand[val];
+    };
+
+    self.onOperatorChange = function (event) {
+        let $cT = $(event.currentTarget);
+
+        self.setOperation($cT.val());
+        self.setOperandAType(0);
+        self.setOperandBType(0);
+        self.setOperandAValue(0);
+        self.setOperandBValue(0);
+        self.renderOperand(0);
+        self.renderOperand(1);
+    };
+
+    self.renderOperandType = function ($container, type, value) {
 
-    self.render = function ($container) {
+    };
+
+    self.renderOperand = function (operand) {
+        let type, value, $container;
+        if (operand == 0) {
+            type = operandAType;
+            value = operandAValue;
+            $container = $row.find('.logic_cell__operandA');
+        } else {
+            type = operandBType;
+            value = operandBValue;
+            $container = $row.find('.logic_cell__operandB');
+        }
+
+        $container.html('');
+        if (self.hasOperand(operand)) {
+            
+            $container.append('<select class="logic_element__operand--type" data-operand="0"></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>');
+                    } else {
+                        $t.append('<option value="' + k + '">' + op.name + '</option>');
+                    }
+                    //TODO bind to event
+
+                    /* 
+                     * Render value element depending on type
+                     */
+                }
+            }
+
+        }
+    }
+
+    self.render = function (index, $container) {
 
         $container.find('tbody').append('<tr>\
                 <td class="logic_cell__index"></td>\
@@ -72,6 +140,37 @@ let LogicCondition = function (enabled, operation, operandAType, operandAValue,
             </tr>\
         ');
 
+        $row = $container.find('tr:last');
+
+        $row.find('.logic_cell__index').html(index);
+        $row.find('.logic_cell__enabled').html("<input type='checkbox' class='toggle logic_element__enabled' />");
+        $row.find('.logic_element__enabled').
+            prop('checked', self.getEnabled()).
+            change(self.onEnabledChange);
+
+        /*
+         * Operator select
+         */
+        $row.find('.logic_cell__operation').html("<select class='logic_element__operation' ></select>");
+        let $t = $row.find('.logic_element__operation');
+        
+        for (let k in FC.getLogicOperators()) {
+            if (FC.getLogicOperators().hasOwnProperty(k)) {
+                let o = FC.getLogicOperators()[k];
+                if (self.getOperation() == parseInt(k, 10)) {
+                    $t.append('<option value="' + k + '" selected>' + o.name + '</option>');
+                } else {
+                    $t.append('<option value="' + k + '">' + o.name + '</option>');
+                }
+            }
+        }
+        $t.change(self.onOperatorChange);
+
+        self.renderOperand(0);
+        self.renderOperand(1);
+
+        console.log($row);
+
     }
 
     return self;

js/logicConditionsCollection.js

@@ -25,7 +25,7 @@ let LogicConditionsCollection = function () {
 
         for (let k in self.get()) {
             if (self.get().hasOwnProperty(k)) {
-                self.get()[k].render($container);
+                self.get()[k].render(k, $container);
             }
         }