Kleeja/admin/Masmak/admin_plugins.html

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


<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link (case == installed?active:)" href="{action}">{lang.INSTALLED_PLUGINS}</a>
    </li>
    <li class="nav-item">
        <a class="nav-link (case == local?active:)" href="{action}&amp;case=local">{lang.LOCAL_PLUGINS}</a>
    </li>
    <li class="nav-item">
        <a class="nav-link (case == store?active:)" href="{action}&amp;case=store">{lang.KLEEJA_STORE}</a>
    </li>
    <li class="nav-item">
        <a class="nav-link (case == check?active:)" href="{action}&amp;case=check">{lang.R_CHECK_UPDATE}</a>
    </li>
</ul>


<!--  installed plugins  -->
<IF NAME="case == installed">

    <IF NAME="no_installed_plugins">
        <div class="alert alert-info my-3 px-4 py-2 d-flex justify-content-start align-items-center">
            <i class="fa fa-exclamation fa-3x text-info p-2"></i>
            <span class="p-3">{lang.NO_PLUGINS}</span>
        </div>
    </IF>

    <IF NAME="installed_plugins">
    <div class="row">
        <LOOP NAME="installed_plugins">
        <div class="col-sm-12 col-md-3 mt-2">
        <div class="card">
                <img class="card-img-top img-responsive" src="{{icon}}" alt="{{plg_name}}">
                <div class="card-img-overlay p-3">
                    <div class="font-weight-normal px-2 rounded text-white" style="line-height:2; background: rgba(18, 16, 16, 0.4);">
                    <IF LOOP="plg_disabled">
                        {{plg_name}}
                        <i class="fa fa-toggle-off"></i>
                        <ELSE>
                        {{extra_info.plugin_title}} {{extra_info.plugin_version}}
                    </IF>
                    </div>
                </div>

            <div class="card-body">
                <p class="card-text " style="font-size:13px; max-height: 100px; min-height: 50px; overflow-y: auto">
                    <IF LOOP="plg_disabled">
                        {{plg_dsc}}
                        <ELSE>
                        {{extra_info.plugin_description}}
                    </ELSE>
                    <br>
                    <small>{{extra_info.plugin_developer}}</small>
                    </IF>
                </p>
            </div>

            <div class="card-footer btn-group">
                <IF LOOP="plg_disabled">
                    <a  class="btn btn-outline-secondary btn-sm" href="{plugin_enable_link}{{plg_name}}" title="{lang.ENABLE}"><i class="fa fa-toggle-on" title="{lang.ENABLE}"></i> {lang.ENABLE}</a>
                    <ELSE>
                   <IF LOOP="has_settings_page">
                        <a class="btn btn-outline-secondary btn-sm" href="./?{{extra_info.settings_page}}" title="{lang.R_CONFIGS}"><i class="fa fa-gear" title="{lang.R_CONFIGS}"></i></a>
                    </IF>
                    <a class="btn btn-outline-secondary btn-sm" href="{plugin_disable_link}{{plg_name}}" title="{lang.DISABLE}"><i class="fa fa-toggle-off" title="{lang.DISABLE}"></i> {lang.DISABLE}</a>
                </IF>

                <a class="btn btn-outline-secondary btn-sm" href="{plugin_uninstall_link}{{plg_name}}" title="{lang.DELETE}" onclick="javascript:return confirm_form();"><i class="fa fa-remove" title="{lang.DELETE}"></i> {lang.DELETE}</a>
            </div>
        </div>
        </div>
        </LOOP>
    </div>

    </IF>

<!-- ..... -->
<!-- local plugins -->
<!-- ..... -->
<ELSEIF NAME="case == local">
    <nav class="breadcrumb my-2">
        <div class="breadcrumb-item align-middle">{lang.ADD_NEW_PLUGIN}</div>
        <a class="btn btn-primary btn-sm float-right mx-1" href="#"  data-toggle="modal" data-target="#plugin_add_new">
            <i class="fa fa-upload"></i> {lang.UPLOAD_LOCAL_PC}
        </a>
        <a class="btn btn-primary btn-sm float-right mx-1" href="{action}&amp;case=store">
            <i class="fa fa-puzzle-piece"></i> {lang.KLEEJA_STORE}
        </a>
    </nav>
    <br>

    <ul class="list-unstyled list-group">
        <LOOP NAME="available_plugins">
        <li class="media d-flex justify-content-between list-group-item">
            <img class="mr-3" src="{{icon}}" alt="{{name}}" style="width: 75px">
            <div class="media-body d-flex justify-content-between">
                <h5 class="mt-0 mb-1 pull-(lang.DIR==ltr?left:right)">{{name}}</h5>

                <div class="btn-group btn-group-toggle">
                    <a class="btn btn-primary btn-sm" href="{plugin_install_link}{{name}}" title="{lang.ENABLE}" onclick="javascript:return confirm_form('{lang.PLUGIN_CONFIRM_ADD}');"><i class="fa fa-plus" title="{lang.ENABLE}"></i></a>
                    <a class="btn btn-danger btn-sm" href="{plugin_delete_folder_link}{{name}}" title="{lang.DELETE}" onclick="javascript:return confirm_form();"><i class="fa fa-trash" title="{lang.DELETE}"></i></a>
                </div>
            </div>
        </li>
        </LOOP>
    </ul>

