Iniit

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

@@ -0,0 +1,76 @@
+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>`;
+    }
+}