literyzjs-project/demo.html
2024-08-14 23:11:05 +01:00

205 lines
7.5 KiB
HTML

<!doctype html>
<html lang="en-GB">
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html" charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="keyword" content="" />
<title></title>
<script src="dist/project.dist.js"></script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 10pt;
padding: 10px;
}
.column {
float: left;
padding: 0px;
}
.left {
width: 50%;
}
.right {
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="row">
<div class="column left" id="projectPlanner1">
</div>
<div class="column right">
<div id="ganttChart1"></div>
</div>
</div>
<script>
Document.ready = async function(fn) {
(async function() {
(document.readyState !== 'loading') ?
fn() : document.addEventListener('DOMContentLoaded',
function() {
fn();
});
})();
}
Document.ready(async function() {
var project1 = new LiteRyzJS.Project({ Name: "New Project 1" });
var taskGrid1 = null;
var ganttChart1 = null;
var tasks = [
{"Order":1,"ID":1,"Name":"Task A","Description":"","Tag":null,"StartDate":"2024-08-11T23:00:00.000Z","FinishDate":"2024-08-14T23:00:00.000Z","StartDelay":0,"Duration":3,"PredecessorTaskID":null,"IsCollated":false,"CollatedTaskID":null,"CalcWorkHours":22.5,"ActuWorkHours":null,"Progress":0,"Resources":[],"Level":0,"PredecessorTaskNo":null},
{"Order":2,"ID":2,"Name":"Task B","Description":"","Tag":null,"StartDate":"2024-08-14T23:00:00.000Z","FinishDate":"2024-08-28T23:00:00.000Z","StartDelay":0,"Duration":14,"PredecessorTaskID":1,"IsCollated":false,"CollatedTaskID":null,"CalcWorkHours":105,"ActuWorkHours":null,"Progress":0,"Resources":[],"Level":0,"PredecessorTaskNo":1},
{"Order":3,"ID":5,"Name":"Task B1","Description":"","Tag":null,"StartDate":"2024-08-29T23:00:00.000Z","FinishDate":"2024-09-26T23:00:00.000Z","StartDelay":1,"Duration":28,"PredecessorTaskID":2,"IsCollated":true,"CollatedTaskID":null,"CalcWorkHours":210,"ActuWorkHours":null,"Progress":25,"Resources":[],"Level":0,"PredecessorTaskNo":2},
{"Order":4,"ID":6,"Name":"Task B11","Description":"","Tag":null,"StartDate":"2024-09-02T23:00:00.000Z","FinishDate":"2024-09-26T23:00:00.000Z","StartDelay":4,"Duration":24,"PredecessorTaskID":null,"IsCollated":false,"CollatedTaskID":5,"CalcWorkHours":180,"ActuWorkHours":null,"Progress":0,"Resources":[],"Level":1,"PredecessorTaskNo":null},
{"Order":5,"ID":7,"Name":"Task B12","Description":"","Tag":null,"StartDate":"2024-08-30T23:00:00.000Z","FinishDate":"2024-09-25T23:00:00.000Z","StartDelay":1,"Duration":26,"PredecessorTaskID":null,"IsCollated":false,"CollatedTaskID":5,"CalcWorkHours":0,"ActuWorkHours":null,"Progress":50,"Resources":[],"Level":1,"PredecessorTaskNo":null},
{"Order":6,"ID":8,"Name":"Task E","Description":"","Tag":null,"StartDate":"2024-08-11T23:00:00.000Z","FinishDate":"2024-08-26T23:00:00.000Z","StartDelay":0,"Duration":15,"PredecessorTaskID":null,"IsCollated":true,"CollatedTaskID":null,"CalcWorkHours":112.5,"ActuWorkHours":null,"Progress":0,"Resources":[],"Level":0,"PredecessorTaskNo":null},
{"Order":7,"ID":3,"Name":"Task C","Description":"","Tag":null,"StartDate":"2024-08-26T23:00:00.000Z","FinishDate":"2024-09-13T23:00:00.000Z","StartDelay":0,"Duration":18,"PredecessorTaskID":8,"IsCollated":false,"CollatedTaskID":null,"CalcWorkHours":135,"ActuWorkHours":null,"Progress":0,"Resources":[],"Level":0,"PredecessorTaskNo":6},
{"Order":8,"ID":4,"Name":"Task D","Description":"","Tag":null,"StartDate":"2024-09-14T23:00:00.000Z","FinishDate":"2024-09-24T23:00:00.000Z","StartDelay":1,"Duration":10,"PredecessorTaskID":3,"IsCollated":false,"CollatedTaskID":null,"CalcWorkHours":0,"ActuWorkHours":null,"Progress":0,"Resources":[],"Level":0,"PredecessorTaskNo":7},
{"Order":9,"ID":9,"Name":"Task E1","Description":"","Tag":null,"StartDate":"2024-08-14T23:00:00.000Z","FinishDate":"2024-08-26T23:00:00.000Z","StartDelay":3,"Duration":12,"PredecessorTaskID":null,"IsCollated":false,"CollatedTaskID":8,"CalcWorkHours":90,"ActuWorkHours":null,"Progress":0,"Resources":[],"Level":1,"PredecessorTaskNo":null}]
;
tasks.forEach((e, i) => {
project1.AddTask(e);
});
// project1.AddTask({
// ID: 1,
// Name: "Task A",
// StartDelay: 0,
// Duration: Math.randomN(0, 28),
// PredecessorTaskID: null,
// IsCollated: false,
// CollatedTaskID: null
// });
// project1.AddTask({
// ID: 2,
// Name: "Task B",
// StartDelay: Math.randomN(0, 5),
// Duration: Math.randomN(0, 28),
// PredecessorTaskID: 1,
// IsCollated: false,
// CollatedTaskID: null
// });
// project1.AddTask({
// ID: 5,
// Name: "Task B1",
// StartDelay: Math.randomN(0, 5),
// Duration: Math.randomN(0, 28),
// PredecessorTaskID: 2,
// IsCollated: true,
// CollatedTaskID: null
// });
// project1.AddTask({
// ID: 6,
// Name: "Task B11",
// StartDelay: Math.randomN(0, 5),
// Duration: Math.randomN(0, 28),
// PredecessorTaskID: null,
// IsCollated: false,
// CollatedTaskID: 5
// });
// project1.AddTask({
// ID: 7,
// Name: "Task B12",
// StartDelay: Math.randomN(0, 5),
// Duration: Math.randomN(0, 28),
// PredecessorTaskID: null,
// IsCollated: false,
// CollatedTaskID: 5,
// Progress: 50
// });
// project1.AddTask({
// ID: 8,
// Name: "Task E",
// StartDelay: Math.randomN(0, 5),
// Duration: Math.randomN(0, 28),
// PredecessorTaskID: null,
// IsCollated: true,
// CollatedTaskID: null
// });
// project1.AddTask({
// ID: 9,
// Name: "Task E1",
// StartDelay: Math.randomN(0, 5),
// Duration: Math.randomN(0, 28),
// PredecessorTaskID: null,
// IsCollated: false,
// CollatedTaskID: 8
// });
// project1.AddTask({
// ID: 3,
// Name: "Task C",
// StartDelay: Math.randomN(0, 5),
// Duration: Math.randomN(0, 28),
// PredecessorTaskID: 8,
// IsCollated: false,
// CollatedTaskID: null
// });
// project1.AddTask({
// ID: 4,
// Name: "Task D",
// StartDelay: Math.randomN(0, 5),
// Duration: Math.randomN(0, 28),
// PredecessorTaskID: 3,
// IsCollated: false,
// CollatedTaskID: null
// });
project1.Invalidate();
console.log(new Date(project1.StartDate).toLocaleDateString() + " - " + new Date(project1.FinishDate).toLocaleDateString() + " [" + project1.Duration + "]");
const taskData = project1.ExportTasks();
console.log(taskData);
if (taskGrid1 == null) {
taskGrid1 = new LiteRyzJS.ProjectPlanner(document.getElementById("projectPlanner1"));
}
taskGrid1.Load(taskData);
if (ganttChart1 == null) {
ganttChart1 = new LiteRyzJS.GanttChart(document.getElementById("ganttChart1"), { AutoSize: true });
}
ganttChart1.Load(project1);
// console.log(JSON.stringify(taskData));
// console.log(JSON.stringify(project1.Tasks));
});
</script>
</body>
</html>