rules engine test

by Barry Carter

HTML

<div class='liveExample'> 
    
    <h2>Fields</h2>
    <ul data-bind="foreach: fields">
        <li>
            <div data-bind="visible: visible">
                <span data-bind="text: name"> </span> : <input data-bind="value: data" />
            </div>
        </li>
    </ul>
    
    <h2>Rules</h2>
    <div data-bind="with: addRule">
      <ul data-bind="foreach: rules">
          <li>
              <div>
                  <span data-bind="text: name"> </span> : <span data-bind="text: ruleEvaluator"></span>
              </div>
          </li>
      </ul>
      <a data-bind="click: newRule_click">Add New</a>
    </div>
    
    <div data-bind="with: addRule">
        <h2>Add Rule</h2>

        <div data-bind="with: editingRule">
            <div>
                <span>Rule Name </span> : <input data-bind="value: name" />
            </div>
            
            <div class="rule-group" data-bind="foreach: ruleOpGroups">
                <div class="rule">
                    <!-- ko if: $index() == 0 -->
                    IF
                    <!-- /ko -->
                    <!-- ko if: $index() > 0 -->
                    ELSE IF
                    <!-- /ko -->
                    <!-- ko if: $parents[1].editingRuleGroup() == $data -->
                    <div data-bind="foreach: ruleOps">
                        <div class="flex-grid group">
                            <div class="col">
                                <input data-bind="value: field" />
                            </div>
                            <div class="col">
                                <select data-bind="options: $parents[2].availableOps, value: op"></select>
                            </div>
                            <div class="col">
                                <input data-bind="value: value" />
                            </div>
                            <div class="col">
                                <button data-bind="click: $parents[2].addAnd">X</button>
...

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; width: 40px; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

a { color: blue; }
a:hover { text-decoration: underline; }

li { list-style-type: disc; margin-left: 20px; }

.flex-grid {
  display: flex;
}

.col {
  flex: 1;
}

JavaScript

var RuleActionType = Object.freeze({"doNothing":0, "visible":1, "hidden":2, "setValue":3});
var RuleActionTypeNames = [{ name: "Make Field Visible", type: RuleActionType.doNothing}, { name: "Make Field Visible", type: RuleActionType.visible}, { name: "Make Field Hidden", type: RuleActionType.hidden}, { name: "Set a Field Value", type: RuleActionType.setValue}];
var availableOps = ["<", "<=", "=", ">=", ">", "!="];


var AddRuleModel = function(main) {
		var self = this;
    this.main = main;
    this.rules = ko.observableArray([]);
    
        
    //for a new model
    //this.newRules = ko.observableArray([]);
    this.availableOps = availableOps;
    this.ruleActionTypes = RuleActionType;
    this.ruleActionNames = RuleActionTypeNames;
    
    this.editingRule = ko.observable();
    this.editingRuleGroup = ko.observable();
    
    // for the new row inputs
    this.newOp = new RuleOperation("lname", ">", "25");
    this.newAction = new RuleAction("title", 2, self.main);
      
    this.createNewRule = function() {
    		var newRule = new Rule("New Rule", [], self.main);
        newRule.active(false);
    		//var newOp = new RuleOperation("lname", ">", "25");
    		//var newAction = new RuleAction("title", 2, self.main);
        //var editingOpGroup = new RuleOperationGroup();
        //editingOpGroup.actions([newAction]);
        //editingOpGroup.ruleOps([newOp]);
        //self.editingRuleGroup(editingOpGroup);
        //self.editingRuleGroup().addRuleOp(newOp);
        newRule.ruleOpGroups([]);
        return newRule;
    }
    
    this.newRule_click = function() {
    		var rule = self.createNewRule();
        self.editingRule(rule);
    }
    
    this.editGroup_click = function(data, event) {
    		self.editingRuleGroup(data);
        console.log("asdasdasdasd");
    }
    
    this.addIf_click = function() {
		    var editingOpGroup = new RuleOperationGroup();
        self.editingRuleGroup(editingOpGroup);
        console.log("asdasdasdasd");
       ...