Added working treeviews and buttons.

assets/ts_src/ajax_ui.ts

@@ -50,15 +50,12 @@ function extractTitle(html : string) : string {
 
 class AjaxUI {
 
+    protected BASE = "/";
+
     private trees_filled : boolean = false;
 
     private statePopped : boolean = false;
 
-    public test()
-    {
-        alert("Test");
-    }
-
     public constructor()
     {
         //Make back in the browser go back in history
@@ -74,14 +71,132 @@ class AjaxUI {
     public start()
     {
         console.info("AjaxUI started!");
+
+        this.BASE = $("body").data("base-url") + "/";
+        console.info("Base path is " + this.BASE);
+
         this.registerLinks();
         this.registerForm();
+        this.fillTrees();
     }
 
+    /**
+     * Fill the trees with the given data.
+     */
+    public fillTrees()
+    {
+        let categories =  Cookies.get("tree_datasource_tree-categories");
+        let devices =  Cookies.get("tree_datasource_tree-devices");
+        let tools =  Cookies.get("tree_datasource_tree-tools");
+
+        if(typeof categories == "undefined") {
+            categories = "categories";
+        }
+
+        if(typeof devices == "undefined") {
+            devices = "devices";
+        }
+
+        if(typeof tools == "undefined") {
+            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 {
+                Cookies.set("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,
+                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"}).treeview('collapseAll', { silent: true });
+        });
+    }
+
+
     /**
      * Register all links, for loading via ajax.
      */
-    protected registerLinks()
+    public registerLinks()
     {
         $('a').not(".link-external, [data-no-ajax]").click(function (event) {
                 let a = $(this);
@@ -92,14 +207,14 @@ class AjaxUI {
                     ajaxUI.navigateTo(href);
                 }
             }
-        )
+        );
         console.debug('Links registered!');
     }
 
     /**
      * Register all forms for loading via ajax.
      */
-    protected registerForm()
+    public registerForm()
     {
         let options : JQueryFormOptions = {
             success: this.onAjaxComplete,
@@ -110,7 +225,7 @@ class AjaxUI {
                 }
                 return true;
             }
-        }
+        };
         $('form').not('[data-no-ajax]').ajaxForm(options);
 
         console.debug('Forms registered!');
@@ -168,7 +283,10 @@ class AjaxUI {
             return;
         }
 
+        console.error("Error getting the ajax data from server!");
         console.log(event);
+        console.log(request);
+        console.log(settings);
         //If it was a server error and response is not empty, show it to user.
         if(request.status == 500 && request.responseText !== "")
         {