diff --git a/assets/js/app.js b/assets/js/app.js index ad3af37f..0e943d31 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -35,6 +35,8 @@ import '../bootstrap'; // Need jQuery? Install it with "yarn add jquery", then uncomment to require it. const $ = require('jquery'); +import './events_base' + //Only include javascript import '@fortawesome/fontawesome-free/css/all.css' @@ -48,9 +50,14 @@ import "patternfly-bootstrap-treeview/src/css/bootstrap-treeview.css" import "bootstrap-fileinput/css/fileinput.css" -//import * as Turbo from "@hotwired/turbo" require('bootstrap'); + +// Import Bootstrap treeview +import "patternfly-bootstrap-treeview"; + +import "./sidebar" + /** //require( 'jszip' ); //#require( 'pdfmake' ); @@ -72,7 +79,7 @@ window.Bloodhound = require('corejs-typeahead/dist/bloodhound.js'); //Define jquery globally window.$ = window.jQuery = require("jquery"); -require('patternfly-bootstrap-treeview/src/js/bootstrap-treeview'); + require('bootstrap-fileinput'); diff --git a/assets/js/events_base.js b/assets/js/events_base.js new file mode 100644 index 00000000..97e210b7 --- /dev/null +++ b/assets/js/events_base.js @@ -0,0 +1,27 @@ +function registerLoadHandler(fn) { + document.documentElement.addEventListener('turbo:load', fn); +} + + +registerLoadHandler(function() { + /** + * Register the button, to jump to the top of the page. + */ + $(document).on("ajaxUI:start", function registerJumpToTop() { + $(window).scroll(function () { + if ($(this).scrollTop() > 50) { + $('#back-to-top').fadeIn(); + } else { + $('#back-to-top').fadeOut(); + } + }); + // scroll body to 0px on click + $('#back-to-top').click(function () { + $('#back-to-top').tooltip('hide'); + $('body,html').animate({ + scrollTop: 0 + }, 800); + return false; + }).tooltip(); + }); +}) \ No newline at end of file diff --git a/assets/js/sidebar.js b/assets/js/sidebar.js new file mode 100644 index 00000000..fa0db833 --- /dev/null +++ b/assets/js/sidebar.js @@ -0,0 +1,155 @@ +'use strict'; + +import * as Turbo from '@hotwired/turbo'; + +const SidebarHelper = class { + constructor() { + 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); + + this.fillTrees(); + } + + /** + * Fill the trees with the given data. + */ + 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; + + let _this = this; + + //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"; //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); + _this.treeLoadDataSource(target, mode); + } + + return false; + }); + } + + /** + * Load the given url into the tree with the given id. + * @param target_id + * @param datasource + */ + treeLoadDataSource(target_id, datasource) { + let text = $(".tree-btns[data-mode='" + datasource + "']").html(); + text = text + " \n"; //Add caret or it will be removed, when written into title + switch(datasource) { + case "categories": + this.initTree("#" + target_id, 'tree/categories'); + break; + case "locations": + this.initTree("#" + target_id, 'tree/locations'); + break; + case "footprints": + this.initTree("#" + target_id, 'tree/footprints'); + break; + case "manufacturers": + this.initTree("#" + target_id, 'tree/manufacturers'); + break; + case "suppliers": + this.initTree("#" + target_id, 'tree/suppliers'); + break; + case "tools": + this.initTree("#" + target_id, 'tree/tools'); + break; + case "devices": + this.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 + */ + initTree(tree, url) { + //let contextmenu_handler = this.onNodeContextmenu; + $.getJSON(this.BASE + url, function (data) { + // @ts-ignore + $(tree).treeview({ + data: data, + enableLinks: true, + showIcon: false, + showBorder: true, + searchResultBackColor: '#ffc107', + searchResultColor: '#000', + onNodeSelected: function(event, data) { + if(data.href) { + + //Simulate a click so we just change the inner frame + let a = document.createElement('a'); + a.setAttribute('href', data.href); + a.innerHTML = ""; + $(tree).append(a); + a.click(); + a.remove(); + //Turbo.visit(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()]); + }); + } + }); + }); + } +} + +export default new SidebarHelper(); \ No newline at end of file diff --git a/templates/_sidebar.html.twig b/templates/_sidebar.html.twig index 2ccabdc5..4b58a828 100644 --- a/templates/_sidebar.html.twig +++ b/templates/_sidebar.html.twig @@ -1,16 +1,17 @@ + {% macro sidebar_dropdown(target) %} -
  • {% trans %}actions{% endtrans %}
    • -
  • {% trans %}expandAll{% endtrans %}
    • -
  • {% trans %}reduceAll{% endtrans %}
    • - -
  • {% trans %}datasource{% endtrans %}
    • -
  • {% trans %}category.labelp{% endtrans %}
    • -
  • {% trans %}storelocation.labelp{% endtrans %}
    • -
  • {% trans %}footprint.labelp{% endtrans %}
    • -
  • {% trans %}manufacturer.labelp{% endtrans %}
    • -
  • {% trans %}supplier.labelp{% endtrans %}
    • -
  • {% trans %}device.labelp{% endtrans %}
    • -
  • {% trans %}tools.label{% endtrans %}
    • +
  • {% trans %}actions{% endtrans %}
    • +
  • {% trans %}expandAll{% endtrans %}
    • +
  • {% trans %}reduceAll{% endtrans %}
    • + +
  • {% trans %}datasource{% endtrans %}
    • +
  • {% trans %}category.labelp{% endtrans %}
    • +
  • {% trans %}storelocation.labelp{% endtrans %}
    • +
  • {% trans %}footprint.labelp{% endtrans %}
    • +
  • {% trans %}manufacturer.labelp{% endtrans %}
    • +
  • {% trans %}supplier.labelp{% endtrans %}
    • +
  • {% trans %}device.labelp{% endtrans %}
    • +
  • {% trans %}tools.label{% endtrans %}
    • {% endmacro %}