Kleeja/admin/Masmak/admin_check_update.html

<!-- Breadcrumbs -->
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="./">{lang.R_CPINDEX}</a></li>
    <li class="breadcrumb-item active">{lang.R_CHECK_UPDATE}</li>
</ol>

<div class="alert" id="updateInfo">
    <div class="d-flex justify-content-between align-middle">
        <p id="updateInfoStatus">
            <img src="{STYLE_PATH_ADMIN}images/ajax-loader-small.gif" /> {lang.LOADING}
        </p>
        <button id="updateButton" type="button" class="btn btn-outline-dark btn-sm d-none" onclick="updateNow(1)">{lang.UPDATE_KLJ_NOW}</button>
    </div>
  <hr id="updateInfoHr" class="d-none">
  <p id="updateInfoMessage" class="mb-0 d-none"></p>
</div>

<ul class="list-group mt-5 d-none" id="updateProcess">
    <li class="list-group-item disabled" id="update1">
        <div class="d-flex justify-content-between">
            <div>
                <h4 class="d-inline px-2">1</h4> {lang.UPDATE_PROCESS_STEP1}
            </div>
            <span class="update-status badge badge-primary badge-light p-2"></span>
        </div>
        <div class="update-message d-none alert alert-danger mt-3 mb-0"></div>
    </li>
    <li class="list-group-item disabled" id="update2">
        <div class="d-flex justify-content-between">
            <div>
                <h4 class="d-inline px-2">2</h4> {lang.UPDATE_PROCESS_STEP2}
            </div>
            <span class="update-status badge badge-primary badge-light p-2"></span>
        </div>
        <div class="update-message d-none alert alert-danger mt-3 mb-0"></div>
    </li>
    <li class="list-group-item disabled" id="update3">
        <div class="d-flex justify-content-between">
            <div>
                <h4 class="d-inline px-2">3</h4> {lang.UPDATE_PROCESS_STEP3}
            </div>
            <span class="update-status badge badge-primary badge-light p-2"></span>
        </div>
        <div class="update-message d-none alert alert-danger mt-3 mb-0"></div>
    </li>

</ul>



<script>
function loadWhenJQueryIsReady() {
    setTimeout(function() {
        if (typeof jQuery == 'undefined' && typeof window.jQuery == 'undefined') {
            loadWhenJQueryIsReady();
        } else {
            checkVersion();
        }
    }, 500);
}

loadWhenJQueryIsReady();

function checkVersion() {
    $.ajax({
        url: './?cp=p_check_update&smt=check&_ajax_=1',
        dataType: 'json'})
        .done(function (data) {
            if(data.content) {
                var info = data.content.split(":::");
                $('#updateInfo').addClass(
                    info[0] !=  0 ? 'alert-warning' : 'alert-info'
                );
                $('#updateInfoStatus').html(info[1]);
                <UNLESS NAME="showMessage">
                if(info[0] == 2) {
                    var message = info[1].split("::--x--::");
                    $('#updateInfoStatus').html(message[0]);
                    $('#updateInfoHr').removeClass('d-none');
                    $('#updateInfoMessage').removeClass('d-none').html('<span style="font-weight:bold">{lang.RELEASE_NOTE}:</span><br>'
                        + message[1].replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '<br>') + '<br>' + message[2].replace('T', ' '));
                    $('#updateButton').removeClass('d-none');
                }
                </UNLESS>
            } else {
                this.fail();
            }
            <IF NAME="showMessage"> location.href = './?update_done=1'; </IF>
        })
        .fail(function() {
            $('#updateInfo').html('{lang.ERROR_CHECK_VER}').addClass('alert-warning');
            <IF NAME="showMessage"> location.href = './?update_done=1'; </IF>
    });
}

function updateNow(step) {

    if(step == 1) {
        $('#updateButton').addClass('d-none');
        $('#updateProcess').removeClass('d-none');
        $('#updateInfoHr').addClass('d-none');
        $('#updateInfoMessage').addClass('d-none')
    }

    $('#update'+step+' .update-status').html('<img src="{STYLE_PATH_ADMIN}images/ajax-loader-small.gif">');
    $('#update'+step+'').removeClass('disabled');

    $.ajax({
        url: './?cp=p_check_update&smt=update'+step+'&{GET_FORM_KEY}&_ajax_=1',
        dataType: 'json'})
        .done(function (data) {
            if(data.content) {
                var info = data.content.split(":::");
                if(info[1].length > 0) {
                    $('#update'+step+' .update-message').removeClass('d-none').addClass('d-block').text(info[1]);
                    if(info[0] == 1) {
                        $('#update'+step+' .update-message').removeClass('alert-danger').addClass('alert-success');
                    }
                }

                $('#update'+step+' .update-status').html(info[0] == 1 ? '<i class="fa fa-check text-success"></i>' : '<i class="fa fa-warning text-danger"></i>');
                if(info[0] == 1 && step < 3) {
                    setTimeout(function() {
                        updateNow(step+1);
                    }, 500);
                }
            } else {
                this.fail();
            }
        })
        .fail(function(data) {
            var tryAgainMsg = '{lang.ERROR_TRY_AGAIN}';
            $('#update'+step+' .update-status').html('<i class="fa fa-warning text-danger"></i>');
            $('#update'+step+' .update-message').removeClass('d-none').addClass('d-block').html(
                <IGNORE>(data.content ? data.content : (data.responseJSON ? data.responseJSON.content  : tryAgainMsg))</IGNORE>
            );
    });
}
</script>