frappe-gantt-view

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />

    <link rel="stylesheet" href="{{ asset('plugins\bootstrap\css\bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins\frappe_gantt\frappe-gantt.min.css') }}">

    <style>
        .gantt-container {
            width: 90vw;
            margin: 0 auto;
        }

        .gantt-container .details-container {
            width: 200px;
            padding: 0 5px;
        }
    </style>

</head>

<body class="container">
    <h6>Frappe Gantt</h6>

    <svg id='gantt'></svg>

    <script src="{{ asset('plugins\bootstrap\js\bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('plugins\frappe_gantt\frappe-gantt.min.js') }}"></script>
    <script>
        const todo = [
            {
                id: 'Task 1',
                name: 'Buy hosting',
                start: '2022-01-22',
                end: '2022-01-23',
                progress: 100,
            },
            {
                id: 'Task 2',
                name: 'Draw wireframes',
                start: '2022-01-23',
                end: '2022-01-25',
                progress: 100,
            },
            {
                id: 'Task 3',
                name: 'Visual Design',
                start: '2022-01-25',
                end: '2022-01-27',
                progress: 20,
                dependencies: 'Task 2'
            },
            {
                id: 'Task 4',
                name: 'Build frontend',
                start: '2022-02-01',
                end: '2022-02-03',
                progress: 0,
                dependencies: 'Task 3'
            },
            {
                id: 'Task 5',
                name: 'Build backend',
                start: '2022-02-03',
                end: '2022-02-07',
                progress: 0,
            },
            {
                id: 'Task 6',
                name: 'Deploy Website',
                start: '2022-02-07',
                end: '2022-02-09',
                progress: 0,
                dependencies: 'Task 4, Task 5'
            },
        ]

        const task = {{ Js::from($todo) }}
        console.log(todo);

        const gantt = new Gantt("#gantt", task, {
            view_mode: 'Day',
            bar_corner_radius: 8,
            custom_popup_html: function(task) {
                return `
                    <div class="details-container">
                        <h5>${task.name}</h5>
                        <p>Task started on: ${task._start.getDate()}</p>
                        <p>Expected to finish by ${task._start.getDate()}</p>
                        <p>${task.progress}% completed!</p>
                    </div>
                `}
        });


    </script>
</body>

</html>