{{-- @extends('layouts.app')
@section('content')
<div id="app">
</div>
@push('styles')
@vite(['resources/js/vue.js'])
@endpush --}}
<!DOCTYPE html>
<html charset="utf-8">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>GanttElastic editor demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs"></script>
<script src="https://unpkg.com/gantt-elastic/dist/GanttElastic.umd.js"></script>
<script src="https://unpkg.com/gantt-elastic-header/dist/Header.umd.js"></script>
</head>
<body>
<div style="width:100%;height:100%">
<div id="app" v-if="!destroy">
<gantt-elastic :tasks="tasks" :options="options" :dynamic-style="dynamicStyle">
{{-- <gantt-header slot="header"></gantt-header> --}}
<gantt-footer slot="footer"></gantt-footer>
</gantt-elastic>
</div>
</div>
<script>
function toTimestamp(dateString) {
// Menggunakan Day.js untuk parsing format tanggal
return dayjs(dateString, 'YYYY-MM-DD HH:mm:ss').valueOf();
}
let tasks = [
{
id: 1,
label: 'Task 1',
user: '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
start: toTimestamp('2024-11-18 00:00:00'), // 18 November 2024, pukul 00:00
end: toTimestamp('2024-11-20 20:59:59'), // 20 November 2024, pukul 23:59
duration: toTimestamp('2024-11-20 23:59:59') - toTimestamp('2024-11-18 00:00:00'),
progress: 85,
type: 'project',
},
{
id: 2,
label: 'Task 2',
user: '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
start: toTimestamp('2024-11-19 08:00:00'), // 19 November 2024, pukul 08:00
end: toTimestamp('2024-11-22 17:00:00'), // 22 November 2024, pukul 17:00
duration: toTimestamp('2024-11-22 17:00:00') - toTimestamp('2024-11-19 08:00:00'),
progress: 50,
type: 'task',
dependentOn: [1],
},
{
id: 3,
label: 'Task 3',
user: '<a href="https://www.google.com/search?q=Bruce+Wayne" target="_blank" style="color:#0077c0;">Bruce Wayne</a>',
start: toTimestamp('2024-11-20 10:00:00'), // 20 November 2024, pukul 10:00
end: toTimestamp('2024-11-25 18:00:00'), // 25 November 2024, pukul 18:00
duration: toTimestamp('2024-11-25 18:00:00') - toTimestamp('2024-11-20 10:00:00'),
progress: 30,
type: 'task',
dependentOn: [2],
},
];
let options = {
maxRows: 100,
maxHeight: 300,
title: {
label: 'Your project title as html (link or whatever...)',
html: false,
},
row: {
height: 24,
},
calendar: {
hour: {
display: false,
},
},
chart: {
progress: {
bar: false,
},
expander: {
display: true,
},
},
taskList: {
expander: {
straight: false,
},
columns: [{
id: 1,
label: 'ID',
value: 'id',
width: 40,
},
{
id: 2,
label: 'Description',
value: 'label',
width: 200,
expander: true,
html: true,
events: {
click({
data,
column
}) {
alert('description clicked!\n' + data.label);
},
},
},
],
},
};
// create instance
const app = new Vue({
components: {
'gantt-elastic': GanttElastic,
'gantt-footer': {
template: `<span class="this-footer"></span>`,
},
},
data: {
tasks: tasks.map((task) => Object.assign({}, task)),
options,
dynamicStyle: {
'task-list-header-label': {
'font-weight': 'bold',
},
},
destroy: false,
},
});
let ganttState, ganttInstance;
app.$on('gantt-elastic-ready', (ganttElasticInstance) => {
ganttInstance = ganttElasticInstance;
ganttInstance.$on('tasks-changed', (tasks) => {
app.tasks = tasks;
});
ganttInstance.$on('options-changed', (options) => {
app.options = options;
});
ganttInstance.$on('dynamic-style-changed', (style) => {
app.dynamicStyle = style;
});
ganttInstance.$on('chart-task-mouseenter', ({
data,
event
}) => {
console.log('task mouse enter', {
data,
event
});
});
ganttInstance.$on('updated', () => {
//console.log('gantt view was updated');
});
ganttInstance.$on('destroyed', () => {
//console.log('gantt was destroyed');
});
ganttInstance.$on('times-timeZoom-updated', () => {
console.log('time zoom changed');
});
ganttInstance.$on('taskList-task-click', ({
event,
data,
column
}) => {
console.log('task list clicked! (task)', {
data,
column
});
});
});
app.$mount('#app');
</script>
</body>
</html>
Panda
Koding