Iniit

wwwroot/libs/frappe-gantt/css/frappe-gantt-custom.css

@@ -0,0 +1,29 @@
+.gantt-container {
+    width: auto;
+    margin: 10px auto;
+}
+
+.chart-controls {
+    text-align: center;
+}
+
+    .chart-controls > p {
+        font-size: 1.2rem;
+        font-weight: 500;
+    }
+
+.chart-label {
+    font-size: 1.5rem;
+    text-align: center;
+    font-weight: 500;
+}
+
+.gantt-container .popup-wrapper {
+    width: 300px;
+    padding: 0 5px;
+}
+
+/*.popup-wrapper {
+    border: 1px solid black;
+    background-color: #F4F5F6;
+}*/

wwwroot/libs/frappe-gantt/css/frappe-gantt.css

@@ -0,0 +1,133 @@
+.gantt .grid-background {
+  fill: none;
+}
+.gantt .grid-header {
+  fill: #ffffff;
+  stroke: #e0e0e0;
+  stroke-width: 1.4;
+}
+.gantt .grid-row {
+  fill: #ffffff;
+}
+.gantt .grid-row:nth-child(even) {
+  fill: #f5f5f5;
+}
+.gantt .row-line {
+  stroke: #ebeff2;
+}
+.gantt .tick {
+  stroke: #e0e0e0;
+  stroke-width: 0.2;
+}
+.gantt .tick.thick {
+  stroke-width: 0.4;
+}
+.gantt .today-highlight {
+  fill: #fcf8e3;
+  opacity: 0.5;
+}
+.gantt .arrow {
+  fill: none;
+  stroke: #666;
+  stroke-width: 1.4;
+}
+.gantt .bar {
+  fill: #b8c2cc;
+  stroke: #8D99A6;
+  stroke-width: 0;
+  transition: stroke-width 0.3s ease;
+  user-select: none;
+}
+.gantt .bar-progress {
+  fill: #a3a3ff;
+}
+.gantt .bar-invalid {
+  fill: transparent;
+  stroke: #8D99A6;
+  stroke-width: 1;
+  stroke-dasharray: 5;
+}
+.gantt .bar-invalid ~ .bar-label {
+  fill: #555;
+}
+.gantt .bar-label {
+  fill: #fff;
+  dominant-baseline: central;
+  text-anchor: middle;
+  font-size: 12px;
+  font-weight: lighter;
+}
+.gantt .bar-label.big {
+  fill: #555;
+  text-anchor: start;
+}
+.gantt .handle {
+  fill: #ddd;
+  cursor: ew-resize;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease;
+}
+.gantt .bar-wrapper {
+  cursor: pointer;
+  outline: none;
+}
+.gantt .bar-wrapper:hover .bar {
+  fill: #a9b5c1;
+}
+.gantt .bar-wrapper:hover .bar-progress {
+  fill: #8a8aff;
+}
+.gantt .bar-wrapper:hover .handle {
+  visibility: visible;
+  opacity: 1;
+}
+.gantt .bar-wrapper.active .bar {
+  fill: #a9b5c1;
+}
+.gantt .bar-wrapper.active .bar-progress {
+  fill: #8a8aff;
+}
+.gantt .lower-text, .gantt .upper-text {
+  font-size: 12px;
+  text-anchor: middle;
+}
+.gantt .upper-text {
+  fill: #555;
+}
+.gantt .lower-text {
+  fill: #333;
+}
+.gantt .hide {
+  display: none;
+}
+
+.gantt-container {
+  position: relative;
+  overflow: auto;
+  font-size: 12px;
+}
+.gantt-container .popup-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 0;
+  color: #959da5;
+  border-radius: 3px;
+}
+.gantt-container .popup-wrapper .title {
+  border-bottom: 3px solid #a3a3ff;
+  padding: 10px;
+}
+.gantt-container .popup-wrapper .subtitle {
+  padding: 10px;
+  color: #dfe2e5;
+}
+.gantt-container .popup-wrapper .pointer {
+  position: absolute;
+  height: 5px;
+  margin: 0 0 0 -5px;
+  border: 5px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.8);
+}

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

