WebBuild/wwwroot/libs/frappe-gantt/js/loadganttchart.js

loadganttchart = {
    load_ganttchart(tasks, elem, popuphtml_ins) {
        Unibase.Platform.Helpers.FileCacheHelper.Instance().loadJsFiles(["libs/frappe-gantt/js/frappe-gantt.min.js"], function () {
            Unibase.Platform.Helpers.FileCacheHelper.Instance().loadCssFiles(["libs/frappe-gantt/css/frappe-gantt.min.css", "libs/frappe-gantt/css/frappe-gantt-custom.css", "libs/frappe-gantt/css/frappe-gantt.css"], function () {
                let html = `<svg id="gantt" class=""></svg>
                    <div class="chart-controls ma-20">
                        <p class="hidden">Change Chart Timescale</p>
                        <div class="button-cont TimeScale_Cls">
                             <button id="day-btn" class="bg-primary">
                                  Day
                             </button>

                             <button id="week-btn">
                                  Week
                             </button>

                             <button id="month-btn">
                                  Month
                             </button>
                         </div>
                      </div>
                      <p class="chart-label hidden"> Timescale: <span id="current-timescale">Day</span> </p>`;
                $(elem).append(html);
                let ganttChart = eval(`new Gantt("#gantt", tasks, {
                                            on_click: function (task) {
		                                        //alert(task);
	                                        },
	                                        on_date_change: function(task, start, end) {
		                                        //alert(task + "," + start + "," + end);
	                                        },
	                                        on_progress_change: function(task, progress) {
		                                        //alert(task + "," + progress);
	                                        },
	                                        on_view_change: function(mode) {
		                                        //alert(mode);
	                                        },
                                            custom_popup_html: function(task) {
                                                //return Bizgaze.Apps.Transact.Controls.WorkOrderItems.Instance().getPopUpHtml(task);
                                                if(popuphtml_ins == "")
                                                {
                                                    return loadganttchart.getpopuphtml(task);
                                                }
                                                else
                                                {
                                                    return eval(popuphtml_ins);
                                                }
                                            }
                                        }
                                    )`);
                $(".chart-controls #day-btn").on("click", () => {
                    ganttChart.change_view_mode("Day");
                    $(".TimeScale_Cls").find("button").removeClass("bg-primary");
                    $(".TimeScale_Cls").find("#day-btn").addClass("bg-primary");
                });
                $(".chart-controls #week-btn").on("click", () => {
                    ganttChart.change_view_mode("Week");
                    $(".TimeScale_Cls").find("button").removeClass("bg-primary");
                    $(".TimeScale_Cls").find("#week-btn").addClass("bg-primary");
                });
                $(".chart-controls #month-btn").on("click", () => {
                    ganttChart.change_view_mode("Month");
                    $(".TimeScale_Cls").find("button").removeClass("bg-primary");
                    $(".TimeScale_Cls").find("#month-btn").addClass("bg-primary");
                });
            });
        });
    },
    getpopuphtml(task) {
        return `<div class="details-container bg-light pa-5 text-left" style="border:2px solid black">
                      <h5>${task.name}</h5>
                      <p>Task Started on: ${task._start.getDate()}</p>
                      <p>Expected to finish by ${task._end.getDate()}</p>
                      <p>${task.progress}% completed!</p>
                </div>`;
    }
}