hrc-webcommerce/templates/settings.php

<?php if ($error == 'wrong_file') : ?>
    <div class="message error">
        <p><?php echo __('Wrong key file format'); ?></p>
    </div>
<?php endif; ?>

<?php if (!$is_key) : ?>
    <form id="hrc-webcommerce-form" method="post" enctype="multipart/form-data">
        <table class="form-table">
            <tr valign="top">
                <th scope="row"><?php echo __('Key:'); ?></th>
                <td><input type="file" id="hrc-webcommerce-key" name="hrc_webcommerce_key"/></td>
            </tr>
        </table>

        <?php submit_button(); ?>
    </form>
<?php else : ?>
    <form id="hrc-webcommerce-form" method="post">
        <table class="widefat striped" style="width: calc(100% - 30px); margin: 5px 15px 2px;">
            <tbody>
            <tr>
                <td>
                    <span class="importer-title"><?php echo __('Licence status:'); ?></span>
                </td>

                <td class="desc">
                <span class="importer-desc">
                    <?php if ($is_licence) : ?>
                        <?php echo __('Active'); ?>
                    <?php else : ?>
                        <?php echo __('Disable'); ?>
                    <?php endif; ?>
                </span>
                </td>
            </tr>

            <?php if ($is_licence) : ?>
                <tr>
                    <td>
                        <span class="importer-title"><?php echo __('Table:'); ?></span>
                    </td>
                    <td>
                        <input type="text" id="hrc-webcommerce-table" name="hrc_webcommerce_table" value="<?php echo $table; ?>" />
                    </td>
                </tr>

                <tr>
                    <td>
                        <span class="importer-title"><?php echo __('Menu folder:'); ?></span>
                    </td>
                    <td>
                        <?php echo get_temp_dir(); ?>
                    </td>
                </tr>

                <tr>
                    <td>
                        <span class="importer-title"><?php echo __('Last update:'); ?></span>
                    </td>

                    <td class="desc">
                    <span class="importer-desc" id="last-update">
                        <?php if (empty($last_update)) : ?>
                            <?php echo __('Not imported'); ?>
                        <?php else : ?>
                            <script type="text/javascript">
                                document.write(new Date(<?php echo $last_update; ?> * 1000).toLocaleString()
                                )
                                ;
                            </script>
                        <?php endif; ?>
                    </span>
                        <span class="importer-action">
                        <a href="#"
                           class="install-now" id="install-now" data-slug="hrc-webcommerce-update"
                           data-name="HRC WebCommerce"
                           aria-label="<?php echo __('Update now'); ?>"><?php echo __('Update'); ?></a>
                    </span>
                    </td>
                </tr>
            <?php endif; ?>
            </tbody>
        </table>

        <?php submit_button(); ?>
    </form>
<?php endif; ?>

<div id="update-log" style="width: calc(100% - 30px); margin: 5px 15px 2px; display: none;">
    <h4><?php echo __('Update log'); ?></h4>

    <div id="update-log-events"></div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function () {
        function updateItem(key) {
            let data = {
                action: 'hrc_webcommerce_update',
                step: 'menu',
                key: key
            };

            setTimeout(function() {
                jQuery.post(ajaxurl, data, function (response) {
                    let answer = jQuery.parseJSON(response);
                    jQuery('#update-log-events').prepend('<p>' + new Date().toLocaleTimeString() + ': <?php echo __('Dishes updated:'); ?> ' + answer.name + '</p>');

                    if (response.is_last) {
                        jQuery('#update-log-events').prepend('<p>' + new Date().toLocaleTimeString() + ': <?php echo __('Finished'); ?></p>');
                        jQuery(link).removeAttr('disabled');

                        jQuery('#last-update').text(new Date().toLocaleString());
                    }
                });
            }, key * 1500);
        }

        jQuery('#install-now').on('click', function (e) {
            e.preventDefault();
            let link = this;

            if (jQuery(link).attr('disabled') === 'disabled') {
                return false;
            }

            jQuery(link).attr('disabled', 'disable');
            jQuery('#update-log').css('display', 'block');

            var data = {
                action: 'hrc_webcommerce_update',
                step: 'check'
            };

            jQuery('#update-log-events').prepend('<p>' + new Date().toLocaleTimeString() + ': <?php echo __('Checking update'); ?></p>');

            jQuery.post(ajaxurl, data, function (response) {
                let answer = jQuery.parseJSON(response);

                if (answer.file_version > answer.last_update) {
                    data.step = 'update';
                    jQuery('#update-log-events').prepend('<p>' + new Date().toLocaleTimeString() + ': <?php echo __('Updating menu'); ?></p>');

                    jQuery.post(ajaxurl, data, function (response) {
                            let answer = jQuery.parseJSON(response);

                            if (answer.file_exist) {
                                data.step = 'folder';
                                jQuery('#update-log-events').prepend('<p>' + new Date().toLocaleTimeString() + ': <?php echo __('Updating folders'); ?></p>');

                                jQuery.post(ajaxurl, data, function (response) {
                                    let answer = jQuery.parseJSON(response);
                                    jQuery('#update-log-events').prepend('<p>' + new Date().toLocaleTimeString() + ': <?php echo __('Folders updated:'); ?> ' + answer.folder_count + '</p>');

                                    let key = 0;
                                    let total = answer.menu_total;

                                    jQuery('#update-log-events').prepend('<p>' + new Date().toLocaleTimeString() + ': <?php echo __('Updating dishes'); ?></p>');

                                    do {
                                        updateItem(key);
                                        key++;
                                    }
                                    while (key < total);
                                });
                            } else {
                                jQuery('#update-log-events').prepend('<p>' + new Date().toLocaleTimeString() + ': <?php echo __('Wrong menu file'); ?></p>');
                                jQuery(link).removeAttr('disabled');
                            }
                        }
                    );
                } else {
                    jQuery('#update-log-events').prepend('<p>' + new Date().toLocaleTimeString() + ': <?php echo __('You are using the latest version of the menu'); ?></p>');
                    jQuery(link).removeAttr('disabled');
                }
            });
        })
    });
</script>

<style type="text/css">
    a[disabled="disabled"] {
        opacity: 0.5;
        text-decoration: none;
    }

    a[disabled="disabled"]:hover {
        text-decoration: none;
        cursor: default;
    }
</style>