121 lines
3.4 KiB
PHP
121 lines
3.4 KiB
PHP
@extends('layouts.app')
|
|
@inject('employeeRepository', 'Modules\Employee\Repositories\EmployeeRepository')
|
|
@push('css')
|
|
<link rel="stylesheet" type="text/css" href="{{ asset('assets/libs/dragula/dragula.min.css') }}" />
|
|
@endpush
|
|
@section('content')
|
|
<div class="container-fluid">
|
|
|
|
<x-dashboard.breadcumb :title="$title" />
|
|
|
|
|
|
@include('pms::task.gantt.filter')
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title mb-0">Gantt Chart</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="chart_div"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
@push('js')
|
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
<script type="text/javascript">
|
|
google.charts.load('current', {
|
|
'packages': ['gantt']
|
|
});
|
|
google.charts.setOnLoadCallback(drawChart);
|
|
|
|
async function drawChart(formData) {
|
|
|
|
var data = new google.visualization.DataTable();
|
|
data.addColumn('string', 'Task ID');
|
|
data.addColumn('string', 'Task Name');
|
|
data.addColumn('string', 'Resource');
|
|
data.addColumn('date', 'Start Date');
|
|
data.addColumn('date', 'End Date');
|
|
data.addColumn('number', 'Duration');
|
|
data.addColumn('number', 'Percent Complete');
|
|
data.addColumn('string', 'Dependencies');
|
|
|
|
const fetchData = await getData(formData)
|
|
|
|
fetchData.data.forEach(element => {
|
|
|
|
const startDateParts = element.startDate.split('-');
|
|
const endDateParts = element.endDate.split('-');
|
|
|
|
const startDate = new Date(startDateParts[0], startDateParts[1] - 1, startDateParts[2]);
|
|
const endDate = new Date(endDateParts[0], endDateParts[1] - 1, endDateParts[2]);
|
|
|
|
data.addRow([
|
|
element.taskID.toString(),
|
|
element.taskName,
|
|
element.resource,
|
|
startDate,
|
|
endDate,
|
|
element.duration,
|
|
element.percentComplete,
|
|
element.dependencies
|
|
]);
|
|
});
|
|
|
|
var options = {
|
|
height: 400,
|
|
responsive: true,
|
|
gantt: {
|
|
trackHeight: 30
|
|
}
|
|
};
|
|
|
|
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
|
|
|
|
chart.draw(data, options);
|
|
}
|
|
|
|
const getData = async (formData) => {
|
|
const queryString = new URLSearchParams(formData).toString();
|
|
return await fetch(`{{ route('task.getGantChartTask') }}?${queryString}`, {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
'url': '/task/get-gant-chart-ajax',
|
|
"X-CSRF-Token": document.querySelector('input[name=_token]').value
|
|
},
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
return data;
|
|
})
|
|
.catch(error => {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
});
|
|
}
|
|
|
|
$('.ganttChartForm').on('submit', function(e) {
|
|
e.preventDefault();
|
|
formData = $(this).serialize();
|
|
drawChart(formData);
|
|
})
|
|
|
|
$('.btn-reset').on('click', function(e) {
|
|
e.preventDefault();
|
|
$('.ganttChartForm')[0].reset();
|
|
drawChart();
|
|
})
|
|
|
|
|
|
$(window).resize(function() {
|
|
drawChart();
|
|
});
|
|
</script>
|
|
@endpush
|