@@ -0,0 +1,2 @@
+var Gantt=function(){"use strict";const t="year",e="month",s="day",i="hour",n="minute",a="second",o="millisecond",r={en:["January","February","March","April","May","June","July","August","September","October","November","December"],es:["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],ru:["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],ptBr:["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"],fr:["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"],tr:["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"],zh:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]};var h={parse(t,e="-",s=/[.:]/){if(t instanceof Date)return t;if("string"==typeof t){let i,n;const a=t.split(" ");i=a[0].split(e).map((t=>parseInt(t,10))),n=a[1]&&a[1].split(s),i[1]=i[1]-1;let o=i;return n&&n.length&&(4==n.length&&(n[3]="0."+n[3],n[3]=1e3*parseFloat(n[3])),o=o.concat(n)),new Date(...o)}},to_string(t,e=!1){if(!(t instanceof Date))throw new TypeError("Invalid argument type");const s=this.get_date_values(t).map(((t,e)=>(1===e&&(t+=1),d(t+"",6===e?3:2,"0")))),i=`${s[0]}-${s[1]}-${s[2]}`,n=`${s[3]}:${s[4]}:${s[5]}.${s[6]}`;return i+(e?" "+n:"")},format(t,e="YYYY-MM-DD HH:mm:ss.SSS",s="en"){const i=this.get_date_values(t).map((t=>d(t,2,0))),n={YYYY:i[0],MM:d(+i[1]+1,2,0),DD:i[2],HH:i[3],mm:i[4],ss:i[5],SSS:i[6],D:i[2],MMMM:r[s][+i[1]],MMM:r[s][+i[1]]};let a=e;const o=[];return Object.keys(n).sort(((t,e)=>e.length-t.length)).forEach((t=>{a.includes(t)&&(a=a.replace(t,`$${o.length}`),o.push(n[t]))})),o.forEach(((t,e)=>{a=a.replace(`$${e}`,t)})),a},diff(t,e,i=s){let n,a,o,r,h,d,p;return n=t-e,a=n/1e3,r=a/60,o=r/60,h=o/24,d=h/30,p=d/12,i.endsWith("s")||(i+="s"),Math.floor({milliseconds:n,seconds:a,minutes:r,hours:o,days:h,months:d,years:p}[i])},today(){const t=this.get_date_values(new Date).slice(0,3);return new Date(...t)},now:()=>new Date,add(r,h,d){h=parseInt(h,10);const p=[r.getFullYear()+(d===t?h:0),r.getMonth()+(d===e?h:0),r.getDate()+(d===s?h:0),r.getHours()+(d===i?h:0),r.getMinutes()+(d===n?h:0),r.getSeconds()+(d===a?h:0),r.getMilliseconds()+(d===o?h:0)];return new Date(...p)},start_of(r,h){const d={[t]:6,[e]:5,[s]:4,[i]:3,[n]:2,[a]:1,[o]:0};function p(t){return d[t]<=d[h]}const _=[r.getFullYear(),p(t)?0:r.getMonth(),p(e)?1:r.getDate(),p(s)?0:r.getHours(),p(i)?0:r.getMinutes(),p(n)?0:r.getSeconds(),p(a)?0:r.getMilliseconds()];return new Date(..._)},clone(t){return new Date(...this.get_date_values(t))},get_date_values:t=>[t.getFullYear(),t.getMonth(),t.getDate(),t.getHours(),t.getMinutes(),t.getSeconds(),t.getMilliseconds()],get_days_in_month(t){const e=[31,28,31,30,31,30,31,31,30,31,30,31],s=t.getMonth();if(1!==s)return e[s];const i=t.getFullYear();return i%4==0&&i%100!=0||i%400==0?29:28}};function d(t,e,s){return t+="",e>>=0,s=String(void 0!==s?s:" "),t.length>e?String(t):((e-=t.length)>s.length&&(s+=s.repeat(e/s.length)),s.slice(0,e)+String(t))}function p(t,e){return"string"==typeof t?(e||document).querySelector(t):t||null}function _(t,e){const s=document.createElementNS("http://www.w3.org/2000/svg",t);for(let t in e)if("append_to"===t){e.append_to.appendChild(s)}else"innerHTML"===t?s.innerHTML=e.innerHTML:s.setAttribute(t,e[t]);return s}function g(t,e,s,i){const n=function(t,e,s,i,n="0.4s",a="0.1s"){const o=t.querySelector("animate");if(o)return p.attr(o,{attributeName:e,from:s,to:i,dur:n,begin:"click + "+a}),t;const r=_("animate",{attributeName:e,from:s,to:i,dur:n,begin:a,calcMode:"spline",values:s+";"+i,keyTimes:"0; 1",keySplines:l("ease-out")});return t.appendChild(r),t}(t,e,s,i);if(n===t){const t=document.createEvent("HTMLEvents");t.initEvent("click",!0,!0),t.eventName="click",n.dispatchEvent(t)}}function l(t){return{ease:".25 .1 .25 1",linear:"0 0 1 1","ease-in":".42 0 1 1","ease-out":"0 0 .58 1","ease-in-out":".42 0 .58 1"}[t]}p.on=(t,e,s,i)=>{i?p.delegate(t,e,s,i):(i=s,p.bind(t,e,i))},p.off=(t,e,s)=>{t.removeEventListener(e,s)},p.bind=(t,e,s)=>{e.split(/\s+/).forEach((function(e){t.addEventListener(e,s)}))},p.delegate=(t,e,s,i)=>{t.addEventListener(e,(function(t){const e=t.target.closest(s);e&&(t.delegatedTarget=e,i.call(this,t,e))}))},p.closest=(t,e)=>e?e.matches(t)?e:p.closest(t,e.parentNode):null,p.attr=(t,e,s)=>{if(!s&&"string"==typeof e)return t.getAttribute(e);if("object"!=typeof e)t.setAttribute(e,s);else for(let s in e)p.attr(t,s,e[s])};class u{constructor(t,e){this.set_defaults(t,e),this.prepare(),this.draw(),this.bind()}set_defaults(t,e){this.action_completed=!1,this.gantt=t,this.task=e}prepare(){this.prepare_values(),this.prepare_helpers()}prepare_values(){this.invalid=this.task.invalid,this.heigLine truncated
+

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>`;
+    }
+}