Start of tree being rendered by API/AJAX calls
This commit is contained in:
Deon George
@@ -39,3 +39,134 @@
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@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')
|
||||
|
||||
<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
|
||||
// and pass the tree options as an argument to the fancytree() function:
|
||||
$('#tree').fancytree({
|
||||
clickFolderMode: 3,
|
||||
extensions: ['glyph'],
|
||||
aria: true, // Enable WAI-ARIA support.
|
||||
autoActivate: false, // Automatically activate a node when it is focused (using keys).
|
||||
autoCollapse: true, // Automatically collapse all siblings, when a node is expanded.
|
||||
autoScroll: false, // Automatically scroll nodes into visible area.
|
||||
focusOnSelect: true, // Set focus when node is checked by a mouse click
|
||||
keyboard: true, // Support keyboard navigation.
|
||||
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') }}"
|
||||
},
|
||||
lazyLoad: function(event,data) {
|
||||
data.result = {
|
||||
url: "{{ url('api/branch') }}",
|
||||
data: {key: data.node.data.item}
|
||||
};
|
||||
|
||||
expandChildren(data.tree.rootNode);
|
||||
},
|
||||
keydown: function(event, data){
|
||||
switch( $.ui.fancytree.eventToString(data.originalEvent) ) {
|
||||
case "return":
|
||||
case "space":
|
||||
data.node.toggleExpanded();
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
// 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
|
||||
|
||||
105
resources/views/vendor/adminlte/auth/login.blade.php
vendored
Normal file
105
resources/views/vendor/adminlte/auth/login.blade.php
vendored
Normal file
@@ -0,0 +1,105 @@
|
||||
@extends('adminlte::layouts.auth')
|
||||
|
||||
@section('htmlheader_title')
|
||||
Log in
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
@if(isset($login_note) AND $login_note)
|
||||
<div class="alert alert-info alert-dismissible m-auto">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
|
||||
<h5><i class="icon fas fa-info"></i> NOTE!</h5>
|
||||
{!! $login_note !!}
|
||||
</div>
|
||||
<br>
|
||||
@endisset
|
||||
|
||||
<div class="login-box m-auto">
|
||||
<div class="login-logo">
|
||||
<a>{!! config('app.name_html_long') !!}</a>
|
||||
</div>
|
||||
|
||||
@if (count($errors) > 0)
|
||||
<div class="alert alert-danger">
|
||||
<strong>Whoops!</strong> {{ trans('adminlte_lang::message.someproblems') }}<br><br>
|
||||
<ul>
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if (Session::has('error'))
|
||||
<div class="alert alert-danger">
|
||||
<strong>Whoops!</strong> {{ trans('adminlte_lang::message.someproblems') }}<br><br>
|
||||
<ul>
|
||||
<li>{{ Session::get('error') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- /.login-logo -->
|
||||
<div class="card">
|
||||
<div class="card-body login-card-body">
|
||||
<p class="login-box-msg">{{ trans('adminlte_lang::message.siginsession') }}</p>
|
||||
|
||||
<form method="post">
|
||||
{{ csrf_field() }}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="input-group mb-3">
|
||||
<input type="email" name="{{ config('ldap_auth.identifiers.ldap.locate_users_by') }}" class="form-control" placeholder="Email">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text"><i class="fas fa-envelope fa-fw"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="input-group mb-3">
|
||||
<input type="password" name="password" class="form-control" placeholder="Password">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text"><i class="fas fa-key fa-fw"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="checkbox icheck">
|
||||
<label>
|
||||
<input type="checkbox" name="remember"> Remember Me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- /.col -->
|
||||
<div class="col-4">
|
||||
<button type="submit" name="submit" class="btn btn-primary mr-0 float-right">Sign In</button>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@if(count(config('auth.social',[])))
|
||||
@include('adminlte::auth.partials.social_login')
|
||||
@endif
|
||||
|
||||
<p class="mb-1">
|
||||
<a name="reset" href="{{ url('password/reset') }}">{{ trans('adminlte_lang::message.forgotpassword') }}</a>
|
||||
</p>
|
||||
|
||||
@isset($register)
|
||||
<p class="mb-0">
|
||||
<a href="{{ url('register') }}" class="text-center">{{ trans('adminlte_lang::message.register') }}</a>
|
||||
</p>
|
||||
@endisset
|
||||
</div>
|
||||
<!-- /.login-card-body -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.login-box -->
|
||||
@endsection
|
||||
@@ -1,5 +1,7 @@
|
||||
<li class="nav-header">{{ $server ?? 'Server Name' }}</li>
|
||||
|
||||
<div id="tree"></div>
|
||||
|
||||
@foreach (($bases ?? []) as $base)
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
@@ -10,8 +12,5 @@
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<ul class="nav nav-treeview">
|
||||
<div id="{{ $base }}">
|
||||
</ul>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
Reference in New Issue
Block a user