diff --git a/demo.html b/demo.html index 58f3475..935e302 100644 --- a/demo.html +++ b/demo.html @@ -37,6 +37,16 @@ body { clear: both; } +textarea { + border-style: solid; + border-width: 1px; + border-color: #000000; + min-height: calc(100vh - 600px); + padding: 0px; + width: 100%; +} + + @@ -52,23 +62,74 @@ body { +
+
+

+ +

+
+
+
+ +

Project (Engine)

+

+ + + +

+

+ + +

+ +

Project Planner

+

+ + +

+ +

Gantt Chart

+

+ + + +

+ +
+
+
+ + diff --git a/src/project/gantt-chart.js b/src/project/gantt-chart.js index 32e99b6..0ae529c 100644 --- a/src/project/gantt-chart.js +++ b/src/project/gantt-chart.js @@ -11,9 +11,10 @@ class GanttChart { a.Options = Object.assign(a.DefaultOptions, options); a.Debug = false; - a.Project = null; - + a.Tasks = []; a.StartDate = null; + a.Duration = 30; + a.StartOfWeek = 1; a.#initialiseComponents(); } @@ -40,7 +41,7 @@ class GanttChart { return { DayWidth: 24, HeaderRow: { - Height: [ 19, 20 ] + Height: [ 20, 21 ] }, Row: { Height: 28, @@ -75,6 +76,7 @@ class GanttChart { BorderWidth: 1, BorderColour: "#B8B8B8", BorderDashPattern: [1, 1], + MinimumRowCount: 6, ShowDateLines: true, ShowStartDayOfWeekLine: true, ShowRowLines: true, @@ -109,28 +111,36 @@ class GanttChart { } + Clear() { + const a = this; + + a.Canvas.Clear(); + + a.StartDate = new Date(); + a.Duration = 30; + a.StartOfWeek = 1; // 1 = Monday + a.Tasks = []; + + a.Invalidate(); + } + Invalidate() { const a = this; a.Canvas.Clear(); - if (a.Project == null) { - return; - } - - const tasks = a.Project.ExportTasks(); - const width = ((a.Project.Duration + 2) * a.Options.DayWidth); - const height = (tasks.length * a.Options.Row.Height) + a.HeaderHeight; + const width = ((a.Duration + 2) * a.Options.DayWidth); + const height = (Math.max(a.Tasks.length, a.Options.MinimumRowCount) * a.Options.Row.Height) + a.HeaderHeight; a.Canvas.Size = { W: width, H: height }; a.Canvas.Invalidate(); - a.#drawChartHeader(a.Project.Duration); - a.#drawColumnLayout(a.Project.Duration, a.Project.Project.StartOfWeek); - a.#drawRowLayout(tasks); - a.#drawTasks(tasks); - a.#drawConnectorLines(tasks); + a.#drawChartHeader(); + a.#drawColumnLayout(); + a.#drawRowLayout(); + a.#drawTasks(); + a.#drawConnectorLines(); } Load(project) { @@ -142,16 +152,18 @@ class GanttChart { return; } - a.Project = project; a.StartDate = new Date(project.StartDate); + a.Duration = project.Duration; + a.StartOfWeek = project.Project.StartOfWeek; + a.Tasks = project.ExportTasks(); a.Invalidate(); } - #drawChartHeader(projectDuration) { + #drawChartHeader() { const a = this; - const displayDays = projectDuration + 2; + const displayDays = a.Duration + 2; if (a.Debug) { a.Canvas.DrawRectangle(a.HeaderRow1Rectangle, "red", {}); @@ -205,11 +217,11 @@ class GanttChart { } } - #drawColumnLayout(projectDuration, startOfWeek) { + #drawColumnLayout() { const a = this; const height = a.Canvas.Height; - const displayDays = projectDuration + 2; + const displayDays = a.Duration + 2; let startDate = new Date(a.StartDate); startDate.addDays(-1); @@ -234,7 +246,7 @@ class GanttChart { } // Draw vertical date lines - if (startOfWeek == date.getDay()) { + if (a.StartOfWeek == date.getDay()) { if (a.Options.ShowStartDayOfWeekLine) { a.Canvas.DrawVerticalLine(dateRectangle.X, a.HeaderHeight, dateRectangle.H, a.Options.BorderColour, {}); } @@ -247,10 +259,10 @@ class GanttChart { } } - #drawRowLayout(tasks) { + #drawRowLayout() { const a = this; - for (let i=0; i { + tasks.forEach(e => { htmlContent += a.#renderRow(e); }); @@ -95,31 +101,31 @@ class ProjectPlanner { return htmlContent; } - #renderRow(e) { + #renderRow(task) { const a = this; let htmlContent = ""; - if (e.IsCollated == true) { + if (task.IsCollated == true) { htmlContent += ""; } else { htmlContent += ""; } - htmlContent += "" + e.Order + ""; + htmlContent += "" + task.Order + ""; htmlContent += ""; htmlContent += ""; - for (let i=0; i"; + htmlContent += ""; htmlContent += ""; - htmlContent += "" + e.Duration + " day" + (parseInt(e.Duration) == 1 ? "" : "s") + ""; - htmlContent += "" + new Date(e.StartDate).toLocaleDateString() + ""; - htmlContent += "" + new Date(e.FinishDate).toLocaleDateString() + ""; - htmlContent += "" + (e.PredecessorTaskNo ?? "") + ""; + htmlContent += "" + task.Duration + " day" + (parseInt(task.Duration) == 1 ? "" : "s") + ""; + htmlContent += "" + new Date(task.StartDate).toLocaleDateString() + ""; + htmlContent += "" + new Date(task.FinishDate).toLocaleDateString() + ""; + htmlContent += "" + (task.PredecessorTaskNo ?? "") + ""; htmlContent += ""; htmlContent += ""; htmlContent += ""; diff --git a/src/project/project.js b/src/project/project.js index ea7bd16..682f6e0 100644 --- a/src/project/project.js +++ b/src/project/project.js @@ -6,6 +6,7 @@ class Project { const a = this; const _options = Object.assign(a.DefaultOptions, options); + a.Debug = false; a.Project = _options; a.Tasks = []; } @@ -124,7 +125,7 @@ class Project { } } - ClearTasks() { + Clear() { const a = this; a.Tasks = []; @@ -342,7 +343,11 @@ class Project { } #log(message) { - console.log(message); + const a = this; + + if (a.Debug) { + console.log(message); + } } #recalculateWorkHours(array) {