<!-- new plugin modal -->
<div id="plugin_add_new" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="addNewPlugin" aria-hidden="true">

    <form method="post" action="{action}" id="add_plugin_form" enctype="multipart/form-data">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addNewPlugin">{lang.ADD_NEW_PLUGIN}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <label class="form-control">
                        <input type="file" id="file" name="plugin_file">
                    </label>
                    {H_FORM_KEYS}
                </div>
                <div class="modal-footer">
                    <input type="submit" name="newplugin" class="btn btn-primary" value="{lang.SUBMIT}">
                </div>
            </div>
        </div>
    </form>
</div>
<!-- end new plugin modal -->

<!-- ...... -->
<!-- store/check -->
<!-- ..... -->
<ELSEIF NAME="case == store" OR="case == check">

    <UNLESS NAME="store_plugins_count">
        <div class="alert alert-info my-3 px-4 py-2 d-flex justify-content-start align-items-center">
            <IF NAME="case == check">
            <i class="fa fa-check fa-3x text-info p-2"></i>
            <span class="p-3 font-weight-bold">{lang.ALL_PLUGINS_UPDATED}</span>
            <ELSE>
            <i class="fa fa-exclamation fa-3x text-info p-2"></i>
            <span class="p-3 font-weight-bold">{lang.NO_PLUGINS}</span>
            </IF>
        </div>
    </UNLESS>

    <IF NAME="store_plugins_count gt 1" NAME="case == check">
    <div class="d-flex justify-content-end my-3">
        <IF NAME="store_plugins_count">
        <button id="updateAllBtn" type="button" onclick="updateAll()" class="btn btn-primary px-5">
            <i class="fa fa-flash"></i> {lang.UPDATE_ALL}
        </button>
       </IF>
    </div>
    </IF>

    <ul class="list-unstyled list-group mt-2">
        <LOOP NAME="store_plugins">
        <li class="media d-flex justify-content-between list-group-item">
            <img class="mr-3" src="{{icon}}" alt="{{title}}" style="width: 75px">
            <div class="media-body d-flex justify-content-between">
                <div>
                    <h5 class="mt-0 mb-2">{{title}}</h5>
                    <div>
                        <small>{{description}}</small>
                        <div style="direction: ltr;"><IF NAME="case == check">{{current_version}} → </IF>{{version}}</div>
                    </div>
                </div>

                <div class="d-flex justify-content-between flex-column align-items-end">
                    <div class="btn-group" rol="group">
                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#Modal_{{name}}">
                            <i class="fa fa-eye"></i> {lang.VIEW}
                        </button>
                        <button type="button" class="btn btn-primary btn-sm" onclick="downloadPlugin('{{name}}')" id="downloadBtn-{{name}}">
                            <i class="fa fa-download"></i> <IF NAME="case == check">{lang.UPDATE}<ELSE>{lang.INSTALL}</IF>
                        </button>
                    </div>
                    <div id="installLoading-{{name}}" class="badge badge-light border mt-1 d-none"></div>
                </div>

                <!-- Modal -->
                <div class="modal fade" id="Modal_{{name}}" tabindex="-1" role="dialog"
                    aria-labelledby="Plugin_View_{{name}}" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="Plugin_View_{{name}}">{{title}}</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        {lang.DEVELOPER}: {{developer}}
                                        <IF LOOP="website"><a href="{{website}}" target="_tab"><i class="fa fa-external-link"></i></a></IF>
                                    </li>
                                    <li class="list-group-item">{lang.VERSION}: {{version}}</li>
                                    <li class="list-group-item">{{kj_version_cmtp}}</li>
                                    <IF LOOP="NotCompatible">
                                        <li class="list-group-item list-group-item-danger">
                                            {lang.PACKAGE_N_CMPT_KLJ}
                                        </li>
                                    </IF>
                                </ul>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary"
                                    data-dismiss="modal">{lang.CLOSE}</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end modal -->
        </li>
        </LOOP>
    </ul>
<script>
function downloadPlugin(name, nextPlugins) {
    $('#downloadBtn-' + name).prop('disabled', true);
    $('#installLoading-' + name)
            .removeClass('d-none badge-warning badge-success badge-danger').addClass('badge-light')
            .html('<img src="{STYLE_PATH_ADMIN}images/ajax-loader-small.gif" /> {lang.LOADING}...');

    $.ajax({
        url: '{plugin_download_link}'.replace(/&amp;/g, '&') + name + '&_ajax_=1',
        dataType: 'json'})
        .done(function (data) {
            if(data.content) {
                var info = data.content.split(":::");
                $('#installLoading-'+name).removeClass('badge-light').addClass(
                    info[0] != 1 ? 'badge-warning' : 'badge-success'
                );
                $('#installLoading-'+name).html(info[1]);
            } else {
                this.fail();
            }

            if (nextPlugins.length > 0) {
                setTimeout(function() {
                    var currentPlugin = nextPlugins.shift();
                    downloadPlugin(currentPlugin, nextPlugins);
                }, 500);
            }
        })
        .fail(function(data) {
            var tryAgainMsg = '{lang.ERROR_TRY_AGAIN}';
            $('#downloadBtn-' + name).prop('disabled', false);
            $('#installLoading-'+name).removeClass('badge-light').addClass('badge-danger').html(
                <IGNORE>(data.content ? data.content : (data.responseJSON ? data.responseJSON.content  : tryAgainMsg))</IGNORE>
            );
    });
}

function updateAll() {
    $('#updateAllBtn').prop('disabled', true);

    var plugins = [<LOOP NAME="store_plugins">'{{name}}',</LOOP>];

    $.each(plugins, function( index, name ) {
        $('#downloadBtn-' + name).prop('disabled', true);
    });

    var currentPlugin = plugins.shift();
    downloadPlugin(currentPlugin, plugins);
}
</script>

</IF>