273 lines
9.4 KiB
HTML
273 lines
9.4 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;
|
|
}
|
|
|
|
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> |