 <?php 

class AddonForm  {
  private $attr;
  private $label;
  private $tblRows;
  private $control;

  public function __construct($attr) {

    if (isset($attr)) {
      $this->field = $attr->field;
      $this->form  = $attr->form;
      $this->label = $attr->label;
      $this->size  = $attr->size;
      $this->added = $attr->added;
      
      if (isset($entry->functions))
        $this->functions = json_encode($entry->functions);
      else 
        $this->functions = "";

      if (isset($attr->ctrlFunc))
        $this->ctrlFunc = json_encode($attr->ctrlFunc);
      else 
        $this->ctrlFunc = "";

      if (isset($attr->selOptions))
        $this->selOptions = json_encode($attr->selOptions);
      else 
        $this->selOptions = "";

//$cnt =  count($attr->ctrlFunc);
//print_r ("fcnt:$cnt");
//print_r ($attr->ctrlFunc);

      if (isset($attr->label1)) 
        $this->label1 = "<label>$attr->label1</label>"; 
      else 
        $this->label1 = "";

      if (isset($attr->label2)) 
        $this->label2 = "<label>$attr->label2</label>"; 
      else 
        $this->label2 = "";

      if (isset($attr->placeHolder1)) 
        $this->placeHolder1 = "placeHolder=\"$attr->placeHolder1\""; 
      else 
        $this->placeHolder1 = "";

      if (isset($attr->placeHolder2)) 
        $this->placeHolder2 = "placeHolder=\"$attr->placeHolder2\""; 
      else 
        $this->placeHolder2 = "";
    } 
    
    
    
     
  }
  
  public function outputLayout() {

    $layout = "
<div id='outer-container'>
  <div id='scrollable' style='height:" . $this->size . "em;'>
    <table class='table table-condensed'>
      <thead>
        <tr>
          <th colspan='3'>$this->label</th>
        </tr>  
        <tr>
          <th style='width:20%;'></th>
          <th style='width:20%;'>$this->label1</th>
          <th style='width:30%;'>$this->label1</th>
          <th style='width:30%;'>$this->label3</th>
        </tr>
      </thead>    
      <tbody id='frm$this->field'>
      </tbody>
    </table>
  </div>
  <button id='put$this->field' class='btn btn-inverse' 
    onclick='put$this->field();'>Enter</button>
</div>
    ";
    return $layout;
  }	

