Part-DB / Part-DB-symfony

 * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).

 *

 * Copyright (C) 2019 - 2020 Jan Böhmer (https://github.com/jbtronics)

 *

 * This program is free software: you can redistribute it and/or modify

 * it under the terms of the GNU Affero General Public License as published

 * by the Free Software Foundation, either version 3 of the License, or

 * (at your option) any later version.

 *

 * This program is distributed in the hope that it will be useful,

 * but WITHOUT ANY WARRANTY; without even the implied warranty of

 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

 * GNU Affero General Public License for more details.

 *

 * You should have received a copy of the GNU Affero General Public License

 * along with this program.  If not, see <https://www.gnu.org/licenses/>.

 */

/**

 * Extract the title (The name between the <title> tags) of a HTML snippet.

 * @param {string} html The HTML code which should be searched.

 * @returns {string} The title extracted from the html.

 */

function extractTitle(html : string) : string {

    let title : string = "";

    let regex = /<title>(.*?)<\/title>/gi;

    if (regex.test(html)) {

        let matches = html.match(regex);

        for(let match in matches) {

            title = $(matches[match]).text();

        }

    }

    return title;

}

class AjaxUI {

    protected BASE = "/";

    private trees_filled : boolean = false;

    private statePopped : boolean = false;

    public xhr : XMLHttpRequest;

    public constructor()

    {

        //Make back in the browser go back in history

        window.onpopstate = this.onPopState;

        $(document).ajaxError(this.onAjaxError.bind(this));

        //$(document).ajaxComplete(this.onAjaxComplete.bind(this));

    }

    /**

     * Starts the ajax ui und execute handlers registered in addStartAction().

     * Should be called in a document.ready, after handlers are set.

     */

    public start(disabled : boolean = false)

    {

        if(disabled) {

            return;

        }

        console.info("AjaxUI started!");

        this.BASE = $("body").data("base-url");

        //If path doesn't end with slash, add it.

        if(this.BASE[this.BASE.length - 1] !== '/') {

            this.BASE = this.BASE + '/';

        }

        console.info("Base path is " + this.BASE);

        //Show flash messages

        $(".toast").toast('show');

        /**

         * Save the XMLHttpRequest that jQuery used, to the class, so we can acess the responseURL property.

         * This is a work-around as long jQuery does not implement this property in its jQXHR objects.

         */

        //@ts-ignore

        jQuery.ajaxSettings.xhr = function () {

            //@ts-ignore

            let xhr = new window.XMLHttpRequest();

            //Save the XMLHttpRequest to the class.

            ajaxUI.xhr = xhr;

            return xhr;

        };

        this.registerLinks();

        this.registerForm();

        this.fillTrees();

        this.initDataTables();

        //Trigger start event

        $(document).trigger("ajaxUI:start");

    }

    /**

     * Fill the trees with the given data.

     */

    public fillTrees()

    {

        let categories =  localStorage.getItem("tree_datasource_tree-categories");

        let devices =  localStorage.getItem("tree_datasource_tree-devices");

        let tools =  localStorage.getItem("tree_datasource_tree-tools");

        if(categories == null) {

            categories = "categories";

        }

        if(devices == null) {

            devices = "devices";

        }

        if(tools == null) {

            tools = "tools";

        }

        this.treeLoadDataSource("tree-categories", categories);

        this.treeLoadDataSource("tree-devices", devices);

        this.treeLoadDataSource("tree-tools", tools);

        this.trees_filled = true;

        //Register tree btns to expand all, or to switch datasource.

        $(".tree-btns").click(function (event) {

            event.preventDefault();

            $(this).parents("div.dropdown").removeClass('show');

            //$(this).closest(".dropdown-menu").removeClass('show');

            $(".dropdown-menu.show").removeClass("show");

            let mode = $(this).data("mode");

            let target = $(this).data("target");

            let text = $(this).text() + " \n<span class='caret'></span>"; //Add caret or it will be removed, when written into title

            if (mode==="collapse") {

                // @ts-ignore

                $('#' + target).treeview('collapseAll', { silent: true });

            }

            else if(mode==="expand") {

                // @ts-ignore

                $('#' + target).treeview('expandAll', { silent: true });

            } else {

                localStorage.setItem("tree_datasource_" + target, mode);

                ajaxUI.treeLoadDataSource(target, mode);

            }

            return false;

        });

    }

    /**

     * Load the given url into the tree with the given id.

     * @param target_id

     * @param datasource

     */

    protected treeLoadDataSource(target_id, datasource) {

        let text : string = $(".tree-btns[data-mode='" + datasource + "']").html();

        text = text + " \n<span class='caret'></span>"; //Add caret or it will be removed, when written into title

        switch(datasource) {

            case "categories":

                ajaxUI.initTree("#" + target_id, 'tree/categories');

                break;

            case "locations":

                ajaxUI.initTree("#" + target_id, 'tree/locations');

                break;

            case "footprints":

                ajaxUI.initTree("#" + target_id, 'tree/footprints');

                break;

            case "manufacturers":

                ajaxUI.initTree("#" + target_id, 'tree/manufacturers');

                break;

            case "suppliers":

                ajaxUI.initTree("#" + target_id, 'tree/suppliers');

                break;

            case "tools":

                ajaxUI.initTree("#" + target_id, 'tree/tools');

                break;

            case "devices":

                ajaxUI.initTree("#" + target_id, 'tree/devices');

                break;

        }

        $( "#" + target_id + "-title").html(text);

    }

    /**

     * Fill a treeview with data from the given url.

     * @param tree The Jquery selector for the tree (e.g. "#tree-tools")

     * @param url The url from where the data should be loaded

     */

    public initTree(tree, url) {

        //let contextmenu_handler = this.onNodeContextmenu;

        $.getJSON(ajaxUI.BASE + url, function (data) {

            // @ts-ignore

            $(tree).treeview({

                data: data,

                enableLinks: false,

                showIcon: false,

                showBorder: true,

                searchResultBackColor: '#ffc107',

                searchResultColor: '#000',

                onNodeSelected: function(event, data) {

                    if(data.href) {

                        ajaxUI.navigateTo(data.href);

                    }

                },

                //onNodeContextmenu: contextmenu_handler,

                expandIcon: "fas fa-plus fa-fw fa-treeview", collapseIcon: "fas fa-minus fa-fw fa-treeview"})

                .on('initialized', function() {

                    $(this).treeview('collapseAll', { silent: true });

                    //Implement searching if needed.

                    if($(this).data('treeSearch')) {

                        let _this = this;

                        let $search = $($(this).data('treeSearch'));

                        $search.on( 'input', function() {

                            $(_this).treeview('collapseAll', { silent: true });

                            $(_this).treeview('search', [$search.val()]);

                        });

                    }

                });

        });

    }

    /**

     * Register all links, for loading via ajax.

     */

    public registerLinks()

    {

        // Unbind all old handlers, so the things are not executed multiple times.

        $('a').not(".link-external, [data-no-ajax], .page-link, [href^='javascript'], [href^='#']").unbind('click').click(function (event) {

                let a = $(this);

                let href = $.trim(a.attr("href"));

                //Ignore links without href attr and nav links ('they only have a #)

                if(href != null && href != "" && href.charAt(0) !== '#') {

                    event.preventDefault();

                    ajaxUI.navigateTo(href);

                }

            }

        );

        console.debug('Links registered!');

    }

    protected getFormOptions() : JQueryFormOptions

    {

        return  {

            success: this.onAjaxComplete,

            beforeSerialize: function($form, options) : boolean {

                //Update the content of textarea fields using CKEDITOR before submitting.

                //@ts-ignore

                if(typeof CKEDITOR !== 'undefined') {

                    //@ts-ignore

                    for (let name in CKEDITOR.instances) {

                        //@ts-ignore

                        CKEDITOR.instances[name].updateElement();

                    }

                }

                //Check every checkbox field, so that it will be submitted (only valid fields are submitted)

                $form.find("input[type=checkbox].tristate").prop('checked', true);

                return true;

            },

            beforeSubmit: function (arr, $form, options) : boolean {

                //When data-with-progbar is specified, then show progressbar.

                if($form.data("with-progbar") != undefined) {

                    ajaxUI.showProgressBar();

                }

                return true;

            }

        };

    }

    /**

     * Register all forms for loading via ajax.

     */

    public registerForm()

    {

        let options = this.getFormOptions();

        $('form').not('[data-no-ajax]').ajaxForm(options);

        console.debug('Forms registered!');

    }

    /**

     * Submits the given form via ajax.

     * @param form The form that will be submmitted.

     * @param btn The btn via which the form is submitted

     */

    public submitForm(form, btn = null)

    {

        let options = ajaxUI.getFormOptions();

        if(btn) {

            options.data = {};

            options.data[$(btn).attr('name')] = $(btn).attr('value');

        }

        $(form).ajaxSubmit(options);

    }

    /**

     * Show the progressbar

     */

    public showProgressBar()

    {

        //Blur content background

        $('#content').addClass('loading-content');

        // @ts-ignore

        $('#progressModal').modal({

            keyboard: false,

            backdrop: false,

            show: true

        });

    }

    }

    /**

     * Navigates to the given URL

     * @param url The url which should be opened.

     * @param show_loading Show the loading bar during loading.

     */

    public navigateTo(url : string, show_loading : boolean = true)

    {

        if(show_loading) {

            this.showProgressBar();

        }

        $.ajax(url, {

            success: this.onAjaxComplete

        });

        //$.ajax(url).promise().done(this.onAjaxComplete);

    }

    /**

     * Called when an error occurs on loading ajax. Outputs the message to the console.

     */

    private onAjaxError (event, request, settings) {

        'use strict';

        //Ignore aborted requests.

        if (request.statusText =='abort') {

            return;

        }

        //Ignore ajax errors with 200 code (like the ones during 2FA authentication)

        if(request.status == 200) {

            return;

        }

        console.error("Error getting the ajax data from server!");

        console.log(event);

        console.log(request);

        console.log(settings);

        ajaxUI.hideProgressBar();

        //Create error text

        let title = "";

        switch(request.status) {

            case 500:

                title =  'Internal Server Error!';

                break;

            case 404:

                title = "Site not found!";

                break;

            case 403:

                title = "Permission denied!";

                break;

        }

        var alert = bootbox.alert(

            {

                size: 'large',

                message: function() {

                    let msg = "Error getting data from Server! <b>Status Code: " + request.status + "</b>";

                    msg += '<br><br><a class=\"btn btn-link\" data-toggle=\"collapse\" href=\"#iframe_div\" >' + 'Show response' + "</a>";

                    msg += "<div class=\" collapse\" id='iframe_div'><iframe height='512' width='100%' id='iframe'></iframe></div>";

                    return msg;

                },

                title: title,

                callback: function () {

                    //Remove blur

                    $('#content').removeClass('loading-content');

                }

            });

        //@ts-ignore

        alert.init(function (){

            var dstFrame = document.getElementById('iframe');

            //@ts-ignore

            var dstDoc = dstFrame.contentDocument || dstFrame.contentWindow.document;

            dstDoc.write(request.responseText);

            dstDoc.close();

        });

        //If it was a server error and response is not empty, show it to user.

        if(request.status == 500 && request.responseText !== "")

        {

            console.log("Response:" + request.responseText);

        }

    }

    /**

     * This function gets called every time, the "back" button in the browser is pressed.

     * We use it to load the content from history stack via ajax and to rewrite url, so we only have

     * to load #content-data

     * @param event

     */

    private onPopState(event)

    {

        let page : string = location.href;

        ajaxUI.statePopped = true;

        ajaxUI.navigateTo(page);

    }

    /**

     * This function takes the response of an ajax requests, and does the things we need to do for our AjaxUI.

     * This includes inserting the content and pushing history.

     * @param responseText

     * @param textStatus

     * @param jqXHR

     */

    private onAjaxComplete(responseText: string, textStatus: string, jqXHR: any)

    {

        console.debug("Ajax load completed!");

        ajaxUI.hideProgressBar();

        /* We need to do the url checking before the parseHTML, so that we dont get wrong url name, caused by scripts

           in the new content */

        // @ts-ignore

        let url = this.url;

        //Check if we were redirect to a new url, then we should use that as new url.

        if(ajaxUI.xhr.responseURL) {

            url = ajaxUI.xhr.responseURL;

        }

        //Parse response to DOM structure

        //We need to preserve javascript, so the table ca

        let dom = $.parseHTML(responseText, document, true);

        //And replace the content container

        $("#content").replaceWith($("#content", dom));

        //Replace login menu too (so everything is up to date)

        $("#login-content").replaceWith($('#login-content', dom));

        //Replace flash messages and show them

        $("#message-container").replaceWith($('#message-container', dom));

        $(".toast").toast('show');

        //Set new title

        let title  = extractTitle(responseText);

        document.title = title;

        //Push to history, if we currently arent poping an old value.

        if(!ajaxUI.statePopped) {

            history.pushState(null, title, url);

        } else {

            //Clear pop state

            ajaxUI.statePopped = false;

        }

        //Do things on the new dom

        ajaxUI.registerLinks();

        ajaxUI.registerForm();

        ajaxUI.initDataTables();

        //Trigger reload event

        $(document).trigger("ajaxUI:reload");

    }

    /**

     * Init all datatables marked with data-datatable based on their data-settings attribute.

     */

    protected initDataTables()

    {

        //@ts-ignore

        $($.fn.DataTable.tables()).DataTable().fixedHeader.disable();

        //@ts-ignore

        $($.fn.DataTable.tables()).DataTable().destroy();

        //Find all datatables and init it.

        let $tables = $('[data-datatable]');

        $.each($tables, function(index, table) {

            let $table = $(table);

            let settings = $table.data('settings');

            //@ts-ignore

            var promise = $('#part_list').initDataTables(settings,

                {

                    colReorder: true,

                    responsive: true,

                    "fixedHeader": { header: $(window).width() >= 768, //Only enable fixedHeaders on devices with big screen. Fixes scrolling issues on smartphones.

                        headerOffset: $("#navbar").height()},

                    "buttons": [ {

                        "extend": 'colvis',

                        'className': 'mr-2 btn-light',

                        "text": "<i class='fa fa-cog'></i>"

                    }],

                    "select": $table.data('select') ?? false,

                    "rowCallback": function( row, data, index ) {

                        //Check if we have a level, then change color of this row

                        if (data.level) {

                            let style = "";

                            switch(data.level) {

                                case "emergency":

                                case "alert":

                                case "critical":

                                case "error":

                                    style = "table-danger";

                                    break;

                                case "warning":

                                    style = "table-warning";

                                    break;

                                case "notice":

                                    style = "table-info";

                                    break;

                            }

                            if (style){

                                $(row).addClass(style);

                            }

                        }

                    }

                });

            //Register links.

            promise.then(function() {

                ajaxUI.registerLinks();

                //Set the correct title in the table.

                let title = $('#part-card-header-src');

                $('#part-card-header').html(title.html());

                $(document).trigger('ajaxUI:dt_loaded');

                if($table.data('part_table')) {

                    //@ts-ignore

                    $('#dt').on( 'select.dt deselect.dt', function ( e, dt, items ) {

                        let selected_elements = dt.rows({selected: true});

                        let count = selected_elements.count();

                        if(count > 0) {

                            $('#select_panel').removeClass('d-none');

                        } else {

                            $('#select_panel').addClass('d-none');

                        }

                        $('#select_count').text(count);

                        let selected_ids_string = selected_elements.data().map(function(value, index) {

                            return value['id']; }

                            ).join(",");

                        $('#select_ids').val(selected_ids_string);

                    } );

                }

                //Attach event listener to update links after new page selection:

                $('#dt').on('draw.dt column-visibility.dt', function() {

                    ajaxUI.registerLinks();

                    $(document).trigger('ajaxUI:dt_loaded');

                });

            });

        });

        console.debug('Datatables inited.');

    }

}