javascriptgantt 1.0.0 → 1.2.0
Sign up to get free protection for your applications and to get access to all the features.
- package/.github/workflows/npm-publish-github-packages.yml +21 -27
- package/LICENSE +21 -21
- package/index.html +1108 -1111
- package/package.json +34 -33
- package/readme.md +158 -158
- package/src/assets/zt-tour/zt-tour.css +227 -227
- package/src/assets/zt-tour/zt-tour.js +1095 -1095
- package/src/gantt.css +1157 -1157
- package/src/gantt.js +9671 -9642
- package/src/theme/dark.css +100 -100
- package/style.css +215 -215
- /package/src/assets/images/{ztGanttLogo.png → jsGanttLogo.png} +0 -0
- /package/src/assets/images/{zt-gantt-screenshot.png → jsgantt-screenshot.png} +0 -0
package/index.html
CHANGED
|
@@ -1,1112 +1,1109 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>
|
|
8
|
-
<link rel="stylesheet" href="./style.css" />
|
|
9
|
-
<link rel="stylesheet" href="src/gantt.css" />
|
|
10
|
-
<link rel="stylesheet" href="src/assets/zt-tour/zt-tour.css" />
|
|
11
|
-
<!-- <link rel="stylesheet" href="./theme/dark.css" /> -->
|
|
12
|
-
<link rel="shortcut icon" href="src/assets/images/jsGanttLogo.png" type="image/x-icon" />
|
|
13
|
-
<script src="src/gantt.js"></script>
|
|
14
|
-
</head>
|
|
15
|
-
|
|
16
|
-
<body>
|
|
17
|
-
<div class="js-gantt-d-flex action-container">
|
|
18
|
-
<div class="collapse-container">
|
|
19
|
-
<span>Collapse</span>
|
|
20
|
-
<input type="checkbox" id="collapse-switch" onchange="changeCollapse(event)" />
|
|
21
|
-
<label for="collapse-switch">collapse</label>
|
|
22
|
-
</div>
|
|
23
|
-
|
|
24
|
-
<div class="collapse-container today-container">
|
|
25
|
-
<span>Today</span>
|
|
26
|
-
<input type="checkbox" id="today-switch" checked="true" onchange="changeToday(event)" />
|
|
27
|
-
<label for="today-switch">Today</label>
|
|
28
|
-
</div>
|
|
29
|
-
<div class="export-data">
|
|
30
|
-
<select class="export" id="export" placeholder="Export" onchange="exportChange(event)">
|
|
31
|
-
<option value="" disabled="" selected="">Export</option>
|
|
32
|
-
<option value="png">Export To PNG</option>
|
|
33
|
-
<option value="pdf">Export To PDF</option>
|
|
34
|
-
<option value="excel">Export To Excel</option>
|
|
35
|
-
</select>
|
|
36
|
-
</div>
|
|
37
|
-
<div class="fullscreen">
|
|
38
|
-
<button class="btn" onclick="changeScreen()">FullScreen</button>
|
|
39
|
-
</div>
|
|
40
|
-
<div class="auto-scheduling">
|
|
41
|
-
<!-- <span class="coming-soon">coming soon</span> -->
|
|
42
|
-
<button class="btn" onclick="autoScheduling()">Auto Scheduling</button>
|
|
43
|
-
</div>
|
|
44
|
-
<div class="zoom">
|
|
45
|
-
<select class="scale-zoom" id="scale_zoom" placeholder="Zoom to" onchange="changeZoom(event)">
|
|
46
|
-
<option value="" disabled="">Zoom to:</option>
|
|
47
|
-
<option value="year">Years</option>
|
|
48
|
-
<option value="quarter">Quarters</option>
|
|
49
|
-
<option value="month">Months</option>
|
|
50
|
-
<option value="week">Weeks</option>
|
|
51
|
-
<option value="day" selected="day">Days</option>
|
|
52
|
-
<option value="hour">Hour</option>
|
|
53
|
-
</select>
|
|
54
|
-
</div>
|
|
55
|
-
<div class="Language">
|
|
56
|
-
<select class="lang" id="lang" placeholder="Select Language" onchange="changeLang(event)">
|
|
57
|
-
<option value="" disabled="" selected="">Select Language:</option>
|
|
58
|
-
<option value="ar">Arabic</option>
|
|
59
|
-
<option value="be">Belarusian</option>
|
|
60
|
-
<option value="en" selected="en">English</option>
|
|
61
|
-
<option value="ca">Catalan</option>
|
|
62
|
-
<option value="cn">Chinese</option>
|
|
63
|
-
<option value="hr">Croatian</option>
|
|
64
|
-
<option value="cs">Czech</option>
|
|
65
|
-
<option value="da">Danish</option>
|
|
66
|
-
<option value="nl">Dutch</option>
|
|
67
|
-
<option value="fi">Finnish</option>
|
|
68
|
-
<option value="fr">French</option>
|
|
69
|
-
<option value="de">German</option>
|
|
70
|
-
<option value="el">Greek</option>
|
|
71
|
-
<option value="he">Hebrew</option>
|
|
72
|
-
<option value="hi">Hindi (India)</option>
|
|
73
|
-
<option value="hu">Hungarian</option>
|
|
74
|
-
<option value="id">Indonesian</option>
|
|
75
|
-
<option value="it">Italian</option>
|
|
76
|
-
<option value="ja">Japanese</option>
|
|
77
|
-
<option value="kr">Korean</option>
|
|
78
|
-
<option value="no">Norwegian</option>
|
|
79
|
-
<option value="fa">Persian</option>
|
|
80
|
-
<option value="pl">Polish</option>
|
|
81
|
-
<option value="pt">Portuguese</option>
|
|
82
|
-
<option value="ro">Romanian</option>
|
|
83
|
-
<option value="ro">Russian</option>
|
|
84
|
-
<option value="sk">Slovak</option>
|
|
85
|
-
<option value="si">Slovenian</option>
|
|
86
|
-
<option value="es">Spanish</option>
|
|
87
|
-
<option value="sv">Swedish</option>
|
|
88
|
-
<option value="tr">Turkish</option>
|
|
89
|
-
<option value="ua">Ukrainian</option>
|
|
90
|
-
</select>
|
|
91
|
-
</div>
|
|
92
|
-
|
|
93
|
-
<div class="dark-mode">
|
|
94
|
-
<span>Dark Mode</span>
|
|
95
|
-
<input type="checkbox" id="toggle" onchange="changeTheme(event.target.checked)" class="toggle--checkbox" />
|
|
96
|
-
<label for="toggle" class="toggle-theme"> </label>
|
|
97
|
-
</div>
|
|
98
|
-
<div class="fullscreen">
|
|
99
|
-
<button class="btn" style="margin-left: 10px" onclick="startTour()">
|
|
100
|
-
Start Tour
|
|
101
|
-
</button>
|
|
102
|
-
<svg class="hint-icon" width="18px" height="18px" style="margin-bottom: -4px;" viewBox="0 0 1024 1024"
|
|
103
|
-
xmlns="http://www.w3.org/2000/svg" fill="#000000">
|
|
104
|
-
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
105
|
-
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
|
106
|
-
<g id="SVGRepo_iconCarrier">
|
|
107
|
-
<path fill="#55A5FF"
|
|
108
|
-
d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm23.744 191.488c-52.096 0-92.928 14.784-123.2 44.352-30.976 29.568-45.76 70.4-45.76 122.496h80.256c0-29.568 5.632-52.8 17.6-68.992 13.376-19.712 35.2-28.864 66.176-28.864 23.936 0 42.944 6.336 56.32 19.712 12.672 13.376 19.712 31.68 19.712 54.912 0 17.6-6.336 34.496-19.008 49.984l-8.448 9.856c-45.76 40.832-73.216 70.4-82.368 89.408-9.856 19.008-14.08 42.24-14.08 68.992v9.856h80.96v-9.856c0-16.896 3.52-31.68 10.56-45.76 6.336-12.672 15.488-24.64 28.16-35.2 33.792-29.568 54.208-48.576 60.544-55.616 16.896-22.528 26.048-51.392 26.048-86.592 0-42.944-14.08-76.736-42.24-101.376-28.16-25.344-65.472-37.312-111.232-37.312zm-12.672 406.208a54.272 54.272 0 0 0-38.72 14.784 49.408 49.408 0 0 0-15.488 38.016c0 15.488 4.928 28.16 15.488 38.016A54.848 54.848 0 0 0 523.072 768c15.488 0 28.16-4.928 38.72-14.784a51.52 51.52 0 0 0 16.192-38.72 51.968 51.968 0 0 0-15.488-38.016 55.936 55.936 0 0 0-39.424-14.784z">
|
|
109
|
-
</path>
|
|
110
|
-
</g>
|
|
111
|
-
</svg>
|
|
112
|
-
</div>
|
|
113
|
-
<!-- <button onclick="
|
|
114
|
-
<button onclick="
|
|
115
|
-
<!-- <button onclick="addCol()">Add Column</button>
|
|
116
|
-
<button onclick="removeCol()">Remove Column</button> -->
|
|
117
|
-
<input type="search" placeholder="Search Task" id="gantt-search" name="gantt-search" class="gantt-search"
|
|
118
|
-
oninput="searchTask(event)" />
|
|
119
|
-
</div>
|
|
120
|
-
<div id="js-gantt"></div>
|
|
121
|
-
</div>
|
|
122
|
-
<script src="src/assets/zt-tour/zt-tour.js"></script>
|
|
123
|
-
<script>
|
|
124
|
-
let data = [
|
|
125
|
-
{ id: 1, text: "Project 1", parent: 0, progress: 30 },
|
|
126
|
-
{
|
|
127
|
-
id: 2,
|
|
128
|
-
text: "Task #2",
|
|
129
|
-
start_date: "06-05-2024",
|
|
130
|
-
end_date: "06-05-2024",
|
|
131
|
-
parent: 1,
|
|
132
|
-
progress: 50,
|
|
133
|
-
},
|
|
134
|
-
{
|
|
135
|
-
id: 23,
|
|
136
|
-
text: "Final Milestone",
|
|
137
|
-
start_date: "06-17-2024",
|
|
138
|
-
end_date: "06-18-2024",
|
|
139
|
-
parent: 1,
|
|
140
|
-
type: "milestone",
|
|
141
|
-
},
|
|
142
|
-
{
|
|
143
|
-
id: 3,
|
|
144
|
-
text: "Task #3",
|
|
145
|
-
start_date: "06-06-2024",
|
|
146
|
-
end_date: "06-07-2024",
|
|
147
|
-
parent: 1,
|
|
148
|
-
progress: 60,
|
|
149
|
-
},
|
|
150
|
-
{
|
|
151
|
-
id: 5,
|
|
152
|
-
text: "SubTask #5",
|
|
153
|
-
start_date: "06-04-2024",
|
|
154
|
-
end_date: "06-06-2024",
|
|
155
|
-
parent: 3,
|
|
156
|
-
progress: 20,
|
|
157
|
-
},
|
|
158
|
-
{
|
|
159
|
-
id: 6,
|
|
160
|
-
text: "SubTask #6",
|
|
161
|
-
start_date: "06-06-2024",
|
|
162
|
-
end_date: "06-09-2024",
|
|
163
|
-
parent: 3,
|
|
164
|
-
progress: 10,
|
|
165
|
-
},
|
|
166
|
-
{
|
|
167
|
-
id: 7,
|
|
168
|
-
text: "SubTask #7",
|
|
169
|
-
start_date: "06-08-2024",
|
|
170
|
-
end_date: "06-11-2024",
|
|
171
|
-
parent: 3,
|
|
172
|
-
progress: 50,
|
|
173
|
-
},
|
|
174
|
-
{
|
|
175
|
-
id: 4,
|
|
176
|
-
text: "Task #4",
|
|
177
|
-
start_date: "06-13-2024",
|
|
178
|
-
end_date: "06-16-2024",
|
|
179
|
-
parent: 1,
|
|
180
|
-
progress: 90,
|
|
181
|
-
},
|
|
182
|
-
{ id: 8, text: "Project 2", parent: 0, progress: 80 },
|
|
183
|
-
{
|
|
184
|
-
id: 12,
|
|
185
|
-
text: "Task #12",
|
|
186
|
-
start_date: "06-06-2024",
|
|
187
|
-
end_date: "06-06-2024",
|
|
188
|
-
parent: 8,
|
|
189
|
-
progress: 50,
|
|
190
|
-
},
|
|
191
|
-
{
|
|
192
|
-
id: 25,
|
|
193
|
-
text: "Next Milestone",
|
|
194
|
-
start_date: "06-20-2024",
|
|
195
|
-
end_date: "06-20-2024",
|
|
196
|
-
parent: 8,
|
|
197
|
-
type: "milestone",
|
|
198
|
-
},
|
|
199
|
-
{
|
|
200
|
-
id: 13,
|
|
201
|
-
text: "Task #13",
|
|
202
|
-
start_date: "06-04-2024",
|
|
203
|
-
end_date: "06-07-2024",
|
|
204
|
-
parent: 8,
|
|
205
|
-
},
|
|
206
|
-
{
|
|
207
|
-
id: 14,
|
|
208
|
-
text: "Task #14",
|
|
209
|
-
start_date: "06-05-2024",
|
|
210
|
-
end_date: "06-09-2024",
|
|
211
|
-
parent: 8,
|
|
212
|
-
},
|
|
213
|
-
{
|
|
214
|
-
id: 15,
|
|
215
|
-
text: "Task #15",
|
|
216
|
-
start_date: "06-07-2024",
|
|
217
|
-
end_date: "06-08-2024",
|
|
218
|
-
parent: 8,
|
|
219
|
-
},
|
|
220
|
-
{ id: 9, text: "Project 3", parent: 0, progress: 10 },
|
|
221
|
-
{
|
|
222
|
-
id: 16,
|
|
223
|
-
text: "Task #16",
|
|
224
|
-
start_date: "06-05-2024",
|
|
225
|
-
end_date: "06-09-2024",
|
|
226
|
-
parent: 9,
|
|
227
|
-
},
|
|
228
|
-
{
|
|
229
|
-
id: 17,
|
|
230
|
-
text: "Task #17",
|
|
231
|
-
start_date: "06-06-2024",
|
|
232
|
-
end_date: "06-08-2024",
|
|
233
|
-
parent: 9,
|
|
234
|
-
},
|
|
235
|
-
{ id: 10, text: "Project 4", parent: 0, progress: 40 },
|
|
236
|
-
{
|
|
237
|
-
id: 18,
|
|
238
|
-
text: "Task #18",
|
|
239
|
-
start_date: "06-08-2024",
|
|
240
|
-
end_date: "06-16-2024",
|
|
241
|
-
parent: 10,
|
|
242
|
-
},
|
|
243
|
-
{
|
|
244
|
-
id: 19,
|
|
245
|
-
text: "Task #19",
|
|
246
|
-
start_date: "06-02-2024",
|
|
247
|
-
end_date: "06-09-2024",
|
|
248
|
-
parent: 10,
|
|
249
|
-
},
|
|
250
|
-
{
|
|
251
|
-
id: 20,
|
|
252
|
-
text: "Task #20",
|
|
253
|
-
start_date: "06-11-2024",
|
|
254
|
-
end_date: "06-13-2024",
|
|
255
|
-
parent: 10,
|
|
256
|
-
},
|
|
257
|
-
{ id: 11, text: "Project 5", parent: 0, progress: 100 },
|
|
258
|
-
{
|
|
259
|
-
id: 21,
|
|
260
|
-
text: "Task #21",
|
|
261
|
-
start_date: "06-04-2024",
|
|
262
|
-
end_date: "06-10-2024",
|
|
263
|
-
parent: 11,
|
|
264
|
-
},
|
|
265
|
-
{
|
|
266
|
-
id: 22,
|
|
267
|
-
text: "Task #22",
|
|
268
|
-
start_date: "06-06-2024",
|
|
269
|
-
end_date: "06-12-2024",
|
|
270
|
-
parent: 11,
|
|
271
|
-
},
|
|
272
|
-
{
|
|
273
|
-
id: 123,
|
|
274
|
-
text: "Task #123",
|
|
275
|
-
start_date: "06-03-2024",
|
|
276
|
-
end_date: "06-12-2024",
|
|
277
|
-
parent: 0,
|
|
278
|
-
},
|
|
279
|
-
];
|
|
280
|
-
|
|
281
|
-
// let parents = [1]//,8,9,10,11]
|
|
282
|
-
// for(let i = 0; i < parents.length; i++){
|
|
283
|
-
// for(let j = 0; j < 50; j++){
|
|
284
|
-
// let task = {
|
|
285
|
-
// id: `task-${parents[i]}-${j}`,
|
|
286
|
-
// text: "Test #Task",
|
|
287
|
-
// start_date: "03-09-2024",
|
|
288
|
-
// end_date: "03-09-2024",
|
|
289
|
-
// parent: parents[i],
|
|
290
|
-
// progress: 50,
|
|
291
|
-
// }
|
|
292
|
-
// data.push(task);
|
|
293
|
-
// }
|
|
294
|
-
// }
|
|
295
|
-
|
|
296
|
-
let element = document.getElementById("js-gantt");
|
|
297
|
-
let
|
|
298
|
-
window.
|
|
299
|
-
|
|
300
|
-
const textEditor = { type: "text", map_to: "text" };
|
|
301
|
-
const dateEditor = {
|
|
302
|
-
type: "date", map_to: "start_date", min: new Date(2018, 0, 1),
|
|
303
|
-
max: new Date(2019, 0, 1)
|
|
304
|
-
};
|
|
305
|
-
const numberEditor = { type: "number", map_to: "progress", min: 0, max: 100 };
|
|
306
|
-
const selectEditor = { type: "select", map_to: "priority", options: ["Low", "Medium", "High"] };
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
{
|
|
310
|
-
name: "text",
|
|
311
|
-
width: 245,
|
|
312
|
-
min_width: 80,
|
|
313
|
-
max_width: 300,
|
|
314
|
-
tree: true,
|
|
315
|
-
label: "Task Name",
|
|
316
|
-
resize: true,
|
|
317
|
-
template: (task) => {
|
|
318
|
-
return `<span>${task.text}</span>`;
|
|
319
|
-
},
|
|
320
|
-
editor: textEditor
|
|
321
|
-
},
|
|
322
|
-
{
|
|
323
|
-
name: "progress",
|
|
324
|
-
width: 245,
|
|
325
|
-
min_width: 80,
|
|
326
|
-
max_width: 300,
|
|
327
|
-
tree: false,
|
|
328
|
-
label: "Progress",
|
|
329
|
-
resize: true,
|
|
330
|
-
align: "center",
|
|
331
|
-
template: (task) => {
|
|
332
|
-
return `<span>${task.progress || 0}</span>`;
|
|
333
|
-
},
|
|
334
|
-
// editor: numberEditor
|
|
335
|
-
},
|
|
336
|
-
// {
|
|
337
|
-
// name: "start_date",
|
|
338
|
-
// width: 245,
|
|
339
|
-
// min_width: 80,
|
|
340
|
-
// max_width: 300,
|
|
341
|
-
// tree: false,
|
|
342
|
-
// label: "Start Date",
|
|
343
|
-
// resize: true,
|
|
344
|
-
// align: "center",
|
|
345
|
-
// template: (task) => {
|
|
346
|
-
// return `<span>${task.start_date || 0}</span>`;
|
|
347
|
-
// },
|
|
348
|
-
// editor: dateEditor
|
|
349
|
-
// },
|
|
350
|
-
// {
|
|
351
|
-
// name: "priority",
|
|
352
|
-
// width: 245,
|
|
353
|
-
// min_width: 80,
|
|
354
|
-
// max_width: 300,
|
|
355
|
-
// tree: false,
|
|
356
|
-
// label: "Priority",
|
|
357
|
-
// resize: true,
|
|
358
|
-
// align: "center",
|
|
359
|
-
// template: (task) => {
|
|
360
|
-
// return `<span>${task?.priority || ""}</span>`;
|
|
361
|
-
// },
|
|
362
|
-
// editor: selectEditor
|
|
363
|
-
// },
|
|
364
|
-
];
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
{
|
|
376
|
-
start_date: '06-20-2024',
|
|
377
|
-
css: "party",
|
|
378
|
-
text: "🎂 🎉",
|
|
379
|
-
title: "Ek aur Sal Barbad!"
|
|
380
|
-
}
|
|
381
|
-
];
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
//
|
|
386
|
-
|
|
387
|
-
// new feature of gantt -----
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
if (task.parent === 0) {
|
|
393
|
-
return false;
|
|
394
|
-
}
|
|
395
|
-
return true;
|
|
396
|
-
};
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
//
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
// 0 is finish_to_start
|
|
404
|
-
// 1 is start_to_start
|
|
405
|
-
// 2 is finish_to_finish
|
|
406
|
-
// 3 is start_to_finish
|
|
407
|
-
{ id: 1, source: 2, target: 23, type: 1 },
|
|
408
|
-
{ id: 2, source: 3, target: 6, type: 2 },
|
|
409
|
-
{ id: 3, source: 4, target: 23, type: 3 },
|
|
410
|
-
{ id: 4, source: 12, target: 15 },
|
|
411
|
-
];
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
{
|
|
416
|
-
unit: "week",
|
|
417
|
-
step: 1,
|
|
418
|
-
format: (t) => {
|
|
419
|
-
const { startDate: a, endDate: n, weekNum: i } = weekStartAndEnd(t);
|
|
420
|
-
return ` ${
|
|
421
|
-
"%j %M",
|
|
422
|
-
a
|
|
423
|
-
)} - ${
|
|
424
|
-
"%j %M",
|
|
425
|
-
n
|
|
426
|
-
)}, ${a.getFullYear()}`;
|
|
427
|
-
},
|
|
428
|
-
},
|
|
429
|
-
{ unit: "day", step: 1, format: "%d %D" },
|
|
430
|
-
];
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
// zoom config
|
|
435
|
-
|
|
436
|
-
levels: [
|
|
437
|
-
{
|
|
438
|
-
name: "hour",
|
|
439
|
-
scale_height: 27,
|
|
440
|
-
min_col_width: 550,
|
|
441
|
-
scales: [
|
|
442
|
-
{ unit: "day", step: 1, format: "%d %M" },
|
|
443
|
-
{ unit: "hour", step: 1, format: "%H" },
|
|
444
|
-
],
|
|
445
|
-
},
|
|
446
|
-
{
|
|
447
|
-
name: "day",
|
|
448
|
-
scale_height: 27,
|
|
449
|
-
min_col_width: 80,
|
|
450
|
-
scales: [
|
|
451
|
-
{ unit: "week", step: 1, format: "%W" },
|
|
452
|
-
{ unit: "day", step: 1, format: "%d %M" },
|
|
453
|
-
],
|
|
454
|
-
},
|
|
455
|
-
{
|
|
456
|
-
name: "week",
|
|
457
|
-
scale_height: 45,
|
|
458
|
-
min_col_width: 50,
|
|
459
|
-
scales: [
|
|
460
|
-
{ unit: "month", step: 1, format: "%M" },
|
|
461
|
-
{
|
|
462
|
-
unit: "week",
|
|
463
|
-
step: 1,
|
|
464
|
-
format: (t) => {
|
|
465
|
-
const {
|
|
466
|
-
startDate: a,
|
|
467
|
-
endDate: n,
|
|
468
|
-
weekNum: i,
|
|
469
|
-
} = weekStartAndEnd(t);
|
|
470
|
-
return ` ${
|
|
471
|
-
"%j %M",
|
|
472
|
-
a
|
|
473
|
-
)} - ${
|
|
474
|
-
"%j %M",
|
|
475
|
-
n
|
|
476
|
-
)}, ${a.getFullYear()}`;
|
|
477
|
-
},
|
|
478
|
-
},
|
|
479
|
-
],
|
|
480
|
-
},
|
|
481
|
-
{
|
|
482
|
-
name: "month",
|
|
483
|
-
scale_height: 30,
|
|
484
|
-
min_col_width: 120,
|
|
485
|
-
scales: [
|
|
486
|
-
{ unit: "year", step: 1, format: "%Y" },
|
|
487
|
-
{ unit: "month", step: 1, format: "%M" },
|
|
488
|
-
],
|
|
489
|
-
},
|
|
490
|
-
{
|
|
491
|
-
name: "quarter",
|
|
492
|
-
scale_height: 25,
|
|
493
|
-
min_col_width: 90,
|
|
494
|
-
scales: [
|
|
495
|
-
{ unit: "year", step: 1, format: "%Y" },
|
|
496
|
-
{ unit: "quarter", step: 1, format: "Q%q" },
|
|
497
|
-
{ unit: "month", format: "%M" },
|
|
498
|
-
],
|
|
499
|
-
},
|
|
500
|
-
{
|
|
501
|
-
name: "year",
|
|
502
|
-
scale_height: 30,
|
|
503
|
-
min_col_width: 30,
|
|
504
|
-
scales: [
|
|
505
|
-
{ unit: "year", step: 3, format: "2022 - 2024" },
|
|
506
|
-
{ unit: "year", step: 1, format: "%Y" },
|
|
507
|
-
],
|
|
508
|
-
},
|
|
509
|
-
],
|
|
510
|
-
};
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
// Gantt layout to implement columns in right side
|
|
519
|
-
//
|
|
520
|
-
// {
|
|
521
|
-
// name: "text",
|
|
522
|
-
// width: 245,
|
|
523
|
-
// min_width: 80,
|
|
524
|
-
// max_width: 120,
|
|
525
|
-
// tree: true,
|
|
526
|
-
// label: "Task Name",
|
|
527
|
-
// resize: true,
|
|
528
|
-
// template: (task) => {
|
|
529
|
-
// return `<span>${task.text}</span>`;
|
|
530
|
-
// },
|
|
531
|
-
// },
|
|
532
|
-
// {
|
|
533
|
-
// name: "text",
|
|
534
|
-
// width: 245,
|
|
535
|
-
// min_width: 80,
|
|
536
|
-
// max_width: 120,
|
|
537
|
-
// tree: false,
|
|
538
|
-
// align: "center",
|
|
539
|
-
// label: "Task Name",
|
|
540
|
-
// resize: true,
|
|
541
|
-
// template: (task) => {
|
|
542
|
-
// return `<span>${task.text}</span>`;
|
|
543
|
-
// },
|
|
544
|
-
// },
|
|
545
|
-
// ];
|
|
546
|
-
|
|
547
|
-
function weekStartAndEnd(t) {
|
|
548
|
-
const e = t.getDay();
|
|
549
|
-
let a, n;
|
|
550
|
-
0 === e
|
|
551
|
-
? ((a =
|
|
552
|
-
: ((a =
|
|
553
|
-
(n =
|
|
554
|
-
return {
|
|
555
|
-
startDate: a,
|
|
556
|
-
endDate: n,
|
|
557
|
-
weekNum:
|
|
558
|
-
};
|
|
559
|
-
}
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
return `<b>${task.parent === 0 ? "Project" : "Task"}:</b>
|
|
566
|
-
${task.text}
|
|
567
|
-
<br/><b>Start date:</b>
|
|
568
|
-
${
|
|
569
|
-
<br/><b>End date:</b>
|
|
570
|
-
${
|
|
571
|
-
<b>Duration:</b> ${task.duration} ${task.duration > 1 ? "Days" : "Day"
|
|
572
|
-
}`;
|
|
573
|
-
};
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
if (task.parent == 0 && task.type !== "milestone") {
|
|
577
|
-
return `Project : ${task.text}`;
|
|
578
|
-
} else if (task.type === "milestone") {
|
|
579
|
-
return task.text;
|
|
580
|
-
} else {
|
|
581
|
-
return `Task : ${task.text}`;
|
|
582
|
-
}
|
|
583
|
-
};
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
var name = task?.text?.trim().split(" ");
|
|
587
|
-
var firstname = name?.[0];
|
|
588
|
-
var lastname = name?.[1] ? name?.[1] : "";
|
|
589
|
-
var intials =
|
|
590
|
-
firstname?.charAt(0)?.toUpperCase() +
|
|
591
|
-
lastname?.charAt(0)?.toUpperCase();
|
|
592
|
-
return `<div></div>`;
|
|
593
|
-
};
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
if (task.parent != 0) {
|
|
597
|
-
var tracker_name = task.hasOwnProperty("tracker")
|
|
598
|
-
? task.tracker.name
|
|
599
|
-
: " ";
|
|
600
|
-
let issue_id = task.id;
|
|
601
|
-
return `<div class='gantt_file ${tracker_name}'><a class="link-issue ${tracker_name}" href='http://127.0.0.1:5500//issues/${issue_id}'>#${issue_id}</a></div>`;
|
|
602
|
-
}
|
|
603
|
-
};
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
if (task.parent == 0 || (task.children && task.children.length > 0)) {
|
|
607
|
-
// || task.children
|
|
608
|
-
return false;
|
|
609
|
-
}
|
|
610
|
-
return true;
|
|
611
|
-
};
|
|
612
|
-
|
|
613
|
-
// add custom classes
|
|
614
|
-
//
|
|
615
|
-
// return "my-header-class test"
|
|
616
|
-
// }
|
|
617
|
-
//
|
|
618
|
-
// console.log(start, end);
|
|
619
|
-
// return "my-grid-row-class test"
|
|
620
|
-
// }
|
|
621
|
-
|
|
622
|
-
if (task.parent == 0) {
|
|
623
|
-
return "parent-task test";
|
|
624
|
-
} else {
|
|
625
|
-
return "child-task test";
|
|
626
|
-
}
|
|
627
|
-
};
|
|
628
|
-
//
|
|
629
|
-
// return "my-task-row-class test"
|
|
630
|
-
// }
|
|
631
|
-
|
|
632
|
-
if (scaleIndex === 1) {
|
|
633
|
-
return "my-scale-class-2";
|
|
634
|
-
} else {
|
|
635
|
-
return "my-scale-class-1";
|
|
636
|
-
}
|
|
637
|
-
};
|
|
638
|
-
//
|
|
639
|
-
// return "my-grid-cell-class test"
|
|
640
|
-
// }
|
|
641
|
-
//
|
|
642
|
-
// return "my-task-cell-class Test "
|
|
643
|
-
// }
|
|
644
|
-
|
|
645
|
-
// add custom marker
|
|
646
|
-
|
|
647
|
-
start_date:
|
|
648
|
-
css: "tomorrow", //a CSS class applied to the marker
|
|
649
|
-
text: "Tomorrow", //the marker title
|
|
650
|
-
title:
|
|
651
|
-
"%d %F %y",
|
|
652
|
-
|
|
653
|
-
), // the marker's tooltip
|
|
654
|
-
});
|
|
655
|
-
|
|
656
|
-
//
|
|
657
|
-
// start_date:
|
|
658
|
-
// css: "yesterday", //a CSS class applied to the marker
|
|
659
|
-
// text: "Yesterday", //the marker title
|
|
660
|
-
// title:
|
|
661
|
-
// });
|
|
662
|
-
|
|
663
|
-
// render gantt
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
const jsGanttTheme = localStorage.getItem('
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
// console.log(
|
|
670
|
-
|
|
671
|
-
// to find task in gantt
|
|
672
|
-
// console.log(
|
|
673
|
-
|
|
674
|
-
// custom events
|
|
675
|
-
|
|
676
|
-
// console.log("onTaskDblClick: ", event);
|
|
677
|
-
});
|
|
678
|
-
let idCount = 0;
|
|
679
|
-
|
|
680
|
-
// console.log("selectAreaOnDrag: ", event.task);
|
|
681
|
-
|
|
682
|
-
id: "Added" + idCount,
|
|
683
|
-
start_date: new Date(event.task.startDate),
|
|
684
|
-
end_date: new Date(event.task.endDate),
|
|
685
|
-
parent: event.task.parent,
|
|
686
|
-
text: "Task Added",
|
|
687
|
-
});
|
|
688
|
-
|
|
689
|
-
idCount += 1;
|
|
690
|
-
});
|
|
691
|
-
|
|
692
|
-
// console.log("onLinkDblClick: ", event);
|
|
693
|
-
//
|
|
694
|
-
});
|
|
695
|
-
|
|
696
|
-
// console.log("onBeforeLinkAdd: ", event);
|
|
697
|
-
});
|
|
698
|
-
|
|
699
|
-
// console.log("onLinkAdd: ", event);
|
|
700
|
-
});
|
|
701
|
-
|
|
702
|
-
// console.log("onDeleteLink: ", event);
|
|
703
|
-
});
|
|
704
|
-
|
|
705
|
-
// console.log("onBeforeTaskDrag: ", event);
|
|
706
|
-
if (event.task.children.length !== 0) {
|
|
707
|
-
return false;
|
|
708
|
-
} else {
|
|
709
|
-
return true;
|
|
710
|
-
}
|
|
711
|
-
});
|
|
712
|
-
|
|
713
|
-
// console.log("onTaskDrag: ", event);
|
|
714
|
-
});
|
|
715
|
-
|
|
716
|
-
console.log("onAfterTaskDrag: ", event);
|
|
717
|
-
console.log("onAfterTaskDrag??: ",
|
|
718
|
-
//
|
|
719
|
-
});
|
|
720
|
-
|
|
721
|
-
console.log("onBeforeTaskDrop: ", event);
|
|
722
|
-
if (event.parentTask?.id == 12) {
|
|
723
|
-
return false;
|
|
724
|
-
}
|
|
725
|
-
});
|
|
726
|
-
|
|
727
|
-
// console.log("onTaskToggle: ", event);
|
|
728
|
-
});
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
console.log("onTaskDelete: ", event);
|
|
732
|
-
});
|
|
733
|
-
|
|
734
|
-
// console.log("onAfterTaskUpdate: ", event);
|
|
735
|
-
});
|
|
736
|
-
|
|
737
|
-
// console.log("onCellClick: ", event);
|
|
738
|
-
});
|
|
739
|
-
|
|
740
|
-
// console.log("onRequestFullScreen: ", event);
|
|
741
|
-
});
|
|
742
|
-
|
|
743
|
-
// console.log("onExitFullScreen: ", event);
|
|
744
|
-
});
|
|
745
|
-
//
|
|
746
|
-
// console.log("onScroll: ", event);
|
|
747
|
-
// });
|
|
748
|
-
//
|
|
749
|
-
// console.log("onResize: ", event);
|
|
750
|
-
// });
|
|
751
|
-
|
|
752
|
-
// console.log("onAfterProgressDrag: ", event);
|
|
753
|
-
});
|
|
754
|
-
|
|
755
|
-
// console.log("onBeforeProgressDrag: ", event);
|
|
756
|
-
// if(event.task.parent === 0){
|
|
757
|
-
// return false;
|
|
758
|
-
// }else{
|
|
759
|
-
// return true;
|
|
760
|
-
// }
|
|
761
|
-
});
|
|
762
|
-
|
|
763
|
-
// console.log("onAutoScheduling: ", event);
|
|
764
|
-
});
|
|
765
|
-
|
|
766
|
-
// console.log("onColorChange: ", event);
|
|
767
|
-
});
|
|
768
|
-
|
|
769
|
-
// console.log("onBeforeTaskDblClick: ", event);
|
|
770
|
-
// if(event.task.id === 3){
|
|
771
|
-
// return false;
|
|
772
|
-
// }
|
|
773
|
-
});
|
|
774
|
-
|
|
775
|
-
// console.log("onBeforeSave: ", event);
|
|
776
|
-
});
|
|
777
|
-
|
|
778
|
-
// console.log("onSave: ", event);
|
|
779
|
-
});
|
|
780
|
-
|
|
781
|
-
let fullscreen = false;
|
|
782
|
-
function changeScreen() {
|
|
783
|
-
if (fullscreen === false) {
|
|
784
|
-
|
|
785
|
-
//
|
|
786
|
-
} else {
|
|
787
|
-
|
|
788
|
-
}
|
|
789
|
-
}
|
|
790
|
-
|
|
791
|
-
function changeZoom(e) {
|
|
792
|
-
|
|
793
|
-
if (e.target.value === "month" || e.target.value === "quarter") {
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
} else if (e.target.value === "year") {
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
} else {
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
}
|
|
803
|
-
|
|
804
|
-
}
|
|
805
|
-
|
|
806
|
-
function changeLang(e) {
|
|
807
|
-
|
|
808
|
-
}
|
|
809
|
-
|
|
810
|
-
function changeCollapse(e) {
|
|
811
|
-
if (e.target.checked === true) {
|
|
812
|
-
|
|
813
|
-
} else {
|
|
814
|
-
|
|
815
|
-
}
|
|
816
|
-
}
|
|
817
|
-
|
|
818
|
-
function changeToday(e) {
|
|
819
|
-
if (event.target.checked === true) {
|
|
820
|
-
|
|
821
|
-
} else {
|
|
822
|
-
|
|
823
|
-
}
|
|
824
|
-
}
|
|
825
|
-
|
|
826
|
-
function exportChange(e) {
|
|
827
|
-
let stylesheet = [
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
function
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
//
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
//
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
//
|
|
885
|
-
//
|
|
886
|
-
|
|
887
|
-
//
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
root.style.setProperty("--
|
|
905
|
-
root.style.setProperty("--
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
root.style.setProperty("--
|
|
914
|
-
root.style.setProperty("--
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
console.log(
|
|
973
|
-
},
|
|
974
|
-
|
|
975
|
-
console.log("
|
|
976
|
-
},
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
</body>
|
|
1111
|
-
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>javascriptgantt</title>
|
|
8
|
+
<link rel="stylesheet" href="./style.css" />
|
|
9
|
+
<link rel="stylesheet" href="src/gantt.css" />
|
|
10
|
+
<link rel="stylesheet" href="src/assets/zt-tour/zt-tour.css" />
|
|
11
|
+
<!-- <link rel="stylesheet" href="./theme/dark.css" /> -->
|
|
12
|
+
<link rel="shortcut icon" href="src/assets/images/jsGanttLogo.png" type="image/x-icon" />
|
|
13
|
+
<script src="src/gantt.js"></script>
|
|
14
|
+
</head>
|
|
15
|
+
|
|
16
|
+
<body>
|
|
17
|
+
<div class="js-gantt-d-flex action-container">
|
|
18
|
+
<div class="collapse-container">
|
|
19
|
+
<span>Collapse</span>
|
|
20
|
+
<input type="checkbox" id="collapse-switch" onchange="changeCollapse(event)" />
|
|
21
|
+
<label for="collapse-switch">collapse</label>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<div class="collapse-container today-container">
|
|
25
|
+
<span>Today</span>
|
|
26
|
+
<input type="checkbox" id="today-switch" checked="true" onchange="changeToday(event)" />
|
|
27
|
+
<label for="today-switch">Today</label>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="export-data">
|
|
30
|
+
<select class="export" id="export" placeholder="Export" onchange="exportChange(event)">
|
|
31
|
+
<option value="" disabled="" selected="">Export</option>
|
|
32
|
+
<option value="png">Export To PNG</option>
|
|
33
|
+
<option value="pdf">Export To PDF</option>
|
|
34
|
+
<option value="excel">Export To Excel</option>
|
|
35
|
+
</select>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="fullscreen">
|
|
38
|
+
<button class="btn" onclick="changeScreen()">FullScreen</button>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="auto-scheduling">
|
|
41
|
+
<!-- <span class="coming-soon">coming soon</span> -->
|
|
42
|
+
<button class="btn" onclick="autoScheduling()">Auto Scheduling</button>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="zoom">
|
|
45
|
+
<select class="scale-zoom" id="scale_zoom" placeholder="Zoom to" onchange="changeZoom(event)">
|
|
46
|
+
<option value="" disabled="">Zoom to:</option>
|
|
47
|
+
<option value="year">Years</option>
|
|
48
|
+
<option value="quarter">Quarters</option>
|
|
49
|
+
<option value="month">Months</option>
|
|
50
|
+
<option value="week">Weeks</option>
|
|
51
|
+
<option value="day" selected="day">Days</option>
|
|
52
|
+
<option value="hour">Hour</option>
|
|
53
|
+
</select>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="Language">
|
|
56
|
+
<select class="lang" id="lang" placeholder="Select Language" onchange="changeLang(event)">
|
|
57
|
+
<option value="" disabled="" selected="">Select Language:</option>
|
|
58
|
+
<option value="ar">Arabic</option>
|
|
59
|
+
<option value="be">Belarusian</option>
|
|
60
|
+
<option value="en" selected="en">English</option>
|
|
61
|
+
<option value="ca">Catalan</option>
|
|
62
|
+
<option value="cn">Chinese</option>
|
|
63
|
+
<option value="hr">Croatian</option>
|
|
64
|
+
<option value="cs">Czech</option>
|
|
65
|
+
<option value="da">Danish</option>
|
|
66
|
+
<option value="nl">Dutch</option>
|
|
67
|
+
<option value="fi">Finnish</option>
|
|
68
|
+
<option value="fr">French</option>
|
|
69
|
+
<option value="de">German</option>
|
|
70
|
+
<option value="el">Greek</option>
|
|
71
|
+
<option value="he">Hebrew</option>
|
|
72
|
+
<option value="hi">Hindi (India)</option>
|
|
73
|
+
<option value="hu">Hungarian</option>
|
|
74
|
+
<option value="id">Indonesian</option>
|
|
75
|
+
<option value="it">Italian</option>
|
|
76
|
+
<option value="ja">Japanese</option>
|
|
77
|
+
<option value="kr">Korean</option>
|
|
78
|
+
<option value="no">Norwegian</option>
|
|
79
|
+
<option value="fa">Persian</option>
|
|
80
|
+
<option value="pl">Polish</option>
|
|
81
|
+
<option value="pt">Portuguese</option>
|
|
82
|
+
<option value="ro">Romanian</option>
|
|
83
|
+
<option value="ro">Russian</option>
|
|
84
|
+
<option value="sk">Slovak</option>
|
|
85
|
+
<option value="si">Slovenian</option>
|
|
86
|
+
<option value="es">Spanish</option>
|
|
87
|
+
<option value="sv">Swedish</option>
|
|
88
|
+
<option value="tr">Turkish</option>
|
|
89
|
+
<option value="ua">Ukrainian</option>
|
|
90
|
+
</select>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<div class="dark-mode">
|
|
94
|
+
<span>Dark Mode</span>
|
|
95
|
+
<input type="checkbox" id="toggle" onchange="changeTheme(event.target.checked)" class="toggle--checkbox" />
|
|
96
|
+
<label for="toggle" class="toggle-theme"> </label>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="fullscreen">
|
|
99
|
+
<button class="btn" style="margin-left: 10px" onclick="startTour()">
|
|
100
|
+
Start Tour
|
|
101
|
+
</button>
|
|
102
|
+
<svg class="hint-icon" width="18px" height="18px" style="margin-bottom: -4px;" viewBox="0 0 1024 1024"
|
|
103
|
+
xmlns="http://www.w3.org/2000/svg" fill="#000000">
|
|
104
|
+
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
105
|
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
|
106
|
+
<g id="SVGRepo_iconCarrier">
|
|
107
|
+
<path fill="#55A5FF"
|
|
108
|
+
d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm23.744 191.488c-52.096 0-92.928 14.784-123.2 44.352-30.976 29.568-45.76 70.4-45.76 122.496h80.256c0-29.568 5.632-52.8 17.6-68.992 13.376-19.712 35.2-28.864 66.176-28.864 23.936 0 42.944 6.336 56.32 19.712 12.672 13.376 19.712 31.68 19.712 54.912 0 17.6-6.336 34.496-19.008 49.984l-8.448 9.856c-45.76 40.832-73.216 70.4-82.368 89.408-9.856 19.008-14.08 42.24-14.08 68.992v9.856h80.96v-9.856c0-16.896 3.52-31.68 10.56-45.76 6.336-12.672 15.488-24.64 28.16-35.2 33.792-29.568 54.208-48.576 60.544-55.616 16.896-22.528 26.048-51.392 26.048-86.592 0-42.944-14.08-76.736-42.24-101.376-28.16-25.344-65.472-37.312-111.232-37.312zm-12.672 406.208a54.272 54.272 0 0 0-38.72 14.784 49.408 49.408 0 0 0-15.488 38.016c0 15.488 4.928 28.16 15.488 38.016A54.848 54.848 0 0 0 523.072 768c15.488 0 28.16-4.928 38.72-14.784a51.52 51.52 0 0 0 16.192-38.72 51.968 51.968 0 0 0-15.488-38.016 55.936 55.936 0 0 0-39.424-14.784z">
|
|
109
|
+
</path>
|
|
110
|
+
</g>
|
|
111
|
+
</svg>
|
|
112
|
+
</div>
|
|
113
|
+
<!-- <button onclick="javascriptgantt.destroy()">destroy</button>
|
|
114
|
+
<button onclick="javascriptgantt.render()">render</button> -->
|
|
115
|
+
<!-- <button onclick="addCol()">Add Column</button>
|
|
116
|
+
<button onclick="removeCol()">Remove Column</button> -->
|
|
117
|
+
<input type="search" placeholder="Search Task" id="gantt-search" name="gantt-search" class="gantt-search"
|
|
118
|
+
oninput="searchTask(event)" />
|
|
119
|
+
</div>
|
|
120
|
+
<div id="js-gantt"></div>
|
|
121
|
+
</div>
|
|
122
|
+
<script src="src/assets/zt-tour/zt-tour.js"></script>
|
|
123
|
+
<script>
|
|
124
|
+
let data = [
|
|
125
|
+
{ id: 1, text: "Project 1", parent: 0, progress: 30 },
|
|
126
|
+
{
|
|
127
|
+
id: 2,
|
|
128
|
+
text: "Task #2",
|
|
129
|
+
start_date: "06-05-2024",
|
|
130
|
+
end_date: "06-05-2024",
|
|
131
|
+
parent: 1,
|
|
132
|
+
progress: 50,
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
id: 23,
|
|
136
|
+
text: "Final Milestone",
|
|
137
|
+
start_date: "06-17-2024",
|
|
138
|
+
end_date: "06-18-2024",
|
|
139
|
+
parent: 1,
|
|
140
|
+
type: "milestone",
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
id: 3,
|
|
144
|
+
text: "Task #3",
|
|
145
|
+
start_date: "06-06-2024",
|
|
146
|
+
end_date: "06-07-2024",
|
|
147
|
+
parent: 1,
|
|
148
|
+
progress: 60,
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
id: 5,
|
|
152
|
+
text: "SubTask #5",
|
|
153
|
+
start_date: "06-04-2024",
|
|
154
|
+
end_date: "06-06-2024",
|
|
155
|
+
parent: 3,
|
|
156
|
+
progress: 20,
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
id: 6,
|
|
160
|
+
text: "SubTask #6",
|
|
161
|
+
start_date: "06-06-2024",
|
|
162
|
+
end_date: "06-09-2024",
|
|
163
|
+
parent: 3,
|
|
164
|
+
progress: 10,
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
id: 7,
|
|
168
|
+
text: "SubTask #7",
|
|
169
|
+
start_date: "06-08-2024",
|
|
170
|
+
end_date: "06-11-2024",
|
|
171
|
+
parent: 3,
|
|
172
|
+
progress: 50,
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
id: 4,
|
|
176
|
+
text: "Task #4",
|
|
177
|
+
start_date: "06-13-2024",
|
|
178
|
+
end_date: "06-16-2024",
|
|
179
|
+
parent: 1,
|
|
180
|
+
progress: 90,
|
|
181
|
+
},
|
|
182
|
+
{ id: 8, text: "Project 2", parent: 0, progress: 80 },
|
|
183
|
+
{
|
|
184
|
+
id: 12,
|
|
185
|
+
text: "Task #12",
|
|
186
|
+
start_date: "06-06-2024",
|
|
187
|
+
end_date: "06-06-2024",
|
|
188
|
+
parent: 8,
|
|
189
|
+
progress: 50,
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
id: 25,
|
|
193
|
+
text: "Next Milestone",
|
|
194
|
+
start_date: "06-20-2024",
|
|
195
|
+
end_date: "06-20-2024",
|
|
196
|
+
parent: 8,
|
|
197
|
+
type: "milestone",
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
id: 13,
|
|
201
|
+
text: "Task #13",
|
|
202
|
+
start_date: "06-04-2024",
|
|
203
|
+
end_date: "06-07-2024",
|
|
204
|
+
parent: 8,
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
id: 14,
|
|
208
|
+
text: "Task #14",
|
|
209
|
+
start_date: "06-05-2024",
|
|
210
|
+
end_date: "06-09-2024",
|
|
211
|
+
parent: 8,
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
id: 15,
|
|
215
|
+
text: "Task #15",
|
|
216
|
+
start_date: "06-07-2024",
|
|
217
|
+
end_date: "06-08-2024",
|
|
218
|
+
parent: 8,
|
|
219
|
+
},
|
|
220
|
+
{ id: 9, text: "Project 3", parent: 0, progress: 10 },
|
|
221
|
+
{
|
|
222
|
+
id: 16,
|
|
223
|
+
text: "Task #16",
|
|
224
|
+
start_date: "06-05-2024",
|
|
225
|
+
end_date: "06-09-2024",
|
|
226
|
+
parent: 9,
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
id: 17,
|
|
230
|
+
text: "Task #17",
|
|
231
|
+
start_date: "06-06-2024",
|
|
232
|
+
end_date: "06-08-2024",
|
|
233
|
+
parent: 9,
|
|
234
|
+
},
|
|
235
|
+
{ id: 10, text: "Project 4", parent: 0, progress: 40 },
|
|
236
|
+
{
|
|
237
|
+
id: 18,
|
|
238
|
+
text: "Task #18",
|
|
239
|
+
start_date: "06-08-2024",
|
|
240
|
+
end_date: "06-16-2024",
|
|
241
|
+
parent: 10,
|
|
242
|
+
},
|
|
243
|
+
{
|
|
244
|
+
id: 19,
|
|
245
|
+
text: "Task #19",
|
|
246
|
+
start_date: "06-02-2024",
|
|
247
|
+
end_date: "06-09-2024",
|
|
248
|
+
parent: 10,
|
|
249
|
+
},
|
|
250
|
+
{
|
|
251
|
+
id: 20,
|
|
252
|
+
text: "Task #20",
|
|
253
|
+
start_date: "06-11-2024",
|
|
254
|
+
end_date: "06-13-2024",
|
|
255
|
+
parent: 10,
|
|
256
|
+
},
|
|
257
|
+
{ id: 11, text: "Project 5", parent: 0, progress: 100 },
|
|
258
|
+
{
|
|
259
|
+
id: 21,
|
|
260
|
+
text: "Task #21",
|
|
261
|
+
start_date: "06-04-2024",
|
|
262
|
+
end_date: "06-10-2024",
|
|
263
|
+
parent: 11,
|
|
264
|
+
},
|
|
265
|
+
{
|
|
266
|
+
id: 22,
|
|
267
|
+
text: "Task #22",
|
|
268
|
+
start_date: "06-06-2024",
|
|
269
|
+
end_date: "06-12-2024",
|
|
270
|
+
parent: 11,
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
id: 123,
|
|
274
|
+
text: "Task #123",
|
|
275
|
+
start_date: "06-03-2024",
|
|
276
|
+
end_date: "06-12-2024",
|
|
277
|
+
parent: 0,
|
|
278
|
+
},
|
|
279
|
+
];
|
|
280
|
+
|
|
281
|
+
// let parents = [1]//,8,9,10,11]
|
|
282
|
+
// for(let i = 0; i < parents.length; i++){
|
|
283
|
+
// for(let j = 0; j < 50; j++){
|
|
284
|
+
// let task = {
|
|
285
|
+
// id: `task-${parents[i]}-${j}`,
|
|
286
|
+
// text: "Test #Task",
|
|
287
|
+
// start_date: "03-09-2024",
|
|
288
|
+
// end_date: "03-09-2024",
|
|
289
|
+
// parent: parents[i],
|
|
290
|
+
// progress: 50,
|
|
291
|
+
// }
|
|
292
|
+
// data.push(task);
|
|
293
|
+
// }
|
|
294
|
+
// }
|
|
295
|
+
|
|
296
|
+
let element = document.getElementById("js-gantt");
|
|
297
|
+
let javascriptGantt = new javascriptgantt(element);
|
|
298
|
+
window.javascriptgantt = javascriptGantt;
|
|
299
|
+
|
|
300
|
+
const textEditor = { type: "text", map_to: "text" };
|
|
301
|
+
const dateEditor = {
|
|
302
|
+
type: "date", map_to: "start_date", min: new Date(2018, 0, 1),
|
|
303
|
+
max: new Date(2019, 0, 1)
|
|
304
|
+
};
|
|
305
|
+
const numberEditor = { type: "number", map_to: "progress", min: 0, max: 100 };
|
|
306
|
+
const selectEditor = { type: "select", map_to: "priority", options: ["Low", "Medium", "High"] };
|
|
307
|
+
|
|
308
|
+
javascriptGantt.options.columns = [
|
|
309
|
+
{
|
|
310
|
+
name: "text",
|
|
311
|
+
width: 245,
|
|
312
|
+
min_width: 80,
|
|
313
|
+
max_width: 300,
|
|
314
|
+
tree: true,
|
|
315
|
+
label: "Task Name",
|
|
316
|
+
resize: true,
|
|
317
|
+
template: (task) => {
|
|
318
|
+
return `<span>${task.text}</span>`;
|
|
319
|
+
},
|
|
320
|
+
editor: textEditor
|
|
321
|
+
},
|
|
322
|
+
{
|
|
323
|
+
name: "progress",
|
|
324
|
+
width: 245,
|
|
325
|
+
min_width: 80,
|
|
326
|
+
max_width: 300,
|
|
327
|
+
tree: false,
|
|
328
|
+
label: "Progress",
|
|
329
|
+
resize: true,
|
|
330
|
+
align: "center",
|
|
331
|
+
template: (task) => {
|
|
332
|
+
return `<span>${task.progress || 0}</span>`;
|
|
333
|
+
},
|
|
334
|
+
// editor: numberEditor
|
|
335
|
+
},
|
|
336
|
+
// {
|
|
337
|
+
// name: "start_date",
|
|
338
|
+
// width: 245,
|
|
339
|
+
// min_width: 80,
|
|
340
|
+
// max_width: 300,
|
|
341
|
+
// tree: false,
|
|
342
|
+
// label: "Start Date",
|
|
343
|
+
// resize: true,
|
|
344
|
+
// align: "center",
|
|
345
|
+
// template: (task) => {
|
|
346
|
+
// return `<span>${task.start_date || 0}</span>`;
|
|
347
|
+
// },
|
|
348
|
+
// editor: dateEditor
|
|
349
|
+
// },
|
|
350
|
+
// {
|
|
351
|
+
// name: "priority",
|
|
352
|
+
// width: 245,
|
|
353
|
+
// min_width: 80,
|
|
354
|
+
// max_width: 300,
|
|
355
|
+
// tree: false,
|
|
356
|
+
// label: "Priority",
|
|
357
|
+
// resize: true,
|
|
358
|
+
// align: "center",
|
|
359
|
+
// template: (task) => {
|
|
360
|
+
// return `<span>${task?.priority || ""}</span>`;
|
|
361
|
+
// },
|
|
362
|
+
// editor: selectEditor
|
|
363
|
+
// },
|
|
364
|
+
];
|
|
365
|
+
|
|
366
|
+
javascriptGantt.options.date_format = "%m-%d-%Y";
|
|
367
|
+
javascriptGantt.options.localLang = "en";
|
|
368
|
+
javascriptGantt.options.data = data;
|
|
369
|
+
javascriptGantt.options.collapse = false;
|
|
370
|
+
javascriptGantt.options.weekends = ["Sat", "Sun"];
|
|
371
|
+
javascriptGantt.options.fullWeek = true;
|
|
372
|
+
javascriptGantt.options.todayMarker = true;
|
|
373
|
+
javascriptGantt.options.dropArea = true;
|
|
374
|
+
javascriptGantt.options.customMarker = [
|
|
375
|
+
{
|
|
376
|
+
start_date: '06-20-2024',
|
|
377
|
+
css: "party",
|
|
378
|
+
text: "🎂 🎉",
|
|
379
|
+
title: "Ek aur Sal Barbad!"
|
|
380
|
+
}
|
|
381
|
+
];
|
|
382
|
+
javascriptGantt.options.updateLinkOnDrag = true;
|
|
383
|
+
javascriptGantt.options.splitTask = false;
|
|
384
|
+
javascriptGantt.options.sort = true;
|
|
385
|
+
// javascriptgantt.templates.showLightBox = false;
|
|
386
|
+
|
|
387
|
+
// new feature of gantt -----
|
|
388
|
+
javascriptGantt.options.mouseScroll = true; // default is false
|
|
389
|
+
javascriptGantt.options.ctrlKeyRequiredForMouseScroll = true; // default is true
|
|
390
|
+
|
|
391
|
+
javascriptGantt.options.addLinks = (task) => {
|
|
392
|
+
if (task.parent === 0) {
|
|
393
|
+
return false;
|
|
394
|
+
}
|
|
395
|
+
return true;
|
|
396
|
+
};
|
|
397
|
+
|
|
398
|
+
javascriptGantt.options.exportApi = "";
|
|
399
|
+
// javascriptgantt.options.exportApi = "http://192.168.0.155:8300/";
|
|
400
|
+
javascriptGantt.options.taskColor = true;
|
|
401
|
+
javascriptGantt.options.taskOpacity = 0.7;
|
|
402
|
+
javascriptGantt.options.links = [
|
|
403
|
+
// 0 is finish_to_start
|
|
404
|
+
// 1 is start_to_start
|
|
405
|
+
// 2 is finish_to_finish
|
|
406
|
+
// 3 is start_to_finish
|
|
407
|
+
{ id: 1, source: 2, target: 23, type: 1 },
|
|
408
|
+
{ id: 2, source: 3, target: 6, type: 2 },
|
|
409
|
+
{ id: 3, source: 4, target: 23, type: 3 },
|
|
410
|
+
{ id: 4, source: 12, target: 15 },
|
|
411
|
+
];
|
|
412
|
+
javascriptGantt.options.weekStart = 1; // set the start of the week
|
|
413
|
+
javascriptGantt.options.sidebarWidth = 300;
|
|
414
|
+
javascriptGantt.options.scales = [
|
|
415
|
+
{
|
|
416
|
+
unit: "week",
|
|
417
|
+
step: 1,
|
|
418
|
+
format: (t) => {
|
|
419
|
+
const { startDate: a, endDate: n, weekNum: i } = weekStartAndEnd(t);
|
|
420
|
+
return ` ${javascriptGantt.formatDateToString(
|
|
421
|
+
"%j %M",
|
|
422
|
+
a
|
|
423
|
+
)} - ${javascriptGantt.formatDateToString(
|
|
424
|
+
"%j %M",
|
|
425
|
+
n
|
|
426
|
+
)}, ${a.getFullYear()}`;
|
|
427
|
+
},
|
|
428
|
+
},
|
|
429
|
+
{ unit: "day", step: 1, format: "%d %D" },
|
|
430
|
+
];
|
|
431
|
+
|
|
432
|
+
javascriptGantt.options.zoomLevel = "day";
|
|
433
|
+
|
|
434
|
+
// zoom config
|
|
435
|
+
javascriptGantt.options.zoomConfig = {
|
|
436
|
+
levels: [
|
|
437
|
+
{
|
|
438
|
+
name: "hour",
|
|
439
|
+
scale_height: 27,
|
|
440
|
+
min_col_width: 550,
|
|
441
|
+
scales: [
|
|
442
|
+
{ unit: "day", step: 1, format: "%d %M" },
|
|
443
|
+
{ unit: "hour", step: 1, format: "%H" },
|
|
444
|
+
],
|
|
445
|
+
},
|
|
446
|
+
{
|
|
447
|
+
name: "day",
|
|
448
|
+
scale_height: 27,
|
|
449
|
+
min_col_width: 80,
|
|
450
|
+
scales: [
|
|
451
|
+
{ unit: "week", step: 1, format: "%W" },
|
|
452
|
+
{ unit: "day", step: 1, format: "%d %M" },
|
|
453
|
+
],
|
|
454
|
+
},
|
|
455
|
+
{
|
|
456
|
+
name: "week",
|
|
457
|
+
scale_height: 45,
|
|
458
|
+
min_col_width: 50,
|
|
459
|
+
scales: [
|
|
460
|
+
{ unit: "month", step: 1, format: "%M" },
|
|
461
|
+
{
|
|
462
|
+
unit: "week",
|
|
463
|
+
step: 1,
|
|
464
|
+
format: (t) => {
|
|
465
|
+
const {
|
|
466
|
+
startDate: a,
|
|
467
|
+
endDate: n,
|
|
468
|
+
weekNum: i,
|
|
469
|
+
} = weekStartAndEnd(t);
|
|
470
|
+
return ` ${javascriptGantt.formatDateToString(
|
|
471
|
+
"%j %M",
|
|
472
|
+
a
|
|
473
|
+
)} - ${javascriptGantt.formatDateToString(
|
|
474
|
+
"%j %M",
|
|
475
|
+
n
|
|
476
|
+
)}, ${a.getFullYear()}`;
|
|
477
|
+
},
|
|
478
|
+
},
|
|
479
|
+
],
|
|
480
|
+
},
|
|
481
|
+
{
|
|
482
|
+
name: "month",
|
|
483
|
+
scale_height: 30,
|
|
484
|
+
min_col_width: 120,
|
|
485
|
+
scales: [
|
|
486
|
+
{ unit: "year", step: 1, format: "%Y" },
|
|
487
|
+
{ unit: "month", step: 1, format: "%M" },
|
|
488
|
+
],
|
|
489
|
+
},
|
|
490
|
+
{
|
|
491
|
+
name: "quarter",
|
|
492
|
+
scale_height: 25,
|
|
493
|
+
min_col_width: 90,
|
|
494
|
+
scales: [
|
|
495
|
+
{ unit: "year", step: 1, format: "%Y" },
|
|
496
|
+
{ unit: "quarter", step: 1, format: "Q%q" },
|
|
497
|
+
{ unit: "month", format: "%M" },
|
|
498
|
+
],
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
name: "year",
|
|
502
|
+
scale_height: 30,
|
|
503
|
+
min_col_width: 30,
|
|
504
|
+
scales: [
|
|
505
|
+
{ unit: "year", step: 3, format: "2022 - 2024" },
|
|
506
|
+
{ unit: "year", step: 1, format: "%Y" },
|
|
507
|
+
],
|
|
508
|
+
},
|
|
509
|
+
],
|
|
510
|
+
};
|
|
511
|
+
|
|
512
|
+
javascriptGantt.options.scale_height = 30;
|
|
513
|
+
javascriptGantt.options.row_height = 24;
|
|
514
|
+
javascriptGantt.options.minColWidth = 80;
|
|
515
|
+
javascriptGantt.options.selectAreaOnDrag = true;
|
|
516
|
+
javascriptGantt.options.taskProgress = true;
|
|
517
|
+
|
|
518
|
+
// Gantt layout to implement columns in right side
|
|
519
|
+
// javascriptgantt.options.rightGrid = [
|
|
520
|
+
// {
|
|
521
|
+
// name: "text",
|
|
522
|
+
// width: 245,
|
|
523
|
+
// min_width: 80,
|
|
524
|
+
// max_width: 120,
|
|
525
|
+
// tree: true,
|
|
526
|
+
// label: "Task Name",
|
|
527
|
+
// resize: true,
|
|
528
|
+
// template: (task) => {
|
|
529
|
+
// return `<span>${task.text}</span>`;
|
|
530
|
+
// },
|
|
531
|
+
// },
|
|
532
|
+
// {
|
|
533
|
+
// name: "text",
|
|
534
|
+
// width: 245,
|
|
535
|
+
// min_width: 80,
|
|
536
|
+
// max_width: 120,
|
|
537
|
+
// tree: false,
|
|
538
|
+
// align: "center",
|
|
539
|
+
// label: "Task Name",
|
|
540
|
+
// resize: true,
|
|
541
|
+
// template: (task) => {
|
|
542
|
+
// return `<span>${task.text}</span>`;
|
|
543
|
+
// },
|
|
544
|
+
// },
|
|
545
|
+
// ];
|
|
546
|
+
|
|
547
|
+
function weekStartAndEnd(t) {
|
|
548
|
+
const e = t.getDay();
|
|
549
|
+
let a, n;
|
|
550
|
+
0 === e
|
|
551
|
+
? ((a = javascriptGantt.add(t, -6, "day")), (n = t))
|
|
552
|
+
: ((a = javascriptGantt.add(t, -1 * e + 1, "day")),
|
|
553
|
+
(n = javascriptGantt.add(t, 7 - e, "day")));
|
|
554
|
+
return {
|
|
555
|
+
startDate: a,
|
|
556
|
+
endDate: n,
|
|
557
|
+
weekNum: javascriptGantt.formatDateToString("%W", t),
|
|
558
|
+
};
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
javascriptGantt.options.startDate = "2024-06-01T11:46:17.775Z";
|
|
562
|
+
javascriptGantt.options.endDate = "2024-10-30T11:46:17.775Z";
|
|
563
|
+
|
|
564
|
+
javascriptGantt.templates.tooltip_text = function (start, end, task) {
|
|
565
|
+
return `<b>${task.parent === 0 ? "Project" : "Task"}:</b>
|
|
566
|
+
${task.text}
|
|
567
|
+
<br/><b>Start date:</b>
|
|
568
|
+
${javascriptGantt.formatDateToString("%d-%m-%y %H:%i", start)}
|
|
569
|
+
<br/><b>End date:</b>
|
|
570
|
+
${javascriptGantt.formatDateToString("%d-%m-%y %H:%i", end)}<br/>
|
|
571
|
+
<b>Duration:</b> ${task.duration} ${task.duration > 1 ? "Days" : "Day"
|
|
572
|
+
}`;
|
|
573
|
+
};
|
|
574
|
+
|
|
575
|
+
javascriptGantt.templates.taskbar_text = function (start, end, task) {
|
|
576
|
+
if (task.parent == 0 && task.type !== "milestone") {
|
|
577
|
+
return `Project : ${task.text}`;
|
|
578
|
+
} else if (task.type === "milestone") {
|
|
579
|
+
return task.text;
|
|
580
|
+
} else {
|
|
581
|
+
return `Task : ${task.text}`;
|
|
582
|
+
}
|
|
583
|
+
};
|
|
584
|
+
|
|
585
|
+
javascriptGantt.templates.grid_folder = (task) => {
|
|
586
|
+
var name = task?.text?.trim().split(" ");
|
|
587
|
+
var firstname = name?.[0];
|
|
588
|
+
var lastname = name?.[1] ? name?.[1] : "";
|
|
589
|
+
var intials =
|
|
590
|
+
firstname?.charAt(0)?.toUpperCase() +
|
|
591
|
+
lastname?.charAt(0)?.toUpperCase();
|
|
592
|
+
return `<div></div>`;
|
|
593
|
+
};
|
|
594
|
+
|
|
595
|
+
javascriptGantt.templates.grid_file = (task) => {
|
|
596
|
+
if (task.parent != 0) {
|
|
597
|
+
var tracker_name = task.hasOwnProperty("tracker")
|
|
598
|
+
? task.tracker.name
|
|
599
|
+
: " ";
|
|
600
|
+
let issue_id = task.id;
|
|
601
|
+
return `<div class='gantt_file ${tracker_name}'><a class="link-issue ${tracker_name}" href='http://127.0.0.1:5500//issues/${issue_id}'>#${issue_id}</a></div>`;
|
|
602
|
+
}
|
|
603
|
+
};
|
|
604
|
+
|
|
605
|
+
javascriptGantt.templates.task_drag = (mode, task) => {
|
|
606
|
+
if (task.parent == 0 || (task.children && task.children.length > 0)) {
|
|
607
|
+
// || task.children
|
|
608
|
+
return false;
|
|
609
|
+
}
|
|
610
|
+
return true;
|
|
611
|
+
};
|
|
612
|
+
|
|
613
|
+
// add custom classes
|
|
614
|
+
// javascriptgantt.templates.grid_header_class = (columns,i) => {
|
|
615
|
+
// return "my-header-class test"
|
|
616
|
+
// }
|
|
617
|
+
// javascriptgantt.templates.grid_row_class = (start, end, task) => {
|
|
618
|
+
// console.log(start, end);
|
|
619
|
+
// return "my-grid-row-class test"
|
|
620
|
+
// }
|
|
621
|
+
javascriptGantt.templates.task_class = (start, end, task) => {
|
|
622
|
+
if (task.parent == 0) {
|
|
623
|
+
return "parent-task test";
|
|
624
|
+
} else {
|
|
625
|
+
return "child-task test";
|
|
626
|
+
}
|
|
627
|
+
};
|
|
628
|
+
// javascriptgantt.templates.task_row_class = (start, end, task) => {
|
|
629
|
+
// return "my-task-row-class test"
|
|
630
|
+
// }
|
|
631
|
+
javascriptGantt.templates.scale_cell_class = (date, scale, scaleIndex) => {
|
|
632
|
+
if (scaleIndex === 1) {
|
|
633
|
+
return "my-scale-class-2";
|
|
634
|
+
} else {
|
|
635
|
+
return "my-scale-class-1";
|
|
636
|
+
}
|
|
637
|
+
};
|
|
638
|
+
// javascriptgantt.templates.grid_cell_class = (col, task) => {
|
|
639
|
+
// return "my-grid-cell-class test"
|
|
640
|
+
// }
|
|
641
|
+
// javascriptgantt.templates.timeline_cell_class = (task, date) => {
|
|
642
|
+
// return "my-task-cell-class Test "
|
|
643
|
+
// }
|
|
644
|
+
|
|
645
|
+
// add custom marker
|
|
646
|
+
javascriptGantt.addMarker({
|
|
647
|
+
start_date: javascriptGantt.add(new Date(), 1, "day"), //a Date object that sets the marker's date
|
|
648
|
+
css: "tomorrow", //a CSS class applied to the marker
|
|
649
|
+
text: "Tomorrow", //the marker title
|
|
650
|
+
title: javascriptGantt.formatDateToString(
|
|
651
|
+
"%d %F %y",
|
|
652
|
+
javascriptGantt.add(new Date(), 1, "day")
|
|
653
|
+
), // the marker's tooltip
|
|
654
|
+
});
|
|
655
|
+
|
|
656
|
+
// javascriptgantt.addMarker({
|
|
657
|
+
// start_date: javascriptgantt.add(new Date(),-1, "day"), //a Date object that sets the marker's date
|
|
658
|
+
// css: "yesterday", //a CSS class applied to the marker
|
|
659
|
+
// text: "Yesterday", //the marker title
|
|
660
|
+
// title: javascriptgantt.formatDateToString("%d %F %Y", javascriptgantt.add(new Date(),-1, "day")), // the marker's tooltip
|
|
661
|
+
// });
|
|
662
|
+
|
|
663
|
+
// render gantt
|
|
664
|
+
javascriptGantt.render(element);
|
|
665
|
+
|
|
666
|
+
const jsGanttTheme = localStorage.getItem('javascriptgantt-theme');
|
|
667
|
+
|
|
668
|
+
|
|
669
|
+
// console.log(javascriptgantt);
|
|
670
|
+
|
|
671
|
+
// to find task in gantt
|
|
672
|
+
// console.log(javascriptgantt.getTask(69));
|
|
673
|
+
|
|
674
|
+
// custom events
|
|
675
|
+
javascriptGantt.attachEvent("onTaskDblClick", (event) => {
|
|
676
|
+
// console.log("onTaskDblClick: ", event);
|
|
677
|
+
});
|
|
678
|
+
let idCount = 0;
|
|
679
|
+
javascriptGantt.attachEvent("selectAreaOnDrag", (event) => {
|
|
680
|
+
// console.log("selectAreaOnDrag: ", event.task);
|
|
681
|
+
javascriptGantt.addTask({
|
|
682
|
+
id: "Added" + idCount,
|
|
683
|
+
start_date: new Date(event.task.startDate),
|
|
684
|
+
end_date: new Date(event.task.endDate),
|
|
685
|
+
parent: event.task.parent,
|
|
686
|
+
text: "Task Added",
|
|
687
|
+
});
|
|
688
|
+
javascriptGantt.render();
|
|
689
|
+
idCount += 1;
|
|
690
|
+
});
|
|
691
|
+
javascriptGantt.attachEvent("onLinkDblClick", (event) => {
|
|
692
|
+
// console.log("onLinkDblClick: ", event);
|
|
693
|
+
// javascriptgantt.deleteLink(event.link.id);
|
|
694
|
+
});
|
|
695
|
+
javascriptGantt.attachEvent("onBeforeLinkAdd", (event) => {
|
|
696
|
+
// console.log("onBeforeLinkAdd: ", event);
|
|
697
|
+
});
|
|
698
|
+
javascriptGantt.attachEvent("onLinkAdd", (event) => {
|
|
699
|
+
// console.log("onLinkAdd: ", event);
|
|
700
|
+
});
|
|
701
|
+
javascriptGantt.attachEvent("onDeleteLink", (event) => {
|
|
702
|
+
// console.log("onDeleteLink: ", event);
|
|
703
|
+
});
|
|
704
|
+
javascriptGantt.attachEvent("onBeforeTaskDrag", (event) => {
|
|
705
|
+
// console.log("onBeforeTaskDrag: ", event);
|
|
706
|
+
if (event.task.children.length !== 0) {
|
|
707
|
+
return false;
|
|
708
|
+
} else {
|
|
709
|
+
return true;
|
|
710
|
+
}
|
|
711
|
+
});
|
|
712
|
+
javascriptGantt.attachEvent("onTaskDrag", (event) => {
|
|
713
|
+
// console.log("onTaskDrag: ", event);
|
|
714
|
+
});
|
|
715
|
+
javascriptGantt.attachEvent("onAfterTaskDrag", (event) => {
|
|
716
|
+
console.log("onAfterTaskDrag: ", event);
|
|
717
|
+
console.log("onAfterTaskDrag??: ", javascriptGantt.options.data);
|
|
718
|
+
// javascriptgantt.autoScheduling();
|
|
719
|
+
});
|
|
720
|
+
javascriptGantt.attachEvent("onBeforeTaskDrop", (event) => {
|
|
721
|
+
console.log("onBeforeTaskDrop: ", event);
|
|
722
|
+
if (event.parentTask?.id == 12) {
|
|
723
|
+
return false;
|
|
724
|
+
}
|
|
725
|
+
});
|
|
726
|
+
javascriptGantt.attachEvent("onTaskToggle", (event) => {
|
|
727
|
+
// console.log("onTaskToggle: ", event);
|
|
728
|
+
});
|
|
729
|
+
|
|
730
|
+
javascriptGantt.attachEvent("onTaskDelete", (event) => {
|
|
731
|
+
console.log("onTaskDelete: ", event);
|
|
732
|
+
});
|
|
733
|
+
javascriptGantt.attachEvent("onAfterTaskUpdate", (event) => {
|
|
734
|
+
// console.log("onAfterTaskUpdate: ", event);
|
|
735
|
+
});
|
|
736
|
+
javascriptGantt.attachEvent("onCellClick", (event) => {
|
|
737
|
+
// console.log("onCellClick: ", event);
|
|
738
|
+
});
|
|
739
|
+
javascriptGantt.attachEvent("onRequestFullScreen", (event) => {
|
|
740
|
+
// console.log("onRequestFullScreen: ", event);
|
|
741
|
+
});
|
|
742
|
+
javascriptGantt.attachEvent("onExitFullScreen", (event) => {
|
|
743
|
+
// console.log("onExitFullScreen: ", event);
|
|
744
|
+
});
|
|
745
|
+
// javascriptgantt.attachEvent("onScroll", (event) => {
|
|
746
|
+
// console.log("onScroll: ", event);
|
|
747
|
+
// });
|
|
748
|
+
// javascriptgantt.attachEvent("onResize", (event) => {
|
|
749
|
+
// console.log("onResize: ", event);
|
|
750
|
+
// });
|
|
751
|
+
javascriptGantt.attachEvent("onAfterProgressDrag", (event) => {
|
|
752
|
+
// console.log("onAfterProgressDrag: ", event);
|
|
753
|
+
});
|
|
754
|
+
javascriptGantt.attachEvent("onBeforeProgressDrag", (event) => {
|
|
755
|
+
// console.log("onBeforeProgressDrag: ", event);
|
|
756
|
+
// if(event.task.parent === 0){
|
|
757
|
+
// return false;
|
|
758
|
+
// }else{
|
|
759
|
+
// return true;
|
|
760
|
+
// }
|
|
761
|
+
});
|
|
762
|
+
javascriptGantt.attachEvent("onAutoScheduling", (event) => {
|
|
763
|
+
// console.log("onAutoScheduling: ", event);
|
|
764
|
+
});
|
|
765
|
+
javascriptGantt.attachEvent("onColorChange", (event) => {
|
|
766
|
+
// console.log("onColorChange: ", event);
|
|
767
|
+
});
|
|
768
|
+
javascriptGantt.attachEvent("onBeforeTaskDblClick", (event) => {
|
|
769
|
+
// console.log("onBeforeTaskDblClick: ", event);
|
|
770
|
+
// if(event.task.id === 3){
|
|
771
|
+
// return false;
|
|
772
|
+
// }
|
|
773
|
+
});
|
|
774
|
+
javascriptGantt.attachEvent("onBeforeSave", (event) => {
|
|
775
|
+
// console.log("onBeforeSave: ", event);
|
|
776
|
+
});
|
|
777
|
+
javascriptGantt.attachEvent("onSave", (event) => {
|
|
778
|
+
// console.log("onSave: ", event);
|
|
779
|
+
});
|
|
780
|
+
|
|
781
|
+
let fullscreen = false;
|
|
782
|
+
function changeScreen() {
|
|
783
|
+
if (fullscreen === false) {
|
|
784
|
+
javascriptGantt.requestFullScreen();
|
|
785
|
+
// javascriptgantt.openTask(3);
|
|
786
|
+
} else {
|
|
787
|
+
javascriptGantt.exitFullScreen();
|
|
788
|
+
}
|
|
789
|
+
}
|
|
790
|
+
|
|
791
|
+
function changeZoom(e) {
|
|
792
|
+
javascriptGantt.options.zoomLevel = e.target.value;
|
|
793
|
+
if (e.target.value === "month" || e.target.value === "quarter") {
|
|
794
|
+
javascriptGantt.options.startDate = "2024-01-01T11:46:17.775Z";
|
|
795
|
+
javascriptGantt.options.endDate = "2024-12-31T11:46:17.775Z";
|
|
796
|
+
} else if (e.target.value === "year") {
|
|
797
|
+
javascriptGantt.options.startDate = "2022-01-01T11:46:17.775Z";
|
|
798
|
+
javascriptGantt.options.endDate = "2024-12-31T11:46:17.775Z";
|
|
799
|
+
} else {
|
|
800
|
+
javascriptGantt.options.startDate = "2024-03-01T11:46:17.775Z";
|
|
801
|
+
javascriptGantt.options.endDate = "2024-03-30T11:46:17.775Z";
|
|
802
|
+
}
|
|
803
|
+
javascriptGantt.zoomInit();
|
|
804
|
+
}
|
|
805
|
+
|
|
806
|
+
function changeLang(e) {
|
|
807
|
+
javascriptGantt.setLocalLang(e.target.value);
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
function changeCollapse(e) {
|
|
811
|
+
if (e.target.checked === true) {
|
|
812
|
+
javascriptGantt.collapseAll();
|
|
813
|
+
} else {
|
|
814
|
+
javascriptGantt.expandAll();
|
|
815
|
+
}
|
|
816
|
+
}
|
|
817
|
+
|
|
818
|
+
function changeToday(e) {
|
|
819
|
+
if (event.target.checked === true) {
|
|
820
|
+
javascriptGantt.addTodayFlag();
|
|
821
|
+
} else {
|
|
822
|
+
javascriptGantt.removeTodayFlag();
|
|
823
|
+
}
|
|
824
|
+
}
|
|
825
|
+
|
|
826
|
+
function exportChange(e) {
|
|
827
|
+
let stylesheet = [];
|
|
828
|
+
if (e.target.value === "png") {
|
|
829
|
+
javascriptGantt.exportToPNG("jsGanttChart", stylesheet);
|
|
830
|
+
} else if (e.target.value === "pdf") {
|
|
831
|
+
javascriptGantt.exportToPDF("jsGanttChart", stylesheet);
|
|
832
|
+
} else {
|
|
833
|
+
javascriptGantt.exportToExcel("jsGanttChart");
|
|
834
|
+
}
|
|
835
|
+
e.target.value = "";
|
|
836
|
+
}
|
|
837
|
+
|
|
838
|
+
function autoScheduling() {
|
|
839
|
+
javascriptGantt.autoScheduling();
|
|
840
|
+
}
|
|
841
|
+
function addTask() {
|
|
842
|
+
javascriptGantt.addTask({
|
|
843
|
+
id: 5354653546,
|
|
844
|
+
tracker_id: 4,
|
|
845
|
+
project_id: 86,
|
|
846
|
+
subject:
|
|
847
|
+
"Workflow - In the Workflow view, JOC reacts slow when handling large workflows or multiple smaller workflows in the same folder.",
|
|
848
|
+
description:
|
|
849
|
+
"requirements-\r\nwhen in the WORKFLOW view a larger workflow (several hundred jobs) or multiple smaller workflows in the same folder are completely expanded then JOC reacts rather slowly.\r\nThis affects actions like scrolling, opening instruction and order menus and executing items of these menus.",
|
|
850
|
+
due_date: "2024-05-17",
|
|
851
|
+
category_id: null,
|
|
852
|
+
status_id: 2,
|
|
853
|
+
assigned_to_id: 308,
|
|
854
|
+
priority_id: 2,
|
|
855
|
+
fixed_version_id: null,
|
|
856
|
+
author_id: 308,
|
|
857
|
+
lock_version: 3,
|
|
858
|
+
created_on: "2024-05-18T05:03:17.000Z",
|
|
859
|
+
updated_on: "2024-05-18T05:03:25.000Z",
|
|
860
|
+
start_date: "2024-05-17",
|
|
861
|
+
done_ratio: 70,
|
|
862
|
+
estimated_hours: 8.5,
|
|
863
|
+
parent: 12,
|
|
864
|
+
parent_id: null,
|
|
865
|
+
root_id: 53546,
|
|
866
|
+
lft: 1,
|
|
867
|
+
rgt: 2,
|
|
868
|
+
is_private: false,
|
|
869
|
+
closed_on: null,
|
|
870
|
+
tag_list: [],
|
|
871
|
+
});
|
|
872
|
+
// setTimeout(()=>{
|
|
873
|
+
|
|
874
|
+
// javascriptgantt.openTask(280);
|
|
875
|
+
// },0)
|
|
876
|
+
// javascriptgantt.parse(data);
|
|
877
|
+
javascriptGantt.render();
|
|
878
|
+
// javascriptgantt.deleteLink(1);
|
|
879
|
+
}
|
|
880
|
+
|
|
881
|
+
// get the position of the cell
|
|
882
|
+
// console.log(javascriptgantt.posFromDate(new Date()));
|
|
883
|
+
|
|
884
|
+
// iterate over each task
|
|
885
|
+
// javascriptgantt.eachTask((task)=>{
|
|
886
|
+
// console.log(task._id,"task _id ?????????????????????????????????");
|
|
887
|
+
// })
|
|
888
|
+
|
|
889
|
+
let cssStyle;
|
|
890
|
+
|
|
891
|
+
function changeTheme(isDark) {
|
|
892
|
+
const root = document.querySelector(":root");
|
|
893
|
+
if (isDark) {
|
|
894
|
+
document.getElementById('toggle').checked = true;
|
|
895
|
+
cssStyle = document.createElement("link");
|
|
896
|
+
cssStyle.setAttribute("rel", "stylesheet");
|
|
897
|
+
cssStyle.setAttribute("href", "src/theme/dark.css");
|
|
898
|
+
document.getElementsByTagName("head")[0].append(cssStyle);
|
|
899
|
+
localStorage.setItem('javascriptgantt-theme', 'dark');
|
|
900
|
+
|
|
901
|
+
root.style.setProperty("--bg-color", "#333332");
|
|
902
|
+
root.style.setProperty("--text-color", "#fff");
|
|
903
|
+
root.style.setProperty("--text-secondary-color", "#fff");
|
|
904
|
+
root.style.setProperty("--index-primary-color", "#1395BE");
|
|
905
|
+
root.style.setProperty("--index-primary-hover-color", "#0E7595");
|
|
906
|
+
} else {
|
|
907
|
+
if (cssStyle) {
|
|
908
|
+
cssStyle.remove();
|
|
909
|
+
}
|
|
910
|
+
root.style.setProperty("--bg-color", "#fff");
|
|
911
|
+
root.style.setProperty("--text-color", "#000");
|
|
912
|
+
root.style.setProperty("--text-secondary-color", "#fff");
|
|
913
|
+
root.style.setProperty("--index-primary-color", "#4ca0fff2");
|
|
914
|
+
root.style.setProperty("--index-primary-hover-color", "#3585e0f2");
|
|
915
|
+
localStorage.setItem('javascriptgantt-theme', 'light');
|
|
916
|
+
}
|
|
917
|
+
}
|
|
918
|
+
|
|
919
|
+
this.changeTheme(jsGanttTheme == 'dark');
|
|
920
|
+
|
|
921
|
+
let getScale = () => {
|
|
922
|
+
console.log(javascriptGantt.getScale());
|
|
923
|
+
};
|
|
924
|
+
|
|
925
|
+
function searchTask(e) {
|
|
926
|
+
let isFilter = e.target.value.trim() !== "";
|
|
927
|
+
javascriptGantt.filterTask((task) => {
|
|
928
|
+
return task.text.toLowerCase().includes(e.target.value.toLowerCase());
|
|
929
|
+
}, isFilter, true);
|
|
930
|
+
}
|
|
931
|
+
function addCol() {
|
|
932
|
+
javascriptGantt.options.columns.push({
|
|
933
|
+
name: "progress",
|
|
934
|
+
width: 245,
|
|
935
|
+
min_width: 80,
|
|
936
|
+
max_width: 300,
|
|
937
|
+
tree: false,
|
|
938
|
+
label: "Progress",
|
|
939
|
+
resize: true,
|
|
940
|
+
align: "center",
|
|
941
|
+
template: (task) => {
|
|
942
|
+
return `<span>${task.progress || 0}</span>`;
|
|
943
|
+
},
|
|
944
|
+
});
|
|
945
|
+
javascriptGantt.render();
|
|
946
|
+
}
|
|
947
|
+
|
|
948
|
+
function removeCol() {
|
|
949
|
+
javascriptGantt.options.columns.splice(javascriptGantt.options.columns.length - 1, 1);
|
|
950
|
+
javascriptGantt.render();
|
|
951
|
+
}
|
|
952
|
+
|
|
953
|
+
function startTour() {
|
|
954
|
+
let options = {
|
|
955
|
+
overlayOpacity: 0.7,
|
|
956
|
+
stagePadding: 10,
|
|
957
|
+
stageRadius: 5,
|
|
958
|
+
overlayColor: "#000",
|
|
959
|
+
animate: true,
|
|
960
|
+
smoothScroll: true,
|
|
961
|
+
allowBackdropClose: true,
|
|
962
|
+
popupClass: "popupClass",
|
|
963
|
+
keyboardControl: true,
|
|
964
|
+
showProgress: true,
|
|
965
|
+
visibleButtons: ['next', 'previous', 'close'],
|
|
966
|
+
disableButtons: [],
|
|
967
|
+
animationDuration: 400,
|
|
968
|
+
onNextClick: (step) => {
|
|
969
|
+
console.log(step, " Next Click");
|
|
970
|
+
},
|
|
971
|
+
onClose: () => {
|
|
972
|
+
console.log("Tour Closed");
|
|
973
|
+
},
|
|
974
|
+
onPreviousClick: (step) => {
|
|
975
|
+
console.log(step, " Previous Click");
|
|
976
|
+
},
|
|
977
|
+
steps: [
|
|
978
|
+
{
|
|
979
|
+
element: ".collapse-container",
|
|
980
|
+
popup: {
|
|
981
|
+
title: "Toggle Collapse",
|
|
982
|
+
description: "Toggle all the Tasks!!",
|
|
983
|
+
side: "bottom",
|
|
984
|
+
align: "start",
|
|
985
|
+
},
|
|
986
|
+
},
|
|
987
|
+
{
|
|
988
|
+
element: ".today-container",
|
|
989
|
+
popup: {
|
|
990
|
+
title: "Toggle Marker",
|
|
991
|
+
description: "Toggle Today Marker!!",
|
|
992
|
+
side: "bottom",
|
|
993
|
+
align: "start",
|
|
994
|
+
},
|
|
995
|
+
},
|
|
996
|
+
{
|
|
997
|
+
element: ".export-data",
|
|
998
|
+
popup: {
|
|
999
|
+
title: "Export Chart",
|
|
1000
|
+
description: "Get your charts in PDF, PNG, or Excel formats",
|
|
1001
|
+
side: "bottom",
|
|
1002
|
+
align: "center",
|
|
1003
|
+
},
|
|
1004
|
+
},
|
|
1005
|
+
{
|
|
1006
|
+
element: ".fullscreen",
|
|
1007
|
+
popup: {
|
|
1008
|
+
title: "Full Screen",
|
|
1009
|
+
description: "View your Gantt in full screen for an immersive experience",
|
|
1010
|
+
side: "bottom",
|
|
1011
|
+
align: "end",
|
|
1012
|
+
},
|
|
1013
|
+
},
|
|
1014
|
+
{
|
|
1015
|
+
element: ".auto-scheduling",
|
|
1016
|
+
popup: {
|
|
1017
|
+
title: "Auto Scheduling",
|
|
1018
|
+
description: "Tasks are automatically scheduled.",
|
|
1019
|
+
side: "bottom",
|
|
1020
|
+
align: "center",
|
|
1021
|
+
},
|
|
1022
|
+
},
|
|
1023
|
+
{
|
|
1024
|
+
element: ".zoom",
|
|
1025
|
+
popup: {
|
|
1026
|
+
title: "Zoom Levels",
|
|
1027
|
+
description: "Multiple timeline views - hour, day, week, month, quarter, and year.",
|
|
1028
|
+
side: "bottom",
|
|
1029
|
+
align: "end",
|
|
1030
|
+
},
|
|
1031
|
+
},
|
|
1032
|
+
{
|
|
1033
|
+
element: ".Language",
|
|
1034
|
+
popup: {
|
|
1035
|
+
title: "Change Language",
|
|
1036
|
+
description: "Change language of the gantt chart.",
|
|
1037
|
+
side: "bottom",
|
|
1038
|
+
align: "end",
|
|
1039
|
+
},
|
|
1040
|
+
},
|
|
1041
|
+
{
|
|
1042
|
+
element: ".dark-mode",
|
|
1043
|
+
popup: {
|
|
1044
|
+
title: "Toggle Dark Mode",
|
|
1045
|
+
description: "Dark mode for those late-night work sessions.",
|
|
1046
|
+
side: "bottom",
|
|
1047
|
+
align: "end",
|
|
1048
|
+
},
|
|
1049
|
+
},
|
|
1050
|
+
{
|
|
1051
|
+
element: ".gantt-search",
|
|
1052
|
+
popup: {
|
|
1053
|
+
title: "Search Tasks",
|
|
1054
|
+
description: "Search Tasks to quickly find and access tasks based on your search criteria. Streamline your workflow by searching for specific tasks with ease.",
|
|
1055
|
+
side: "bottom",
|
|
1056
|
+
align: "end",
|
|
1057
|
+
},
|
|
1058
|
+
},
|
|
1059
|
+
{
|
|
1060
|
+
element: "#js-gantt",
|
|
1061
|
+
popup: {
|
|
1062
|
+
title: "Gantt Chart",
|
|
1063
|
+
description: "The Gantt Chart view provides a visual representation of project tasks and their timelines, allowing you to efficiently manage project schedules, dependencies, and progress. Easily track and plan tasks, making project management a seamless experience.",
|
|
1064
|
+
side: "top",
|
|
1065
|
+
align: "start",
|
|
1066
|
+
},
|
|
1067
|
+
},
|
|
1068
|
+
{
|
|
1069
|
+
popup: {
|
|
1070
|
+
title: "That's everything",
|
|
1071
|
+
description: `<div class="finish">
|
|
1072
|
+
<p>Looks like you're ready to go 🎉</p>
|
|
1073
|
+
<p>Click anywhere to exit the tour.</p>
|
|
1074
|
+
<img src="https://media.tenor.com/y2JXkY1pXkwAAAAM/cat-computer.gif">
|
|
1075
|
+
</div>`,
|
|
1076
|
+
side: "over",
|
|
1077
|
+
align: "over",
|
|
1078
|
+
},
|
|
1079
|
+
},
|
|
1080
|
+
],
|
|
1081
|
+
};
|
|
1082
|
+
let tour = new ztTour(options);
|
|
1083
|
+
// console.log(ztTour,"ztTour");
|
|
1084
|
+
tour.start();
|
|
1085
|
+
}
|
|
1086
|
+
|
|
1087
|
+
document.querySelector(".hint-icon").removeEventListener("click", handleClick);
|
|
1088
|
+
document.querySelector(".hint-icon").addEventListener("click", handleClick);
|
|
1089
|
+
|
|
1090
|
+
// let tour = new ztTour({});
|
|
1091
|
+
function handleClick(e) {
|
|
1092
|
+
tour.showHint({
|
|
1093
|
+
element: ".hint-icon",
|
|
1094
|
+
innerHTML: `<p>Click on "Start Tour" to start the tour.</p>`
|
|
1095
|
+
});
|
|
1096
|
+
}
|
|
1097
|
+
let intro = `
|
|
1098
|
+
<h2 style="font-size: 18px; margin-bottom: 5px; font-weight: 600; text-align:center">javascriptgantt Chart</h2>
|
|
1099
|
+
<p style="line-height: 18px; text-align: justify;margin-bottom: 5px;">Welcome to the javascriptgantt Chart Library.
|
|
1100
|
+
This library provides a powerful set of tools and functionalities to create interactive Gantt charts for project management. This documentation will guide you through the installation process,
|
|
1101
|
+
usage instructions, and available features of the library.</p>
|
|
1102
|
+
<p>Click on "Start Tour" to start the tour.</p>
|
|
1103
|
+
`;
|
|
1104
|
+
// tour.showAnnouncement(intro);
|
|
1105
|
+
</script>
|
|
1106
|
+
|
|
1107
|
+
</body>
|
|
1108
|
+
|
|
1112
1109
|
</html>
|