project-bocian/theme/view/home.php

<!-- start: home -->
<div id="smad-page-home" class="container-fluid">
    <div>
        <div>
            <div id="smad-menu-form-section" class="border-top-grey">
                <div class="col-md-6 padding-lr-0 smad-border-col">
                    <div class="menu-items text-center">
                        <div class="menu-item">
                            <a href="index.php?_route=UrlAction_Bocian#PRACOWNICY" title="Pracownicy">
                                <div>PRACOWNICY</div>
                                <img src="<?= $this->asset("assets/images/button-red.png"); ?>" alt="Pracownicy" />
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 padding-lr-0">
                    <div class="menu-items text-center">
                        <div class="menu-item">
                            <a href="index.php?_route=UrlAction_Bocian#KONTRAHENCI" title="Kontrahenci">
                                <div>KONTRAHENCI</div>
                                <img src="<?= $this->asset("assets/images/button-red.png"); ?>" alt="Kontrahenci" />
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 border-top-grey border-bottom-grey">
                    <div class="menu-form-input text-center">
                        <div class="menu-item smad-heder-title">głębokość powiązań:</div>
                        <div class="menu-item">
                            <input type="text" class="form-control smad-depth" placeholder="1-16" value="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="smad-generate-link" class="container-fluid">
    <div>
        <div class="text-center">
            <a href="#" title="GENERUJ RAPORT POWIĄZAŃ" class="btn btn-primary font-weight-700">GENERUJ RAPORT POWIĄZAŃ</a>
        </div>
    </div>
</div>

<script type="text/javascript">

if (localStorage.getItem("Bocian.biAuditForm.depth") === null) {
  localStorage.setItem('Bocian.biAuditForm.depth', 2);
}

$(document).ready(function() {
  clearBIAuditFormLocalStorage();
  loadCurrentDepthInInput('.smad-depth');
  updateLocalStorageBiAuditDepth('.smad-depth');
});

function loadCurrentDepthInInput(idInput) {
  var depthValue = getItemLocalStorage("Bocian.biAuditForm.depth");

  if ( getItemLocalStorage('Bocian.biAuditForm.depth') === null ) {
    depthValue = setItemLocalStorage('Bocian.biAuditForm.depth', 2);
  }

  $(idInput).val(function() {
     return depthValue;
  });
}

function updateLocalStorageBiAuditDepth(idInput) {
  $(idInput).keyup(function() {
    delayUpdate(function(){
      var newValue = $(idInput).val();
      var responseValue = validateValueDepth(parseInt(newValue));
      setItemLocalStorage('Bocian.biAuditForm.depth', responseValue);
      loadCurrentDepthInInput('.smad-depth');
    }, 1000 );
  });
}

function validateValueDepth(newValue) {
  var value = null;
  value = newValue;

  if (parseInt(newValue) < 0) {
      value = 1;
  }

  if (parseInt(newValue) > 16) {
    value = 16;
  }

  return value;
}


var delayUpdate = (function() {
  var timer = 0;
  return function(callback, ms) {
  clearTimeout (timer);
  timer = setTimeout(callback, ms);
 };
})();

// Local storage
function setItemLocalStorage(key, array) {
	localStorage.setItem(key, JSON.stringify(array));
}
function getItemLocalStorage(key) {
	var retrievedData = localStorage.getItem(key);
	var response = JSON.parse(retrievedData);

	return response;
}

function clearBIAuditFormLocalStorage() {
  var arrayValue = [];
  setItemLocalStorage('Bocian.biAuditForm.pracownicyIds', arrayValue);
  setItemLocalStorage('Bocian.biAuditForm.kontrahenciIds', arrayValue);
  setItemLocalStorage('Bocian.biAuditForm.pracownicy.filterIdGroup', 0);
  setItemLocalStorage('Bocian.biAuditForm.kontrahenci.filterIdGroup', 0);
}
window.delayUpdate = delayUpdate;
</script>
<!-- end:home -->