<!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;
}
textarea {
border-style: solid;
border-width: 1px;
border-color: #000000;
min-height: calc(100vh - 600px);
padding: 0px;
width: 100%;
}
</style>
</head>
<body>
<div class="row">
<div class="column left" id="projectPlanner1">
</div>
<div class="column right">
<div id="ganttChart1"></div>
</div>
</div>
<div class="row">
<div class="column left">
<p>
<textarea id="memoBox1" readonly></textarea>
</p>
</div>
<div class="column right">
<div style="margin-left: 10px;">
<p><b>Demo</b></p>
<p>
<button onclick="ClearAll()">Clear</button>
<button onclick="LoadProjectRand()">Load Project</button>
</p>
<p><b>Project (Engine)</b></p>
<p>
<button onclick="Clear()">Clear</button>
<button onclick="LoadProject()">Load Project</button>
<button onclick="LoadProjectRand()">Load Project (with random tasks)</button>
</p>
<p>
<button onclick="GetTasks()">Get Tasks</button>
<button onclick="GetRawTasks()">Get Raw Tasks</button>
</p>
<p><b>Project Planner</b></p>
<p>
<button onclick="ClearPlanner()">Clear</button>
<button onclick="LoadPlanner()">Load</button>
</p>
<p><b>Gantt Chart</b></p>
<p>
<button onclick="ClearGantt()">Clear</button>
<button onclick="InvalidateGantt()">Invalidate</button>
<button onclick="ToggleDebugGantt()">Toggle Debug</button>
</p>
</div>
</div>
</div>
<script>
Document.ready(async function() {
window.project1 = new LiteRyzJS.Project({ Name: "New Project 1" });
window.projectPlanner1 = null;
window.ganttChart1 = null;
LoadProject();
});
function LogInfo(value)
{
document.getElementById("memoBox1").value += value + "\n\n";
}
function Clear()
{
window.project1.Clear();
window.ganttChart1.Invalidate();
}
function LoadProject()
{
if (window.project1 == null) {
window.project1 = new LiteRyzJS.Project({ Name: "New Project 1" });
}
window.project1.Clear();
var tasks = [
{"ID":1,"Name":"Task A","Description":"","Tag":null,"StartDate":"2024-08-11T23:00:00.000Z","StartDelay":0,"Duration":3,"PredecessorTaskID":null,"IsCollated":false,"CollatedTaskID":null,"ActuWorkHours":null,"Progress":0,"Resources":[]},
{"ID":2,"Name":"Task B","Description":"","Tag":null,"StartDate":"2024-08-14T23:00:00.000Z","StartDelay":0,"Duration":14,"PredecessorTaskID":1,"IsCollated":false,"CollatedTaskID":null,"ActuWorkHours":null,"Progress":0,"Resources":[]},
{"ID":5,"Name":"Task B1","Description":"","Tag":null,"StartDate":"2024-08-29T23:00:00.000Z","StartDelay":1,"Duration":28,"PredecessorTaskID":2,"IsCollated":true,"CollatedTaskID":null,"ActuWorkHours":null,"Progress":25,"Resources":[]},
{"ID":6,"Name":"Task B11","Description":"","Tag":null,"StartDate":"2024-09-02T23:00:00.000Z","StartDelay":4,"Duration":24,"PredecessorTaskID":null,"IsCollated":false,"CollatedTaskID":5,"ActuWorkHours":null,"Progress":0,"Resources":[]},
{"ID":7,"Name":"Task B12","Description":"","Tag":null,"StartDate":"2024-08-30T23:00:00.000Z","StartDelay":1,"Duration":26,"PredecessorTaskID":null,"IsCollated":false,"CollatedTaskID":5,"ActuWorkHours":null,"Progress":50,"Resources":[]},
{"ID":8,"Name":"Task E","Description":"","Tag":null,"StartDate":"2024-08-11T23:00:00.000Z","StartDelay":0,"Duration":15,"PredecessorTaskID":null,"IsCollated":true,"CollatedTaskID":null,"ActuWorkHours":null,"Progress":0,"Resources":[]},
{"ID":3,"Name":"Task C","Description":"","Tag":null,"StartDate":"2024-08-26T23:00:00.000Z","StartDelay":0,"Duration":18,"PredecessorTaskID":8,"IsCollated":false,"CollatedTaskID":null,"ActuWorkHours":null,"Progress":0,"Resources":[]},
{"ID":4,"Name":"Task D","Description":"","Tag":null,"StartDate":"2024-09-14T23:00:00.000Z","StartDelay":1,"Duration":10,"PredecessorTaskID":3,"IsCollated":false,"CollatedTaskID":null,"ActuWorkHours":null,"Progress":0,"Resources":[]},
{"ID":9,"Name":"Task E1","Description":"","Tag":null,"StartDate":"2024-08-14T23:00:00.000Z","StartDelay":3,"Duration":12,"PredecessorTaskID":null,"IsCollated":false,"CollatedTaskID":8,"ActuWorkHours":null,"Progress":0,"Resources":[]},
{"ID":10,"Name":"Task C2","Description":"","Tag":null,"StartDate":"2024-08-26T23:00:00.000Z","StartDelay":0,"Duration":18,"PredecessorTaskID":8,"IsCollated":false,"CollatedTaskID":null,"ActuWorkHours":null,"Progress":0,"Resources":[]},
];
tasks.forEach((e, i) => {
window.project1.AddTask(e);
});
window.project1.Invalidate();
LogInfo("New Project " + new Date(window.project1.StartDate).toLocaleDateString() + " - " + new Date(window.project1.FinishDate).toLocaleDateString() + " [" + window.project1.Duration + "]");
if (window.projectPlanner1 == null) {
window.projectPlanner1 = new LiteRyzJS.ProjectPlanner(document.getElementById("projectPlanner1"));
}
const taskData = window.project1.ExportTasks();
// LogInfo(taskData);
window.projectPlanner1.Load(taskData);
if (window.ganttChart1 == null) {
window.ganttChart1 = new LiteRyzJS.GanttChart(document.getElementById("ganttChart1"), { AutoSize: true });
}
window.ganttChart1.Load(window.project1);
}
function LoadProjectRand()
{
if (window.project1 == null) {
window.project1 = new LiteRyzJS.Project({ Name: "New Project 1" });
}
window.project1.Clear();
var tasks = [
{"ID": 1, "Name": "task a","StartDelay": 0,"Duration": Math.randomN(0, 28),"PredecessorTaskID": null,"IsCollated": false,"CollatedTaskID": null},
{"ID": 2,"Name": "task b","StartDelay": Math.randomN(0, 5),"Duration": Math.randomN(0, 28),"PredecessorTaskID": 1,"IsCollated": false,"CollatedTaskID": null},
{"ID": 5,"Name": "task b1","StartDelay": Math.randomN(0, 5),"Duration": Math.randomN(0, 28),"PredecessorTaskID": 2,"IsCollated": true,"CollatedTaskID": null},
{"ID": 6,"Name": "task b11","StartDelay": Math.randomN(0, 5),"Duration": Math.randomN(0, 28),"PredecessorTaskID": null,"IsCollated": false,"CollatedTaskID": 5},
{"ID": 7,"Name": "task b12","StartDelay": Math.randomN(0, 5),"Duration": Math.randomN(0, 28),"PredecessorTaskID": null,"IsCollated": false,"CollatedTaskID": 5,progress: 50},
{"ID": 8,"Name": "task e","StartDelay": Math.randomN(0, 5),"Duration": Math.randomN(0, 28),"PredecessorTaskID": null,"IsCollated": true,"CollatedTaskID": null},
{"ID": 9,"Name": "task e1","StartDelay": Math.randomN(0, 5),"Duration": Math.randomN(0, 28),"PredecessorTaskID": null,"IsCollated": false,"CollatedTaskID": 8},
{"ID": 3,"Name": "task c","StartDelay": Math.randomN(0, 5),"Duration": Math.randomN(0, 28),"PredecessorTaskID": 8,"IsCollated": false,"CollatedTaskID": null},
{"ID": 4,"Name": "task d","StartDelay": Math.randomN(0, 5),"Duration": Math.randomN(0, 28),"PredecessorTaskID": 3,"IsCollated": false,"CollatedTaskID": null}
];
tasks.forEach((e, i) => {
window.project1.AddTask(e);
});
window.project1.Invalidate();
LogInfo("New Project " + new Date(window.project1.StartDate).toLocaleDateString() + " - " + new Date(window.project1.FinishDate).toLocaleDateString() + " [" + window.project1.Duration + "]");
if (window.projectPlanner1 == null) {
window.projectPlanner1 = new LiteRyzJS.ProjectPlanner(document.getElementById("projectPlanner1"));
}
const taskData = window.project1.ExportTasks();
window.projectPlanner1.Load(taskData);
if (window.ganttChart1 == null) {
window.ganttChart1 = new LiteRyzJS.GanttChart(document.getElementById("ganttChart1"), { AutoSize: true });
}
window.ganttChart1.Load(window.project1);
}
function GetTasks()
{
const taskData = window.project1.ExportTasks();
LogInfo(JSON.stringify(taskData));
console.log(taskData);
}
function GetRawTasks()
{
LogInfo(JSON.stringify(window.project1.Tasks));
console.log(window.project1.Tasks);
}
function InvalidateGantt()
{
window.ganttChart1.Invalidate();
}
function ToggleDebugGantt()
{
window.ganttChart1.Debug = !window.ganttChart1.Debug;
window.ganttChart1.Invalidate();
}
function ClearGantt()
{
window.ganttChart1.Clear();
}
function ClearPlanner()
{
window.projectPlanner1.Clear();
}
function LoadPlanner()
{
const taskData = window.project1.ExportTasks();
window.projectPlanner1.Load(taskData);
}
function ClearAll()
{
window.project1.Clear();
window.ganttChart1.Clear();
window.projectPlanner1.Clear();
}
</script>
</body>
</html>