feat: add dashboard index view to admin panel
This commit is contained in:
Ümit Tunç
@@ -2,150 +2,288 @@
|
|||||||
|
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<?php
|
|
||||||
$tabs = [
|
|
||||||
'Dashboard Summary' => '📊',
|
|
||||||
'Training Videos' => '👩🏫',
|
|
||||||
'Module Relationships' => '🏬',
|
|
||||||
];
|
|
||||||
?>
|
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="block">
|
<div class="row gutters-tiny js-appear-enabled animated fadeIn" data-toggle="appear">
|
||||||
<ul class="nav nav-tabs nav-tabs-block js-tabs-enabled" data-toggle="tabs" role="tablist">
|
<!-- Row #1 -->
|
||||||
<?php foreach($tabs AS $tab => $icon) {
|
<div class="col-6 col-md-4 col-xl-2">
|
||||||
$id = str_slug($tab);
|
<a class="block text-center" href="javascript:void(0)">
|
||||||
?>
|
<div class="block-content ribbon ribbon-bookmark ribbon-crystal ribbon-left bg-gd-dusk">
|
||||||
<li class="nav-item">
|
<div class="ribbon-box">750</div>
|
||||||
<a class="nav-link" data-id="{{$id}}" href="#{{$id}}" data-toggle="tab">
|
<p class="mt-5">
|
||||||
{{$icon}}
|
<i class="si si-book-open fa-3x text-white-op"></i>
|
||||||
{{e2($tab)}}</a>
|
</p>
|
||||||
</li>
|
<p class="font-w600 text-white">Articles</p>
|
||||||
<?php } ?>
|
</div>
|
||||||
<li class="nav-item ml-auto p-1">
|
</a>
|
||||||
<button type="button" class="btn btn-alt-danger" id="download-pdf-btn" onclick="downloadPDF()" style="display:none">
|
</div>
|
||||||
<i class="fa fa-file-pdf"></i> {{e2("Download PDF")}}
|
<div class="col-6 col-md-4 col-xl-2">
|
||||||
|
<a class="block text-center" href="javascript:void(0)">
|
||||||
|
<div class="block-content bg-gd-primary">
|
||||||
|
<p class="mt-5">
|
||||||
|
<i class="si si-plus fa-3x text-white-op"></i>
|
||||||
|
</p>
|
||||||
|
<p class="font-w600 text-white">New Article</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-md-4 col-xl-2">
|
||||||
|
<a class="block text-center" href="be_pages_forum_categories.html">
|
||||||
|
<div class="block-content ribbon ribbon-bookmark ribbon-crystal ribbon-left bg-gd-sea">
|
||||||
|
<div class="ribbon-box">16</div>
|
||||||
|
<p class="mt-5">
|
||||||
|
<i class="si si-bubbles fa-3x text-white-op"></i>
|
||||||
|
</p>
|
||||||
|
<p class="font-w600 text-white">Comments</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-md-4 col-xl-2">
|
||||||
|
<a class="block text-center" href="be_pages_generic_search.html">
|
||||||
|
<div class="block-content bg-gd-lake">
|
||||||
|
<p class="mt-5">
|
||||||
|
<i class="si si-magnifier fa-3x text-white-op"></i>
|
||||||
|
</p>
|
||||||
|
<p class="font-w600 text-white">Search</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-md-4 col-xl-2">
|
||||||
|
<a class="block text-center" href="be_comp_charts.html">
|
||||||
|
<div class="block-content bg-gd-emerald">
|
||||||
|
<p class="mt-5">
|
||||||
|
<i class="si si-bar-chart fa-3x text-white-op"></i>
|
||||||
|
</p>
|
||||||
|
<p class="font-w600 text-white">Statistics</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-md-4 col-xl-2">
|
||||||
|
<a class="block text-center" href="javascript:void(0)">
|
||||||
|
<div class="block-content bg-gd-corporate">
|
||||||
|
<p class="mt-5">
|
||||||
|
<i class="si si-settings fa-3x text-white-op"></i>
|
||||||
|
</p>
|
||||||
|
<p class="font-w600 text-white">Settings</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<!-- END Row #1 -->
|
||||||
|
</div>
|
||||||
|
<div class="row row-deck gutters-tiny js-appear-enabled animated fadeIn" data-toggle="appear">
|
||||||
|
<!-- Row #2 -->
|
||||||
|
<div class="col-xl-4">
|
||||||
|
<a class="block block-transparent bg-image d-flex align-items-stretch" href="javascript:void(0)"
|
||||||
|
style="background-image: url('assets/media/photos/photo24@2x.jpg');">
|
||||||
|
<div class="block-content block-sticky-options pt-100 bg-black-op">
|
||||||
|
<div class="block-options block-options-left text-white">
|
||||||
|
<div class="block-options-item">
|
||||||
|
<i class="si si-book-open text-white-op"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block-options text-white">
|
||||||
|
<div class="block-options-item">
|
||||||
|
<i class="si si-bubbles"></i> 15
|
||||||
|
</div>
|
||||||
|
<div class="block-options-item">
|
||||||
|
<i class="si si-eye"></i> 3800
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="h3 font-w700 text-white mb-5">Travel the world</h2>
|
||||||
|
<h3 class="h5 text-white-op">Explore and achieve great things</h3>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6 col-xl-4">
|
||||||
|
<a class="block block-transparent bg-image d-flex align-items-stretch" href="javascript:void(0)"
|
||||||
|
style="background-image: url('assets/media/photos/photo32@2x.jpg');">
|
||||||
|
<div class="block-content block-sticky-options pt-100 bg-primary-dark-op">
|
||||||
|
<div class="block-options block-options-left text-white">
|
||||||
|
<div class="block-options-item">
|
||||||
|
<i class="si si-book-open text-white-op"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block-options text-white">
|
||||||
|
<div class="block-options-item">
|
||||||
|
<i class="si si-bubbles"></i> 4
|
||||||
|
</div>
|
||||||
|
<div class="block-options-item">
|
||||||
|
<i class="si si-eye"></i> 1680
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="h3 font-w700 text-white mb-5">Inspiring Solutions</h2>
|
||||||
|
<h3 class="h5 text-white-op">10 things you should do today</h3>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6 col-xl-4">
|
||||||
|
<a class="block block-transparent bg-image d-flex align-items-stretch" href="javascript:void(0)"
|
||||||
|
style="background-image: url('assets/media/photos/photo10@2x.jpg');">
|
||||||
|
<div class="block-content block-sticky-options pt-100 bg-primary-op">
|
||||||
|
<div class="block-options block-options-left text-white">
|
||||||
|
<div class="block-options-item">
|
||||||
|
<i class="si si-book-open text-white-op"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block-options text-white">
|
||||||
|
<div class="block-options-item">
|
||||||
|
<i class="si si-bubbles"></i> 16
|
||||||
|
</div>
|
||||||
|
<div class="block-options-item">
|
||||||
|
<i class="si si-eye"></i> 4450
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2 class="h3 font-w700 text-white mb-5">Alternative Road</h2>
|
||||||
|
<h3 class="h5 text-white-op">Don't let anything disorient you</h3>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<!-- END Row #2 -->
|
||||||
|
</div>
|
||||||
|
<div class="row gutters-tiny js-appear-enabled animated fadeIn" data-toggle="appear">
|
||||||
|
<!-- Row #3 -->
|
||||||
|
<div class="col-xl-8 d-flex align-items-stretch">
|
||||||
|
<div class="block block-themed block-mode-loading-inverse block-transparent bg-image w-100"
|
||||||
|
style="background-image: url('assets/media/photos/photo34@2x.jpg');">
|
||||||
|
<div class="block-header bg-black-op">
|
||||||
|
<h3 class="block-title">
|
||||||
|
Sales <small>This week</small>
|
||||||
|
</h3>
|
||||||
|
<div class="block-options">
|
||||||
|
<button type="button" class="btn-block-option" data-toggle="block-option"
|
||||||
|
data-action="state_toggle" data-action-mode="demo">
|
||||||
|
<i class="si si-refresh"></i>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn-block-option">
|
||||||
|
<i class="si si-wrench"></i>
|
||||||
</button>
|
</button>
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
<div class="block-content tab-content">
|
|
||||||
<?php
|
|
||||||
$k = 0;
|
|
||||||
foreach($tabs AS $tab => $icon) {
|
|
||||||
$id = str_slug($tab);
|
|
||||||
?>
|
|
||||||
<div class="tab-pane @if($k == 0) active @endif" id="{{$id}}" role="tabpanel">
|
|
||||||
@if($k == 0)
|
|
||||||
<div class="btn btn-outline-primary load-stats">{{e2("Load Stats")}}</div>
|
|
||||||
@endif
|
|
||||||
</div>
|
</div>
|
||||||
<?php $k++; } ?>
|
</div>
|
||||||
|
<div class="block-content bg-black-op">
|
||||||
|
<div class="pull-r-l">
|
||||||
|
<div class="chartjs-size-monitor"
|
||||||
|
style="position: absolute; inset: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
|
||||||
|
<div class="chartjs-size-monitor-expand"
|
||||||
|
style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
|
||||||
|
<div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
|
||||||
|
</div>
|
||||||
|
<div class="chartjs-size-monitor-shrink"
|
||||||
|
style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
|
||||||
|
<div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Lines Chart Container functionality is initialized in js/pages/be_pages_dashboard.min.js which was auto compiled from _es6/pages/be_pages_dashboard.js -->
|
||||||
|
<!-- For more info and examples you can check out http://www.chartjs.org/docs/ -->
|
||||||
|
<canvas class="js-chartjs-dashboard-lines chartjs-render-monitor"
|
||||||
|
style="display: block; width: 1001px; height: 500px;" width="1001" height="500"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
<div class="col-xl-4 d-flex align-items-stretch">
|
||||||
<script>
|
<div class="block block-transparent bg-primary-dark d-flex align-items-center w-100">
|
||||||
function downloadPDF() {
|
<div class="block-content block-content-full">
|
||||||
const element = document.getElementById('dashboard-summary');
|
<div class="py-15 px-20 clearfix border-black-op-b">
|
||||||
|
<div class="float-right mt-15 d-none d-sm-block">
|
||||||
// Geçici olarak scroll alanlarını genişlet
|
<i class="si si-book-open fa-2x text-success"></i>
|
||||||
const scrollables = $(element).find('div[style*="overflow"]');
|
</div>
|
||||||
const originalStyles = [];
|
<div class="font-size-h3 font-w600 text-success js-count-to-enabled" data-toggle="countTo"
|
||||||
|
data-speed="1000" data-to="750">750</div>
|
||||||
scrollables.each(function() {
|
<div class="font-size-sm font-w600 text-uppercase text-success-light">Articles</div>
|
||||||
originalStyles.push({
|
</div>
|
||||||
element: this,
|
<div class="py-15 px-20 clearfix border-black-op-b">
|
||||||
height: this.style.height,
|
<div class="float-right mt-15 d-none d-sm-block">
|
||||||
overflow: this.style.overflow
|
<i class="si si-wallet fa-2x text-danger"></i>
|
||||||
});
|
</div>
|
||||||
$(this).css({
|
<div class="font-size-h3 font-w600 text-danger">$<span data-toggle="countTo" data-speed="1000"
|
||||||
'height': 'auto',
|
data-to="980" class="js-count-to-enabled">980</span></div>
|
||||||
'overflow': 'visible'
|
<div class="font-size-sm font-w600 text-uppercase text-danger-light">Earnings</div>
|
||||||
});
|
</div>
|
||||||
});
|
<div class="py-15 px-20 clearfix border-black-op-b">
|
||||||
|
<div class="float-right mt-15 d-none d-sm-block">
|
||||||
const opt = {
|
<i class="si si-envelope-open fa-2x text-warning"></i>
|
||||||
margin: 0.2,
|
</div>
|
||||||
filename: 'dashboard-summary.pdf',
|
<div class="font-size-h3 font-w600 text-warning js-count-to-enabled" data-toggle="countTo"
|
||||||
image: { type: 'jpeg', quality: 0.98 },
|
data-speed="1000" data-to="38">38</div>
|
||||||
html2canvas: { scale: 2, useCORS: true },
|
<div class="font-size-sm font-w600 text-uppercase text-warning-light">Messages</div>
|
||||||
jsPDF: { unit: 'in', format: 'a4', orientation: 'landscape' },
|
</div>
|
||||||
pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
|
<div class="py-15 px-20 clearfix border-black-op-b">
|
||||||
};
|
<div class="float-right mt-15 d-none d-sm-block">
|
||||||
|
<i class="si si-users fa-2x text-info"></i>
|
||||||
var btn = $('#download-pdf-btn');
|
</div>
|
||||||
var originalText = btn.html();
|
<div class="font-size-h3 font-w600 text-info js-count-to-enabled" data-toggle="countTo"
|
||||||
btn.html('<i class="fa fa-cog fa-spin"></i> Processing...');
|
data-speed="1000" data-to="260">260</div>
|
||||||
btn.prop('disabled', true);
|
<div class="font-size-sm font-w600 text-uppercase text-info-light">Online</div>
|
||||||
|
</div>
|
||||||
html2pdf().set(opt).from(element).save().then(function(){
|
<div class="py-15 px-20 clearfix">
|
||||||
// Stilleri geri yükle
|
<div class="float-right mt-15 d-none d-sm-block">
|
||||||
originalStyles.forEach(item => {
|
<i class="si si-drop fa-2x text-elegance"></i>
|
||||||
$(item.element).css({
|
</div>
|
||||||
'height': item.height,
|
<div class="font-size-h3 font-w600 text-elegance js-count-to-enabled" data-toggle="countTo"
|
||||||
'overflow': item.overflow
|
data-speed="1000" data-to="59">59</div>
|
||||||
});
|
<div class="font-size-sm font-w600 text-uppercase text-elegance-light">Themes</div>
|
||||||
});
|
</div>
|
||||||
|
</div>
|
||||||
btn.html(originalText);
|
</div>
|
||||||
btn.prop('disabled', false);
|
</div>
|
||||||
});
|
<!-- END Row #3 -->
|
||||||
}
|
</div>
|
||||||
|
<div class="row gutters-tiny js-appear-enabled animated fadeIn" data-toggle="appear">
|
||||||
$(document).ready(function() {
|
<!-- Row #4 -->
|
||||||
// İlk sekmeyi otomatik yükle
|
<div class="col-md-4">
|
||||||
$('.nav-link:eq(0)').click();
|
<div class="block block-transparent bg-default">
|
||||||
// Tab tıklama olayı
|
<div class="block-content block-content-full">
|
||||||
$('.load-stats').on('click', function() {
|
<div class="py-20 text-center">
|
||||||
$('.nav-link:eq(0)').click();
|
<div class="mb-20">
|
||||||
});
|
<i class="fa fa-envelope-open fa-4x text-default-light"></i>
|
||||||
var ajaxRequest;
|
</div>
|
||||||
$('.nav-link').off('click').on('click', function(e) {
|
<div class="font-size-h4 font-w600 text-white">19.5k Subscribers</div>
|
||||||
e.preventDefault();
|
<div class="text-white-op">Your main list is growing!</div>
|
||||||
var tabId = $(this).data('id');
|
<div class="pt-20">
|
||||||
|
<a class="btn btn-rounded btn-alt-primary" href="javascript:void(0)">
|
||||||
if(tabId === 'dashboard-summary') {
|
<i class="fa fa-cog mr-5"></i> Manage list
|
||||||
$('#download-pdf-btn').show();
|
</a>
|
||||||
} else {
|
</div>
|
||||||
$('#download-pdf-btn').hide();
|
</div>
|
||||||
}
|
</div>
|
||||||
|
</div>
|
||||||
var tabPane = $('#' + tabId);
|
</div>
|
||||||
tabPane.html('<i class="fa fa-4x fa-cog fa-spin text-success"></i>');
|
<div class="col-md-4">
|
||||||
|
<div class="block block-transparent bg-info">
|
||||||
// Önceki ajax isteği ve service worker'ı iptal et
|
<div class="block-content block-content-full">
|
||||||
if(ajaxRequest) {
|
<div class="py-20 text-center">
|
||||||
ajaxRequest.abort();
|
<div class="mb-20">
|
||||||
if('serviceWorker' in navigator) {
|
<i class="fa fa-twitter fa-4x text-info-light"></i>
|
||||||
navigator.serviceWorker.getRegistrations().then(function(registrations) {
|
</div>
|
||||||
registrations.forEach(function(registration) {
|
<div class="font-size-h4 font-w600 text-white">+98 followers</div>
|
||||||
registration.unregister();
|
<div class="text-white-op">You are doing great!</div>
|
||||||
});
|
<div class="pt-20">
|
||||||
});
|
<a class="btn btn-rounded btn-alt-info" href="javascript:void(0)">
|
||||||
}
|
<i class="fa fa-users mr-5"></i> Check them out
|
||||||
}
|
</a>
|
||||||
|
</div>
|
||||||
ajaxRequest = $.ajax({
|
</div>
|
||||||
url: `?ajax2=admin.dashboard.module.${tabId}&cache`,
|
</div>
|
||||||
method: 'GET',
|
</div>
|
||||||
success: function(html) {
|
</div>
|
||||||
tabPane.html(html);
|
<div class="col-md-4">
|
||||||
},
|
<div class="block block-transparent bg-success">
|
||||||
error: function(xhr, status, error) {
|
<div class="block-content block-content-full">
|
||||||
if(status === 'abort') {
|
<div class="py-20 text-center">
|
||||||
return;
|
<div class="mb-20">
|
||||||
}
|
<i class="fa fa-check fa-4x text-success-light"></i>
|
||||||
console.error('Error loading tab content');
|
</div>
|
||||||
tabPane.html('Error loading tab content');
|
<div class="font-size-h4 font-w600 text-white">Personal Plan</div>
|
||||||
}
|
<div class=" text-white-op">This is your current active plan</div>
|
||||||
});
|
<div class="pt-20">
|
||||||
});
|
<a class="btn btn-rounded btn-alt-success" href="javascript:void(0)">
|
||||||
|
<i class="fa fa-arrow-up mr-5"></i> Upgrade to VIP
|
||||||
// Body'e tıklandığında ajax isteği ve service worker'ı iptal et
|
</a>
|
||||||
|
</div>
|
||||||
});
|
</div>
|
||||||
</script>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- END Row #4 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
Reference in New Issue
Block a user