117 lines
2.5 KiB
JavaScript
117 lines
2.5 KiB
JavaScript
class ProjectTaskGrid {
|
|
constructor(el) {
|
|
const a = this;
|
|
|
|
a.Container = el;
|
|
|
|
a.Columns = [
|
|
null,
|
|
null,
|
|
"Task Name",
|
|
"Duration",
|
|
"Start",
|
|
"Finish",
|
|
"Predecessor",
|
|
"Resource Names",
|
|
null
|
|
];
|
|
|
|
a.initialiseComponents();
|
|
}
|
|
|
|
initialiseComponents() {
|
|
const a = this;
|
|
|
|
let htmlContent = "";
|
|
htmlContent += "<table class='ryz-project'>";
|
|
htmlContent += a.renderTHead();
|
|
htmlContent += "<tbody>";
|
|
htmlContent += a.renderPlaceholder();
|
|
htmlContent += "</tbody>";
|
|
htmlContent += "</table>";
|
|
|
|
a.Container.innerHTML = htmlContent;
|
|
}
|
|
|
|
|
|
Render(model) {
|
|
const a = this;
|
|
|
|
let htmlContent = "";
|
|
htmlContent += "<table class='ryz-project'>";
|
|
htmlContent += a.renderTHead();
|
|
htmlContent += "<tbody>";
|
|
|
|
model.forEach(e => {
|
|
htmlContent += a.renderRow(e);
|
|
});
|
|
|
|
htmlContent += "</tbody>";
|
|
htmlContent += "</table>";
|
|
|
|
a.Container.innerHTML = htmlContent;
|
|
}
|
|
|
|
|
|
renderTHead() {
|
|
const a = this;
|
|
|
|
let htmlContent = "";
|
|
htmlContent += "<thead>";
|
|
htmlContent += "<tr>";
|
|
|
|
a.Columns.forEach(e => {
|
|
htmlContent += "<th>" + (e ?? "") + "</th>";
|
|
});
|
|
|
|
htmlContent += "</tr>";
|
|
htmlContent += "</thead>";
|
|
|
|
return htmlContent;
|
|
}
|
|
|
|
renderPlaceholder() {
|
|
const a = this;
|
|
|
|
let htmlContent = "";
|
|
htmlContent += "<tr>";
|
|
htmlContent += "<td></td>";
|
|
htmlContent += "<td colspan='" + (a.Columns.length - 1) + "' class='c'>Loading...</td>";
|
|
htmlContent += "</tr>";
|
|
|
|
return htmlContent;
|
|
}
|
|
|
|
renderRow(e) {
|
|
const a = this;
|
|
|
|
let htmlContent = "";
|
|
|
|
if (e.IsCollated == true) {
|
|
htmlContent += "<tr class='b'>";
|
|
} else {
|
|
htmlContent += "<tr>";
|
|
}
|
|
|
|
htmlContent += "<td class='c'>" + e.Order + "</td>";
|
|
htmlContent += "<td></td>";
|
|
htmlContent += "<td>";
|
|
|
|
for (let i=0; i<e.Level; i++) {
|
|
htmlContent += "<span class='i'></span>";
|
|
}
|
|
|
|
htmlContent += e.Name;
|
|
htmlContent += "</td>";
|
|
htmlContent += "<td>" + e.Duration + " day" + (parseInt(e.Duration) == 1 ? "" : "s") + "</td>";
|
|
htmlContent += "<td class='c'>" + new Date(e.StartDate).toLocaleDateString() + "</td>";
|
|
htmlContent += "<td class='c'>" + new Date(e.FinishDate).toLocaleDateString() + "</td>";
|
|
htmlContent += "<td class='c'>" + (e.PredecessorTaskNo ?? "") + "</td>";
|
|
htmlContent += "<td></td>";
|
|
htmlContent += "<td></td>";
|
|
htmlContent += "</tr>";
|
|
|
|
return htmlContent;
|
|
}
|
|
|
|
} |