  public function outputScript() {

	  $script = "
// INPUT-SELECTS
var selectId$this->field = 0;

$(document).ready(function() {
  document.getElementById('put$this->field').style.display= 'none';
 });

$(document).on('change', '.func$this->field', function (e) {
  var rowId = $(this).closest('tr').prop('id');
  $(this).closest('tr').prop('class', '$this->form');
  $(this).closest('td').prop('class', 'row' + rowId + '$this->form');
}); 

$(document).on('change', '.sel$this->field', function (e) {
  var rowId = $(this).closest('tr').prop('id');
  $(this).closest('tr').prop('class', '$this->form');
  $(this).closest('td').prop('class', 'row' + rowId + '$this->form');
  $(this).attr('data-value', $(this).val());
}); 

$(document).on('change', '.inp1$this->field', function (e) {
  var rowId = $(this).closest('tr').prop('id');
  $(this).closest('tr').prop('class', '$this->form');
  $(this).closest('td').prop('class', 'row' + rowId + '$this->form');
  $(this).attr('data-value', $(this).val());
}); 

$(document).on('change', '.inp2$this->field', function (e) {
  var rowId = $(this).closest('tr').prop('id');
  $(this).closest('tr').prop('class', '$this->form');
  $(this).closest('td').prop('class', 'row' + rowId + '$this->form');
  $(this).attr('data-value', $(this).val());
}); 


function set$this->field (id) {
  $('#valmsg$this->field').html('');
  selectId$this->field = id

  get$this->field (selectId$this->field);
  if (selectId$this->field == 0)
    document.getElementById('put$this->field').style.display= 'none';
  else
    document.getElementById('put$this->field').style.display= 'block';
}

function com$this->field (message) {
  $('#valmsg$this->field').html('');
  var key = Object.keys(message); 

  if (key == 'selectId') {
    selectId$this->field = message[key][0];
    get$this->field (selectId$this->field);
    if (selectId$this->field == 0)
      document.getElementById('put$this->field').style.display= 'none';
    else
      document.getElementById('put$this->field').style.display= 'block';
  }    
}

multiFunction['com$this->field'] = {
  com$this->field: com$this->field
}; 

function gen$this->field(dbRows) {
  var ctrlFunc = JSON.parse('$this->ctrlFunc');
  var ctrlFunc0 = '';
  var ctrlFunc1 = '';

  for (var i=0; i<ctrlFunc.length; i++) {
    if (ctrlFunc[i].type == 0) {
      var value = ctrlFunc[i].id;
      var text  = ctrlFunc[i].text;
      ctrlFunc0 += '<option value=' + value + '>' + text + '</option>';
    }  
    else if (ctrlFunc[i].type == 1) {
      var value = ctrlFunc[i].id;
      var text  = ctrlFunc[i].text;
      ctrlFunc1 += '<option value=' + value + '>' + text + '</option>';
    }  
  }    

  var selOptions = JSON.parse('$this->selOptions');
  var selections = '';

  for (var j=0; j<selOptions.length; j++) {
    var value = selOptions[j].id;
    var text  = selOptions[j].text;
    selections += '<option value=' + value + '>' + text + '</option>';
  }    
 
  var layout = 
    '<tr id=0>' +
      '<td data-element=function class=row0$this->field style=width:20%;>' +
        '<select class=func$this->field>' + ctrlFunc0 + '</select>' +
      '</td>' +
      '<td data-element=select style=width:20%;>' +
        '<select class=sel$this->field>' + selections + '</select>' +
      '</td>' +
      '<td data-element=input1 style=width:30%;>' + 
        '<input type=text class=inp1$this->field $this->placeHolder1>' +
      '</td>' +
      '<td data-element=input2 style=width:30%;>' + 
        '<input type=text class=inp2$this->field $this->placeHolder2>' +
      '</td>' +
    '</tr>';

  for (var l=0; l<dbRows.length; l++) {
    var rowId     = dbRows[l].id
    var selValue  = dbRows[l].selval;
    var inp1Value = dbRows[l].inp1val;
    var inp2Value = dbRows[l].inp2val;

    selections = '';

    for (var j=0; j<selOptions.length; j++) {
      optId = selOptions[j].id;
      text  = selOptions[j].text;

      var attributes = '';
      if (selValue == optId)
        attributes = ' selected';

      selections += '<option value=' + optId + attributes + '>' + text + '</option>';
    }    

    layout += 
      '<tr id=' + rowId + '>' +
        '<td data-element=function style=width:20%;>' +
          '<select class=func$this->field>' + ctrlFunc1 + '</select>' +
        '</td>' +
        '<td data-element=select style=width:20%;>' +
          '<select class=sel$this->field>' + selections + '</select>' +
        '</td>' +
        '<td data-element=input1 style=width:30%;>' + 
          '<input type=text class=inp1$this->field value=\"' + inp1Value + '\">' +
        '</td>' +
        '<td data-element=input2 style=width:30%;>' + 
          '<input type=text class=inp2$this->field value=\"' + inp2Value + '\">' +
        '</td>' +
      '</tr>';
  }  
             
  return layout;
} 

function get$this->field (selectId) {
  document.getElementById ('frm$this->field').innerHTML = '';
//alert (selectId);  
  if (selectId > 0) {
    var params = 'selectid=' + selectId;

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'ajax/get$this->field.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText)
        document.getElementById('frm$this->field').innerHTML = gen$this->field(response);
      }
    }  
    xhr.send(params);
  }    
}

function put$this->field () {
  var comma   = '';
  var colon   = '';
  var rowIds  = '';
  var eleRows = '';
  var valRows = '';

  $('.$this->form').each(function() {
    var rowId =  $(this).prop('id');
    rowIds  += comma + rowId;
    colon = '';

    $(this).children('.row' + rowId + '$this->form').each(function(){
      var element = $(this).attr('data-element');
      eleRows  += comma + colon + element;
      if (element == 'function')
        valRows += comma + colon + $(this).find('.func$this->field option:selected').val();
      else if (element == 'select')
        valRows += comma + colon + $(this).find('.sel$this->field option:selected').val();
      else if (element == 'input1')
        valRows += comma + colon + $(this).find('input').attr('data-value');
      else if (element == 'input2')
        valRows += comma + colon + $(this).find('input').attr('data-value');

      colon = ':';    
      comma = '';
    });
    comma = ',';
  });
  
  var params = 'selectid=' + selectId$this->field + '&' + 
               'rowids=' + rowIds + '&' + 'elerows=' + eleRows + '&' +
               'valrows=' + valRows + '&' ;

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'ajax/put$this->field.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {//Call a function when the state changes.
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText)
      get$this->field (response);
    }
  }  
  xhr.send(params);
}

    "; 
    return $script;
  }
}

?>