×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

ruleset.phtml

0
0
 
0
Language: Javascript
Posted by: Jan Janssen
Added: Jun 11, 2014 12:08 PM
Views: 1765
Tags: no tags
  1. <style>
  2.     .ruleset_add {
  3.         float: right;
  4.         width: 50px;
  5.         /*background-color: #f47e1a;*/
  6.         font-weight:bold;
  7.         cursor: pointer;
  8.     }
  9.  
  10.     .ruleset_selected {
  11.         background-color: #ffac47 !important;
  12.     }    
  13.  
  14.     .attributesSelect {
  15.         margin-top: 15px;
  16.         margin-bottom: 10px;
  17.         margin-left: 50px;
  18.     }
  19. </style>
  20. <div id="floepsel">
  21.     <div id="tableWrapper" class="grid"><div>
  22.         </div>
  23.         <script>
  24.             var nrOfRules = 0;
  25.             var selectIsAdded = false;
  26.             var ruleset = new Array();
  27.  
  28.             var attributesWithValues = <?php echo json_encode($this->getAllAttributesWithOptions(4)); ?>;
  29.             var attributesForSelect = <?php echo json_encode($this->getAttributesForSelect()); ?>;
  30.             var depth = 0;
  31.             //"use strict";
  32.             window.onload = addRule();
  33.  
  34.             function addRule(treeIndex, parentTable) {
  35.                 if (treeIndex == null) {
  36.                     treeIndex = "";
  37.                 }
  38.                 //console.log(parentTable);
  39.  
  40.                 //if ((nrOfRules - 1 >= 1) && (nrOfRules - 1 != parentTable.id.split('_')[0])) {
  41.                 //    removeElements(nrOfRules - 1);
  42.                 //}
  43.                 //console.log(parentTable);
  44.                 createSelect(treeIndex, parentTable);
  45.             }
  46.  
  47.             function removeClassesFromTableCells(table) {
  48.                 var tbl = table;
  49.                 var attributeOptions = attributesWithValues[tbl.getAttribute("data-attributeId")];
  50.  
  51.                 var tblHead = tbl.rows[0];
  52.  
  53.                 for (var i = 0; i < attributeOptions['options'].length; i++) {
  54.                     var cell = tblHead.cells[i];
  55.                     cell.removeAttribute("class");
  56.                 }
  57.             }
  58.  
  59.             function removeTables(currentTableId) {
  60.                 var tblId = currentTableId;
  61.                 for (var i = tblId; i < nrOfRules; i++) {
  62.                     if (i > currentTableId) {
  63.                         //removeElements(i);
  64.                         var table = i + "_table";
  65.                         var select = i + "_attributesSelect";
  66.                         var span = i + "_span";
  67.                         if (checkIfElementExists(table)) {
  68.                             hideElement(table);
  69.                         }
  70.                         if (checkIfElementExists(select)) {
  71.                             hideElement(select);
  72.                         }
  73.                         if (checkIfElementExists(span)) {
  74.                             hideElement(span);
  75.                         }
  76.                     }
  77.                 }
  78.             }
  79.  
  80.             function hideElement(id) {
  81.                 //document.getElementById(id).style.visibility = 'hidden';
  82.                 document.getElementById(id).style.display = 'none';
  83.             }
  84.  
  85.             function changeState(event) {
  86.                 var buttonIndex = event.target.id.split("_");
  87.                 var tableId = buttonIndex[0];
  88.                 var cellIndex = buttonIndex[1];
  89.  
  90.                 var tbl = document.getElementById(tableId + "_table");
  91.                 var cell = tbl.rows[0].cells[cellIndex];
  92.                 //console.log(cell);
  93.  
  94.                 removeClassesFromTableCells(tbl);
  95.                 cell.className = "ruleset_selected";
  96.                 removeTables(tableId);
  97.  
  98.                 var ti = cell.getAttribute("data-treeIndex");
  99.                 //console.log(cell);
  100.                 //tableValuesToArray(tbl);
  101.                 //console.log(ti + "_");
  102.                 addRule(ti + "_", tbl);
  103.             }
  104.            
  105.             function clickSelect(treeIndex, parentTable) {
  106.                 createTable(treeIndex, parentTable);
  107.             }
  108.  
  109.             function addAllTablesToRuleset() {
  110.                 //console.log(nrOfRules);
  111.                 for (var i = 0; i < nrOfRules; i++) {
  112.                     var id = i;
  113.                     if (checkIfElementExists(id + "_table")) {
  114.                         var tbl = document.getElementById(id + "_table");
  115.                         var child = tableValuesToArray(tbl);
  116.                     }
  117.                 }
  118.  
  119.                 var form = document.getElementById('edit_form');
  120.                 if (!checkIfElementExists('hiddenRuleset')) {
  121.                     var hiddenField = document.createElement('input');
  122.                     hiddenField.id = 'hiddenRuleset';
  123.                     hiddenField.type = 'hidden';
  124.                     hiddenField.name = "ruleset";
  125.                     hiddenField.value = JSON.stringify(ruleset);
  126.                     form.appendChild(hiddenField);
  127.                 } else {
  128.                     hiddenField = document.getElementById('hiddenRuleset')
  129.                     hiddenField.value = JSON.stringify(ruleset);
  130.                 }
  131.                 console.log('updated!!!');
  132.             }
  133.  
  134.             function createSelect(treeIndex, parentTable) {
  135.                 if (selectIsAdded == false) {
  136.                     var attributes = attributesForSelect;
  137.                     var attributesLength = attributes.length;
  138.  
  139.                     var select = document.createElement("select");
  140.                     var span = document.createElement("span");
  141.                     span.id = nrOfRules + "_span";
  142.  
  143.                     select.id = nrOfRules + "_attributesSelect";
  144.                     select.className = "attributesSelect";
  145.                     select.addEventListener(
  146.                             "change",
  147.                             function() {
  148.                                 clickSelect(treeIndex, parentTable)
  149.                             }, false);
  150.  
  151.                     for (var i = 0; i < attributesLength; i++) {
  152.                         var attribute = attributes[i];
  153.                         if (attribute != null) {
  154.                             var optionCode = attribute.label;
  155.                             var optionValue = attribute.value;
  156.                             var opt = document.createElement('option');
  157.                             opt.value = optionValue;
  158.                             opt.innerHTML = optionCode;
  159.                             select.appendChild(opt);
  160.                         }
  161.                     }
  162.                     span.innerText = "Attribute:";
  163.                     span.appendChild(select);
  164.  
  165.                     document.getElementById("tableWrapper").appendChild(span);
  166.                     selectIsAdded = true;
  167.                 }
  168.             }
  169.  
  170.             function isEmpty(strIn)
  171.             {
  172.                 if (strIn === undefined)
  173.                 {
  174.                     return true;
  175.                 }
  176.                 else if (strIn == null)
  177.                 {
  178.                     return true;
  179.                 }
  180.                 else if (strIn == "")
  181.                 {
  182.                     return true;
  183.                 }
  184.                 else
  185.                 {
  186.                     return false;
  187.                 }
  188.             }
  189.  
  190.             function tableValuesToArray(table) {
  191.                 var tbl = table;
  192.                 var attributeOptions = attributesWithValues[tbl.getAttribute("data-attributeId")];
  193.                 var rules = new Array();
  194.                 for (var i = 0; i < attributeOptions['options'].length; i++) {
  195.                     var cell = tbl.rows[1].cells[i];
  196.                     //console.log(tbl.rows[1]);
  197.                     var treeIndex = cell.getAttribute("data-treeIndex").split("_");
  198.                     var qty = cell.children[0].value;
  199.  
  200.                     if (!isEmpty(qty)) {
  201.                         var option = attributeOptions['options'][i];
  202.                         var attribute = attributeOptions['attribute'];
  203.  
  204. //                    var rule = new Array();
  205. //                    rule["qty"] = qty;
  206. //                    rule["attribute_label"] = attribute.label;
  207. //                    rule["attribute_value"] = attribute.value;
  208. //                    rule["attribute_option_label"] = option.label;
  209. //                    rule["attribute_option_value"] = option.value;
  210. //                    rule["children"] = new Array();
  211.                         var rule = {};
  212.                         rule.qty = qty;
  213.                         rule.attribute_label = attribute.label;
  214.                         rule.attribute_value = attribute.value;
  215.                         rule.attribute_option_label = option.label;
  216.                         rule.attribute_option_value = option.value;
  217.                         rule.children = new Array();
  218.                         rules[i] = rule;
  219.                         insertChildArrayInRuleset(treeIndex, rule);
  220.                     }
  221.                 }
  222.                 //var child = new Array(rules);
  223.                 var child = rules;
  224.                 //console.log(child);
  225.                 return child;
  226.             }
  227.  
  228.             function insertChildArrayInRuleset(treeIndex, childArray) {
  229.                 var indices = "";
  230.                 for (var i = 0; i < treeIndex.length; i++) {
  231.                     if (i != 0) {
  232.                         indices = indices + '["children"][' + treeIndex[i] + ']';
  233.                     } else {
  234.                         indices = indices + '[' + treeIndex[i] + ']';
  235.                     }
  236.                 }
  237.                 //console.log(indices);
  238.                 eval("ruleset" + indices + " = childArray");
  239.             }
  240.             function createTable(treeIndex, parentTable) {
  241.                 if (treeIndex == null) {
  242.                     treeIndex = "";
  243.                 }
  244.                 var attributeSelect = document.getElementById(nrOfRules + "_attributesSelect");
  245.                 if (parentTable != null) {
  246.                     var parentId = parentTable.id.split('_')[0];
  247.                     //console.log(parentTable);
  248.                     //console.log(parentTable.rows[1].cells[0].getAttribute("data-treeIndex"));
  249.                     //treeIndex = parentTable.rows[1].cells[0].getAttribute("data-treeIndex") + "_";
  250.                     //console.log(treeIndex);
  251.                 }
  252.  
  253.                 if (checkIfElementExists(nrOfRules + "_attributesSelect")) {
  254.                     var selectedAttribute = attributeSelect.options[attributeSelect.selectedIndex];
  255.  
  256.                     var attribute = attributesWithValues[selectedAttribute.value];
  257.                     var attributeLength = attribute['options'].length;
  258.                     var type = "label";
  259.  
  260.                     var tbl = document.createElement("table");
  261.  
  262.                     var tHead = document.createElement("thead");
  263.                     var tBody = document.createElement("tbody");
  264.  
  265.                     var rowHeadings = document.createElement("tr");
  266.                     var rowBody = document.createElement("tr");
  267.  
  268.                     tbl.id = nrOfRules + "_table";
  269.                     tbl.className = "table";
  270.                     tbl.setAttribute("border", "2");
  271.                     tbl.setAttribute('data-parentId', parentId);
  272.                     //tbl.setAttribute('data-id', nrOfRules);
  273.                     tbl.setAttribute('data-attributeId', selectedAttribute.value);
  274.  
  275.                     rowHeadings.className = "headings";
  276.                     for (var i = 0; i < attributeLength; i++) {
  277.                         var option = attribute['options'][i];
  278.                         if (option != null) {
  279.                             var optionLabel = option.label;
  280.                             var optionValue = option.value;
  281.  
  282.                             var cell = document.createElement("th");
  283.                             var input = document.createElement("input");
  284.                             input.type = "button";
  285.                             input.className = "ruleset_add";
  286.                             input.value = "+";
  287.                             input.id = nrOfRules + "_" + i + "_button";
  288.                             input.setAttribute("data-parentId", parentId);
  289.                             //input.addEventListener("click", changeState, false);
  290.                             input.addEventListener("click", changeState, false);
  291.  
  292.                             var cellValue = document.createTextNode(optionLabel);
  293.                             cell.appendChild(cellValue);
  294.                             cell.appendChild(input);
  295.                             //console.log(treeIndex);
  296.                             cell.setAttribute('data-treeIndex', treeIndex + i);
  297.                             cell.setAttribute("data-type", type);
  298.                             rowHeadings.appendChild(cell);
  299.                         }
  300.                     }
  301.                     type = "input";
  302.  
  303.                     for (var i = 0; i < attributeLength; i++) {
  304.                         var option = attribute['options'][i];
  305.                         if (option != null) {
  306.                             var optionLabel = option.label;
  307.                             var optionValue = option.value;
  308.  
  309.                             var cell = document.createElement("td");
  310.                             var input = document.createElement("input");
  311.                             input.type = "text";
  312.                             input.addEventListener('textInput', addAllTablesToRuleset, false);
  313.                             cell.appendChild(input);
  314.                             cell.setAttribute('data-treeIndex', treeIndex + i);
  315.                             rowBody.appendChild(cell);
  316.                         }
  317.                     }
  318.                     tHead.appendChild(rowHeadings);
  319.                     tBody.appendChild(rowBody);
  320.  
  321.                     tbl.appendChild(tHead);
  322.                     tbl.appendChild(tBody);
  323.  
  324.                     document.getElementById("tableWrapper").appendChild(tbl);
  325.  
  326.                     nrOfRules++;
  327.                     selectIsAdded = false;
  328.                 } else {
  329.                     alert("error");
  330.                 }
  331.             }
  332.  
  333.             function removeElements(id) {
  334.                 var table = id + "_table";
  335.                 var select = id + "_attributesSelect";
  336.                 var span = id + "_span";
  337.                 if (checkIfElementExists(table)) {
  338.                     (elem = document.getElementById(table)).parentNode.removeChild(elem);
  339.                 }
  340.                 if (checkIfElementExists(select)) {
  341.                     (elem = document.getElementById(select)).parentNode.removeChild(elem);
  342.                 }
  343.                 if (checkIfElementExists(span)) {
  344.                     (elem = document.getElementById(span)).parentNode.removeChild(elem);
  345.                 }
  346.             }
  347.  
  348.             function checkIfElementExists(id) {
  349.                 return !!document.getElementById(id);
  350.             }
  351.         </script>    

Write a comment

To post comments, please log in or register.