feat: add dashboard index view to admin panel
This commit is contained in:
Ümit Tunç
@@ -2,150 +2,288 @@
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
<?php
|
||||
$tabs = [
|
||||
'Dashboard Summary' => '📊',
|
||||
'Training Videos' => '👩🏫',
|
||||
'Module Relationships' => '🏬',
|
||||
];
|
||||
?>
|
||||
|
||||
<div class="content">
|
||||
<div class="block">
|
||||
<ul class="nav nav-tabs nav-tabs-block js-tabs-enabled" data-toggle="tabs" role="tablist">
|
||||
<?php foreach($tabs AS $tab => $icon) {
|
||||
$id = str_slug($tab);
|
||||
?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-id="{{$id}}" href="#{{$id}}" data-toggle="tab">
|
||||
{{$icon}}
|
||||
{{e2($tab)}}</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
<li class="nav-item ml-auto p-1">
|
||||
<button type="button" class="btn btn-alt-danger" id="download-pdf-btn" onclick="downloadPDF()" style="display:none">
|
||||
<i class="fa fa-file-pdf"></i> {{e2("Download PDF")}}
|
||||
</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 class="content">
|
||||
<div class="row gutters-tiny js-appear-enabled animated fadeIn" data-toggle="appear">
|
||||
<!-- Row #1 -->
|
||||
<div class="col-6 col-md-4 col-xl-2">
|
||||
<a class="block text-center" href="javascript:void(0)">
|
||||
<div class="block-content ribbon ribbon-bookmark ribbon-crystal ribbon-left bg-gd-dusk">
|
||||
<div class="ribbon-box">750</div>
|
||||
<p class="mt-5">
|
||||
<i class="si si-book-open fa-3x text-white-op"></i>
|
||||
</p>
|
||||
<p class="font-w600 text-white">Articles</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<?php $k++; } ?>
|
||||
<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>
|
||||
</div>
|
||||
</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 class="col-xl-4 d-flex align-items-stretch">
|
||||
<div class="block block-transparent bg-primary-dark d-flex align-items-center w-100">
|
||||
<div class="block-content block-content-full">
|
||||
<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-book-open fa-2x text-success"></i>
|
||||
</div>
|
||||
<div class="font-size-h3 font-w600 text-success js-count-to-enabled" data-toggle="countTo"
|
||||
data-speed="1000" data-to="750">750</div>
|
||||
<div class="font-size-sm font-w600 text-uppercase text-success-light">Articles</div>
|
||||
</div>
|
||||
<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-wallet fa-2x text-danger"></i>
|
||||
</div>
|
||||
<div class="font-size-h3 font-w600 text-danger">$<span data-toggle="countTo" data-speed="1000"
|
||||
data-to="980" class="js-count-to-enabled">980</span></div>
|
||||
<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">
|
||||
<i class="si si-envelope-open fa-2x text-warning"></i>
|
||||
</div>
|
||||
<div class="font-size-h3 font-w600 text-warning js-count-to-enabled" data-toggle="countTo"
|
||||
data-speed="1000" data-to="38">38</div>
|
||||
<div class="font-size-sm font-w600 text-uppercase text-warning-light">Messages</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="font-size-h3 font-w600 text-info js-count-to-enabled" data-toggle="countTo"
|
||||
data-speed="1000" data-to="260">260</div>
|
||||
<div class="font-size-sm font-w600 text-uppercase text-info-light">Online</div>
|
||||
</div>
|
||||
<div class="py-15 px-20 clearfix">
|
||||
<div class="float-right mt-15 d-none d-sm-block">
|
||||
<i class="si si-drop fa-2x text-elegance"></i>
|
||||
</div>
|
||||
<div class="font-size-h3 font-w600 text-elegance js-count-to-enabled" data-toggle="countTo"
|
||||
data-speed="1000" data-to="59">59</div>
|
||||
<div class="font-size-sm font-w600 text-uppercase text-elegance-light">Themes</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END Row #3 -->
|
||||
</div>
|
||||
<div class="row gutters-tiny js-appear-enabled animated fadeIn" data-toggle="appear">
|
||||
<!-- Row #4 -->
|
||||
<div class="col-md-4">
|
||||
<div class="block block-transparent bg-default">
|
||||
<div class="block-content block-content-full">
|
||||
<div class="py-20 text-center">
|
||||
<div class="mb-20">
|
||||
<i class="fa fa-envelope-open fa-4x text-default-light"></i>
|
||||
</div>
|
||||
<div class="font-size-h4 font-w600 text-white">19.5k Subscribers</div>
|
||||
<div class="text-white-op">Your main list is growing!</div>
|
||||
<div class="pt-20">
|
||||
<a class="btn btn-rounded btn-alt-primary" href="javascript:void(0)">
|
||||
<i class="fa fa-cog mr-5"></i> Manage list
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="block block-transparent bg-info">
|
||||
<div class="block-content block-content-full">
|
||||
<div class="py-20 text-center">
|
||||
<div class="mb-20">
|
||||
<i class="fa fa-twitter fa-4x text-info-light"></i>
|
||||
</div>
|
||||
<div class="font-size-h4 font-w600 text-white">+98 followers</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="block block-transparent bg-success">
|
||||
<div class="block-content block-content-full">
|
||||
<div class="py-20 text-center">
|
||||
<div class="mb-20">
|
||||
<i class="fa fa-check fa-4x text-success-light"></i>
|
||||
</div>
|
||||
<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
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END Row #4 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
||||
<script>
|
||||
function downloadPDF() {
|
||||
const element = document.getElementById('dashboard-summary');
|
||||
|
||||
// Geçici olarak scroll alanlarını genişlet
|
||||
const scrollables = $(element).find('div[style*="overflow"]');
|
||||
const originalStyles = [];
|
||||
|
||||
scrollables.each(function() {
|
||||
originalStyles.push({
|
||||
element: this,
|
||||
height: this.style.height,
|
||||
overflow: this.style.overflow
|
||||
});
|
||||
$(this).css({
|
||||
'height': 'auto',
|
||||
'overflow': 'visible'
|
||||
});
|
||||
});
|
||||
|
||||
const opt = {
|
||||
margin: 0.2,
|
||||
filename: 'dashboard-summary.pdf',
|
||||
image: { type: 'jpeg', quality: 0.98 },
|
||||
html2canvas: { scale: 2, useCORS: true },
|
||||
jsPDF: { unit: 'in', format: 'a4', orientation: 'landscape' },
|
||||
pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
|
||||
};
|
||||
|
||||
var btn = $('#download-pdf-btn');
|
||||
var originalText = btn.html();
|
||||
btn.html('<i class="fa fa-cog fa-spin"></i> Processing...');
|
||||
btn.prop('disabled', true);
|
||||
|
||||
html2pdf().set(opt).from(element).save().then(function(){
|
||||
// Stilleri geri yükle
|
||||
originalStyles.forEach(item => {
|
||||
$(item.element).css({
|
||||
'height': item.height,
|
||||
'overflow': item.overflow
|
||||
});
|
||||
});
|
||||
|
||||
btn.html(originalText);
|
||||
btn.prop('disabled', false);
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
// İlk sekmeyi otomatik yükle
|
||||
$('.nav-link:eq(0)').click();
|
||||
// Tab tıklama olayı
|
||||
$('.load-stats').on('click', function() {
|
||||
$('.nav-link:eq(0)').click();
|
||||
});
|
||||
var ajaxRequest;
|
||||
$('.nav-link').off('click').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
var tabId = $(this).data('id');
|
||||
|
||||
if(tabId === 'dashboard-summary') {
|
||||
$('#download-pdf-btn').show();
|
||||
} else {
|
||||
$('#download-pdf-btn').hide();
|
||||
}
|
||||
|
||||
var tabPane = $('#' + tabId);
|
||||
tabPane.html('<i class="fa fa-4x fa-cog fa-spin text-success"></i>');
|
||||
|
||||
// Önceki ajax isteği ve service worker'ı iptal et
|
||||
if(ajaxRequest) {
|
||||
ajaxRequest.abort();
|
||||
if('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.getRegistrations().then(function(registrations) {
|
||||
registrations.forEach(function(registration) {
|
||||
registration.unregister();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
ajaxRequest = $.ajax({
|
||||
url: `?ajax2=admin.dashboard.module.${tabId}&cache`,
|
||||
method: 'GET',
|
||||
success: function(html) {
|
||||
tabPane.html(html);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
if(status === 'abort') {
|
||||
return;
|
||||
}
|
||||
console.error('Error loading tab content');
|
||||
tabPane.html('Error loading tab content');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Body'e tıklandığında ajax isteği ve service worker'ı iptal et
|
||||
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@endsection
|
||||
Reference in New Issue
Block a user