project-bocian/theme/view/home.php

<div class="container-fluid">
    <div>
        <div>
            <div id="smad-menu-section">
                <div class="col-md-6 padding-lr-0">
                    <div class="menu-items">
                        <div class="smad-heder-title menu-item"><span class="smad-line-red">|</span> RAPORTY</div>
                        <div class="menu-item">
                            <ul>
                                <li><a href="index.php?_route=ViewTableAjax&namespace=default_db/BI_audit_ENERGA_RUM_KONTRAHENCI_POWIAZANIA/BI_audit_ENERGA_RUM_KONTRAHENCI_POWIAZANIA" title="zobacz raporty" class="btn btn-success">zobacz raporty</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 padding-lr-0">
                    <div class="menu-items">
                        <div class="menu-item smad-heder-title"><span class="smad-line-red">|</span> BAZY DANYCH</div>
                        <div class="menu-item">
                            <ul>
                                <li><a href="index.php?_route=ViewTableAjax&namespace=default_db/BI_audit_KRS/BI_audit_KRS" title="KRS" class="btn btn-success">KRS</a></li>
                                <li><a href="index.php?_route=ViewTableAjax&namespace=default_db/BI_audit_CEIDG/BI_audit_CEIDG" title="CIDG" class="btn btn-success">CEIDG</a></li>
                                <li><a href="index.php?_route=ViewTableAjax&namespace=default_db/BI_audit_ENERGA_RUM_KONTRAHENCI" title="RUM" class="btn btn-success">RUM</a></li>
                                <li><a href="#" title="KSIĘGOWOŚĆ" class="btn btn-success">KSIĘGOWOŚĆ</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div 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_BiAuditRaport#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_BiAuditRaport#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>