Improved tree rendering

app/Http/Controllers/APIController.php

@@ -24,10 +24,8 @@ class APIController extends Controller
 				return [
 					'title'=>$item,
 					'item'=>Crypt::encryptString($item),
-					//'folder'=>TRUE,
 					'lazy'=>TRUE,
-					//'key'=>0,
+					'icon'=>'fa-fw fas fa-sitemap',
-					//'autoexpand'=>TRUE,
 				];
 			});
 	}
@@ -45,10 +43,8 @@ class APIController extends Controller
 				return [
 					'title'=>$item->getDistinguishedName(),
 					'item'=>Crypt::encryptString($item->getDistinguishedName()),
-					//'folder'=>TRUE,
+					'icon'=>'fa-fw fas fa-sitemap',
 					'lazy'=>TRUE,
-					//'key'=>0,
-					//'autoexpand'=>TRUE,
 				];
 			});
 

resources/views/home.blade.php

@@ -23,7 +23,7 @@
 					<h3 class="mb-1">Welcome to phpLDAPadmin</h3>
 					<h4 class="mb-3"><small>{{ config('app.version') }}</small></h4>
 					<p>phpLDAPadmin (or PLA for short) is an LDAP data management tool for administrators.</p>
-					<p>PLA aims to adhere to the LDAP standards (<a href="https://tools.ietf.org/html/rfc4511">RFC4511</a>) so that it can interact with any LDAP server that implements those standards.</p>
+					<p>PLA aims to adhere to the LDAP standards so that it can interact with any LDAP server that implements those standards.</p>
 				</div>
 			</div>
 
@@ -41,20 +41,21 @@
 @section('page-scripts')
 	@js('https://code.jquery.com/ui/1.12.1/jquery-ui.min.js','jquery-ui')
 	@js('https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.36.1/jquery.fancytree-all.min.js','fancytree-js-all')
-	@css('https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.36.1/skin-bootstrap-n/ui.fancytree.min.css','fancytree-css')
+	@css('https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.36.1/skin-xp/ui.fancytree.min.css','fancytree-css')
 
 	<script type="text/javascript">
 		function expandChildren(node) {
 			if (node.data.autoExpand && !node.isExpanded()) {
 				node.setExpanded(true);
 			}
+
 			if (node.children && node.children.length > 0) {
 				try {
 					node.children.forEach(expandChildren);
 				} catch (error) {
 				}
 			}
-		};
+		}
 
 		$(document).ready(function() {
 			// Attach the fancytree widget to an existing <div id="tree"> element
@@ -65,31 +66,13 @@
 				autoCollapse: true, // Automatically collapse all siblings, when a node is expanded.
 				autoScroll: true, // Automatically scroll nodes into visible area.
 				focusOnSelect: true, // Set focus when node is checked by a mouse click
-				glyph: {
-					preset: 'awesome5',
-					map: {
-						//doc: "fas fa-file-o fa-lg",
-						//docOpen: "fas fa-file-o fa-lg",
-						error: "fas fa-bomb fa-lg fa-fw",
-						expanderClosed: "far fa-plus-square fa-lg fa-fw",
-						expanderLazy: "far fa-plus-square fa-lg fa-fw",
-						expanderOpen: "far fa-minus-square fa-lg fa-fw",
-						//folder: "fas fa-folder fa-lg",
-						//folderOpen: "fas fa-folder-open fa-lg",
-						loading: "fas fa-spinner fa-pulse"
-					}
-				},
 				click: function(event, data) {
-					console.log(data);
 					if (data.targetType == 'title')
 						return false;
 				},
 				init: function(event, data) {
 					expandChildren(data.tree.rootNode);
 				},
-				icon: function(event, data) {
-					return ! data.node.isTopLevel();
-				},
 				source: {
 					url: "{{ url('api/bases') }}"
 				},
@@ -110,60 +93,7 @@
 					}
 				}
 			});
-
-			/*
-			// For our demo: toggle auto-collapse mode:
-			$("input[name=autoCollapse]").on("change", function(e){
-				$.ui.fancytree.getTree().options.autoCollapse = $(this).is(":checked");
-			});
-
-			 */
 		});
 
 	</script>
-	{{--
-	<style>
-		.fancytree-node {
-			display: flex !important;
-			align-items: center;
-		}
-		.fancytree-exp-nl .fancytree-expander,
-		.fancytree-exp-n .fancytree-expander {
-			visibility: hidden;
-		}
-		.fancytree-exp-nl + ul,
-		.fancytree-exp-n + ul {
-			display: none !important;
-		}
-		span.fancytree-expander,
-		span.fancytree-icon,
-		span.fancytree-title {
-			line-height: 1em;
-		}
-		span.fancytree-expander {
-			text-align: center;
-		}
-		span.fancytree-icon {
-			margin-left: 10px;
-		}
-		span.fancytree-title {
-			margin-left: 2px;
-			padding: 2px;
-			box-sizing: border-box;
-			border: 1px solid transparent;
-		}
-		.fancytree-focused span.fancytree-title {
-			border: 1px solid #999;
-		}
-		.fancytree-active span.fancytree-title {
-			background-color: #ddd;
-		}
-		ul.fancytree-container ul {
-			padding: 2px 0 0 0px;
-		}
-		ul.fancytree-container li {
-			padding: 2px 0;
-		}
-	</style>
-	--}}
 @append

resources/views/vendor/adminlte/layouts/partials/sidebarmenu.blade.php

@@ -1,16 +1,5 @@
-<li class="nav-header">{{ $server ?? 'Server Name' }}</li>
+<li class="nav-header pl-1">{{ $server ?? 'Server Name' }}</li>
-
-<div id="tree"></div>
-
-@foreach (($bases ?? []) as $base)
-<li class="nav-item has-treeview">
-	<a href="#" class="nav-link">
-		<i class="nav-icon fas fa-tree"></i>
-		<p>
-			{{ $base }}
-			<i class="fas fa-angle-left right"></i>
-		</p>
-	</a>
 
+<li>
+	<div id="tree"></div>
 </li>
-@endforeach