<style>
.ruleset_add {
float: right;
width: 50px;
/*background-color: #f47e1a;*/
font-weight:bold;
cursor: pointer;
}
.ruleset_selected {
background-color: #ffac47 !important;
}
.attributesSelect {
margin-top: 15px;
margin-bottom: 10px;
margin-left: 50px;
}
</style>
<div id="floepsel">
<div id="tableWrapper" class="grid"><div>
</div>
<script>
var nrOfRules = 0;
var selectIsAdded = false;
var ruleset = new Array();
var attributesWithValues = <?php echo json_encode($this->getAllAttributesWithOptions(4)); ?>;
var attributesForSelect = <?php echo json_encode($this->getAttributesForSelect()); ?>;
var depth = 0;
//"use strict";
window.onload = addRule();
function addRule(treeIndex, parentTable) {
if (treeIndex == null) {
treeIndex = "";
}
//console.log(parentTable);
//if ((nrOfRules - 1 >= 1) && (nrOfRules - 1 != parentTable.id.split('_')[0])) {
// removeElements(nrOfRules - 1);
//}
//console.log(parentTable);
createSelect(treeIndex, parentTable);
}
function removeClassesFromTableCells(table) {
var tbl = table;
var attributeOptions = attributesWithValues[tbl.getAttribute("data-attributeId")];
var tblHead = tbl.rows[0];
for (var i = 0; i < attributeOptions['options'].length; i++) {
var cell = tblHead.cells[i];
cell.removeAttribute("class");
}
}
function removeTables(currentTableId) {
var tblId = currentTableId;
for (var i = tblId; i < nrOfRules; i++) {
if (i > currentTableId) {
//removeElements(i);
var table = i + "_table";
var select = i + "_attributesSelect";
var span = i + "_span";
if (checkIfElementExists(table)) {
hideElement(table);
}
if (checkIfElementExists(select)) {
hideElement(select);
}
if (checkIfElementExists(span)) {
hideElement(span);
}
}
}
}
function hideElement(id) {
//document.getElementById(id).style.visibility = 'hidden';
document.getElementById(id).style.display = 'none';
}
function changeState(event) {
var buttonIndex = event.target.id.split("_");
var tableId = buttonIndex[0];
var cellIndex = buttonIndex[1];
var tbl = document.getElementById(tableId + "_table");
var cell = tbl.rows[0].cells[cellIndex];
//console.log(cell);
removeClassesFromTableCells(tbl);
cell.className = "ruleset_selected";
removeTables(tableId);
var ti = cell.getAttribute("data-treeIndex");
//console.log(cell);
//tableValuesToArray(tbl);
//console.log(ti + "_");
addRule(ti + "_", tbl);
}
function clickSelect(treeIndex, parentTable) {
createTable(treeIndex, parentTable);
}
function addAllTablesToRuleset() {
//console.log(nrOfRules);
for (var i = 0; i < nrOfRules; i++) {
var id = i;
if (checkIfElementExists(id + "_table")) {
var tbl = document.getElementById(id + "_table");
var child = tableValuesToArray(tbl);
}
}
var form = document.getElementById('edit_form');
if (!checkIfElementExists('hiddenRuleset')) {
var hiddenField = document.createElement('input');
hiddenField.id = 'hiddenRuleset';
hiddenField.type = 'hidden';
hiddenField.name = "ruleset";
hiddenField.value = JSON.stringify(ruleset);
form.appendChild(hiddenField);
} else {
hiddenField = document.getElementById('hiddenRuleset')
hiddenField.value = JSON.stringify(ruleset);
}
console.log('updated!!!');
}
function createSelect(treeIndex, parentTable) {
if (selectIsAdded == false) {
var attributes = attributesForSelect;
var attributesLength = attributes.length;
var select = document.createElement("select");
var span = document.createElement("span");
span.id = nrOfRules + "_span";
select.id = nrOfRules + "_attributesSelect";
select.className = "attributesSelect";
select.addEventListener(
"change",
function() {
clickSelect(treeIndex, parentTable)
}, false);
for (var i = 0; i < attributesLength; i++) {
var attribute = attributes[i];
if (attribute != null) {
var optionCode = attribute.label;
var optionValue = attribute.value;
var opt = document.createElement('option');
opt.value = optionValue;
opt.innerHTML = optionCode;
select.appendChild(opt);
}
}
span.innerText = "Attribute:";
span.appendChild(select);
document.getElementById("tableWrapper").appendChild(span);
selectIsAdded = true;
}
}
function isEmpty(strIn)
{
if (strIn === undefined)
{
return true;
}
else if (strIn == null)
{
return true;
}
else if (strIn == "")
{
return true;
}
else
{
return false;
}
}
function tableValuesToArray(table) {
var tbl = table;
var attributeOptions = attributesWithValues[tbl.getAttribute("data-attributeId")];
var rules = new Array();
for (var i = 0; i < attributeOptions['options'].length; i++) {
var cell = tbl.rows[1].cells[i];
//console.log(tbl.rows[1]);
var treeIndex = cell.getAttribute("data-treeIndex").split("_");
var qty = cell.children[0].value;
if (!isEmpty(qty)) {
var option = attributeOptions['options'][i];
var attribute = attributeOptions['attribute'];
// var rule = new Array();
// rule["qty"] = qty;
// rule["attribute_label"] = attribute.label;
// rule["attribute_value"] = attribute.value;
// rule["attribute_option_label"] = option.label;
// rule["attribute_option_value"] = option.value;
// rule["children"] = new Array();
var rule = {};
rule.qty = qty;
rule.attribute_label = attribute.label;
rule.attribute_value = attribute.value;
rule.attribute_option_label = option.label;
rule.attribute_option_value = option.value;
rule.children = new Array();
rules[i] = rule;
insertChildArrayInRuleset(treeIndex, rule);
}
}
//var child = new Array(rules);
var child = rules;
//console.log(child);
return child;
}
function insertChildArrayInRuleset(treeIndex, childArray) {
var indices = "";
for (var i = 0; i < treeIndex.length; i++) {
if (i != 0) {
indices = indices + '["children"][' + treeIndex[i] + ']';
} else {
indices = indices + '[' + treeIndex[i] + ']';
}
}
//console.log(indices);
eval("ruleset" + indices + " = childArray");
}
function createTable(treeIndex, parentTable) {
if (treeIndex == null) {
treeIndex = "";
}
var attributeSelect = document.getElementById(nrOfRules + "_attributesSelect");
if (parentTable != null) {
var parentId = parentTable.id.split('_')[0];
//console.log(parentTable);
//console.log(parentTable.rows[1].cells[0].getAttribute("data-treeIndex"));
//treeIndex = parentTable.rows[1].cells[0].getAttribute("data-treeIndex") + "_";
//console.log(treeIndex);
}
if (checkIfElementExists(nrOfRules + "_attributesSelect")) {
var selectedAttribute = attributeSelect.options[attributeSelect.selectedIndex];
var attribute = attributesWithValues[selectedAttribute.value];
var attributeLength = attribute['options'].length;
var type = "label";
var tbl = document.createElement("table");
var tHead = document.createElement("thead");
var tBody = document.createElement("tbody");
var rowHeadings = document.createElement("tr");
var rowBody = document.createElement("tr");
tbl.id = nrOfRules + "_table";
tbl.className = "table";
tbl.setAttribute("border", "2");
tbl.setAttribute('data-parentId', parentId);
//tbl.setAttribute('data-id', nrOfRules);
tbl.setAttribute('data-attributeId', selectedAttribute.value);
rowHeadings.className = "headings";
for (var i = 0; i < attributeLength; i++) {
var option = attribute['options'][i];
if (option != null) {
var optionLabel = option.label;
var optionValue = option.value;
var cell = document.createElement("th");
var input = document.createElement("input");
input.type = "button";
input.className = "ruleset_add";
input.value = "+";
input.id = nrOfRules + "_" + i + "_button";
input.setAttribute("data-parentId", parentId);
//input.addEventListener("click", changeState, false);
input.addEventListener("click", changeState, false);
var cellValue = document.createTextNode(optionLabel);
cell.appendChild(cellValue);
cell.appendChild(input);
//console.log(treeIndex);
cell.setAttribute('data-treeIndex', treeIndex + i);
cell.setAttribute("data-type", type);
rowHeadings.appendChild(cell);
}
}
type = "input";
for (var i = 0; i < attributeLength; i++) {
var option = attribute['options'][i];
if (option != null) {
var optionLabel = option.label;
var optionValue = option.value;
var cell = document.createElement("td");
var input = document.createElement("input");
input.type = "text";
input.addEventListener('textInput', addAllTablesToRuleset, false);
cell.appendChild(input);
cell.setAttribute('data-treeIndex', treeIndex + i);
rowBody.appendChild(cell);
}
}
tHead.appendChild(rowHeadings);
tBody.appendChild(rowBody);
tbl.appendChild(tHead);
tbl.appendChild(tBody);
document.getElementById("tableWrapper").appendChild(tbl);
nrOfRules++;
selectIsAdded = false;
} else {
alert("error");
}
}
function removeElements(id) {
var table = id + "_table";
var select = id + "_attributesSelect";
var span = id + "_span";
if (checkIfElementExists(table)) {
(elem = document.getElementById(table)).parentNode.removeChild(elem);
}
if (checkIfElementExists(select)) {
(elem = document.getElementById(select)).parentNode.removeChild(elem);
}
if (checkIfElementExists(span)) {
(elem = document.getElementById(span)).parentNode.removeChild(elem);
}
}
function checkIfElementExists(id) {
return !!document.getElementById(id);
}
</script>
Loading...