├── .gitignore ├── README.md ├── simplegantt.html └── src ├── styles.css └── app.js /.gitignore: -------------------------------------------------------------------------------- 1 | .aider* 2 | .env 3 | .yaml 4 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SimpleGantt 2 | 3 | ![Screenshot 2025-01-09 at 17 58 25](https://github.com/user-attachments/assets/c4f317b8-4b8d-4169-bc89-78fd2d02b5fe) 4 | 5 | SimpleGantt is a lightweight project management tool designed for environments where software installation is restricted and cloud web applications are not permitted. It runs entirely in the browser. 6 | 7 | [Try it live here](https://aerugo.github.io/simplegantt/simplegantt), data is saved locally. 8 | 9 | # Requirements 10 | SimpleGantt requires a modern web browser with support for HTML5 and JavaScript. It has been tested on the latest versions of Chrome, Firefox, and Edge. It also depends on a number of third-party libraries which are pulled in via CDN. See the `simplegantt.html` file for the list of dependencies. 11 | 12 | ## Features 13 | - Interactive Gantt chart rendering 14 | - Task management with dependencies 15 | - Milestone tracking 16 | - Offline usage without installation 17 | - No reliance on external web services (except CDNs for libraries) or cloud storage. Once I am happy with how it works, I will bundle the libraries too. 18 | 19 | ## Getting Started 20 | Simply open the `simplegantt.html` file in your web browser to start using SimpleGantt. No servers or installation required. 21 | Project files are saved locally in .yaml format. 22 | 23 | ## Using With SharePoint 24 | Many enterprise environments restrict the use of cloud-based project management tools. SimpleGantt can be used with SharePoint to provide a simple project management solution that is accessible across the organization in a restricted environment. To use SimpleGantt with SharePoint: 25 | 1. Upload the repository files to a SharePoint document library. 26 | 2. Rename `simplegantt.html` to `simplegantt.aspx`. 27 | 28 | SimpleGantt can now be accessed via the SharePoint document library. Saving and loading project files to SharePoint is usually restricted, and in these cases, users can save project files locally and manually upload them to SharePoint. 29 | 30 | ## Usage 31 | - **Creating Tasks**: Add new tasks with start dates, durations, and dependencies. 32 | - **Editing Tasks**: Modify task details and adjust timelines via drag-and-drop. Hold 'Shift' to enable changing task duration in the Gantt chart. 33 | - **Milestones**: Mark key events using milestones. 34 | - **Saving Projects**: Save your project data locally to avoid data loss. 35 | 36 | ## Contributing 37 | Contributions are welcome, but support is limited. I don't have much time to spend on this project. 38 | Please submit a pull request or open an issue for improvements and feature requests, but I may not be able to address them in the near future. 39 | 40 | ## License 41 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 42 | -------------------------------------------------------------------------------- /simplegantt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Gantt Chart Application 7 | 11 | 12 | 16 | 20 | 24 | 25 | 29 | 30 | 31 | 32 | 33 |

34 |

35 | Untitled Project 36 | 42 | 43 |

44 | 60 |

61 | 62 |

63 |

64 |

65 | 68 | 71 | 74 | 77 | 80 | 83 |

84 | 85 |

86 | 87 |

88 | Horizontal 89 | 97 | 30 98 |

99 | 100 |

101 | Vertical 102 | 110 | 30 111 |

112 |

113 | 114 | 115 | 116 |

117 |

118 | 125 | 128 |

129 |

130 | 131 | 245 | 246 | 282 | 283 | 323 | 324 | 358 | 359 | 360 | 408 | 409 | 410 | 439 | 440 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 |

476 | No file loaded. 477 | 478 |

479 | 480 | 481 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* ===== Variables ===== */ 2 | :root { 3 | --primary-color: #4CAF50; 4 | --primary-color-light: #81C784; 5 | --secondary-color: #2196F3; 6 | --secondary-color-dark: #1976D2; 7 | --background-color: #f9f9f9; 8 | --text-color: #333; 9 | --font-family: 'Roboto', Arial, sans-serif; 10 | --task-height: 30px; 11 | --task-spacing: 5px; 12 | } 13 | 14 | /* ===== Base Styles ===== */ 15 | body { 16 | font-family: var(--font-family); 17 | margin: 0; 18 | padding: 0; 19 | color: var(--text-color); 20 | background-color: var(--background-color); 21 | } 22 | 23 | /* ===== Header and Navigation ===== */ 24 | header { 25 | background-color: var(--secondary-color); 26 | color: white; 27 | padding: 10px 20px; 28 | } 29 | 30 | header h1 { 31 | display: flex; 32 | align-items: center; 33 | font-size: 1.5em; 34 | margin: 0; 35 | } 36 | 37 | /* Zoom Controls Styling */ 38 | .zoom-controls { 39 | position: fixed; 40 | bottom: 20px; 41 | left: 20px; 42 | z-index: 1001; 43 | background: rgba(255, 255, 255, 0.95); 44 | padding: 15px; 45 | border-radius: 6px; 46 | box-shadow: 0 2px 6px rgba(0,0,0,0.15); 47 | display: flex; 48 | flex-direction: column; 49 | gap: 10px; 50 | margin: 0; 51 | border: 1px solid #ccc; 52 | transition: transform 0.3s ease, opacity 0.3s ease; 53 | opacity: 0; 54 | transform: scale(0.95); 55 | } 56 | 57 | .zoom-group { 58 | display: flex; 59 | align-items: center; 60 | } 61 | 62 | .zoom-group label { 63 | margin-right: 10px; 64 | font-weight: bold; 65 | } 66 | 67 | .zoom-group input[type="range"] { 68 | width: 150px; 69 | } 70 | 71 | .zoom-group span { 72 | margin-left: 10px; 73 | font-weight: bold; 74 | } 75 | 76 | /* Style for the project name display */ 77 | #projectNameDisplay { 78 | font-weight: bold; 79 | color: white; 80 | } 81 | 82 | /* Style for the project name input field */ 83 | #projectNameInput { 84 | font-size: 1em; 85 | padding: 5px; 86 | margin-left: 10px; 87 | border: 1px solid #ccc; 88 | border-radius: 4px; 89 | } 90 | 91 | /* Style for the edit button */ 92 | #editProjectNameButton { 93 | background: none; 94 | border: none; 95 | cursor: pointer; 96 | color: white; 97 | margin-left: 10px; 98 | font-size: 0.8em; 99 | } 100 | 101 | #editProjectNameButton i { 102 | color: white; 103 | } 104 | 105 | #editProjectNameButton:hover i { 106 | color: #ddd; 107 | } 108 | 109 | nav { 110 | display: flex; 111 | justify-content: space-between; 112 | align-items: center; 113 | margin-top: 10px; 114 | } 115 | 116 | .nav-left, 117 | .nav-right { 118 | display: flex; 119 | gap: 10px; 120 | } 121 | 122 | nav button { 123 | background-color: white; 124 | color: var(--secondary-color); 125 | border: none; 126 | padding: 10px 15px; 127 | border-radius: 4px; 128 | cursor: pointer; 129 | transition: background-color 0.2s; 130 | } 131 | 132 | nav button:hover { 133 | background-color: var(--secondary-color-dark); 134 | color: white; 135 | } 136 | 137 | /* ===== Main Content ===== */ 138 | main { 139 | padding: 20px; 140 | } 141 | 142 | /* ===== Project Header ===== */ 143 | .project-header { 144 | display: flex; 145 | align-items: center; 146 | justify-content: space-between; 147 | margin-bottom: 20px; 148 | } 149 | 150 | .project-header h2 { 151 | margin: 0; 152 | } 153 | 154 | /* ===== Add Task Button ===== */ 155 | /* Styles for buttons in the project header */ 156 | .header-button { 157 | background-color: var(--secondary-color); 158 | color: white; 159 | border: none; 160 | padding: 10px 15px; 161 | border-radius: 4px; 162 | cursor: pointer; 163 | transition: background-color 0.2s; 164 | display: inline-flex; 165 | align-items: center; 166 | gap: 5px; 167 | } 168 | 169 | .header-button:hover { 170 | background-color: var(--secondary-color-dark); 171 | } 172 | 173 | .header-button i { 174 | font-size: 1em; 175 | } 176 | 177 | /* ===== Gantt Chart Styles ===== */ 178 | main { 179 | display: flex; 180 | flex-direction: column; 181 | height: calc(100vh - 90px); /* Adjust based on header and status bar height */ 182 | } 183 | 184 | .main-content { 185 | flex: 1; 186 | display: flex; 187 | flex-direction: column; 188 | overflow: visible; /* Allow dropdowns to overflow */ 189 | } 190 | 191 | #ganttChart { 192 | flex: 1; /* Allow the chart to fill the remaining space */ 193 | position: relative; 194 | margin-top: 20px; 195 | border: 1px solid #ccc; 196 | overflow-x: auto; 197 | overflow-y: auto; 198 | white-space: nowrap; 199 | cursor: grab; 200 | position: relative; /* Ensure proper stacking context */ 201 | } 202 | 203 | #categoryFilter { 204 | margin-bottom: 10px; /* Add spacing below the dropdown */ 205 | } 206 | 207 | #ganttChart.grabbing { 208 | cursor: grabbing; 209 | } 210 | 211 | .choices { 212 | margin-bottom: 0px; 213 | } 214 | 215 | .task-bar { 216 | background-color: var(--primary-color); 217 | position: absolute; 218 | display: flex; 219 | align-items: center; 220 | padding: 0 10px; 221 | box-sizing: border-box; 222 | border-radius: 4px; 223 | color: #fff; 224 | cursor: pointer; 225 | transition: transform 0.2s, box-shadow 0.2s; 226 | box-shadow: 0 2px 4px rgba(0,0,0,0.1); 227 | z-index: 1; /* Ensure tasks are below the time scale */ 228 | min-width: 100px; /* Adjust this value as needed */ 229 | overflow: hidden; /* Hide overflowing content */ 230 | padding-right: 5px; /* Space between content and buttons */ 231 | } 232 | 233 | .task-content { 234 | display: flex; 235 | align-items: center; 236 | overflow: hidden; 237 | white-space: nowrap; 238 | transition: transform 0.1s linear; 239 | } 240 | 241 | .task-bar::before { 242 | content: ''; 243 | position: absolute; 244 | left: 0; 245 | top: 0; 246 | bottom: 0; 247 | width: 10px; 248 | background: linear-gradient(to right, rgba(0,0,0,0.1), transparent); 249 | pointer-events: none; 250 | } 251 | 252 | .task-resize-handle { 253 | position: absolute; 254 | top: 0; 255 | width: 5px; 256 | height: 100%; 257 | cursor: ew-resize; 258 | z-index: 2; 259 | display: none; /* Hidden by default */ 260 | background-color: transparent; /* Optional: make handles transparent */ 261 | } 262 | 263 | .task-resize-handle.left { 264 | left: 0; 265 | } 266 | 267 | .task-resize-handle.right { 268 | right: 0; 269 | } 270 | 271 | /* Show resize handles when Shift key is held down */ 272 | body.shift-key-down .task-resize-handle { 273 | display: block; 274 | } 275 | 276 | /* Change cursor when hovering over resize handles */ 277 | body.shift-key-down .task-resize-handle:hover { 278 | cursor: ew-resize; 279 | } 280 | 281 | /* Change cursor to 'default' when Shift is held down */ 282 | body.shift-key-down #ganttChart { 283 | cursor: default; 284 | } 285 | 286 | #ganttChart.resizing { 287 | cursor: ew-resize !important; 288 | } 289 | 290 | /* Hide edit and delete buttons when Shift key is held down */ 291 | body.shift-key-down .task-bar .task-buttons { 292 | display: none; 293 | } 294 | 295 | /* Completely hide tooltips when Shift key is held down */ 296 | body.shift-key-down .task-bar[data-tooltip]:hover::after { 297 | content: none; 298 | } 299 | 300 | .category-heading { 301 | position: absolute; 302 | font-weight: 500; 303 | font-size: 1em; 304 | background-color: #f9f9f9; 305 | padding: 5px 10px; 306 | border-left: 4px solid var(--primary-color); 307 | width: 100%; 308 | box-sizing: border-box; 309 | color: var(--text-color); 310 | z-index: 1; /* Same as task bars */ 311 | } 312 | 313 | /* ===== Tabs Styles ===== */ 314 | /* Tabs container */ 315 | .modal .tabs { 316 | display: flex; 317 | margin-bottom: 20px; 318 | } 319 | 320 | /* Individual tab buttons */ 321 | .modal .tab-button { 322 | flex: 1; 323 | padding: 10px 15px; 324 | background-color: #f0f0f0; 325 | border: none; 326 | cursor: pointer; 327 | text-align: center; 328 | font-weight: 500; 329 | transition: background-color 0.2s; 330 | border-bottom: 2px solid transparent; 331 | } 332 | 333 | .modal .tab-button.active { 334 | background-color: #fff; 335 | border-bottom-color: var(--primary-color); 336 | } 337 | 338 | .modal .tab-button:hover { 339 | background-color: #e0e0e0; 340 | } 341 | 342 | /* Tab contents */ 343 | .modal .tab-content { 344 | display: none; 345 | opacity: 0; 346 | transition: opacity 0.3s ease-in-out; 347 | } 348 | 349 | .modal .tab-content.active { 350 | display: block; 351 | opacity: 1; 352 | } 353 | 354 | /* ===== Category Items Styles ===== */ 355 | /* Categories list container */ 356 | /* Remove default list styling */ 357 | #categoriesList { 358 | list-style-type: none; 359 | padding: 0; 360 | margin: 0; 361 | max-height: 300px; 362 | overflow-y: auto; 363 | border: 1px solid #ddd; 364 | border-radius: 4px; 365 | margin-top: 10px; 366 | } 367 | 368 | /* Update category-item to work with li elements */ 369 | .category-item { 370 | display: flex; 371 | align-items: center; 372 | padding: 10px; 373 | border-bottom: 1px solid #eee; 374 | cursor: move; /* Add cursor to indicate draggable */ 375 | } 376 | 377 | .category-item.dragging { 378 | opacity: 0.5; 379 | } 380 | 381 | .category-item:last-child { 382 | border-bottom: none; 383 | } 384 | 385 | .category-item .color-indicator { 386 | width: 20px; 387 | height: 20px; 388 | margin-right: 15px; 389 | border-radius: 50%; 390 | border: 1px solid #ccc; 391 | flex-shrink: 0; 392 | } 393 | 394 | .category-item span { 395 | flex-grow: 1; 396 | font-size: 1em; 397 | } 398 | 399 | .category-item button { 400 | background-color: transparent; 401 | color: var(--text-color); 402 | border: none; 403 | padding: 5px 8px; 404 | border-radius: 4px; 405 | cursor: pointer; 406 | margin-left: 5px; 407 | transition: background-color 0.2s; 408 | } 409 | 410 | .category-item button:hover { 411 | background-color: #f0f0f0; 412 | } 413 | 414 | .category-item button i { 415 | pointer-events: none; 416 | } 417 | 418 | .category-item button .fa-edit { 419 | color: var(--secondary-color); 420 | } 421 | 422 | .category-item button .fa-trash-alt { 423 | color: var(--primary-color); 424 | } 425 | 426 | /* ===== Button Styles ===== */ 427 | button { 428 | font-family: var(--font-family); 429 | border-radius: 4px; 430 | } 431 | 432 | button i { 433 | margin-right: 5px; 434 | font-size: 1em; 435 | } 436 | 437 | .category-item button i { 438 | margin-right: 0; 439 | } 440 | 441 | /* Adjusting task bar buttons */ 442 | .task-bar button { 443 | background-color: rgba(255,255,255,0.2); 444 | } 445 | 446 | .task-bar button:hover { 447 | background-color: rgba(255,255,255,0.3); 448 | } 449 | 450 | .task-bar:hover { 451 | transform: translateY(-2px); 452 | box-shadow: 0 4px 6px rgba(0,0,0,0.15); 453 | } 454 | 455 | .task-name { 456 | flex-grow: 1; 457 | flex-shrink: 1; 458 | margin-right: 5px; 459 | overflow: hidden; 460 | text-overflow: ellipsis; 461 | white-space: nowrap; 462 | } 463 | 464 | .task-buttons { 465 | display: flex; 466 | gap: 5px; 467 | } 468 | 469 | .task-bar .task-buttons { 470 | display: flex; 471 | margin-left: auto; 472 | z-index: 1; /* Ensure buttons are above task-content */ 473 | } 474 | 475 | .task-bar button { 476 | font-size: 0.8em; 477 | padding: 2px 5px; 478 | margin-left: 5px; 479 | background: rgba(255,255,255,0.2); 480 | border: none; 481 | border-radius: 3px; 482 | color: #fff; 483 | cursor: pointer; 484 | transition: background 0.2s; 485 | flex-shrink: 0; /* Prevent buttons from shrinking */ 486 | } 487 | 488 | .task-bar button:hover { 489 | background: rgba(255,255,255,0.3); 490 | } 491 | 492 | .time-scale { 493 | position: sticky; 494 | top: 0; 495 | z-index: 5; /* Lowered z-index */ 496 | height: 60px; 497 | background-color: var(--background-color); 498 | border-bottom: 1px solid #ccc; 499 | box-sizing: border-box; 500 | } 501 | 502 | .date-label { 503 | position: absolute; 504 | font-size: 0.8em; 505 | top: 40px; 506 | transform: rotate(-45deg); 507 | transform-origin: left top; 508 | width: 100px; /* Increase width to prevent clipping */ 509 | white-space: nowrap; 510 | } 511 | 512 | /* Styles for month labels */ 513 | .date-label.month-label { 514 | position: absolute; 515 | top: 20px; /* Adjust vertical position if needed */ 516 | transform: none; /* Ensure no rotation is applied */ 517 | text-align: center; /* Center the text horizontally */ 518 | width: auto; /* Allow the width to be set dynamically */ 519 | font-size: 0.9em; /* Optional: Adjust font size */ 520 | } 521 | 522 | .day-separator.month-separator { 523 | /* Optional: Adjust the appearance of month separators if needed */ 524 | height: 100%; 525 | border-left: 2px solid #ccc; 526 | } 527 | 528 | .day-separator { 529 | position: absolute; 530 | top: 0; 531 | width: 1px; 532 | height: 100%; 533 | background-color: #e0e0e0; 534 | } 535 | 536 | .assignee-name { 537 | font-size: 0.85em; 538 | font-weight: normal; 539 | margin-left: 5px; 540 | color: #fff; 541 | background-color: rgba(0, 0, 0, 0.2); 542 | padding: 2px 5px; 543 | border-radius: 3px; 544 | } 545 | 546 | /* ===== Form Styles ===== */ 547 | #addTaskForm { 548 | display: grid; 549 | grid-template-columns: repeat(2, 1fr); 550 | grid-template-areas: 551 | "task-name task-name" 552 | "description description" 553 | "task-details task-details" 554 | "assignment status"; 555 | gap: 5px; 556 | max-width: 700px; 557 | margin-bottom: 20px; 558 | } 559 | 560 | /* Assign grid areas to fieldsets */ 561 | .task-name-section { 562 | grid-area: task-name; 563 | } 564 | 565 | .task-details-section { 566 | grid-area: task-details; 567 | } 568 | 569 | .assignment-section { 570 | grid-area: assignment; 571 | } 572 | 573 | .status-section { 574 | grid-area: status; 575 | } 576 | 577 | .description-section { 578 | grid-area: description; 579 | } 580 | 581 | /* Grid layout for form groups within fieldsets */ 582 | .task-details-section, 583 | .assignment-section { 584 | display: grid; 585 | grid-template-columns: 1fr 1fr; 586 | gap: 20px; 587 | } 588 | 589 | .form-group { 590 | display: flex; 591 | flex-direction: column; 592 | } 593 | 594 | /* Ensure full-width inputs in single-column sections */ 595 | .task-name-section .form-group input { 596 | width: 100%; 597 | } 598 | 599 | /* Inputs inside form groups */ 600 | .form-group input, 601 | .form-group select, 602 | .form-group textarea { 603 | width: 100%; 604 | } 605 | 606 | #addTaskForm button[type="submit"] { 607 | grid-column: span 2; 608 | padding: 10px; 609 | background-color: var(--secondary-color); 610 | color: #fff; 611 | border: none; 612 | border-radius: 4px; 613 | cursor: pointer; 614 | } 615 | 616 | #addTaskForm button[type="submit"]:hover { 617 | background-color: var(--secondary-color-dark); 618 | } 619 | 620 | #statusMessage { 621 | margin-top: 10px; 622 | font-size: 0.9em; 623 | color: var(--primary-color); 624 | } 625 | 626 | /* Form layout adjustments */ 627 | #addCategoryForm { 628 | display: flex; 629 | flex-direction: column; 630 | gap: 15px; 631 | } 632 | 633 | #addCategoryForm .form-group { 634 | display: flex; 635 | flex-direction: column; 636 | } 637 | 638 | #addCategoryForm button[type="submit"] { 639 | align-self: flex-start; 640 | } 641 | 642 | /* Style the Spectrum color picker */ 643 | input[type="color"] { 644 | padding: 0; 645 | border: none; 646 | width: 50px; 647 | height: 50px; 648 | } 649 | 650 | /* ===== Modal Styles ===== */ 651 | .modal { 652 | display: none; 653 | position: fixed; 654 | z-index: 1000; 655 | left: 0; 656 | top: 0; 657 | width: 100%; 658 | height: 100%; 659 | overflow: auto; 660 | background-color: rgba(0, 0, 0, 0.8); 661 | font-size: 1em; 662 | color: var(--text-color); 663 | } 664 | 665 | .modal-content { 666 | position: relative; 667 | background-color: #fff; 668 | margin: 5% auto; 669 | padding: 20px 30px; 670 | border: none; 671 | width: 80%; 672 | max-width: 700px; 673 | min-width: 300px; 674 | max-height: 80vh; 675 | overflow-y: auto; 676 | border-radius: 8px; 677 | box-shadow: 0 5px 15px rgba(0,0,0,0.3); 678 | } 679 | 680 | /* Modal headings */ 681 | .modal-title { 682 | font-size: 1.8em; 683 | font-weight: bold; 684 | color: var(--secondary-color); 685 | margin-bottom: 20px; 686 | border-bottom: 1px solid #ccc; 687 | padding-bottom: 10px; 688 | } 689 | 690 | /* Form styles within modal */ 691 | .modal .form-group { 692 | display: flex; 693 | flex-direction: column; 694 | margin-bottom: 15px; 695 | } 696 | 697 | .modal .form-group label { 698 | margin-bottom: 5px; 699 | font-weight: 500; 700 | } 701 | 702 | .modal .form-group input, 703 | .modal .form-group select, 704 | .modal .form-group textarea { 705 | width: 100%; 706 | box-sizing: border-box; 707 | padding: 10px; 708 | border: 1px solid #ccc; 709 | border-radius: 4px; 710 | box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); 711 | } 712 | 713 | .modal .form-group input:hover, 714 | .modal .form-group select:hover, 715 | .modal .form-group textarea:hover { 716 | border-color: var(--primary-color-light); 717 | } 718 | 719 | .modal .form-group input:focus, 720 | .modal .form-group select:focus, 721 | .modal .form-group textarea:focus { 722 | border-color: var(--primary-color); 723 | outline: none; 724 | box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); 725 | } 726 | 727 | /* General styles for textareas in the modal */ 728 | .modal .form-group textarea { 729 | width: 100%; 730 | box-sizing: border-box; 731 | padding: 10px; 732 | border: 1px solid #ccc; 733 | border-radius: 4px; 734 | box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); 735 | resize: vertical; /* Allows users to resize vertically */ 736 | } 737 | 738 | /* Set default height for the Status Explanation textarea */ 739 | #statusExplanation { 740 | height: 170px; 741 | } 742 | 743 | /* Set default height for the Task Description textarea */ 744 | #taskDescription { 745 | height: 250px; 746 | } 747 | 748 | .modal .form-group input:focus, 749 | .modal .form-group select:focus, 750 | .modal .form-group textarea:focus { 751 | border-color: var(--primary-color); 752 | outline: none; 753 | } 754 | 755 | .modal .form-group input:hover, 756 | .modal .form-group select:hover, 757 | .modal .form-group textarea:hover { 758 | border-color: var(--primary-color-light); 759 | } 760 | 761 | .modal button[type="submit"] { 762 | padding: 12px 20px; 763 | background-color: var(--primary-color); 764 | color: #fff; 765 | border: none; 766 | border-radius: 4px; 767 | cursor: pointer; 768 | font-size: 1em; 769 | transition: background-color 0.2s, transform 0.1s; 770 | } 771 | 772 | .modal button[type="submit"]:hover { 773 | background-color: var(--primary-color-light); 774 | transform: translateY(-2px); 775 | } 776 | 777 | /* Specific styles for Task modal submit buttons */ 778 | #taskModal button[type="submit"] { 779 | background-color: var(--primary-color); 780 | } 781 | 782 | #taskModal button[type="submit"]:hover { 783 | background-color: var(--primary-color-light); 784 | } 785 | 786 | .modal button[type="submit"]:active { 787 | transform: translateY(0); 788 | } 789 | 790 | /* Modal close button */ 791 | .close-button { 792 | position: absolute; 793 | right: 20px; 794 | top: 20px; 795 | font-size: 1.5em; 796 | color: #aaa; 797 | cursor: pointer; 798 | transition: color 0.2s; 799 | } 800 | 801 | .close-button:hover, 802 | .close-button:focus { 803 | color: #000; 804 | text-decoration: none; 805 | } 806 | 807 | /* Form Section Styles */ 808 | fieldset { 809 | border: 1px solid #ccc; 810 | padding: 15px; 811 | margin-bottom: 20px; 812 | border-radius: 5px; 813 | overflow: hidden; 814 | } 815 | 816 | legend { 817 | font-size: 1.2em; 818 | font-weight: bold; 819 | color: var(--secondary-color); 820 | padding: 0 10px; 821 | } 822 | 823 | .form-group label i { 824 | margin-right: 8px; 825 | color: var(--primary-color); 826 | } 827 | 828 | /* Responsive styles */ 829 | @media (max-width: 768px) { 830 | .modal .form-group { 831 | flex-direction: column; 832 | align-items: stretch; 833 | } 834 | 835 | .modal .form-group label, 836 | .modal .form-group input, 837 | .modal .form-group select, 838 | .modal .form-group textarea { 839 | width: 100%; 840 | } 841 | } 842 | 843 | /* ===== Tooltip Styles ===== */ 844 | .task-bar[data-tooltip]:hover::after { 845 | content: attr(data-tooltip); 846 | position: absolute; 847 | left: 50%; 848 | bottom: calc(100% + 10px); 849 | transform: translateX(-50%); 850 | background-color: rgba(0,0,0,0.75); 851 | color: #fff; 852 | padding: 5px 10px; 853 | border-radius: 4px; 854 | white-space: nowrap; 855 | font-size: 0.8em; 856 | z-index: 1000; 857 | opacity: 0; 858 | transition: opacity 0.2s; 859 | } 860 | 861 | .task-bar[data-tooltip]:hover::after { 862 | opacity: 1; 863 | } 864 | 865 | /* Task Details Modal Styles */ 866 | .task-details-content { 867 | padding: 20px; 868 | } 869 | 870 | .task-details-content h3 { 871 | margin-top: 0; 872 | font-size: 1.8em; 873 | color: var(--secondary-color); 874 | } 875 | 876 | .task-details-content p { 877 | font-size: 1em; 878 | line-height: 1.6; 879 | color: var(--text-color); 880 | margin-bottom: 20px; 881 | } 882 | 883 | .task-details-content dl { 884 | margin: 0; 885 | display: grid; 886 | grid-template-columns: max-content auto; 887 | row-gap: 10px; 888 | column-gap: 20px; 889 | } 890 | 891 | .task-details-content dt { 892 | font-weight: bold; 893 | color: var(--text-color); 894 | display: flex; 895 | align-items: center; 896 | } 897 | 898 | .task-details-content dt i { 899 | margin-right: 8px; 900 | color: var(--primary-color); 901 | } 902 | 903 | .task-details-content dd { 904 | margin: 0; 905 | color: var(--text-color); 906 | } 907 | 908 | .task-details-content dd#detailStatusExplanation { 909 | margin-bottom: 20px; 910 | } 911 | 912 | .modal-content h2 { 913 | font-size: 1.5em; 914 | margin-bottom: 20px; 915 | border-bottom: 1px solid #ccc; 916 | padding-bottom: 10px; 917 | } 918 | 919 | .modal .close-button { 920 | color: #aaa; 921 | font-size: 1.5em; 922 | font-weight: bold; 923 | } 924 | 925 | .modal .close-button:hover, 926 | .modal .close-button:focus { 927 | color: black; 928 | cursor: pointer; 929 | } 930 | 931 | /* Styles for rendered markdown content */ 932 | .task-details-content h1, 933 | .task-details-content h2, 934 | .task-details-content h3, 935 | .task-details-content h4, 936 | .task-details-content h5, 937 | .task-details-content h6 { 938 | font-weight: bold; 939 | margin-top: 15px; 940 | margin-bottom: 10px; 941 | } 942 | 943 | .task-details-content ul, 944 | .task-details-content ol { 945 | margin-left: 20px; 946 | margin-bottom: 10px; 947 | } 948 | 949 | .task-details-content a { 950 | color: var(--primary-color); 951 | text-decoration: underline; 952 | } 953 | 954 | .task-details-content code { 955 | background-color: #f4f4f4; 956 | padding: 2px 4px; 957 | border-radius: 4px; 958 | font-family: monospace; 959 | } 960 | 961 | .task-details-content pre code { 962 | display: block; 963 | padding: 10px; 964 | overflow-x: auto; 965 | } 966 | 967 | /* Adjust modal dimensions and responsiveness */ 968 | .modal-content { 969 | width: 80%; 970 | max-width: 700px; 971 | padding: 30px; 972 | } 973 | 974 | @media (max-width: 768px) { 975 | .modal-content { 976 | width: 90%; 977 | padding: 20px; 978 | } 979 | 980 | .task-details-content dl { 981 | grid-template-columns: 1fr; 982 | } 983 | 984 | .task-details-content dt { 985 | margin-top: 10px; 986 | } 987 | } 988 | 989 | /* Darker overlay for modal background */ 990 | .modal { 991 | background-color: rgba(0, 0, 0, 0.8); 992 | } 993 | /* Status indicator styles */ 994 | .status-indicator { 995 | width: 12px; 996 | height: 12px; 997 | border-radius: 50%; 998 | margin-right: 8px; 999 | flex-shrink: 0; 1000 | } 1001 | 1002 | .status-on-track { 1003 | background-color: green; 1004 | } 1005 | 1006 | .status-some-risk { 1007 | background-color: yellow; 1008 | } 1009 | 1010 | .status-high-risk { 1011 | background-color: red; 1012 | } 1013 | 1014 | .status-scrapped { 1015 | background-color: red; 1016 | position: relative; 1017 | } 1018 | 1019 | .status-scrapped::before, 1020 | .status-scrapped::after { 1021 | content: ''; 1022 | position: absolute; 1023 | background-color: white; 1024 | transform: rotate(45deg); 1025 | } 1026 | 1027 | .status-scrapped::before { 1028 | width: 2px; 1029 | height: 12px; 1030 | left: 5px; 1031 | top: 0; 1032 | } 1033 | 1034 | .status-scrapped::after { 1035 | width: 12px; 1036 | height: 2px; 1037 | left: 0; 1038 | top: 5px; 1039 | } 1040 | 1041 | .status-finished { 1042 | background: none; /* Remove any background color */ 1043 | width: auto; /* Allow width to adjust to content */ 1044 | height: auto; /* Allow height to adjust */ 1045 | font-size: 16px; /* Adjust font size as needed */ 1046 | line-height: 1; /* Align the emoji properly */ 1047 | display: flex; 1048 | align-items: center; 1049 | } 1050 | 1051 | /* Current Day Indicator Styles */ 1052 | .current-day-indicator { 1053 | position: absolute; 1054 | top: 0; 1055 | bottom: 0; 1056 | width: 0; 1057 | border-left: 2px dashed lightgreen; 1058 | z-index: 2; /* Ensure it appears above other elements */ 1059 | } 1060 | 1061 | .current-date-symbol { 1062 | position: absolute; 1063 | top: 10px; /* Adjust to position the symbol vertically within the time scale */ 1064 | transform: translateX(-50%); 1065 | font-size: 16px; /* Adjust size as needed */ 1066 | z-index: 10; /* Ensure it appears above other elements */ 1067 | pointer-events: none; /* Allows clicks to pass through to underlying elements if needed */ 1068 | } 1069 | /* Person Items Styles */ 1070 | .person-item { 1071 | display: flex; 1072 | align-items: center; 1073 | padding: 10px; 1074 | border-bottom: 1px solid #eee; 1075 | } 1076 | 1077 | .person-item:last-child { 1078 | border-bottom: none; 1079 | } 1080 | 1081 | .person-item span { 1082 | flex-grow: 1; 1083 | font-size: 1em; 1084 | } 1085 | 1086 | .person-item button { 1087 | background-color: transparent; 1088 | color: var(--text-color); 1089 | border: none; 1090 | padding: 5px 8px; 1091 | border-radius: 4px; 1092 | cursor: pointer; 1093 | margin-left: 5px; 1094 | transition: background-color 0.2s; 1095 | } 1096 | 1097 | .person-item button:hover { 1098 | background-color: #f0f0f0; 1099 | } 1100 | 1101 | .person-item button i { 1102 | pointer-events: none; 1103 | } 1104 | .form-group label i { 1105 | margin-right: 8px; 1106 | color: var(--primary-color); 1107 | } 1108 | 1109 | .form-group { 1110 | margin-bottom: 20px; 1111 | } 1112 | 1113 | .form-group label { 1114 | margin-bottom: 5px; 1115 | } 1116 | 1117 | .modal-content { 1118 | width: 80%; 1119 | max-width: 700px; 1120 | padding: 30px; 1121 | } 1122 | 1123 | @media (max-width: 768px) { 1124 | .modal-content { 1125 | width: 90%; 1126 | padding: 20px; 1127 | } 1128 | 1129 | .form-group { 1130 | flex-direction: column; 1131 | align-items: stretch; 1132 | } 1133 | 1134 | .form-group label { 1135 | margin-bottom: 5px; 1136 | flex: unset; 1137 | } 1138 | } 1139 | 1140 | .form-group small { 1141 | display: block; 1142 | margin-top: 5px; 1143 | color: #666; 1144 | } 1145 | * { 1146 | box-sizing: border-box; 1147 | } 1148 | 1149 | .modal { 1150 | overflow-y: auto; 1151 | } 1152 | 1153 | /* ===== Fullscreen Mode Styles ===== */ 1154 | body.fullscreen-mode header, 1155 | body.fullscreen-mode .project-header, 1156 | body.fullscreen-mode #statusBar, 1157 | body.fullscreen-mode #categoryFilter { 1158 | display: none; 1159 | } 1160 | 1161 | body.fullscreen-mode main { 1162 | padding: 0; 1163 | height: 100vh; 1164 | padding-top: 10px; /* Add minimal padding in fullscreen mode */ 1165 | } 1166 | 1167 | body.fullscreen-mode .main-content { 1168 | height: 100vh; 1169 | position: relative; 1170 | } 1171 | 1172 | body.fullscreen-mode #ganttChart { 1173 | margin-top: 0; 1174 | height: 100vh; 1175 | } 1176 | 1177 | /* Styles for Exit Fullscreen Button */ 1178 | .exit-fullscreen-button { 1179 | position: fixed; 1180 | top: 10px; 1181 | right: 10px; 1182 | z-index: 1001; 1183 | background-color: rgba(255, 255, 255, 0.8); 1184 | color: var(--text-color); 1185 | border: none; 1186 | padding: 10px 15px; 1187 | border-radius: 4px; 1188 | cursor: pointer; 1189 | display: none; 1190 | } 1191 | 1192 | /* Show the exit fullscreen button only in fullscreen mode */ 1193 | body.fullscreen-mode .exit-fullscreen-button { 1194 | display: block; 1195 | } 1196 | 1197 | /* Hide the original fullscreen toggle button in fullscreen mode */ 1198 | body.fullscreen-mode #toggleFullscreen { 1199 | display: none; 1200 | } 1201 | 1202 | /* Adjust zoom controls positioning in fullscreen mode */ 1203 | body.fullscreen-mode .zoom-controls { 1204 | bottom: 10px; /* Add small padding in fullscreen */ 1205 | } 1206 | 1207 | /* Position and style the zoom toggle button */ 1208 | .zoom-toggle-button { 1209 | position: fixed; 1210 | bottom: 20px; 1211 | left: 20px; 1212 | z-index: 1000; 1213 | background-color: rgba(255, 255, 255, 0.95); 1214 | color: var(--secondary-color); 1215 | border: none; 1216 | padding: 12px; 1217 | border-radius: 50%; 1218 | cursor: pointer; 1219 | box-shadow: 0 2px 6px rgba(0,0,0,0.15); 1220 | } 1221 | 1222 | .zoom-toggle-button i { 1223 | font-size: 1.5em; 1224 | } 1225 | 1226 | /* Show zoom controls with fade-in effect */ 1227 | .zoom-controls-visible .zoom-controls { 1228 | display: flex; 1229 | opacity: 1; 1230 | transform: scale(1); 1231 | } 1232 | 1233 | /* Hide zoom controls with fade-out effect */ 1234 | .zoom-controls-hidden .zoom-controls { 1235 | opacity: 0; 1236 | transform: scale(0.95); 1237 | transition: transform 0.3s ease, opacity 0.3s ease; 1238 | display: none; 1239 | } 1240 | 1241 | /* Hide the zoom toggle button when zoom controls are visible */ 1242 | .zoom-controls-visible .zoom-toggle-button { 1243 | display: none; 1244 | } 1245 | 1246 | /* Style the hide zoom controls button */ 1247 | .hide-zoom-controls-button { 1248 | background: none; 1249 | border: none; 1250 | color: var(--secondary-color); 1251 | cursor: pointer; 1252 | position: absolute; 1253 | top: 5px; 1254 | right: 5px; 1255 | padding: 5px; 1256 | font-size: 1.2em; 1257 | } 1258 | 1259 | /* Adjust input ranges within zoom controls */ 1260 | .zoom-controls .zoom-group input[type="range"] { 1261 | width: 160px; 1262 | } 1263 | 1264 | /* Responsive adjustments */ 1265 | @media (max-width: 768px) { 1266 | .zoom-controls { 1267 | bottom: 10px; 1268 | left: 10px; 1269 | padding: 10px; 1270 | } 1271 | .zoom-toggle-button { 1272 | bottom: 10px; 1273 | left: 10px; 1274 | padding: 10px; 1275 | } 1276 | } 1277 | 1278 | /* Milestone styles */ 1279 | .milestone { 1280 | position: absolute; 1281 | transform: translateX(-50%); 1282 | font-size: 24px; 1283 | cursor: pointer; 1284 | z-index: 15; /* Ensure it's above other elements if necessary */ 1285 | top: 30px; /* Set this to position within the time scale */ 1286 | line-height: 1; 1287 | } 1288 | 1289 | /* Style the emoji display in the milestone details */ 1290 | #detailMilestoneEmoji { 1291 | font-size: 24px; 1292 | } 1293 | 1294 | .milestone[data-tooltip]:hover::after { 1295 | content: attr(data-tooltip); 1296 | position: absolute; 1297 | left: 50%; 1298 | top: calc(100% + 10px); /* Position tooltip below the icon */ 1299 | transform: translateX(-50%); 1300 | background-color: rgba(0, 0, 0, 0.75); 1301 | color: #fff; 1302 | padding: 5px 10px; 1303 | border-radius: 4px; 1304 | white-space: nowrap; 1305 | font-size: 0.8em; 1306 | z-index: 1000; 1307 | opacity: 0; 1308 | transition: opacity 0.2s; 1309 | } 1310 | 1311 | .milestone[data-tooltip]:hover::after { 1312 | opacity: 1; 1313 | } 1314 | 1315 | /* Task Details Modal Buttons */ 1316 | .task-details-content button { 1317 | background-color: var(--secondary-color); 1318 | color: #fff; 1319 | border: none; 1320 | padding: 10px 15px; 1321 | margin-right: 10px; 1322 | border-radius: 4px; 1323 | cursor: pointer; 1324 | transition: background-color 0.2s; 1325 | } 1326 | 1327 | .task-details-content button:hover { 1328 | background-color: var(--secondary-color-dark); 1329 | } 1330 | 1331 | .task-details-buttons { 1332 | margin-top: 20px; 1333 | } 1334 | 1335 | .task-details-buttons button { 1336 | margin-right: 10px; 1337 | } 1338 | 1339 | /* Milestone Modal Specific Styles */ 1340 | #milestoneModal .modal-content { 1341 | /* Add any specific styles if needed */ 1342 | } 1343 | 1344 | /* Emoji grid container */ 1345 | .emoji-grid { 1346 | display: flex; 1347 | flex-wrap: wrap; 1348 | gap: 10px; 1349 | } 1350 | 1351 | /* Emoji buttons */ 1352 | .emoji-button { 1353 | font-size: 24px; 1354 | padding: 10px; 1355 | border: 1px solid #ccc; 1356 | background-color: #fff; 1357 | border-radius: 4px; 1358 | cursor: pointer; 1359 | transition: background-color 0.2s, border-color 0.2s; 1360 | } 1361 | 1362 | .emoji-button:hover { 1363 | background-color: #f0f0f0; 1364 | } 1365 | 1366 | .emoji-button.selected { 1367 | border-color: var(--primary-color); 1368 | background-color: #e0ffe0; 1369 | } 1370 | 1371 | /* Milestone Details Modal Styles */ 1372 | .milestone-details-content { 1373 | padding: 20px; 1374 | } 1375 | 1376 | .milestone-details-content h3 { 1377 | margin-top: 0; 1378 | font-size: 1.8em; 1379 | color: var(--secondary-color); 1380 | } 1381 | 1382 | .milestone-details-content p { 1383 | font-size: 1em; 1384 | line-height: 1.6; 1385 | color: var(--text-color); 1386 | margin-bottom: 20px; 1387 | } 1388 | 1389 | .milestone-details-content dl { 1390 | margin: 0; 1391 | display: grid; 1392 | grid-template-columns: max-content auto; 1393 | row-gap: 10px; 1394 | column-gap: 20px; 1395 | } 1396 | 1397 | .milestone-details-content dt { 1398 | font-weight: bold; 1399 | color: var(--text-color); 1400 | display: flex; 1401 | align-items: center; 1402 | } 1403 | 1404 | .milestone-details-content dt i { 1405 | margin-right: 8px; 1406 | color: var(--primary-color); 1407 | } 1408 | 1409 | .milestone-details-content dd { 1410 | margin: 0; 1411 | color: var(--text-color); 1412 | } 1413 | 1414 | .milestone-details-buttons { 1415 | margin-top: 20px; 1416 | } 1417 | 1418 | .milestone-details-buttons button { 1419 | background-color: var(--secondary-color); 1420 | color: #fff; 1421 | border: none; 1422 | padding: 10px 15px; 1423 | margin-right: 10px; 1424 | border-radius: 4px; 1425 | cursor: pointer; 1426 | transition: background-color 0.2s; 1427 | } 1428 | 1429 | .milestone-details-buttons button:hover { 1430 | background-color: var(--secondary-color-dark); 1431 | } 1432 | 1433 | .milestone-details-buttons button i { 1434 | margin-right: 5px; 1435 | } 1436 | 1437 | /* Responsive Styles for Milestone Details Modal */ 1438 | @media (max-width: 768px) { 1439 | .milestone-details-content dl { 1440 | grid-template-columns: 1fr; 1441 | } 1442 | 1443 | .milestone-details-content dt { 1444 | margin-top: 10px; 1445 | } 1446 | 1447 | .milestone-details-buttons { 1448 | display: flex; 1449 | flex-direction: column; 1450 | margin-top: 15px; 1451 | } 1452 | 1453 | .milestone-details-buttons button { 1454 | margin-right: 0; 1455 | margin-bottom: 10px; 1456 | } 1457 | } 1458 | 1459 | .close-button { 1460 | position: absolute; 1461 | right: 20px; 1462 | top: 20px; 1463 | font-size: 1.8em; 1464 | color: var(--secondary-color); 1465 | cursor: pointer; 1466 | transition: color 0.2s; 1467 | } 1468 | 1469 | .close-button:hover, 1470 | .close-button:focus { 1471 | color: var(--secondary-color-dark); 1472 | } 1473 | 1474 | /* Modal Animations */ 1475 | @keyframes fadeIn { 1476 | from { opacity: 0; transform: translateY(-20px); } 1477 | to { opacity: 1; transform: translateY(0); } 1478 | } 1479 | 1480 | .modal-content { 1481 | animation: fadeIn 0.3s ease-out; 1482 | } 1483 | 1484 | /* ===== Status Bar Styles ===== */ 1485 | #statusBar { 1486 | position: fixed; 1487 | bottom: 0; 1488 | left: 0; 1489 | width: 100%; 1490 | background-color: #f1f1f1; /* Light gray background */ 1491 | padding: 5px 10px; 1492 | box-sizing: border-box; 1493 | display: flex; 1494 | justify-content: space-between; 1495 | font-size: 0.9em; 1496 | color: var(--text-color); 1497 | border-top: 1px solid #ccc; 1498 | z-index: 1000; /* Ensure it stays above other elements */ 1499 | } 1500 | 1501 | #statusBar span { 1502 | overflow: hidden; 1503 | text-overflow: ellipsis; 1504 | white-space: nowrap; 1505 | } 1506 | 1507 | #filePathDisplay { 1508 | max-width: 70%; 1509 | } 1510 | 1511 | #filePathDisplay:hover { 1512 | overflow: visible; 1513 | white-space: normal; 1514 | position: absolute; 1515 | background-color: #fff; 1516 | padding: 5px; 1517 | border: 1px solid #ccc; 1518 | z-index: 1001; 1519 | } 1520 | 1521 | /* Category Filter Styles */ 1522 | #categoryFilter { 1523 | width: 100%; 1524 | margin-top: 20px; 1525 | margin-bottom: 20px; 1526 | } 1527 | 1528 | /* Increase z-index of the Choices.js dropdown */ 1529 | .choices__list[aria-expanded] { 1530 | z-index: 1000; /* Ensures it appears above other elements */ 1531 | } 1532 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | // NOTE: When displaying, creating, or updating items, always handle missing properties gracefully. 2 | // This ensures backward compatibility with files created in previous versions of the app. 3 | 4 | let projectData = { 5 | projectName: "Untitled Project", 6 | categories: [], 7 | tasks: [], 8 | people: [], 9 | milestones: [], 10 | }; 11 | const emojiList = [ 12 | "🏁", 13 | "🚀", 14 | "🎉", 15 | "📅", 16 | "✅", 17 | "❗", 18 | "⭐", 19 | "🛠️", 20 | "📈", 21 | "💡", 22 | "❌", 23 | "⏰", 24 | "🎁", 25 | "💯", 26 | "📌", 27 | "🚩", 28 | "🎯", 29 | "🔑", 30 | "🔒", 31 | "🚦", 32 | "📣", 33 | "📝", 34 | ]; 35 | 36 | let filePathDisplay; 37 | let lastEditedDisplay; 38 | let categoryFilterChoices; 39 | 40 | function updateStatusBar(lastEdited = null) { 41 | if (fileHandle && fileHandle.name) { 42 | filePathDisplay.textContent = `File: ${fileHandle.name}`; 43 | filePathDisplay.title = fileHandle.name; // Set tooltip to full file name 44 | } else { 45 | filePathDisplay.textContent = "File: (unsaved project)"; 46 | filePathDisplay.title = "No file loaded."; 47 | } 48 | 49 | if (lastEdited) { 50 | lastEditedDisplay.textContent = `Last Edited: ${lastEdited.toLocaleString()}`; 51 | } else { 52 | lastEditedDisplay.textContent = ""; 53 | } 54 | } 55 | 56 | function populateEmojiGrid(selectedEmoji) { 57 | const emojiGrid = document.getElementById("milestoneEmojiGrid"); 58 | emojiGrid.innerHTML = ""; // Clear existing emojis 59 | 60 | emojiList.forEach((emoji) => { 61 | const emojiButton = document.createElement("button"); 62 | emojiButton.type = "button"; // Ensure it doesn't submit the form 63 | emojiButton.classList.add("emoji-button"); 64 | emojiButton.textContent = emoji; 65 | 66 | // Highlight the selected emoji 67 | if (emoji === selectedEmoji) { 68 | emojiButton.classList.add("selected"); 69 | } 70 | 71 | emojiButton.addEventListener("click", () => { 72 | // Remove 'selected' class from all buttons 73 | document 74 | .querySelectorAll(".emoji-button") 75 | .forEach((btn) => btn.classList.remove("selected")); 76 | // Add 'selected' class to the clicked button 77 | emojiButton.classList.add("selected"); 78 | // Update the hidden input value 79 | document.getElementById("milestoneEmoji").value = emoji; 80 | }); 81 | 82 | emojiGrid.appendChild(emojiButton); 83 | }); 84 | } 85 | const CATEGORY_HEADING_HEIGHT = 30; // Adjust as needed 86 | let fileHandle; 87 | let currentMilestoneId = null; 88 | let currentTaskIndex = null; 89 | 90 | // Helper function to detect circular dependencies 91 | function hasCircularDependency(tasks, currentTaskIndex, visited = new Set()) { 92 | if (visited.has(currentTaskIndex)) { 93 | return true; // Cycle detected 94 | } 95 | visited.add(currentTaskIndex); 96 | 97 | const task = tasks[currentTaskIndex]; 98 | if (!task || !Array.isArray(task.dependencies)) { 99 | visited.delete(currentTaskIndex); 100 | return false; 101 | } 102 | 103 | for (const depIndex of task.dependencies) { 104 | if (depIndex === currentTaskIndex) { 105 | // Task depends on itself 106 | visited.delete(currentTaskIndex); 107 | return true; 108 | } 109 | if (hasCircularDependency(tasks, depIndex, visited)) { 110 | visited.delete(currentTaskIndex); 111 | return true; 112 | } 113 | } 114 | 115 | visited.delete(currentTaskIndex); 116 | return false; 117 | } 118 | 119 | const projectNameDisplay = document.getElementById("projectNameDisplay"); 120 | const projectNameInput = document.getElementById("projectNameInput"); 121 | const editProjectNameButton = document.getElementById("editProjectNameButton"); 122 | 123 | function updateProjectNameDisplay() { 124 | projectNameDisplay.textContent = 125 | projectData.projectName || "Untitled Project"; 126 | projectNameInput.value = projectData.projectName || "Untitled Project"; 127 | } 128 | 129 | function startResizing(e, taskIndex, taskElem, direction) { 130 | isResizing = true; 131 | resizeTaskIndex = taskIndex; 132 | resizeTaskElement = taskElem; 133 | resizeDirection = direction; 134 | initialMouseX = e.clientX; 135 | const task = projectData.tasks[taskIndex]; 136 | initialTaskStart = new Date(task.start + "T00:00:00Z"); 137 | initialTaskDuration = task.duration; 138 | 139 | // Prevent text selection 140 | document.body.style.userSelect = "none"; 141 | ganttChart.classList.add("resizing"); 142 | } 143 | 144 | function resizeTask(e) { 145 | const deltaX = e.clientX - initialMouseX; 146 | const deltaDays = Math.round(deltaX / pixelsPerDay); 147 | 148 | const task = projectData.tasks[resizeTaskIndex]; 149 | 150 | // Check for dependency constraints 151 | let isValid = true; 152 | 153 | if (resizeDirection === "left") { 154 | // Adjust start date and duration 155 | const newStartDate = new Date( 156 | initialTaskStart.getTime() + deltaDays * 24 * 60 * 60 * 1000 157 | ); 158 | const newDuration = initialTaskDuration - deltaDays; 159 | 160 | if (newDuration >= 1) { 161 | // For adjusting start date 162 | const dependencies = task.dependencies || []; 163 | dependencies.forEach((depIndex) => { 164 | const depTask = projectData.tasks[depIndex]; 165 | const depEndDate = new Date(depTask.start + "T00:00:00Z"); 166 | depEndDate.setDate(depEndDate.getDate() + depTask.duration); 167 | if (newStartDate < depEndDate) { 168 | isValid = false; 169 | } 170 | }); 171 | 172 | if (isValid) { 173 | task.start = newStartDate.toISOString().split("T")[0]; 174 | task.duration = newDuration; 175 | 176 | // Update the task element position and width 177 | resizeTaskElement.style.left = `${ 178 | ((newStartDate - projectStartDate) / (1000 * 60 * 60 * 24)) * 179 | pixelsPerDay 180 | }px`; 181 | resizeTaskElement.style.width = `${task.duration * pixelsPerDay}px`; 182 | } 183 | } 184 | } else if (resizeDirection === "right") { 185 | // Adjust duration 186 | const newDuration = initialTaskDuration + deltaDays; 187 | if (newDuration >= 1) { 188 | task.duration = newDuration; 189 | 190 | // Update the task element width 191 | resizeTaskElement.style.width = `${task.duration * pixelsPerDay}px`; 192 | } 193 | } 194 | } 195 | 196 | function stopResizing(e) { 197 | isResizing = false; 198 | resizeTaskIndex = null; 199 | resizeTaskElement = null; 200 | resizeDirection = null; 201 | document.body.style.userSelect = ""; 202 | ganttChart.classList.remove("resizing"); 203 | 204 | // Re-render the chart to adjust dependencies and positions 205 | renderGanttChart(projectData); 206 | // Save project data 207 | saveProjectData(projectData, true); 208 | } 209 | 210 | function handleScroll() { 211 | const ganttChartRect = ganttChart.getBoundingClientRect(); 212 | 213 | // Select all task bars 214 | const taskBars = ganttChart.querySelectorAll('.task-bar'); 215 | 216 | taskBars.forEach(taskBar => { 217 | const taskBarRect = taskBar.getBoundingClientRect(); 218 | const taskContent = taskBar.querySelector('.task-content'); 219 | const taskButtons = taskBar.querySelector('.task-buttons'); 220 | 221 | if (taskContent && taskButtons) { 222 | // Calculate the amount the task bar is hidden to the left 223 | const offset = ganttChartRect.left - taskBarRect.left; 224 | 225 | // Calculate the maximum offset to prevent overlapping with the buttons 226 | const maxOffset = Math.max(0, taskBarRect.width - taskButtons.offsetWidth - taskContent.offsetWidth); 227 | 228 | if (offset > 0) { 229 | // Task bar is partially hidden to the left 230 | const adjustedOffset = Math.min(offset, maxOffset); 231 | taskContent.style.transform = `translateX(${adjustedOffset}px)`; 232 | } else { 233 | // Reset the transform when the task bar is fully visible 234 | taskContent.style.transform = 'translateX(0)'; 235 | } 236 | } 237 | }); 238 | } 239 | 240 | // When the edit button is clicked 241 | editProjectNameButton.addEventListener("click", () => { 242 | projectNameDisplay.style.display = "none"; 243 | projectNameInput.style.display = "inline-block"; 244 | projectNameInput.focus(); 245 | }); 246 | 247 | // When the user finishes editing (input loses focus) 248 | projectNameInput.addEventListener("blur", () => { 249 | projectData.projectName = projectNameInput.value.trim() || "Untitled Project"; 250 | projectNameDisplay.style.display = "inline"; 251 | projectNameInput.style.display = "none"; 252 | updateProjectNameDisplay(); 253 | // Optionally save the project data to persist the name change 254 | saveProjectData(projectData, true); 255 | }); 256 | 257 | // Optional: Allow pressing Enter to finish editing 258 | projectNameInput.addEventListener("keyup", (event) => { 259 | if (event.key === "Enter") { 260 | projectNameInput.blur(); 261 | } 262 | }); 263 | 264 | function getISOWeekNumber(date) { 265 | const tempDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())); 266 | // Set to nearest Thursday: current date + 4 - current day number 267 | tempDate.setUTCDate(tempDate.getUTCDate() + 4 - (tempDate.getUTCDay() || 7)); 268 | // Get first day of the year 269 | const yearStart = new Date(Date.UTC(tempDate.getUTCFullYear(), 0, 1)); 270 | // Calculate full weeks to the nearest Thursday 271 | const weekNo = Math.ceil(((tempDate - yearStart) / 86400000 + 1) / 7); 272 | return weekNo; 273 | } 274 | 275 | let pixelsPerDay = 30; // For horizontal zoom 276 | let taskHeight = 30; // For vertical zoom 277 | let taskSpacing = 5; 278 | const GANTT_CHART_PADDING_TOP = 60; // This should match the padding-top in styles.css 279 | 280 | let isPanning = false; 281 | let startX = 0; 282 | let startY = 0; 283 | let scrollLeft = 0; 284 | let scrollTop = 0; 285 | 286 | let isShiftKeyDown = false; 287 | let isResizing = false; 288 | let resizeTaskIndex = null; 289 | let resizeTaskElement = null; 290 | let resizeDirection = null; // 'left' or 'right' 291 | let initialMouseX = 0; 292 | let initialTaskStart = null; 293 | let initialTaskDuration = 0; 294 | let projectStartDate; 295 | let timeScaleUnit = 'days'; // Default unit for time scale display: 'days', 'weeks', or 'months' 296 | 297 | // Add these event listeners to track the Shift key 298 | document.addEventListener("keydown", (e) => { 299 | if (e.key === "Shift") { 300 | isShiftKeyDown = true; 301 | document.body.classList.add("shift-key-down"); 302 | } 303 | }); 304 | 305 | document.addEventListener("keyup", (e) => { 306 | if (e.key === "Shift") { 307 | isShiftKeyDown = false; 308 | document.body.classList.remove("shift-key-down"); 309 | } 310 | }); 311 | 312 | function computeTaskStartDate( 313 | index, 314 | taskStartDates, 315 | projectData, 316 | visited = {} 317 | ) { 318 | if (taskStartDates[index]) { 319 | return taskStartDates[index]; 320 | } 321 | 322 | if (visited[index]) { 323 | throw new Error("Circular dependency detected in tasks."); 324 | } 325 | visited[index] = true; 326 | 327 | const task = projectData.tasks[index]; 328 | 329 | // Ensure `task.start` exists and is valid 330 | let taskStartDate; 331 | if (task.start) { 332 | taskStartDate = new Date(task.start + "T00:00:00Z"); 333 | if (isNaN(taskStartDate.getTime())) { 334 | // Invalid date, set to current date 335 | const currentDateStr = new Date().toISOString().split("T")[0]; 336 | taskStartDate = new Date(currentDateStr + "T00:00:00Z"); 337 | } 338 | } else { 339 | // Default start date if missing is current date 340 | const currentDateStr = new Date().toISOString().split("T")[0]; 341 | taskStartDate = new Date(currentDateStr + "T00:00:00Z"); 342 | } 343 | 344 | if (task.dependencies && task.dependencies.length > 0) { 345 | const latestDependencyEnd = task.dependencies.reduce( 346 | (latestDate, depIndex) => { 347 | const depStartDate = computeTaskStartDate( 348 | depIndex, 349 | taskStartDates, 350 | projectData, 351 | visited 352 | ); 353 | const depTask = projectData.tasks[depIndex]; 354 | const depEndDate = new Date( 355 | depStartDate.getTime() + depTask.duration * 24 * 60 * 60 * 1000 356 | ); 357 | return depEndDate > latestDate ? depEndDate : latestDate; 358 | }, 359 | new Date(0) 360 | ); 361 | 362 | if (latestDependencyEnd > taskStartDate) { 363 | taskStartDate = latestDependencyEnd; 364 | } 365 | } 366 | 367 | taskStartDates[index] = taskStartDate; 368 | delete visited[index]; 369 | return taskStartDate; 370 | } 371 | 372 | document 373 | .getElementById("loadProject") 374 | .addEventListener("click", async function () { 375 | if ("showOpenFilePicker" in window) { 376 | try { 377 | const [handle] = await window.showOpenFilePicker({ 378 | types: [ 379 | { 380 | description: "YAML Files", 381 | accept: { "text/yaml": [".yaml", ".yml"] }, 382 | }, 383 | ], 384 | multiple: false, 385 | }); 386 | fileHandle = handle; 387 | 388 | const file = await fileHandle.getFile(); 389 | const yamlText = await file.text(); 390 | console.log("Raw YAML content:", yamlText); 391 | 392 | try { 393 | projectData = jsyaml.load(yamlText); 394 | 395 | // Initialize `projectName` if it's undefined or empty 396 | if ( 397 | !projectData.projectName || 398 | projectData.projectName.trim() === "" 399 | ) { 400 | projectData.projectName = "Untitled Project"; 401 | } 402 | 403 | // Initialize tasks array if it's not an array 404 | if (!Array.isArray(projectData.tasks)) { 405 | projectData.tasks = []; 406 | console.warn( 407 | "Project data did not contain tasks array. Initialized as empty." 408 | ); 409 | } 410 | 411 | // Initialize properties for each task 412 | projectData.tasks.forEach((task) => { 413 | if (!Array.isArray(task.dependencies)) { 414 | task.dependencies = []; 415 | } 416 | // Initialize missing task properties for backward compatibility 417 | if (!task.name) { 418 | task.name = "Untitled Task"; 419 | } 420 | if (!task.start) { 421 | // Update to use the current date as default start date 422 | const currentDateStr = new Date().toISOString().split("T")[0]; // Format as 'YYYY-MM-DD' 423 | task.start = currentDateStr; 424 | } 425 | if (!task.duration || isNaN(parseInt(task.duration, 10))) { 426 | task.duration = 1; // Default duration 427 | } 428 | if (!task.categoryId) { 429 | task.categoryId = null; 430 | } 431 | if (!task.description) { 432 | task.description = ""; 433 | } 434 | if (!task.status) { 435 | task.status = "on-track"; 436 | } 437 | if (!task.statusExplanation) { 438 | task.statusExplanation = ""; 439 | } 440 | if (!Array.isArray(task.assignedPeople)) { 441 | task.assignedPeople = []; 442 | } 443 | }); 444 | } catch (parseError) { 445 | console.error("YAML Parsing Error:", parseError); 446 | throw new Error("Failed to parse YAML: " + parseError.message); 447 | } 448 | 449 | // Initialize `categories` if it's undefined 450 | if (!Array.isArray(projectData.categories)) { 451 | projectData.categories = []; 452 | } 453 | 454 | // Initialize `people` if it's undefined 455 | if (!Array.isArray(projectData.people)) { 456 | projectData.people = []; 457 | } 458 | 459 | // Initialize `milestones` if it's undefined (for backward compatibility with older project files) 460 | if (!Array.isArray(projectData.milestones)) { 461 | projectData.milestones = []; 462 | } 463 | 464 | console.log("Loaded projectData:", projectData); 465 | 466 | if (!projectData || typeof projectData !== "object") { 467 | throw new Error("Invalid project data: not an object"); 468 | } 469 | 470 | if (!Array.isArray(projectData.tasks)) { 471 | projectData.tasks = []; 472 | console.warn( 473 | "Project data did not contain tasks array. Initialized as empty." 474 | ); 475 | } 476 | 477 | // Initialize dependencies as an array for all tasks 478 | projectData.tasks.forEach((task) => { 479 | if (!Array.isArray(task.dependencies)) { 480 | task.dependencies = []; 481 | } 482 | }); 483 | 484 | // Use filename as project name only if projectName is missing or empty 485 | if (!projectData.projectName || projectData.projectName.trim() === "") { 486 | projectData.projectName = fileHandle.name.replace(/\.[^/.]+$/, ""); // Remove file extension 487 | } 488 | 489 | updateProjectNameDisplay(); 490 | updateCategoryOptions(); 491 | updateCategoryFilterOptions(); 492 | updateDependenciesOptions(); 493 | renderGanttChart(projectData); 494 | renderCategoriesList(); 495 | 496 | // Save project data and file name to localStorage 497 | localStorage.setItem("projectData", JSON.stringify(projectData)); 498 | localStorage.setItem("fileName", fileHandle.name); 499 | 500 | // Update status bar with file info 501 | if (fileHandle && fileHandle.name) { 502 | const file = await fileHandle.getFile(); 503 | const lastModified = new Date(file.lastModified); 504 | updateStatusBar(lastModified); 505 | 506 | // Save last edited time to localStorage 507 | localStorage.setItem("lastEdited", lastModified.toISOString()); 508 | } else { 509 | updateStatusBar(); 510 | } 511 | } catch (error) { 512 | alert("Failed to load project: " + error.message); 513 | console.error("Error loading project:", error); 514 | } 515 | } else { 516 | alert("Your browser does not support the File System Access API."); 517 | } 518 | }); 519 | 520 | document 521 | .getElementById("newProject") 522 | .addEventListener("click", async function () { 523 | projectData = { 524 | projectName: "Untitled Project", 525 | tasks: [], 526 | categories: [], 527 | people: [], 528 | }; 529 | fileHandle = null; // Reset the fileHandle 530 | updateProjectNameDisplay(); 531 | renderGanttChart(projectData); 532 | updateDependenciesOptions(); 533 | 534 | // Clear localStorage when creating a new project 535 | localStorage.removeItem("projectData"); 536 | localStorage.removeItem("fileName"); 537 | 538 | // Reset status bar 539 | updateStatusBar(); 540 | }); 541 | 542 | document 543 | .getElementById("saveProject") 544 | .addEventListener("click", async function () { 545 | await saveProjectData(projectData, false); 546 | }); 547 | 548 | document 549 | .getElementById("saveAsProject") 550 | .addEventListener("click", async function () { 551 | fileHandle = null; 552 | await saveProjectData(projectData, false); 553 | }); 554 | 555 | document 556 | .getElementById("addTaskForm") 557 | .addEventListener("submit", async function (event) { 558 | event.preventDefault(); 559 | const submitButton = event.target.querySelector('button[type="submit"]'); 560 | const editIndex = submitButton.getAttribute("data-edit-index"); 561 | const formErrorMessage = document.getElementById("formErrorMessage"); 562 | 563 | // Collect form inputs 564 | const taskName = document.getElementById("taskName").value.trim(); 565 | let taskStart = document.getElementById("taskStart").value; 566 | 567 | // If taskStart is empty, use current date 568 | if (!taskStart) { 569 | taskStart = new Date().toISOString().split("T")[0]; 570 | } 571 | const taskDurationValue = document.getElementById("taskDuration").value; 572 | 573 | // Validate task start date 574 | if (!taskStart) { 575 | formErrorMessage.textContent = 576 | "Please enter a valid start date for the task."; 577 | return; 578 | } 579 | 580 | // Validate task duration 581 | const taskDuration = parseInt(taskDurationValue, 10); 582 | if (isNaN(taskDuration) || taskDuration < 1) { 583 | formErrorMessage.textContent = 584 | "Please enter a valid duration (number greater than 0) for the task."; 585 | return; 586 | } 587 | 588 | // Clear the error message when validation passes 589 | formErrorMessage.textContent = ""; 590 | 591 | // Collect task description 592 | const taskDescription = document 593 | .getElementById("taskDescription") 594 | .value.trim(); 595 | 596 | // Collect dependencies 597 | const dependenciesSelect = document.getElementById("taskDependencies"); 598 | let dependencies = Array.from(dependenciesSelect.selectedOptions).map( 599 | (option) => parseInt(option.value) 600 | ); 601 | 602 | // If editing, remove self-dependency just in case 603 | if (editIndex !== null) { 604 | const currentIndex = parseInt(editIndex, 10); 605 | dependencies = dependencies.filter( 606 | (depIndex) => depIndex !== currentIndex 607 | ); 608 | } 609 | 610 | // Collect selected category 611 | const categorySelect = document.getElementById("taskCategory"); 612 | const categoryId = parseInt(categorySelect.value, 10); 613 | 614 | const taskStatus = 615 | document.getElementById("taskStatus").value || "on-track"; 616 | const statusExplanation = document 617 | .getElementById("statusExplanation") 618 | .value.trim(); 619 | 620 | // Collect assigned people 621 | const assignedPeopleSelect = document.getElementById("taskPeople"); 622 | const assignedPeople = Array.from(assignedPeopleSelect.selectedOptions).map( 623 | (option) => parseInt(option.value) 624 | ); 625 | 626 | const task = { 627 | name: taskName, 628 | start: taskStart, 629 | duration: taskDuration, 630 | dependencies: dependencies || [], 631 | categoryId: categoryId || null, 632 | description: taskDescription || "", 633 | status: taskStatus || "on-track", 634 | statusExplanation: statusExplanation || "", 635 | assignedPeople: assignedPeople || [], 636 | }; 637 | 638 | // Create a temporary copy of tasks 639 | let tempTasks = projectData.tasks.slice(); // Shallow copy of the array 640 | 641 | let currentTaskIndex; 642 | if (editIndex !== null) { 643 | currentTaskIndex = parseInt(editIndex, 10); 644 | // Update the task in tempTasks 645 | tempTasks[currentTaskIndex] = task; 646 | } else { 647 | // Set the index for the new task 648 | currentTaskIndex = tempTasks.length; 649 | // Add new task to tempTasks 650 | tempTasks.push(task); 651 | } 652 | 653 | // Check for circular dependencies 654 | if (hasCircularDependency(tempTasks, currentTaskIndex)) { 655 | formErrorMessage.textContent = 656 | "Circular dependency detected. Please resolve the dependencies."; 657 | return; // Terminate the submission 658 | } 659 | 660 | // If no circular dependency is detected, proceed to add or update the task 661 | if (editIndex !== null) { 662 | projectData.tasks[currentTaskIndex] = task; 663 | } else { 664 | projectData.tasks.push(task); 665 | } 666 | 667 | // Reset the submit button for future use 668 | submitButton.textContent = "Add Task"; 669 | submitButton.removeAttribute("data-edit-index"); 670 | 671 | renderGanttChart(projectData); 672 | updateDependenciesOptions(); 673 | 674 | try { 675 | await saveProjectData(projectData, true); 676 | } catch (error) { 677 | console.error("Error during save:", error); 678 | const statusMessage = document.getElementById("statusMessage"); 679 | statusMessage.textContent = "Error saving project."; 680 | statusMessage.style.color = "red"; 681 | } 682 | 683 | event.target.reset(); 684 | taskModal.style.display = "none"; 685 | choices.removeActiveItems(); 686 | }); 687 | 688 | function renderTimeScale(projectStartDate, projectEndDate) { 689 | projectStartDate = new Date( 690 | projectStartDate.toISOString().split("T")[0] + "T00:00:00Z" 691 | ); 692 | projectEndDate = new Date( 693 | projectEndDate.toISOString().split("T")[0] + "T00:00:00Z" 694 | ); 695 | 696 | const timeScale = document.createElement("div"); 697 | timeScale.classList.add("time-scale"); 698 | 699 | const days = Math.ceil((projectEndDate - projectStartDate) / (1000 * 60 * 60 * 24)); 700 | 701 | // Calculate the total width of the timescale 702 | const totalWidth = (days + 1) * pixelsPerDay; 703 | timeScale.style.width = `${totalWidth}px`; 704 | 705 | // Clear any existing grid lines and labels 706 | // (Assuming this function is called fresh each time) 707 | 708 | if (timeScaleUnit === 'days') { 709 | // Render days 710 | for (let i = 0; i <= days; i++) { 711 | const date = new Date(projectStartDate.getTime() + i * 24 * 60 * 60 * 1000); 712 | 713 | // Create vertical grid lines 714 | const daySeparator = document.createElement("div"); 715 | daySeparator.classList.add("day-separator"); 716 | daySeparator.style.left = `${i * pixelsPerDay}px`; 717 | timeScale.appendChild(daySeparator); 718 | 719 | // Add date labels every 7 days 720 | if (i % 7 === 0) { 721 | const dateLabel = document.createElement("div"); 722 | dateLabel.classList.add("date-label"); 723 | dateLabel.style.left = `${i * pixelsPerDay}px`; 724 | dateLabel.textContent = date.toLocaleDateString(undefined, { 725 | month: "short", 726 | day: "numeric", 727 | }); 728 | timeScale.appendChild(dateLabel); 729 | } 730 | } 731 | } else if (timeScaleUnit === 'weeks') { 732 | // Render weeks 733 | 734 | // Adjust start date to the Monday before or equal to projectStartDate 735 | const startDate = new Date(projectStartDate); 736 | const day = startDate.getDay(); 737 | const diff = (day === 0 ? -6 : 1 - day); // Adjust when day is Sunday 738 | startDate.setDate(startDate.getDate() + diff); 739 | 740 | let date = new Date(startDate); 741 | while (date <= projectEndDate) { 742 | const daysFromStart = (date - projectStartDate) / (1000 * 60 * 60 * 24); 743 | const position = daysFromStart * pixelsPerDay; 744 | 745 | // Create vertical grid lines 746 | const weekSeparator = document.createElement("div"); 747 | weekSeparator.classList.add("day-separator"); 748 | weekSeparator.style.left = `${position}px`; 749 | timeScale.appendChild(weekSeparator); 750 | 751 | // Calculate Swedish (ISO) week number 752 | const weekNumber = getISOWeekNumber(date); 753 | 754 | // Add week label 755 | const dateLabel = document.createElement("div"); 756 | dateLabel.classList.add("date-label"); 757 | dateLabel.style.left = `${position}px`; 758 | dateLabel.textContent = `W.${weekNumber}`; 759 | timeScale.appendChild(dateLabel); 760 | 761 | // Advance to next week 762 | date.setDate(date.getDate() + 7); 763 | } 764 | } else if (timeScaleUnit === 'months') { 765 | // Render months 766 | const currentDate = new Date(projectStartDate.getFullYear(), projectStartDate.getMonth(), 1); 767 | while (currentDate <= projectEndDate) { 768 | const daysFromStart = (currentDate - projectStartDate) / (1000 * 60 * 60 * 24); 769 | const position = daysFromStart * pixelsPerDay; 770 | 771 | // Calculate the number of days in the current month 772 | const nextMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1); 773 | const daysInMonth = (nextMonth - currentDate) / (1000 * 60 * 60 * 24); 774 | const monthWidth = daysInMonth * pixelsPerDay; 775 | 776 | // Create vertical grid lines for the month 777 | const monthSeparator = document.createElement("div"); 778 | monthSeparator.classList.add("day-separator", "month-separator"); 779 | monthSeparator.style.left = `${position}px`; 780 | timeScale.appendChild(monthSeparator); 781 | 782 | // Create and position the date label 783 | const dateLabel = document.createElement("div"); 784 | dateLabel.classList.add("date-label", "month-label"); 785 | dateLabel.style.left = `${position}px`; 786 | dateLabel.style.width = `${monthWidth}px`; // Set the width to span the entire month 787 | dateLabel.textContent = currentDate.toLocaleDateString(undefined, { 788 | month: "long", 789 | year: "numeric", 790 | }); 791 | timeScale.appendChild(dateLabel); 792 | 793 | // Advance to the next month 794 | currentDate.setMonth(currentDate.getMonth() + 1); 795 | } 796 | } 797 | 798 | // Add current date symbol to the time scale 799 | const currentDate = new Date( 800 | new Date().toISOString().split("T")[0] + "T00:00:00Z" 801 | ); 802 | 803 | if (currentDate >= projectStartDate && currentDate <= projectEndDate) { 804 | const daysFromStartToCurrent = 805 | (currentDate - projectStartDate) / (1000 * 60 * 60 * 24); 806 | const currentDatePosition = daysFromStartToCurrent * pixelsPerDay; 807 | 808 | const currentDateSymbol = document.createElement("div"); 809 | currentDateSymbol.classList.add("current-date-symbol"); 810 | currentDateSymbol.style.left = `${currentDatePosition}px`; 811 | 812 | // Use a symbol or emoji to represent the current date 813 | currentDateSymbol.innerHTML = "🔹"; // Small blue diamond symbol 814 | 815 | currentDateSymbol.style.position = "absolute"; 816 | currentDateSymbol.style.top = "0"; // Adjust vertical position as needed 817 | 818 | timeScale.appendChild(currentDateSymbol); 819 | } 820 | 821 | return timeScale; 822 | } 823 | 824 | function updateCategoryFilterOptions() { 825 | const choicesList = projectData.categories.map((category) => ({ 826 | value: category.id.toString(), 827 | label: category.name, 828 | selected: true, // All categories selected by default 829 | })); 830 | 831 | // Add the 'Uncategorized' option 832 | choicesList.push({ 833 | value: 'uncategorized', 834 | label: 'Uncategorized', 835 | selected: true, 836 | }); 837 | 838 | categoryFilterChoices.clearChoices(); 839 | categoryFilterChoices.setChoices(choicesList, 'value', 'label', false); 840 | 841 | // Ensure all categories are selected 842 | const allValues = choicesList.map(choice => choice.value); 843 | categoryFilterChoices.setValue(allValues); 844 | } 845 | 846 | function renderGanttChart(projectData) { 847 | if (!projectData || !Array.isArray(projectData.tasks)) { 848 | console.error("Invalid project data provided to renderGanttChart."); 849 | return; 850 | } 851 | 852 | // Ensure `projectData.milestones` is an array 853 | if (!Array.isArray(projectData.milestones)) { 854 | projectData.milestones = []; 855 | } 856 | 857 | const ganttChart = document.getElementById("ganttChart"); 858 | ganttChart.innerHTML = ""; 859 | 860 | if (projectData.tasks.length === 0 && projectData.milestones.length === 0) 861 | return; 862 | 863 | // Get selected categories from the Choices instance 864 | const selectedCategoryIds = categoryFilterChoices.getValue(true); // Returns array of selected values as strings 865 | 866 | // Check if 'uncategorized' is selected 867 | const showUncategorized = selectedCategoryIds.includes('uncategorized'); 868 | 869 | const taskStartDates = {}; 870 | projectData.tasks.forEach((task, index) => { 871 | computeTaskStartDate(index, taskStartDates, projectData); 872 | }); 873 | 874 | // Group tasks by categories (only include tasks from selected categories) 875 | const tasksByCategory = {}; 876 | projectData.tasks.forEach((task, index) => { 877 | // Use 'uncategorized' for tasks without a categoryId 878 | const categoryId = 879 | task.categoryId !== undefined && task.categoryId !== null 880 | ? task.categoryId.toString() 881 | : 'uncategorized'; 882 | 883 | // Check if the category is selected 884 | if ( 885 | (categoryId === 'uncategorized' && showUncategorized) || 886 | selectedCategoryIds.includes(categoryId) 887 | ) { 888 | if (!tasksByCategory[categoryId]) { 889 | tasksByCategory[categoryId] = []; 890 | } 891 | tasksByCategory[categoryId].push({ task, index }); 892 | } 893 | }); 894 | 895 | // Collect start and end dates of displayed tasks 896 | const startDates = []; 897 | const endDates = []; 898 | 899 | Object.values(tasksByCategory).forEach(taskArray => { 900 | taskArray.forEach(({ task, index }) => { 901 | const startDate = taskStartDates[index]; 902 | const endDate = new Date(startDate.getTime() + task.duration * 24 * 60 * 60 * 1000); 903 | startDates.push(startDate); 904 | endDates.push(endDate); 905 | }); 906 | }); 907 | 908 | // Collect milestone dates 909 | const milestoneDates = projectData.milestones.map( 910 | (milestone) => new Date(milestone.date + "T00:00:00Z") 911 | ); 912 | 913 | if (startDates.length === 0) { 914 | ganttChart.innerHTML = ''; // Clear the chart 915 | const noTasksMessage = document.createElement('div'); 916 | noTasksMessage.textContent = 'No tasks to display. Please select at least one category.'; 917 | noTasksMessage.style.padding = '20px'; 918 | ganttChart.appendChild(noTasksMessage); 919 | return; // Exit the function early 920 | } 921 | 922 | let startDate = new Date(Math.min(...startDates)); 923 | let endDate = new Date(Math.max(...endDates)); 924 | 925 | if (milestoneDates.length > 0) { 926 | const earliestMilestoneDate = new Date(Math.min(...milestoneDates)); 927 | const latestMilestoneDate = new Date(Math.max(...milestoneDates)); 928 | 929 | if (earliestMilestoneDate < startDate) { 930 | startDate = earliestMilestoneDate; 931 | } 932 | if (latestMilestoneDate > endDate) { 933 | endDate = latestMilestoneDate; 934 | } 935 | } 936 | 937 | projectStartDate = startDate; 938 | projectEndDate = endDate; 939 | 940 | const fragment = document.createDocumentFragment(); 941 | const TIME_SCALE_HEIGHT = 60; // The height of the time scale in pixels 942 | let currentTop = TIME_SCALE_HEIGHT; // Start rendering tasks below the time scale 943 | 944 | // Sort tasks within each category by starting date 945 | Object.keys(tasksByCategory).forEach((categoryId) => { 946 | tasksByCategory[categoryId].sort((a, b) => { 947 | const startDateA = taskStartDates[a.index]; 948 | const startDateB = taskStartDates[b.index]; 949 | return startDateA - startDateB; 950 | }); 951 | }); 952 | 953 | // Iterate over categories as per projectData.categories order 954 | for (const category of projectData.categories) { 955 | const categoryId = category.id; 956 | const categoryTasks = tasksByCategory[categoryId] || []; 957 | 958 | if (categoryTasks.length > 0) { 959 | // Render category heading 960 | const categoryElement = document.createElement("div"); 961 | categoryElement.classList.add("category-heading"); 962 | categoryElement.style.top = `${currentTop}px`; 963 | categoryElement.textContent = category.name; 964 | categoryElement.style.borderLeftColor = category.color; 965 | fragment.appendChild(categoryElement); 966 | currentTop += taskHeight + 10; 967 | 968 | // Render tasks within this category 969 | categoryTasks.forEach(({ task, index }) => { 970 | const taskElement = document.createElement("div"); 971 | taskElement.classList.add("task-bar"); 972 | 973 | // Use default values for missing properties 974 | const taskName = task.name || "Untitled Task"; 975 | const taskDuration = task.duration || 1; // Default duration of 1 day 976 | 977 | taskElement.style.width = `${taskDuration * pixelsPerDay}px`; 978 | taskElement.style.height = `${taskHeight}px`; 979 | 980 | // Ensure `taskStartDate` is valid 981 | let taskStartDate = taskStartDates[index]; 982 | if (!taskStartDate || isNaN(taskStartDate.getTime())) { 983 | // Set to current date if invalid 984 | const currentDateStr = new Date().toISOString().split("T")[0]; 985 | taskStartDate = new Date(currentDateStr + "T00:00:00Z"); 986 | } 987 | 988 | const daysFromStart = 989 | (taskStartDate - projectStartDate) / (1000 * 60 * 60 * 24); 990 | 991 | taskElement.style.left = `${daysFromStart * pixelsPerDay}px`; 992 | taskElement.style.top = `${currentTop}px`; 993 | 994 | // Set task color based on category 995 | taskElement.style.backgroundColor = category.color; 996 | 997 | const tooltipContent = ` 998 | Name: ${taskName} 999 | Start: ${taskStartDate.toISOString().split("T")[0]} 1000 | Duration: ${taskDuration} days 1001 | Dependencies: ${ 1002 | (task.dependencies || []) 1003 | .map((depIndex) => projectData.tasks[depIndex]?.name) 1004 | .join(", ") || "None" 1005 | } 1006 | `; 1007 | 1008 | taskElement.setAttribute("data-tooltip", tooltipContent); 1009 | 1010 | const taskEndDate = new Date( 1011 | taskStartDate.getTime() + taskDuration * 24 * 60 * 60 * 1000 1012 | ); 1013 | 1014 | let displayStatus = task.status || "on-track"; 1015 | const currentDate = new Date(); 1016 | 1017 | // If current date is past the task's end date and task is not scrapped or finished 1018 | if ( 1019 | currentDate > taskEndDate && 1020 | displayStatus !== "scrapped" && 1021 | displayStatus !== "finished" 1022 | ) { 1023 | displayStatus = "high risk"; 1024 | } 1025 | 1026 | let statusIndicatorHTML; 1027 | 1028 | if (displayStatus === "finished") { 1029 | statusIndicatorHTML = `

🎉

`; 1032 | } else { 1033 | statusIndicatorHTML = `

`; 1036 | } 1037 | 1038 | // Get the first assignee's name, if any 1039 | let firstAssigneeName = ""; 1040 | if ( 1041 | Array.isArray(task.assignedPeople) && 1042 | task.assignedPeople.length > 0 1043 | ) { 1044 | const firstPersonId = task.assignedPeople[0]; 1045 | const firstPerson = projectData.people.find( 1046 | (p) => p.id === firstPersonId 1047 | ); 1048 | if (firstPerson) { 1049 | firstAssigneeName = firstPerson.name; 1050 | } 1051 | } 1052 | 1053 | // Modify taskElement based on assignment 1054 | let assignmentDisplay = ""; 1055 | if (!firstAssigneeName) { 1056 | // Task is unassigned 1057 | taskElement.style.border = "2px solid red"; 1058 | assignmentDisplay = " ❓"; 1059 | } else { 1060 | // Task has an assignee, display the name 1061 | assignmentDisplay = `${firstAssigneeName}`; 1062 | } 1063 | 1064 | taskElement.innerHTML = ` 1065 |

1066 | ${statusIndicatorHTML} 1067 | ${taskName}${assignmentDisplay} 1068 |

1069 |

1070 |

1071 | 1072 | 1073 |

1074 |

1075 | `; 1076 | taskElement.setAttribute("role", "button"); 1077 | taskElement.setAttribute("tabindex", "0"); 1078 | taskElement.setAttribute("aria-label", `Task: ${task.name}`); 1079 | taskElement.setAttribute("data-index", index); 1080 | 1081 | taskElement.addEventListener("mousedown", (e) => { 1082 | e.stopPropagation(); 1083 | }); 1084 | 1085 | taskElement.addEventListener("touchstart", (e) => { 1086 | e.stopPropagation(); 1087 | }); 1088 | 1089 | fragment.appendChild(taskElement); 1090 | currentTop += taskHeight + taskSpacing; 1091 | 1092 | // Get the resize handles 1093 | const leftHandle = taskElement.querySelector( 1094 | ".task-resize-handle.left" 1095 | ); 1096 | const rightHandle = taskElement.querySelector( 1097 | ".task-resize-handle.right" 1098 | ); 1099 | 1100 | // Add event listeners for mousedown on the resize handles 1101 | leftHandle.addEventListener("mousedown", (e) => { 1102 | if (isShiftKeyDown) { 1103 | e.stopPropagation(); 1104 | startResizing(e, index, taskElement, "left"); 1105 | } 1106 | }); 1107 | 1108 | rightHandle.addEventListener("mousedown", (e) => { 1109 | if (isShiftKeyDown) { 1110 | e.stopPropagation(); 1111 | startResizing(e, index, taskElement, "right"); 1112 | } 1113 | }); 1114 | }); 1115 | } 1116 | } 1117 | 1118 | // Handle 'Uncategorized' tasks after defined categories 1119 | const uncategorizedTasks = tasksByCategory["uncategorized"] || []; 1120 | if (uncategorizedTasks.length > 0) { 1121 | // Render 'Uncategorized' category heading 1122 | const categoryElement = document.createElement("div"); 1123 | categoryElement.classList.add("category-heading"); 1124 | categoryElement.style.top = `${currentTop}px`; 1125 | categoryElement.textContent = "Uncategorized"; 1126 | categoryElement.style.borderLeftColor = "#999"; 1127 | fragment.appendChild(categoryElement); 1128 | currentTop += taskHeight + 10; 1129 | 1130 | // Render tasks within this category 1131 | uncategorizedTasks.forEach(({ task, index }) => { 1132 | // Existing code to render each task (same as in the loop above) 1133 | // ... (copy the task rendering code from above and paste it here) 1134 | }); 1135 | } 1136 | 1137 | ganttChart.appendChild(fragment); 1138 | 1139 | // Append the time scale first 1140 | const timeScale = renderTimeScale(projectStartDate, projectEndDate); 1141 | ganttChart.appendChild(timeScale); 1142 | 1143 | // Render milestones and append them to the timeScale 1144 | projectData.milestones.forEach((milestone) => { 1145 | const milestoneDate = new Date(milestone.date + "T00:00:00Z"); 1146 | const daysFromStart = 1147 | (milestoneDate - projectStartDate) / (1000 * 60 * 60 * 24); 1148 | 1149 | const milestoneElement = document.createElement("div"); 1150 | milestoneElement.classList.add("milestone"); 1151 | milestoneElement.style.left = `${daysFromStart * pixelsPerDay}px`; 1152 | milestoneElement.style.top = "30px"; // Position within time scale 1153 | 1154 | // Set milestone color based on category 1155 | let category; 1156 | if (milestone.categoryId !== null) { 1157 | category = projectData.categories.find( 1158 | (cat) => cat.id === milestone.categoryId 1159 | ); 1160 | } 1161 | milestoneElement.style.color = category ? category.color : "#000"; 1162 | 1163 | // Set milestone icon or emoji 1164 | const milestoneIcon = milestone.emoji || "🚩"; // Use custom emoji or default 1165 | milestoneElement.innerHTML = milestoneIcon; 1166 | 1167 | // Tooltip content 1168 | const tooltipContent = ` 1169 | Milestone: ${milestone.name} 1170 | Date: ${milestone.date} 1171 | `; 1172 | milestoneElement.setAttribute("data-tooltip", tooltipContent); 1173 | 1174 | // Optional: Adjust styling if needed 1175 | milestoneElement.style.fontSize = "24px"; // Ensure emoji is visible 1176 | 1177 | // Add event listener to show milestone details 1178 | milestoneElement.addEventListener("click", () => { 1179 | showMilestoneDetails(milestone.id); 1180 | }); 1181 | 1182 | timeScale.appendChild(milestoneElement); 1183 | }); 1184 | } 1185 | 1186 | document 1187 | .getElementById("ganttChart") 1188 | .addEventListener("click", async function (event) { 1189 | const editButton = event.target.closest(".edit-task"); 1190 | const deleteButton = event.target.closest(".delete-task"); 1191 | const taskBar = event.target.closest(".task-bar"); 1192 | 1193 | if (editButton) { 1194 | const taskIndex = parseInt(editButton.getAttribute("data-index"), 10); 1195 | editTask(taskIndex); 1196 | } else if (deleteButton) { 1197 | const taskIndex = parseInt(deleteButton.getAttribute("data-index"), 10); 1198 | await deleteTask(taskIndex); 1199 | } else if (taskBar) { 1200 | // Open the task details modal 1201 | const taskIndex = parseInt(taskBar.getAttribute("data-index"), 10); 1202 | showTaskDetails(taskIndex); 1203 | } 1204 | }); 1205 | 1206 | function showTaskDetails(taskIndex) { 1207 | currentTaskIndex = taskIndex; // Store the current task index 1208 | const task = projectData.tasks[taskIndex]; 1209 | document.getElementById("detailTaskName").textContent = 1210 | task.name || "Untitled Task"; 1211 | 1212 | // Handle missing description 1213 | const rawDescription = marked.parse(task.description || "No description."); 1214 | const sanitizedDescription = DOMPurify.sanitize(rawDescription); 1215 | document.getElementById("detailTaskDescription").innerHTML = 1216 | sanitizedDescription; 1217 | 1218 | document.getElementById("detailTaskStart").textContent = 1219 | task.start || "Unknown Start Date"; 1220 | document.getElementById("detailTaskDuration").textContent = 1221 | (task.duration || 1) + " days"; 1222 | document.getElementById("detailTaskDependencies").textContent = 1223 | (task.dependencies || []) 1224 | .map((depIndex) => projectData.tasks[depIndex]?.name) 1225 | .join(", ") || "None"; 1226 | 1227 | // Compute inbound dependencies (tasks that depend on this task) 1228 | const inboundDependencies = projectData.tasks 1229 | .map((otherTask, idx) => { 1230 | if ( 1231 | Array.isArray(otherTask.dependencies) && 1232 | otherTask.dependencies.includes(taskIndex) 1233 | ) { 1234 | return otherTask.name || "Untitled Task"; 1235 | } 1236 | return null; 1237 | }) 1238 | .filter((taskName) => taskName !== null); 1239 | 1240 | // Display inbound dependencies 1241 | document.getElementById("detailInboundDependencies").textContent = 1242 | inboundDependencies.join(", ") || "None"; 1243 | 1244 | // Handle missing status 1245 | document.getElementById("detailTaskStatus").textContent = 1246 | task.status || "on-track"; 1247 | 1248 | // Handle missing status explanation 1249 | const rawStatusExplanation = marked.parse( 1250 | task.statusExplanation || "No status explanation." 1251 | ); 1252 | const sanitizedStatusExplanation = DOMPurify.sanitize(rawStatusExplanation); 1253 | document.getElementById("detailStatusExplanation").innerHTML = 1254 | sanitizedStatusExplanation; 1255 | 1256 | // Display assigned people 1257 | document.getElementById("detailAssignedPeople").textContent = 1258 | (task.assignedPeople || []) 1259 | .map( 1260 | (personId) => projectData.people.find((p) => p.id === personId)?.name 1261 | ) 1262 | .join(", ") || "None"; 1263 | 1264 | // Show the modal 1265 | const taskDetailsModal = document.getElementById("taskDetailsModal"); 1266 | taskDetailsModal.style.display = "block"; 1267 | } 1268 | 1269 | // Add event listener to close the task details modal 1270 | const taskDetailsModal = document.getElementById("taskDetailsModal"); 1271 | const closeTaskDetailsModalButton = 1272 | taskDetailsModal.querySelector(".close-button"); 1273 | closeTaskDetailsModalButton.addEventListener("click", () => { 1274 | taskDetailsModal.style.display = "none"; 1275 | }); 1276 | 1277 | // Close the modal when clicking outside of it 1278 | window.addEventListener("click", (event) => { 1279 | if (event.target === taskDetailsModal) { 1280 | taskDetailsModal.style.display = "none"; 1281 | } 1282 | }); 1283 | 1284 | // Get references to the edit and delete buttons 1285 | const editTaskButton = document.getElementById("editTaskButton"); 1286 | const deleteTaskButton = document.getElementById("deleteTaskButton"); 1287 | 1288 | // Event listener for the Edit button 1289 | editTaskButton.addEventListener("click", () => { 1290 | if (currentTaskIndex !== null) { 1291 | editTask(currentTaskIndex); 1292 | taskDetailsModal.style.display = "none"; 1293 | } 1294 | }); 1295 | 1296 | // Event listener for the Delete button 1297 | deleteTaskButton.addEventListener("click", async () => { 1298 | if (currentTaskIndex !== null) { 1299 | await deleteTask(currentTaskIndex); 1300 | taskDetailsModal.style.display = "none"; 1301 | } 1302 | }); 1303 | 1304 | function editTask(taskIndex) { 1305 | const task = projectData.tasks[taskIndex]; 1306 | 1307 | // Ensure dependencies is an array 1308 | if (!Array.isArray(task.dependencies)) { 1309 | task.dependencies = []; 1310 | } 1311 | 1312 | updateDependenciesOptions(taskIndex); 1313 | updateCategoryOptions(); 1314 | updatePeopleOptions(); 1315 | 1316 | // Ensure defaults for missing properties 1317 | document.getElementById("taskName").value = task.name || ""; 1318 | document.getElementById("taskStart").value = 1319 | task.start || new Date().toISOString().split("T")[0]; 1320 | document.getElementById("taskDuration").value = task.duration || 1; 1321 | document.getElementById("taskDescription").value = task.description || ""; 1322 | document.getElementById("taskStatus").value = task.status || "on-track"; 1323 | document.getElementById("statusExplanation").value = 1324 | task.statusExplanation || ""; 1325 | 1326 | // Pre-select dependencies 1327 | choices.setChoiceByValue((task.dependencies || []).map(String)); 1328 | 1329 | // Pre-select assigned people 1330 | peopleChoices.setChoiceByValue((task.assignedPeople || []).map(String)); 1331 | 1332 | // Set the selected category 1333 | const categorySelect = document.getElementById("taskCategory"); 1334 | categorySelect.value = task.categoryId || ""; 1335 | 1336 | const submitButton = document.querySelector('#addTaskForm button[type="submit"]'); 1337 | submitButton.textContent = "Update Task"; 1338 | submitButton.setAttribute("data-edit-index", taskIndex); 1339 | 1340 | modalTitle.textContent = "Edit Task"; 1341 | taskModal.style.display = "block"; 1342 | } 1343 | 1344 | async function deleteTask(taskIndex) { 1345 | const taskName = projectData.tasks[taskIndex].name; 1346 | 1347 | // Check for inbound dependencies 1348 | const inboundDependencies = projectData.tasks.filter((task, idx) => { 1349 | return task.dependencies && task.dependencies.includes(taskIndex); 1350 | }); 1351 | 1352 | if (inboundDependencies.length > 0) { 1353 | const dependentTaskNames = inboundDependencies 1354 | .map((task) => `\n- ${task.name || "Untitled Task"}`) 1355 | .join(""); 1356 | alert( 1357 | `Cannot delete "${taskName}" because the following tasks depend on it:${dependentTaskNames}` 1358 | ); 1359 | return; 1360 | } 1361 | 1362 | const confirmDelete = confirm( 1363 | `Are you sure you want to delete the task "${taskName}"?` 1364 | ); 1365 | if (!confirmDelete) return; 1366 | 1367 | projectData.tasks.splice(taskIndex, 1); 1368 | 1369 | // Update dependencies of other tasks 1370 | projectData.tasks.forEach((task) => { 1371 | if (task.dependencies) { 1372 | task.dependencies = task.dependencies.map((depIndex) => 1373 | depIndex > taskIndex ? depIndex - 1 : depIndex 1374 | ); 1375 | } 1376 | }); 1377 | 1378 | renderGanttChart(projectData); 1379 | updateDependenciesOptions(); 1380 | 1381 | await saveProjectData(projectData, true); 1382 | } 1383 | 1384 | let choices; 1385 | let peopleChoices; 1386 | 1387 | document.addEventListener("DOMContentLoaded", () => { 1388 | // Assign DOM elements after the content has loaded 1389 | filePathDisplay = document.getElementById("filePathDisplay"); 1390 | lastEditedDisplay = document.getElementById("lastEditedDisplay"); 1391 | 1392 | // Initialize zoom controls visibility 1393 | const zoomControls = document.querySelector('.zoom-controls'); 1394 | const zoomToggleButton = document.getElementById('zoomToggleButton'); 1395 | const hideZoomControlsButton = document.createElement('button'); 1396 | 1397 | // Create a hide button inside the zoom controls 1398 | hideZoomControlsButton.id = 'hideZoomControlsButton'; 1399 | hideZoomControlsButton.classList.add('hide-zoom-controls-button'); 1400 | hideZoomControlsButton.innerHTML = ''; 1401 | hideZoomControlsButton.setAttribute('aria-label', 'Hide zoom controls'); 1402 | zoomControls.appendChild(hideZoomControlsButton); 1403 | 1404 | // Function to show the zoom controls 1405 | function showZoomControls() { 1406 | document.body.classList.add('zoom-controls-visible'); 1407 | document.body.classList.remove('zoom-controls-hidden'); 1408 | } 1409 | 1410 | // Function to hide the zoom controls 1411 | function hideZoomControls() { 1412 | document.body.classList.add('zoom-controls-hidden'); 1413 | document.body.classList.remove('zoom-controls-visible'); 1414 | } 1415 | 1416 | // Event listener to show zoom controls when the magnifying glass is clicked 1417 | zoomToggleButton.addEventListener('click', showZoomControls); 1418 | 1419 | // Event listener to hide zoom controls when the close button is clicked 1420 | hideZoomControlsButton.addEventListener('click', hideZoomControls); 1421 | 1422 | // Set initial state: Hide the zoom controls 1423 | hideZoomControls(); 1424 | 1425 | // Get reference to the fullscreen toggle button 1426 | const toggleFullscreenButton = document.getElementById('toggleFullscreen'); 1427 | const exitFullscreenButton = document.getElementById('exitFullscreenButton'); 1428 | 1429 | toggleFullscreenButton.addEventListener('click', () => { 1430 | // Toggle the 'fullscreen-mode' class on the body 1431 | document.body.classList.toggle('fullscreen-mode'); 1432 | 1433 | // Change the icon and text depending on the mode 1434 | if (document.body.classList.contains('fullscreen-mode')) { 1435 | toggleFullscreenButton.innerHTML = ' Exit Fullscreen'; 1436 | } else { 1437 | toggleFullscreenButton.innerHTML = ' Fullscreen'; 1438 | } 1439 | }); 1440 | 1441 | // Event listener for the exit fullscreen button 1442 | exitFullscreenButton.addEventListener('click', () => { 1443 | // Exit fullscreen mode by removing the class 1444 | document.body.classList.remove('fullscreen-mode'); 1445 | // Update the toggle fullscreen button text and icon 1446 | toggleFullscreenButton.innerHTML = ' Fullscreen'; 1447 | }); 1448 | 1449 | choices = new Choices("#taskDependencies", { 1450 | removeItemButton: true, 1451 | shouldSort: false, 1452 | searchResultLimit: 10, 1453 | placeholderValue: "Select dependencies...", 1454 | }); 1455 | 1456 | peopleChoices = new Choices("#taskPeople", { 1457 | removeItemButton: true, 1458 | shouldSort: false, 1459 | searchResultLimit: 10, 1460 | placeholderValue: "Assign people...", 1461 | }); 1462 | 1463 | categoryFilterChoices = new Choices("#categoryFilter", { 1464 | removeItemButton: true, 1465 | shouldSort: false, 1466 | placeholderValue: "Filter by category...", 1467 | searchResultLimit: 10, 1468 | }); 1469 | 1470 | // Add event listener to re-render the chart when the category selection changes 1471 | categoryFilterChoices.passedElement.element.addEventListener('change', () => { 1472 | renderGanttChart(projectData); 1473 | }); 1474 | 1475 | const ganttChart = document.getElementById("ganttChart"); 1476 | 1477 | // Mouse events 1478 | ganttChart.addEventListener("mousedown", (e) => { 1479 | if (isResizing || isShiftKeyDown) return; // Do not initiate panning if resizing or Shift is down 1480 | if (e.target !== ganttChart) return; // Only initiate panning when clicking on empty space 1481 | isPanning = true; 1482 | startX = e.pageX - ganttChart.offsetLeft; 1483 | startY = e.pageY - ganttChart.offsetTop; 1484 | scrollLeft = ganttChart.scrollLeft; 1485 | scrollTop = ganttChart.scrollTop; 1486 | ganttChart.classList.add("grabbing"); 1487 | }); 1488 | 1489 | ganttChart.addEventListener("mousemove", (e) => { 1490 | if (!isPanning) return; 1491 | e.preventDefault(); 1492 | const x = e.pageX - ganttChart.offsetLeft; 1493 | const y = e.pageY - ganttChart.offsetTop; 1494 | const walkX = x - startX; 1495 | const walkY = y - startY; 1496 | ganttChart.scrollLeft = scrollLeft - walkX; 1497 | ganttChart.scrollTop = scrollTop - walkY; 1498 | }); 1499 | 1500 | ganttChart.addEventListener("mouseup", () => { 1501 | isPanning = false; 1502 | ganttChart.classList.remove("grabbing"); 1503 | }); 1504 | 1505 | ganttChart.addEventListener("mouseleave", () => { 1506 | isPanning = false; 1507 | ganttChart.classList.remove("grabbing"); 1508 | }); 1509 | 1510 | ganttChart.addEventListener('scroll', handleScroll); 1511 | 1512 | // Touch events for mobile devices 1513 | ganttChart.addEventListener("touchstart", (e) => { 1514 | if (isResizing || isShiftKeyDown) return; // Do not initiate panning if resizing or Shift is down 1515 | if (e.target !== ganttChart) return; 1516 | isPanning = true; 1517 | startX = e.touches[0].pageX - ganttChart.offsetLeft; 1518 | startY = e.touches[0].pageY - ganttChart.offsetTop; 1519 | scrollLeft = ganttChart.scrollLeft; 1520 | scrollTop = ganttChart.scrollTop; 1521 | ganttChart.classList.add("grabbing"); 1522 | }); 1523 | 1524 | ganttChart.addEventListener("touchmove", (e) => { 1525 | if (!isPanning) return; 1526 | const x = e.touches[0].pageX - ganttChart.offsetLeft; 1527 | const y = e.touches[0].pageY - ganttChart.offsetTop; 1528 | const walkX = x - startX; 1529 | const walkY = y - startY; 1530 | ganttChart.scrollLeft = scrollLeft - walkX; 1531 | ganttChart.scrollTop = scrollTop - walkY; 1532 | }); 1533 | 1534 | ganttChart.addEventListener("touchend", () => { 1535 | isPanning = false; 1536 | ganttChart.classList.remove("grabbing"); 1537 | }); 1538 | 1539 | // Add event listeners for resizing 1540 | document.addEventListener("mousemove", (e) => { 1541 | if (isResizing) { 1542 | resizeTask(e); 1543 | } 1544 | }); 1545 | 1546 | document.addEventListener("mouseup", (e) => { 1547 | if (isResizing) { 1548 | stopResizing(e); 1549 | } 1550 | }); 1551 | 1552 | // Get references to the zoom controls 1553 | const horizontalZoomInput = document.getElementById("horizontalZoom"); 1554 | const verticalZoomInput = document.getElementById("verticalZoom"); 1555 | const horizontalZoomValue = document.getElementById("horizontalZoomValue"); 1556 | const verticalZoomValue = document.getElementById("verticalZoomValue"); 1557 | 1558 | // Update the values on page load 1559 | horizontalZoomValue.textContent = pixelsPerDay; 1560 | verticalZoomValue.textContent = taskHeight; 1561 | 1562 | // Debounce function 1563 | function debounce(func, wait) { 1564 | let timeout; 1565 | return function (...args) { 1566 | clearTimeout(timeout); 1567 | timeout = setTimeout(() => func.apply(this, args), wait); 1568 | }; 1569 | } 1570 | 1571 | // Event listener for horizontal zoom 1572 | horizontalZoomInput.addEventListener( 1573 | "input", 1574 | debounce(() => { 1575 | pixelsPerDay = parseInt(horizontalZoomInput.value, 10); 1576 | horizontalZoomValue.textContent = pixelsPerDay; 1577 | renderGanttChart(projectData); 1578 | }, 100) 1579 | ); 1580 | 1581 | // Event listener for vertical zoom 1582 | verticalZoomInput.addEventListener( 1583 | "input", 1584 | debounce(() => { 1585 | taskHeight = parseInt(verticalZoomInput.value, 10); 1586 | verticalZoomValue.textContent = taskHeight; 1587 | taskSpacing = Math.round(taskHeight / 6); 1588 | renderGanttChart(projectData); 1589 | }, 100) 1590 | ); 1591 | 1592 | // Tab functionality for categories modal 1593 | const tabButtons = categoriesModal.querySelectorAll(".tab-button"); 1594 | const tabContents = categoriesModal.querySelectorAll(".tab-content"); 1595 | 1596 | tabButtons.forEach((button) => { 1597 | button.addEventListener("click", () => { 1598 | const targetTab = button.getAttribute("data-tab"); 1599 | 1600 | // Deactivate all tabs and contents 1601 | tabButtons.forEach((btn) => btn.classList.remove("active")); 1602 | tabContents.forEach((content) => content.classList.remove("active")); 1603 | 1604 | // Activate selected tab and content 1605 | button.classList.add("active"); 1606 | categoriesModal.querySelector(`#${targetTab}Tab`).classList.add("active"); 1607 | }); 1608 | }); 1609 | 1610 | // Initialize Spectrum color picker 1611 | $("#categoryColor").spectrum({ 1612 | preferredFormat: "hex", 1613 | showInput: true, 1614 | showPalette: true, 1615 | palette: [ 1616 | ["#4CAF50", "#FF9800", "#2196F3", "#9C27B0", "#F44336", "#FFC107"], 1617 | ["#E91E63", "#00BCD4", "#8BC34A", "#CDDC39", "#FFC107", "#FF5722"], 1618 | ["#795548", "#9E9E9E", "#607D8B", "#000000", "#FFFFFF"], 1619 | ], 1620 | }); 1621 | 1622 | // Attach event listener to the addCategoryForm 1623 | document 1624 | .getElementById("addCategoryForm") 1625 | .addEventListener("submit", function (event) { 1626 | event.preventDefault(); 1627 | const categoryNameInput = document.getElementById("categoryName"); 1628 | const categoryName = categoryNameInput.value.trim(); 1629 | 1630 | if (!categoryName) { 1631 | // Display an error message or highlight the input 1632 | categoryNameInput.focus(); 1633 | return; 1634 | } 1635 | 1636 | const categoryColor = document.getElementById("categoryColor").value; 1637 | const editId = event.target.getAttribute("data-edit-id"); 1638 | 1639 | if (editId) { 1640 | // Update existing category 1641 | const category = projectData.categories.find( 1642 | (cat) => cat.id === parseInt(editId, 10) 1643 | ); 1644 | if (category) { 1645 | category.name = categoryName; 1646 | category.color = categoryColor; 1647 | } 1648 | // Reset form 1649 | event.target.removeAttribute("data-edit-id"); 1650 | document.querySelector( 1651 | '#addCategoryForm button[type="submit"]' 1652 | ).textContent = "Add Category"; 1653 | } else { 1654 | // Add new category 1655 | const category = { 1656 | id: Date.now(), 1657 | name: categoryName, 1658 | color: categoryColor, 1659 | }; 1660 | projectData.categories.push(category); 1661 | } 1662 | 1663 | // Update UI and save data 1664 | renderCategoriesList(); 1665 | updateCategoryOptions(); 1666 | updateCategoryFilterOptions(); // Refresh the category filter dropdown 1667 | renderGanttChart(projectData); 1668 | saveProjectData(projectData, true); 1669 | 1670 | // Reset the form 1671 | event.target.reset(); 1672 | }); 1673 | 1674 | // Attach event listener to the manage categories button 1675 | manageCategoriesButton.addEventListener("click", () => { 1676 | categoriesModal.style.display = "block"; 1677 | renderCategoriesList(); 1678 | }); 1679 | 1680 | // Attach event listener to the close button of the categories modal 1681 | closeCategoriesModalButton.addEventListener("click", () => { 1682 | categoriesModal.style.display = "none"; 1683 | document.getElementById("addCategoryForm").reset(); 1684 | }); 1685 | 1686 | // Now render the chart and update dependencies options 1687 | renderGanttChart(projectData); 1688 | updateDependenciesOptions(); 1689 | updateCategoryFilterOptions(); 1690 | }); 1691 | 1692 | function updateDependenciesOptions(excludeIndex = null) { 1693 | const choicesList = projectData.tasks 1694 | .map((task, index) => { 1695 | if (index !== excludeIndex) { 1696 | return { value: index.toString(), label: task.name }; 1697 | } 1698 | return null; 1699 | }) 1700 | .filter((item) => item !== null); 1701 | 1702 | choices.clearChoices(); 1703 | choices.setChoices(choicesList, "value", "label", false); 1704 | } 1705 | 1706 | async function saveProjectData(projectData, autosave = false) { 1707 | const statusMessage = document.getElementById("statusMessage"); 1708 | statusMessage.textContent = "Saving..."; 1709 | 1710 | if ("showSaveFilePicker" in window) { 1711 | if (!fileHandle) { 1712 | if (autosave) { 1713 | // Autosave to localStorage when fileHandle is not available 1714 | localStorage.setItem("projectData", JSON.stringify(projectData)); 1715 | statusMessage.textContent = "Autosaved to local storage."; 1716 | setTimeout(() => { 1717 | statusMessage.textContent = ""; 1718 | }, 5000); 1719 | return; 1720 | } else { 1721 | // Prompt the user to pick a file to save 1722 | try { 1723 | fileHandle = await window.showSaveFilePicker({ 1724 | suggestedName: "project.yaml", 1725 | types: [ 1726 | { 1727 | description: "YAML Files", 1728 | accept: { "text/yaml": [".yaml", ".yml"] }, 1729 | }, 1730 | ], 1731 | }); 1732 | } catch (err) { 1733 | console.error("Save cancelled:", err); 1734 | statusMessage.textContent = "Save cancelled."; 1735 | return; 1736 | } 1737 | } 1738 | } 1739 | 1740 | if (fileHandle) { 1741 | try { 1742 | const writable = await fileHandle.createWritable(); 1743 | await writable.write(jsyaml.dump(projectData)); 1744 | await writable.close(); 1745 | statusMessage.textContent = autosave 1746 | ? "Autosaved." 1747 | : "Project saved successfully."; 1748 | statusMessage.style.color = "green"; 1749 | 1750 | // Update status bar with current time 1751 | const now = new Date(); 1752 | updateStatusBar(now); 1753 | 1754 | // Save last edited time to localStorage 1755 | localStorage.setItem("lastEdited", now.toISOString()); 1756 | } catch (err) { 1757 | console.error("Error during save:", err); 1758 | statusMessage.textContent = "Error saving project."; 1759 | statusMessage.style.color = "red"; 1760 | } 1761 | } 1762 | 1763 | // Update localStorage with the latest project data 1764 | localStorage.setItem("projectData", JSON.stringify(projectData)); 1765 | if (fileHandle && fileHandle.name) { 1766 | localStorage.setItem("fileName", fileHandle.name); 1767 | } 1768 | } else { 1769 | // Fallback for browsers that do not support the File System Access API 1770 | const yamlData = jsyaml.dump(projectData); 1771 | const blob = new Blob([yamlData], { type: "text/yaml" }); 1772 | if (!autosave) { 1773 | const url = URL.createObjectURL(blob); 1774 | const link = document.createElement("a"); 1775 | link.href = url; 1776 | link.download = "project.yaml"; 1777 | link.click(); 1778 | URL.revokeObjectURL(url); 1779 | statusMessage.textContent = 1780 | "Project saved successfully (fallback method)."; 1781 | } else { 1782 | console.warn("Autosave skipped: unsupported in this browser."); 1783 | statusMessage.textContent = "Autosave not supported in this browser."; 1784 | } 1785 | } 1786 | 1787 | setTimeout(() => { 1788 | statusMessage.textContent = ""; 1789 | statusMessage.style.color = ""; 1790 | }, 5000); 1791 | } 1792 | 1793 | const taskModal = document.getElementById("taskModal"); 1794 | const openTaskModalButton = document.getElementById("openTaskModal"); 1795 | const closeModalButton = taskModal.querySelector(".close-button"); 1796 | const modalTitle = document.getElementById("modalTitle"); 1797 | 1798 | // Get references to the manage categories button and modal 1799 | const manageCategoriesButton = document.getElementById( 1800 | "manageCategoriesButton" 1801 | ); 1802 | const categoriesModal = document.getElementById("categoriesModal"); 1803 | const closeCategoriesModalButton = 1804 | categoriesModal.querySelector(".close-button"); 1805 | 1806 | // Get references to the manage people button and modal 1807 | const managePeopleButton = document.getElementById("managePeopleButton"); 1808 | const peopleModal = document.getElementById("peopleModal"); 1809 | const closePeopleModalButton = peopleModal.querySelector(".close-button"); 1810 | 1811 | // Get references to the milestone modal elements 1812 | const milestoneModal = document.getElementById("milestoneModal"); 1813 | const openMilestoneModalButton = document.getElementById("openMilestoneModal"); 1814 | const closeMilestoneModalButton = milestoneModal.querySelector(".close-button"); 1815 | const milestoneModalTitle = document.getElementById("milestoneModalTitle"); 1816 | 1817 | // Open the categories modal when the button is clicked 1818 | manageCategoriesButton.addEventListener("click", () => { 1819 | categoriesModal.style.display = "block"; 1820 | renderCategoriesList(); 1821 | }); 1822 | 1823 | // Close the modal when the close button is clicked 1824 | closeCategoriesModalButton.addEventListener("click", () => { 1825 | categoriesModal.style.display = "none"; 1826 | document.getElementById("addCategoryForm").reset(); 1827 | }); 1828 | 1829 | // Close the modal when clicking outside of it 1830 | window.addEventListener("click", (event) => { 1831 | if (event.target === categoriesModal) { 1832 | categoriesModal.style.display = "none"; 1833 | document.getElementById("addCategoryForm").reset(); 1834 | } 1835 | }); 1836 | 1837 | // Open the people modal when the button is clicked 1838 | managePeopleButton.addEventListener("click", () => { 1839 | peopleModal.style.display = "block"; 1840 | renderPeopleList(); 1841 | }); 1842 | 1843 | // Close the people modal when the close button is clicked 1844 | closePeopleModalButton.addEventListener("click", () => { 1845 | peopleModal.style.display = "none"; 1846 | document.getElementById("addPersonForm").reset(); 1847 | }); 1848 | 1849 | // Close the people modal when clicking outside of it 1850 | window.addEventListener("click", (event) => { 1851 | if (event.target === peopleModal) { 1852 | peopleModal.style.display = "none"; 1853 | document.getElementById("addPersonForm").reset(); 1854 | } 1855 | }); 1856 | 1857 | // Open the milestone modal when the button is clicked 1858 | openMilestoneModalButton.addEventListener("click", () => { 1859 | milestoneModalTitle.textContent = "Add Milestone"; 1860 | updateMilestoneCategoryOptions(); 1861 | // Set default emoji 1862 | const defaultEmoji = "🚩"; 1863 | document.getElementById("milestoneEmoji").value = defaultEmoji; 1864 | populateEmojiGrid(defaultEmoji); 1865 | 1866 | // Reset submit button text to 'Add Milestone' 1867 | document.querySelector('#addMilestoneForm button[type="submit"]').textContent = 'Add Milestone'; 1868 | // Ensure data-edit-id attribute is removed 1869 | document.getElementById('addMilestoneForm').removeAttribute('data-edit-id'); 1870 | 1871 | milestoneModal.style.display = "block"; 1872 | }); 1873 | 1874 | // Close the milestone modal when the close button is clicked 1875 | closeMilestoneModalButton.addEventListener("click", () => { 1876 | milestoneModal.style.display = "none"; 1877 | document.getElementById("addMilestoneForm").reset(); 1878 | document.getElementById("milestoneFormErrorMessage").textContent = ""; 1879 | }); 1880 | 1881 | // Close the milestone modal when clicking outside of it 1882 | window.addEventListener("click", (event) => { 1883 | if (event.target === milestoneModal) { 1884 | milestoneModal.style.display = "none"; 1885 | document.getElementById("addMilestoneForm").reset(); 1886 | document.getElementById("milestoneFormErrorMessage").textContent = ""; 1887 | } 1888 | }); 1889 | 1890 | // Tab functionality for people modal 1891 | const peopleTabButtons = peopleModal.querySelectorAll(".tab-button"); 1892 | const peopleTabContents = peopleModal.querySelectorAll(".tab-content"); 1893 | 1894 | peopleTabButtons.forEach((button) => { 1895 | button.addEventListener("click", () => { 1896 | const targetTab = button.getAttribute("data-tab"); 1897 | 1898 | // Deactivate all tabs and contents 1899 | peopleTabButtons.forEach((btn) => btn.classList.remove("active")); 1900 | peopleTabContents.forEach((content) => content.classList.remove("active")); 1901 | 1902 | // Activate selected tab and content 1903 | button.classList.add("active"); 1904 | peopleModal.querySelector(`#${targetTab}Tab`).classList.add("active"); 1905 | }); 1906 | }); 1907 | 1908 | // This event listener is now moved inside the DOMContentLoaded event 1909 | 1910 | function renderCategoriesList() { 1911 | const categoriesList = document.getElementById("categoriesList"); 1912 | categoriesList.innerHTML = ""; 1913 | 1914 | projectData.categories.forEach((category) => { 1915 | const categoryItem = document.createElement("li"); 1916 | categoryItem.classList.add("category-item"); 1917 | categoryItem.setAttribute("data-category-id", category.id); 1918 | 1919 | const colorIndicator = document.createElement("div"); 1920 | colorIndicator.classList.add("color-indicator"); 1921 | colorIndicator.style.backgroundColor = category.color; 1922 | 1923 | const categoryName = document.createElement("span"); 1924 | categoryName.textContent = category.name || "Unnamed Category"; 1925 | 1926 | const editButton = document.createElement("button"); 1927 | editButton.innerHTML = ''; 1928 | editButton.addEventListener("click", () => { 1929 | editCategory(category.id); 1930 | }); 1931 | 1932 | const deleteButton = document.createElement("button"); 1933 | deleteButton.innerHTML = ''; 1934 | deleteButton.addEventListener("click", () => { 1935 | deleteCategory(category.id); 1936 | }); 1937 | 1938 | categoryItem.appendChild(colorIndicator); 1939 | categoryItem.appendChild(categoryName); 1940 | categoryItem.appendChild(editButton); 1941 | categoryItem.appendChild(deleteButton); 1942 | 1943 | categoriesList.appendChild(categoryItem); 1944 | }); 1945 | 1946 | // Destroy existing Sortable instance if it exists 1947 | if (window.categorySortableInstance) { 1948 | window.categorySortableInstance.destroy(); 1949 | } 1950 | 1951 | // Initialize a new Sortable instance 1952 | window.categorySortableInstance = new Sortable(categoriesList, { 1953 | animation: 150, 1954 | onEnd: () => { 1955 | // Get the new order of category IDs 1956 | const newOrder = Array.from( 1957 | document.querySelectorAll("#categoriesList .category-item") 1958 | ).map((item) => parseInt(item.getAttribute("data-category-id"), 10)); 1959 | 1960 | // Reorder projectData.categories based on the new order 1961 | projectData.categories.sort((a, b) => { 1962 | return newOrder.indexOf(a.id) - newOrder.indexOf(b.id); 1963 | }); 1964 | 1965 | // Save the updated projectData 1966 | saveProjectData(projectData, true); 1967 | 1968 | // Re-render the Gantt chart to reflect the new category order 1969 | renderGanttChart(projectData); 1970 | }, 1971 | }); 1972 | } 1973 | 1974 | function editCategory(categoryId) { 1975 | const category = projectData.categories.find((cat) => cat.id === categoryId); 1976 | if (!category) return; 1977 | 1978 | // Switch to the "Add Category" tab 1979 | categoriesModal.querySelector('.tab-button[data-tab="add"]').click(); 1980 | 1981 | // Populate the form with existing category data 1982 | document.getElementById("categoryName").value = category.name; 1983 | $("#categoryColor").spectrum("set", category.color); 1984 | 1985 | // Store the category ID in the form for editing 1986 | document 1987 | .getElementById("addCategoryForm") 1988 | .setAttribute("data-edit-id", categoryId); 1989 | document.querySelector('#addCategoryForm button[type="submit"]').textContent = 1990 | "Update Category"; 1991 | } 1992 | 1993 | function deleteCategory(categoryId) { 1994 | const confirmDelete = confirm( 1995 | "Are you sure you want to delete this category?" 1996 | ); 1997 | if (!confirmDelete) return; 1998 | 1999 | // Remove category from projectData 2000 | projectData.categories = projectData.categories.filter( 2001 | (cat) => cat.id !== categoryId 2002 | ); 2003 | 2004 | // Remove categoryId from tasks that used this category 2005 | projectData.tasks.forEach((task) => { 2006 | if (task.categoryId === categoryId) { 2007 | delete task.categoryId; 2008 | } 2009 | }); 2010 | 2011 | renderCategoriesList(); 2012 | updateCategoryOptions(); 2013 | updateCategoryFilterOptions(); // Refresh the category filter dropdown 2014 | renderGanttChart(projectData); 2015 | saveProjectData(projectData, true); 2016 | } 2017 | 2018 | function updateCategoryOptions() { 2019 | const categorySelect = document.getElementById("taskCategory"); 2020 | categorySelect.innerHTML = ""; 2021 | 2022 | // Add an option for 'Uncategorized' 2023 | const defaultOption = document.createElement("option"); 2024 | defaultOption.value = ""; 2025 | defaultOption.textContent = "Uncategorized"; 2026 | categorySelect.appendChild(defaultOption); 2027 | 2028 | projectData.categories.forEach((category) => { 2029 | const option = document.createElement("option"); 2030 | option.value = category.id; 2031 | option.textContent = category.name; 2032 | categorySelect.appendChild(option); 2033 | }); 2034 | updateCategoryFilterOptions(); 2035 | } 2036 | 2037 | openTaskModalButton.addEventListener("click", () => { 2038 | modalTitle.textContent = "Add Task"; 2039 | // Reset submit button text to 'Add Task' 2040 | document.querySelector('#addTaskForm button[type="submit"]').textContent = 'Add Task'; 2041 | // Ensure data-edit-index attribute is removed 2042 | document.querySelector('#addTaskForm button[type="submit"]').removeAttribute('data-edit-index'); 2043 | // Include all tasks as potential dependencies 2044 | updateDependenciesOptions(); 2045 | updateCategoryOptions(); 2046 | taskModal.style.display = "block"; 2047 | }); 2048 | 2049 | closeModalButton.addEventListener("click", () => { 2050 | taskModal.style.display = "none"; 2051 | document.getElementById("addTaskForm").reset(); 2052 | document.getElementById("formErrorMessage").textContent = ""; 2053 | choices.removeActiveItems(); 2054 | }); 2055 | 2056 | window.addEventListener("click", (event) => { 2057 | if (event.target === taskModal) { 2058 | taskModal.style.display = "none"; 2059 | document.getElementById("addTaskForm").reset(); 2060 | } 2061 | }); 2062 | 2063 | document.addEventListener("DOMContentLoaded", () => { 2064 | flatpickr("#taskStart", { 2065 | dateFormat: "Y-m-d", 2066 | }); 2067 | 2068 | flatpickr("#milestoneDate", { 2069 | dateFormat: "Y-m-d", 2070 | }); 2071 | 2072 | // Initial loading of project data from local storage 2073 | const savedProjectData = localStorage.getItem("projectData"); 2074 | if (savedProjectData) { 2075 | projectData = JSON.parse(savedProjectData); 2076 | 2077 | // Initialize `categories` if it's undefined 2078 | if (!Array.isArray(projectData.categories)) { 2079 | projectData.categories = []; 2080 | } 2081 | 2082 | // Initialize `people` if it's undefined 2083 | if (!Array.isArray(projectData.people)) { 2084 | projectData.people = []; 2085 | } 2086 | if (!Array.isArray(projectData.milestones)) { 2087 | projectData.milestones = []; 2088 | } 2089 | 2090 | updateProjectNameDisplay(); 2091 | updateCategoryOptions(); 2092 | renderCategoriesList(); 2093 | updateCategoryFilterOptions(); 2094 | 2095 | const savedFileName = localStorage.getItem("fileName") || "Last Project"; 2096 | 2097 | // Inform user that autosave to file is not enabled 2098 | const statusMessage = document.getElementById("statusMessage"); 2099 | statusMessage.innerHTML = 2100 | 'Autosave to file is not enabled. Please save your project to enable autosave to file.'; 2101 | statusMessage.style.color = "red"; 2102 | 2103 | // Add event listener to the link 2104 | document 2105 | .getElementById("saveNowLink") 2106 | .addEventListener("click", function (event) { 2107 | event.preventDefault(); 2108 | document.getElementById("saveProject").click(); 2109 | }); 2110 | } else { 2111 | // No saved project data; use default empty projectData 2112 | projectData = { 2113 | projectName: "Untitled Project", 2114 | tasks: [], 2115 | categories: [], 2116 | people: [], 2117 | milestones: [], 2118 | }; 2119 | updateProjectNameDisplay(); 2120 | updateCategoryOptions(); 2121 | renderCategoriesList(); 2122 | } 2123 | 2124 | // Now render the chart and update dependencies 2125 | renderGanttChart(projectData); 2126 | updateDependenciesOptions(); 2127 | 2128 | // Initialize status bar 2129 | const savedLastEdited = localStorage.getItem("lastEdited"); 2130 | if (fileHandle && fileHandle.name) { 2131 | const lastEdited = savedLastEdited ? new Date(savedLastEdited) : null; 2132 | updateStatusBar(lastEdited); 2133 | } else { 2134 | updateStatusBar(); 2135 | } 2136 | }); 2137 | 2138 | // Ensure updateStatusBar is accessible outside DOMContentLoaded if needed 2139 | window.updateStatusBar = updateStatusBar; 2140 | function getStatusClass(status) { 2141 | switch (status) { 2142 | case "on-track": 2143 | return "status-on-track"; 2144 | case "some risk": 2145 | return "status-some-risk"; 2146 | case "high risk": 2147 | return "status-high-risk"; 2148 | case "scrapped": 2149 | return "status-scrapped"; 2150 | case "finished": 2151 | return "status-finished"; 2152 | default: 2153 | return ""; 2154 | } 2155 | } 2156 | function renderPeopleList() { 2157 | const peopleList = document.getElementById("peopleList"); 2158 | peopleList.innerHTML = ""; 2159 | 2160 | projectData.people.forEach((person) => { 2161 | const personItem = document.createElement("div"); 2162 | personItem.classList.add("person-item"); 2163 | 2164 | const personName = document.createElement("span"); 2165 | personName.textContent = person.name || "Unnamed Person"; 2166 | 2167 | const editButton = document.createElement("button"); 2168 | editButton.innerHTML = ''; 2169 | editButton.addEventListener("click", () => { 2170 | editPerson(person.id); 2171 | }); 2172 | 2173 | const deleteButton = document.createElement("button"); 2174 | deleteButton.innerHTML = ''; 2175 | deleteButton.addEventListener("click", () => { 2176 | deletePerson(person.id); 2177 | }); 2178 | 2179 | personItem.appendChild(personName); 2180 | personItem.appendChild(editButton); 2181 | personItem.appendChild(deleteButton); 2182 | 2183 | peopleList.appendChild(personItem); 2184 | }); 2185 | } 2186 | 2187 | function editPerson(personId) { 2188 | const person = projectData.people.find((p) => p.id === personId); 2189 | if (!person) return; 2190 | 2191 | // Switch to the "Add Person" tab 2192 | peopleModal.querySelector('.tab-button[data-tab="add-person"]').click(); 2193 | 2194 | // Populate the form with existing person data 2195 | document.getElementById("personName").value = person.name; 2196 | 2197 | // Store the person ID in the form for editing 2198 | document 2199 | .getElementById("addPersonForm") 2200 | .setAttribute("data-edit-id", personId); 2201 | document.querySelector('#addPersonForm button[type="submit"]').textContent = 2202 | "Update Person"; 2203 | } 2204 | 2205 | function deletePerson(personId) { 2206 | // Check if the person is assigned to any tasks 2207 | const assignedTasks = projectData.tasks.filter((task) => { 2208 | return ( 2209 | Array.isArray(task.assignedPeople) && 2210 | task.assignedPeople.includes(personId) 2211 | ); 2212 | }); 2213 | 2214 | if (assignedTasks.length > 0) { 2215 | // List assigned tasks 2216 | const taskNames = assignedTasks 2217 | .map((task) => `\n- ${task.name || "Untitled Task"}`) 2218 | .join(""); 2219 | const confirmDelete = confirm( 2220 | `This person is assigned to the following tasks:${taskNames}\n\n` + 2221 | "Are you sure you want to delete this person? Their assignments will be removed from these tasks." 2222 | ); 2223 | if (!confirmDelete) return; 2224 | } else { 2225 | const confirmDelete = confirm( 2226 | "Are you sure you want to delete this person?" 2227 | ); 2228 | if (!confirmDelete) return; 2229 | } 2230 | 2231 | // Remove person from projectData 2232 | projectData.people = projectData.people.filter((p) => p.id !== personId); 2233 | 2234 | // Remove personId from tasks that have this person assigned 2235 | projectData.tasks.forEach((task) => { 2236 | if (Array.isArray(task.assignedPeople)) { 2237 | task.assignedPeople = task.assignedPeople.filter((id) => id !== personId); 2238 | } 2239 | }); 2240 | 2241 | // Update the Gantt chart to reflect the removal 2242 | renderGanttChart(projectData); 2243 | 2244 | renderPeopleList(); 2245 | updatePeopleOptions(); 2246 | saveProjectData(projectData, true); 2247 | } 2248 | 2249 | function updatePeopleOptions() { 2250 | const peopleChoicesList = projectData.people.map((person) => ({ 2251 | value: person.id.toString(), 2252 | label: person.name, 2253 | })); 2254 | 2255 | peopleChoices.clearChoices(); 2256 | peopleChoices.setChoices(peopleChoicesList, "value", "label", false); 2257 | } 2258 | 2259 | document 2260 | .getElementById("addPersonForm") 2261 | .addEventListener("submit", function (event) { 2262 | event.preventDefault(); 2263 | const personNameInput = document.getElementById("personName"); 2264 | const personName = personNameInput.value.trim(); 2265 | 2266 | if (!personName) { 2267 | personNameInput.focus(); 2268 | return; 2269 | } 2270 | 2271 | const editId = event.target.getAttribute("data-edit-id"); 2272 | 2273 | if (editId) { 2274 | // Update existing person 2275 | const person = projectData.people.find( 2276 | (p) => p.id === parseInt(editId, 10) 2277 | ); 2278 | if (person) { 2279 | person.name = personName; 2280 | } 2281 | // Reset form 2282 | event.target.removeAttribute("data-edit-id"); 2283 | document.querySelector( 2284 | '#addPersonForm button[type="submit"]' 2285 | ).textContent = "Add Person"; 2286 | } else { 2287 | // Add new person 2288 | const person = { 2289 | id: Date.now(), 2290 | name: personName, 2291 | }; 2292 | projectData.people.push(person); 2293 | } 2294 | 2295 | // Update UI and save data 2296 | renderPeopleList(); 2297 | updatePeopleOptions(); 2298 | saveProjectData(projectData, true); 2299 | 2300 | // Reset the form 2301 | event.target.reset(); 2302 | }); 2303 | document 2304 | .getElementById("addMilestoneForm") 2305 | .addEventListener("submit", async function (event) { 2306 | event.preventDefault(); 2307 | const formErrorMessage = document.getElementById( 2308 | "milestoneFormErrorMessage" 2309 | ); 2310 | 2311 | const milestoneName = document.getElementById("milestoneName").value.trim(); 2312 | const milestoneDate = document.getElementById("milestoneDate").value; 2313 | const milestoneCategoryId = 2314 | parseInt(document.getElementById("milestoneCategory").value, 10) || null; 2315 | const milestoneDescription = document 2316 | .getElementById("milestoneDescription") 2317 | .value.trim(); 2318 | const milestoneEmoji = 2319 | document.getElementById("milestoneEmoji").value.trim() || "🚩"; // Use default if not provided 2320 | 2321 | // Basic validation 2322 | if (!milestoneName || !milestoneDate) { 2323 | formErrorMessage.textContent = "Please fill in all required fields."; 2324 | return; 2325 | } 2326 | 2327 | // Clear error message 2328 | formErrorMessage.textContent = ""; 2329 | 2330 | const editId = event.target.getAttribute("data-edit-id"); 2331 | 2332 | if (editId) { 2333 | // Update existing milestone 2334 | const milestone = projectData.milestones.find( 2335 | (m) => m.id === parseInt(editId, 10) 2336 | ); 2337 | if (milestone) { 2338 | milestone.name = milestoneName; 2339 | milestone.date = milestoneDate; 2340 | milestone.categoryId = milestoneCategoryId; 2341 | milestone.description = milestoneDescription; 2342 | milestone.emoji = milestoneEmoji; 2343 | } 2344 | // Reset form state 2345 | event.target.removeAttribute("data-edit-id"); 2346 | milestoneModalTitle.textContent = "Add Milestone"; 2347 | // Reset submit button text to 'Add Milestone' 2348 | document.querySelector('#addMilestoneForm button[type="submit"]').textContent = 'Add Milestone'; 2349 | } else { 2350 | // Add new milestone 2351 | const milestone = { 2352 | id: Date.now(), 2353 | name: milestoneName, 2354 | date: milestoneDate, 2355 | categoryId: milestoneCategoryId, 2356 | description: milestoneDescription, 2357 | emoji: milestoneEmoji, 2358 | }; 2359 | projectData.milestones.push(milestone); 2360 | } 2361 | 2362 | // Update the chart 2363 | renderGanttChart(projectData); 2364 | await saveProjectData(projectData, true); 2365 | 2366 | // Reset form and close modal 2367 | event.target.reset(); 2368 | milestoneModal.style.display = "none"; 2369 | }); 2370 | 2371 | function showMilestoneDetails(milestoneId) { 2372 | currentMilestoneId = milestoneId; // Store the current milestone ID 2373 | const milestone = projectData.milestones.find((m) => m.id === milestoneId); 2374 | if (!milestone) return; 2375 | 2376 | document.getElementById("detailMilestoneName").textContent = 2377 | milestone.name || "Unnamed Milestone"; 2378 | 2379 | // Handle missing description 2380 | const rawDescription = marked.parse( 2381 | milestone.description || "No description." 2382 | ); 2383 | const sanitizedDescription = DOMPurify.sanitize(rawDescription); 2384 | document.getElementById("detailMilestoneDescription").innerHTML = 2385 | sanitizedDescription; 2386 | 2387 | document.getElementById("detailMilestoneDate").textContent = 2388 | milestone.date || "Unknown Date"; 2389 | 2390 | // Get category name 2391 | let categoryName = "Uncategorized"; 2392 | if (milestone.categoryId !== null) { 2393 | const category = projectData.categories.find( 2394 | (cat) => cat.id === milestone.categoryId 2395 | ); 2396 | if (category) { 2397 | categoryName = category.name; 2398 | } 2399 | } 2400 | document.getElementById("detailMilestoneCategory").textContent = categoryName; 2401 | 2402 | // Display the emoji 2403 | document.getElementById("detailMilestoneEmoji").textContent = 2404 | milestone.emoji || ""; 2405 | 2406 | // Show the modal 2407 | const milestoneDetailsModal = document.getElementById( 2408 | "milestoneDetailsModal" 2409 | ); 2410 | milestoneDetailsModal.style.display = "block"; 2411 | } 2412 | 2413 | // Add event listener to close the milestone details modal 2414 | const milestoneDetailsModal = document.getElementById("milestoneDetailsModal"); 2415 | const closeMilestoneDetailsModalButton = 2416 | milestoneDetailsModal.querySelector(".close-button"); 2417 | closeMilestoneDetailsModalButton.addEventListener("click", () => { 2418 | milestoneDetailsModal.style.display = "none"; 2419 | }); 2420 | 2421 | // Get references to the settings modal elements 2422 | const settingsModal = document.getElementById("settingsModal"); 2423 | const openSettingsModalButton = document.getElementById("openSettingsModal"); 2424 | const closeSettingsModalButton = settingsModal.querySelector(".close-button"); 2425 | 2426 | // Open the settings modal when the button is clicked 2427 | openSettingsModalButton.addEventListener("click", () => { 2428 | // Set the current value in the select input 2429 | document.getElementById("timeScaleUnit").value = timeScaleUnit; 2430 | settingsModal.style.display = "block"; 2431 | }); 2432 | 2433 | // Close the settings modal when the close button is clicked 2434 | closeSettingsModalButton.addEventListener("click", () => { 2435 | settingsModal.style.display = "none"; 2436 | }); 2437 | 2438 | // Close the settings modal when clicking outside of it 2439 | window.addEventListener("click", (event) => { 2440 | if (event.target === settingsModal) { 2441 | settingsModal.style.display = "none"; 2442 | } 2443 | }); 2444 | 2445 | document.getElementById("settingsForm").addEventListener("submit", (event) => { 2446 | event.preventDefault(); 2447 | const selectedUnit = document.getElementById("timeScaleUnit").value; 2448 | timeScaleUnit = selectedUnit; 2449 | // Close the modal 2450 | settingsModal.style.display = "none"; 2451 | // Re-render the chart with the new time scale unit 2452 | renderGanttChart(projectData); 2453 | }); 2454 | 2455 | // Close the modal when clicking outside of it 2456 | window.addEventListener("click", (event) => { 2457 | if (event.target === milestoneDetailsModal) { 2458 | milestoneDetailsModal.style.display = "none"; 2459 | } 2460 | }); 2461 | 2462 | // Get references to the edit and delete buttons 2463 | const editMilestoneButton = document.getElementById("editMilestoneButton"); 2464 | const deleteMilestoneButton = document.getElementById("deleteMilestoneButton"); 2465 | 2466 | // Event listener for the Edit button 2467 | editMilestoneButton.addEventListener("click", () => { 2468 | if (currentMilestoneId !== null) { 2469 | editMilestone(currentMilestoneId); 2470 | milestoneDetailsModal.style.display = "none"; 2471 | } 2472 | }); 2473 | 2474 | // Event listener for the Delete button 2475 | deleteMilestoneButton.addEventListener("click", async () => { 2476 | if (currentMilestoneId !== null) { 2477 | await deleteMilestone(currentMilestoneId); 2478 | milestoneDetailsModal.style.display = "none"; 2479 | } 2480 | }); 2481 | 2482 | function editMilestone(milestoneId) { 2483 | const milestone = projectData.milestones.find((m) => m.id === milestoneId); 2484 | if (!milestone) return; 2485 | 2486 | // Switch modal title to 'Edit Milestone' 2487 | milestoneModalTitle.textContent = "Edit Milestone"; 2488 | 2489 | // Populate the form with existing milestone data 2490 | document.getElementById("milestoneName").value = milestone.name; 2491 | document.getElementById("milestoneDate").value = milestone.date; 2492 | document.getElementById("milestoneDescription").value = 2493 | milestone.description || ""; 2494 | 2495 | // Set the selected category 2496 | document.getElementById("milestoneCategory").value = 2497 | milestone.categoryId || ""; 2498 | 2499 | // Set a data attribute to indicate edit mode 2500 | document 2501 | .getElementById("addMilestoneForm") 2502 | .setAttribute("data-edit-id", milestoneId); 2503 | 2504 | // Set the selected emoji 2505 | const selectedEmoji = milestone.emoji || "🚩"; // Use default if not set 2506 | document.getElementById("milestoneEmoji").value = selectedEmoji; 2507 | populateEmojiGrid(selectedEmoji); 2508 | 2509 | // Update submit button text to 'Update Milestone' 2510 | document.querySelector('#addMilestoneForm button[type="submit"]').textContent = 'Update Milestone'; 2511 | 2512 | // Open the milestone modal 2513 | milestoneModal.style.display = "block"; 2514 | } 2515 | 2516 | async function deleteMilestone(milestoneId) { 2517 | const confirmDelete = confirm( 2518 | "Are you sure you want to delete this milestone?" 2519 | ); 2520 | if (!confirmDelete) return; 2521 | 2522 | // Remove milestone from projectData 2523 | projectData.milestones = projectData.milestones.filter( 2524 | (m) => m.id !== milestoneId 2525 | ); 2526 | 2527 | // Update the Gantt chart 2528 | renderGanttChart(projectData); 2529 | 2530 | await saveProjectData(projectData, true); 2531 | } 2532 | 2533 | function updateMilestoneCategoryOptions() { 2534 | const categorySelect = document.getElementById("milestoneCategory"); 2535 | categorySelect.innerHTML = ""; 2536 | 2537 | // Add an option for no category 2538 | const defaultOption = document.createElement("option"); 2539 | defaultOption.value = ""; 2540 | defaultOption.textContent = "Uncategorized"; 2541 | categorySelect.appendChild(defaultOption); 2542 | 2543 | projectData.categories.forEach((category) => { 2544 | const option = document.createElement("option"); 2545 | option.value = category.id; 2546 | option.textContent = category.name; 2547 | categorySelect.appendChild(option); 2548 | }); 2549 | } 2550 | --------------------------------------------------------------------------------

Add Task

Manage Categories

Task Details

Task Name

Manage People

Add Milestone

Milestone Details

Milestone Name

Settings