Ümit Tunç
101 lines
3.1 KiB
PHP
101 lines
3.1 KiB
PHP
<!-- Gantt Chart Card -->
|
||
<div class="bg-white rounded-3xl p-6 md:p-8 shadow-xl border border-slate-100/50 mb-8">
|
||
<div class="flex items-center justify-between mb-6 pb-4 border-b border-slate-100">
|
||
<h3 class="font-bold text-slate-800 text-lg flex items-center gap-2">
|
||
<i class="uil uil-schedule text-blue-600 text-xl"></i>
|
||
<span>Stajyer Gantt Şeması ve Takvimi</span>
|
||
</h3>
|
||
<span class="text-xs px-2.5 py-1 bg-blue-50 text-blue-600 rounded-full font-semibold">DevExtreme Görünümü</span>
|
||
</div>
|
||
|
||
@if($ganttInterns->isEmpty())
|
||
<div class="flex flex-col items-center justify-center p-8 text-center bg-slate-50 rounded-2xl border border-dashed border-slate-200">
|
||
<i class="uil uil-calendar-slash text-4xl text-slate-300 mb-2"></i>
|
||
<p class="text-sm font-medium text-slate-500">Tarihleri belirlenmiş onaylı stajyer bulunamadı.</p>
|
||
</div>
|
||
@else
|
||
<!-- Gantt Container -->
|
||
<div class="dx-viewport demo-container" style="height: 480px; overflow: hidden; border-radius: 16px; border: 1px solid rgba(0,0,0,0.05);">
|
||
<div id="gantt" style="height: 100%; width: 100%;"></div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
@push('styles')
|
||
<!-- DevExtreme Gantt CSS Dependencies -->
|
||
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.fluent.blue.light.css">
|
||
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx-gantt.min.css">
|
||
<script>
|
||
tailwind = {
|
||
config: {
|
||
corePlugins: {
|
||
preflight: false,
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
@endpush
|
||
|
||
@push('scripts')
|
||
<!-- Gantt Chart Javascript Dependencies & Initialization -->
|
||
@if(!$ganttInterns->isEmpty())
|
||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||
<script src="https://cdn3.devexpress.com/jslib/23.2.5/js/dx-gantt.min.js"></script>
|
||
<script src="https://cdn3.devexpress.com/jslib/23.2.5/js/dx.all.js"></script>
|
||
<script>
|
||
$(function() {
|
||
const ganttData = @json($ganttInterns);
|
||
|
||
const formattedData = ganttData.map(intern => ({
|
||
id: intern.id,
|
||
title: intern.title,
|
||
start: new Date(intern.start),
|
||
end: new Date(intern.end),
|
||
progress: 0
|
||
}));
|
||
|
||
$('#gantt').dxGantt({
|
||
tasks: {
|
||
dataSource: formattedData,
|
||
},
|
||
editing: {
|
||
enabled: false,
|
||
},
|
||
validation: {
|
||
autoUpdateParentTasks: true,
|
||
},
|
||
toolbar: {
|
||
items: [
|
||
'collapseAll',
|
||
'expandAll',
|
||
'separator',
|
||
'zoomIn',
|
||
'zoomOut',
|
||
],
|
||
},
|
||
columns: [{
|
||
dataField: 'title',
|
||
caption: 'Stajyer Adı',
|
||
width: 200,
|
||
}, {
|
||
dataField: 'start',
|
||
caption: 'Başlangıç Tarihi',
|
||
dataType: 'date',
|
||
format: 'dd.MM.yyyy',
|
||
width: 110,
|
||
}, {
|
||
dataField: 'end',
|
||
caption: 'Bitiş Tarihi',
|
||
dataType: 'date',
|
||
format: 'dd.MM.yyyy',
|
||
width: 110,
|
||
}],
|
||
scaleType: 'days',
|
||
taskListWidth: 420,
|
||
});
|
||
});
|
||
</script>
|
||
@endif
|
||
@endpush
|